1. 변수 선언 (Variable Declaration)
ES6 도입 이후, 스코프(Scope) 명확성과 안전성 확보를 위해 let과 const 가 추가
https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/
| 키워드 | 유효 범위 (Scope) | 재선언 | 호이스팅 동작 및 특징 |
|---|---|---|---|
var | 함수 레벨 | O | 초기화 전 undefined 반환 (오류 발생 가능성 높음) |
let | 블록 레벨 | X | TDZ(일시적 사각지대) 적용으로 선언 전 접근 시 에러 발생 |
const | 블록 레벨 | X | 값의 재할당이 불가능한 상수 (객체 내부 값은 변경 가능) |
기본적으로
const를 사용하고, 재할당이 반드시 필요한 경우에 한해let을 사용하는 것을 권장함.
2. 연산자와 단축 평가 (Operators)
비교 연산자
| 연산자 | 설명 | 예시 (1 vs '1') | 권장 사항 |
|---|---|---|---|
== | 동등 비교 (값만 비교, 암묵적 타입 변환 발생) | true | 사용 지양 |
=== | 일치 비교 (값과 타입 모두 비교) | false | 기본 사용 |
논리 연산자 단축 평가 (Short-Circuit)
A || B(논리합): A가 Falsy(거짓 같은 값)일 경우 B를 반환 (기본값 설정 시 주로 사용).A && B(논리곱): A가 Truthy(참 같은 값)일 경우 B를 반환 (조건부 실행 시 주로 사용).
// 활용 예시
const name = userName || '홍길동'; // userName이 없으면 '홍길동' 할당
optional-chaining vs nullish-coalescing
- 옵셔널 체이닝
?.를 통해 좌항이 Truthy한 경우 우항을 반환. 이때 우항은 좌항의 프로퍼티.
만약 좌항이 null이나 undefined라면 에러대신 undefined를 반환한다.
즉, 중첩된 객체의 프로퍼티를 찾을때 유용.- 기존 방식:
if (user && user.name && user.name.firstName) ... - 옵셔널 체이닝:
user?.address?.firstName⇒ user객체에 address객체에 firstName을 반환. 이때, user와 address모두 null이나 undefined가 아니여야함.
- 널리쉬 코얼리싱
??를 통해 좌항이 null이나 undefined면 거짓으로 보고 오른쪽 값(기본값)을 반환한다.- 기존 방식:
const age= 0 || 27⇒ 0을 Falsy로 판단, 27 반환 - 널리쉬 코얼리싱:
const age = 0 ?? 27⇒ 위와 마찬가지
- 둘의 조합
// user가 없어도 에러가 나지 않고, city가 없으면 '서울'을 기본값으로 사용 const userCity = user?.address?.city ?? "서울";
3. 객체와 생성자 (Object & Constructor)
| 방식 | 문법 형태 | 특징 | 용도 |
|---|---|---|---|
| 객체 리터럴 | { key: value } | 직관적이며 작성이 간편함 | 설정 객체나 단일 데이터 구조 필요 시 |
| 생성자 함수 | new Func() | 동일 구조의 객체 양산 가능 | 유사한 객체를 반복 생성해야 할 시 |
ES6+ 편의 문법
- 프로퍼티 단축: 키와 할당할 변수명이 동일하면 값을 생략하여 작성 가능함 (
{ name }).- 만약 name 변수에 “홍길동” 값이 있다면,
name : "홍길동"으로 자동 값 대입
- 만약 name 변수에 “홍길동” 값이 있다면,
4. 함수와 일급 객체 (First-class Object)
자바스크립트에서 함수는 값(Value)으로 취급되는 '일급 객체'의 특성을 가진다
일급 객체의 조건 및 활용
- 변수 할당: 함수를 변수나 자료구조에 저장 가능
- 인자 전달: 다른 함수의 매개변수(Callback)로 전달 가능
- 반환 값: 함수의 반환 값으로 사용 가능(고차 함수)
주요 함수 형태
- 콜백 함수 (Callback): 제어권을 다른 함수에 위임하여 비동기 처리나 이벤트 처리에 필수적으로 사용됨
- 즉시 실행 함수 (IIFE): 정의와 동시에 실행되며, 전역 변수 오염을 막고 스코프를 격리하는 용도로 사용됨
5. 프로토타입 (Prototype)
자바스크립트는 클래스 기반이 아닌 프로토타입 기반의 객체지향 언어임. 상속은 부모 객체와의 연결 링크([[Prototype]])를 통해 구현됨
프로토타입 체인 (Chain)
객체의 프로퍼티나 메서드 접근 시, 해당 객체에 없다면 상위 프로토타입을 순차적으로 탐색하는 메커니즘을 말함
모던 상속 구현 방식
직접 __proto__를 조작하는 것은 성능 이슈로 권장하지 않음
Object.create(proto): 특정 객체를 프로토타입으로 하는 새로운 객체 생성Object.getPrototypeOf(obj): 객체의 프로토타입 조회Object.setPrototypeOf(obj, proto): 객체의 프로토타입 변경
const parent = { type: 'human' };
const child = Object.create(parent); // parent를 상속받은 child 생성
console.log(child.type); // 'human' (프로토타입 체인을 통해 접근)
새로운 기술에 열린 개발자