최신 JavaScript 문법

최신 JavaScript 문법

템플릿 리터럴

템플릿 리터럴은 백틱(`)을 사용하여 문자열을 더 쉽게 작성할 수 있는 기능입니다.

1. 여러 줄 문자열

// 기존 방식
let message = '안녕하세요.\n' +
              '반갑습니다.';

// 템플릿 리터럴 사용
let message = `안녕하세요.
반갑습니다.`;

2. 표현식 삽입

const name = '철수';
const age = 25;

// 기존 방식
let greeting = '안녕하세요, ' + name + '님! 나이가 ' + age + '살이시군요.';

// 템플릿 리터럴 사용
let greeting = `안녕하세요, ${name}님! 나이가 ${age}살이시군요.`;

3. 태그드 템플릿

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<strong>${values[i]}</strong>` : '');
  }, '');
}

const name = '철수';
const age = 25;
const result = highlight`이름은 ${name}이고 나이는 ${age}살입니다.`;
// 결과: "이름은 <strong>철수</strong>이고 나이는 <strong>25</strong>살입니다."

디스트럭처링(구조 분해 할당)

객체나 배열에서 값을 추출하여 변수에 할당하는 간편한 방법입니다.

1. 배열 디스트럭처링

// 기존 방식
const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];
const c = numbers[2];

// 디스트럭처링 사용
const numbers = [1, 2, 3];
const [a, b, c] = numbers;

// 일부만 추출
const [first, , third] = [1, 2, 3];  // first = 1, third = 3

// 기본값 설정
const [a, b, c = 0] = [1, 2];  // a = 1, b = 2, c = 0

// 나머지 요소 가져오기
const [first, ...rest] = [1, 2, 3, 4];  // first = 1, rest = [2, 3, 4]

// 변수 값 교환하기
let x = 1;
let y = 2;
[x, y] = [y, x];  // x = 2, y = 1

2. 객체 디스트럭처링

// 기존 방식
const person = { name: '철수', age: 25 };
const name = person.name;
const age = person.age;

// 디스트럭처링 사용
const person = { name: '철수', age: 25 };
const { name, age } = person;

// 변수명 변경하기
const { name: userName, age: userAge } = person;  // userName = '철수', userAge = 25

// 기본값 설정
const { name, age, job = '학생' } = person;  // name = '철수', age = 25, job = '학생'

// 중첩 객체 디스트럭처링
const user = {
  name: '철수',
  address: {
    city: '서울',
    zipCode: '12345'
  }
};
const { name, address: { city } } = user;  // name = '철수', city = '서울'

// 함수 매개변수에서 디스트럭처링 사용
function printUserInfo({ name, age }) {
  console.log(`이름: ${name}, 나이: ${age}`);
}
printUserInfo({ name: '철수', age: 25 });  // 이름: 철수, 나이: 25

스프레드 연산자(...)

배열이나 객체의 요소를 펼치는 기능을 제공합니다.

1. 배열 스프레드

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]

// 배열 복사
const original = [1, 2, 3];
const copy = [...original];  // [1, 2, 3]

// 함수 인자로 전달
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));  // 6

2. 객체 스프레드

// 객체 합치기
const person = { name: '철수', age: 25 };
const details = { job: '개발자', hobby: '독서' };
const user = { ...person, ...details };  // { name: '철수', age: 25, job: '개발자', hobby: '독서' }

// 객체 복사 및 속성 덮어쓰기
const updated = { ...person, age: 26 };  // { name: '철수', age: 26 }

선택적 체이닝(Optional Chaining) - ES2020

중첩된 객체 속성에 안전하게 접근할 수 있게 해주는 연산자 ?.입니다.

// 기존 방식
let city;
if (user && user.address) {
  city = user.address.city;
}

// 선택적 체이닝 사용
const city = user?.address?.city;  // user나 address가 undefined/null이면 city도 undefined

Nullish 병합 연산자(??) - ES2020

기본값을 할당할 때 null이나 undefined일 경우에만 대체값을 사용합니다.

// || 연산자 사용 시 0, '', false도 대체됨
const count = userCount || 10;  // userCount가 0이면 10이 할당됨

// ?? 연산자는 null/undefined일 때만 대체
const count = userCount ?? 10;  // userCount가 0이면 0이 유지됨

화살표 함수와 this 바인딩

화살표 함수는 주변 스코프의 this 값을 그대로 사용합니다.

// 일반 함수에서는 호출 방식에 따라 this가 결정됨
const user = {
  name: '철수',
  sayHello: function() {
    console.log(`안녕하세요, ${this.name}입니다.`);  // this는 user 객체
  }
};

// 화살표 함수는 선언된 곳의 this를 유지
const user = {
  name: '철수',
  friends: ['영희', '민수'],
  printFriends: function() {
    // 화살표 함수 내부의 this는 printFriends의 this(user 객체)를 가리킴
    this.friends.forEach(friend => {
      console.log(`${this.name}의 친구: ${friend}`);
    });
  }
};