0songha0

Javascript 기초 문법 정리

javascript 기초 문법

자료형 확인

typeof 변수명또는값
또는
typeof(변수명또는값)

Javascript 객체 또는 값의 자료형을 확인할 수 있는 단항 연산자입니다.

변수 값 비교

// 변수 값 자동 형변환 후 비교
// 타입이 달라도 값이 같으면 true
if (변수명1 == 변수명2)

// 변수 값 자동 형변환 없이 비교
// 타입, 값이 모두 같아야 true
if (변수명1 === 변수명2)

Javascript ==, === 연산자는 프리미티브 타입 비교 시에만 사용하는 것이 좋습니다.
배열 및 객체 타입 비교 시에는 값이 아니라 참조 주소를 비교하므로, 값이 같아도 다른 객체를 비교하면 false가 됩니다.

javascript 반복문

for 반복문

for (let i = 0; i < list.length; i++) {
    const obj = list[i];
}

인덱스 값을 사용하여 배열의 요소 값을 얻을 수 있습니다.

for…in 반복문

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key); // "a", "b", "c"
  console.log(obj[key]); // 1, 2, 3
}

순서가 보장되지 않으며, 키 문자열로 반복하여 객체의 속성을 열거할 때 주로 사용합니다.

for…of 반복문

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); // 1, 2, 3
}

순서가 보장되며, 반복 가능한 객체의 값을 직접 처리할 때 사용합니다.
for 반복문이나 forEach 메서드와 달리, 인덱스 값을 얻을 수 없다는 단점이 있습니다.

javascript 날짜 계산

년, 월의 마지막 일자 계산

function getLastDay(year, month) {
  // 다음 달의 이전 날로 설정 (month는 0부터 시작)
  let date = new Date(year, month, 0);

  // 마지막 일자 반환
  return date.getDate();
}

2024~2025년 달력 기준으로 테스트 완료하였습니다.

Javascript 구조분해 할당

구조분해 할당 시 별칭 설정

const { data: posts } = 함수명();

함수에서 return 한 data 속성 값을 새 변수 posts에 할당합니다.
data 변수는 사용할 수 없고, posts 변수가 정의되는 것입니다.

Vue 상태 값에 구조분해 할당

const loading = ref(false);
const error = ref(null);

({ error: error.value, loading: loading.value } = 함수명(파라미터));

Vue 반응형 변수 값으로 구조분해 할당하는 예시입니다.
하지만 위와 같은 방식은 반응형 상태를 유지할 수 없어 권장되지 않습니다.
아래처럼 명시적으로 대입하는 방식이 반응성을 유지해서 권장됩니다.

const loading = ref(false);
const error = ref(null);

const result = 함수명(파라미터);
loading.value = result.loading;
error.value = result.error;

구조분해 할당 시 기본값 설정

export const 함수명 = (data = {}) => {
  // 항수 로직
}

위와 같이, 함수 모듈에서 파라미터를 받을 때 값이 없으면 기본값을 할당할 수 있습니다.

Javascript 전개 구문

객체 및 배열 복사

const obj = { a: 1, b: 2 };

const newObj = {
  ...obj,
  b: 9,
  c: 3
};

javascript 전개구문으로 객체 및 배열 속성들을 펼쳐 복사하거나 병합할 수 있습니다.
객체 속성 키가 같은 경우, 뒤에 추가된 속성 값으로 덮어쓰기 됩니다.

Javascript 페이지 열기

새 탭으로 열기

<a onclick="openNewTabPage()">버튼명</a>

<script>
function openNewTabPage() {
  window.open('http://URL', '_blank');
}
</script>

target 속성 _blank 값으로 새 탭에서 페이지를 열 수 있습니다.
아래와 같이, HTML만으로도 새 탭 열기가 가능합니다.

<a href="http://URL" target="_blank">버튼명</a>

새 창 팝업으로 열기

<a class="btn btn-primary fs-5" @click="openPopup('http://URL')">선생님 로그인</a>

<script>
function openPopup(url, popupName) {
  // 현재 사용자 화면 크기로 팝업 창 최대 크기 계산 
  const width = window.screen.availWidth;
  const height = window.screen.availHeight;

  // 팝업 크기 및 위치 설정
  const features = `width=${width},height=${height},top=0,left=0,scrollbars=yes,resizable=yes`;

  // 팝업 창 열기
  window.open(url, popupName, features);
}
</script>

현재 사용자 브라우저 크기로 계산해서 전체화면 팝업을 띄우는 예시입니다.
window.open 2번째 파라미터는 팝업창 고유 이름으로, 같은 이름 팝업이 뜨면 기존 팝업에 덮어씌워집니다.

Javascript 클래스

Javascript 클래스 생성

class 클래스명 {
  필드명1;
  필드명2;
  필드명3;

  // 생성자
  constructor(필드명1, 필드명2, 필드명3) {
    this.필드명1 = 필드명1;
    this.필드명2 = 필드명2;
    this.필드명3 = 필드명3;
  }

  메서드명(파라미터명1) {
    console.log(`현재 객체 필드1 값 : ${this.필드명1}`);
  }
}

Javascript class 문법을 이용하여 클래스를 정의할 수 있습니다.

Javascript 클래스 상속 방법

class 부모클래스명 {
  필드명1;
  필드명2;
  필드명3;

  // 생성자
  constructor(필드명1, 필드명2, 필드명3) {
    this.필드명1 = 필드명1;
    this.필드명2 = 필드명2;
    this.필드명3 = 필드명3;
  }

  메서드명(파라미터명1) {
    console.log(`현재 객체 필드1 값 : ${this.필드명1}`);
  }
}

class 자식클래스명 extends 부모클래스명 {
  필드명4;

  constructor(필드명1, 필드명2, 필드명3, 필드명4) {
    super(필드명1, 필드명2, 필드명3); // 부모 클래스 생성자 호출
    this.필드명4 = 필드명4;
  }
}

부모 클래스 필드 및 메서드를 모두 상속받는 자식 클래스를 정의할 수 있습니다.

Javascript 객체 생성

let 객체명 = new 클래스명(필드1값, 필드2값, 필드3값);

// 클래스 내 메서드 호출 가능
객체명.메서드명(파라미터1값);

// 객체 정보 확인
console.log(객체명);

정의한 클래스 생성자를 이용하여 객체 인스턴스를 생성할 수 있습니다.

최신 글