구조 분해, 스프레드, 옵셔널 체이닝, nullish 병합 등 현대 문법을 익힌다.
ES2015+ 핵심 문법
ES2015(ES6) 이후 추가된 문법들은 코드를 훨씬 간결하고 안전하게 만듭니다. 이번 레슨에서는 실무에서 매일 쓰는 현대 문법을 모아 익힙니다.
학습 목표
- 객체·배열 구조 분해 할당을 자유롭게 사용할 수 있다
- 스프레드와 나머지 연산자를 구분해 쓸 수 있다
- 옵셔널 체이닝(
?.)으로 안전하게 접근할 수 있다 - nullish 병합(
??)으로 기본값을 지정할 수 있다 - 동적 속성과 단축 평가를 활용할 수 있다
구조 분해 — 배열
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // → 1
console.log(second); // → 2
console.log(rest); // → [3, 4, 5]
// 값 교환
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // → 2 1
구조 분해 — 객체
const user = { name: '민수', age: 20, city: '서울' };
const { name, age, country = '한국' } = user;
console.log(name, age, country); // → 민수 20 한국
// 중첩 구조 분해
const res = { data: { id: 7, title: '제목' } };
const { data: { title } } = res;
console.log(title); // → 제목
💡 TIP — 함수 매개변수에서 구조 분해를 쓰면 "이 함수가 어떤 속성을 쓰는지"가 한눈에 보입니다.
function printUser({ name, age }) {
console.log(`${name} (${age})`);
}
printUser(user); // → 민수 (20)
스프레드 — 펼치기
// 배열 합치기
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // → [1, 2, 3, 4]
// 객체 합치기 (뒤가 우선)
const base = { a: 1, b: 2 };
const patched = { ...base, b: 20, c: 3 }; // → { a: 1, b: 20, c: 3 }
// 복사
const copy = [...arr1]; // 얕은 복사
나머지 — 모으기
스프레드와 같은 ... 기호지만 모으는 역할입니다.
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // → 6
| 위치 | ... 의 의미 |
|---|---|
| 호출/리터럴 우변 | 스프레드(펼치기) |
| 매개변수/구조 분해 좌변 | 나머지(모으기) |
옵셔널 체이닝 — ?.
중간 값이 null/undefined 이면 에러 없이 undefined 를 돌려줍니다.
const user = { profile: null };
// console.log(user.profile.name); // ❌ TypeError
console.log(user.profile?.name); // → undefined
// 함수·배열에도 사용
console.log(user.getName?.()); // → undefined (메서드 없어도 안전)
console.log(user.tags?.[0]); // → undefined
nullish 병합 — ??
왼쪽이 null 또는 undefined 일 때만 오른쪽을 씁니다.
const count = 0;
console.log(count || 10); // → 10 (0이 falsy라 덮어씀, 의도와 다를 수 있음)
console.log(count ?? 10); // → 0 (0은 유효한 값으로 유지)
// 옵셔널 체이닝과 자주 함께 쓰임
const name = user.profile?.name ?? '익명';
console.log(name); // → 익명
⚠️ 주의 — 기본값을 줄 때
0·''·false가 유효한 값이라면||대신??를 쓰세요.
동적 속성
대괄호로 키 이름을 변수로 지정할 수 있습니다.
const key = 'status';
const obj = {
[key]: 'active',
[`${key}_at`]: Date.now(),
};
console.log(obj.status); // → active
단축 평가 응용
// 조건부 실행
const isAdmin = true;
isAdmin && console.log('관리자 메뉴 표시'); // → 관리자 메뉴 표시
// 조건부 속성 추가
const includeEmail = false;
const payload = {
name: '민수',
...(includeEmail && { email: 'a@b.com' }),
};
console.log(payload); // → { name: '민수' }
요약
- 구조 분해로 배열·객체에서 값을 한 번에 변수로 꺼낸다
...는 우변에선 펼치고(스프레드), 좌변/매개변수에선 모은다(나머지)?.로 null/undefined 일 때 에러 없이 안전하게 접근한다??는 null/undefined 에만 기본값을 적용해0·''를 보존한다- 대괄호 동적 속성으로 키를 변수로 지정할 수 있다
연습문제
- 배열
[1, 2, 3, 4, 5]에서 구조 분해로 첫 값과 나머지를 분리하세요. - 두 설정 객체를 스프레드로 병합하되, 두 번째 객체의 값이 우선하도록 작성하세요.
- 깊이 중첩된
data.user.address.city를 옵셔널 체이닝으로 안전하게 읽고, 없으면'미입력'을 쓰도록??와 함께 작성하세요.힌트 —
data?.user?.address?.city ?? '미입력' - 변수
key에 담긴 문자열을 속성 이름으로 사용해 객체를 동적으로 만드세요.
💡 연습문제 풀이
불러오는 중…
댓글 0
“JavaScript” 강좌에 대한 댓글입니다.