ES6(ES2015)는 JavaScript에 여러 가지 새로운 기능을 추가했습니다. 이 글에서는 그 중에서 애로우 함수와 디스트럭처링에 대해 살펴보겠습니다.

애로우 함수 (Arrow Functions)

애로우 함수는 함수를 더 간결하게 정의할 수 있도록 해줍니다. 일반 함수 정의와 비교하여 더 간단한 문법을 제공하며, this의 동작 방식도 다릅니다.

기본 문법

애로우 함수는 다음과 같이 정의합니다:

const add = (a, b) => a + b;

이는 기존의 함수 정의인 function add(a, b) { return a + b; }와 같습니다. 괄호 안의 입력 매개변수, 화살표 =>, 그리고 함수의 반환값으로 이루어져 있습니다.

다양한 형태

만약 입력 매개변수가 하나뿐이라면 괄호를 생략할 수 있습니다:

const square = x => x * x;

또는 함수 몸체가 여러 표현식으로 이루어져 있다면 중괄호를 사용하여 명시적으로 반환값을 지정할 수 있습니다:

const logAndReturn = (value) => {
  console.log('Value is', value);
  return value;
}

this 바인딩

애로우 함수는 this를 lexical하게 바인딩합니다. 따라서 일반 함수의 경우처럼 실행 문맥에 따라 this가 달라지는 일이 없습니다. 이는 특히 이벤트 핸들러나 콜백 함수 등에서 유용하게 사용됩니다.

디스트럭처링 (Destructuring)

디스트럭처링은 배열이나 객체의 속성을 쉽게 추출하여 변수에 할당할 수 있는 문법입니다.

배열 디스트럭처링

배열 디스트럭처링은 다음과 같이 사용할 수 있습니다:

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

위 예시에서 first와 second에 각각 배열의 첫 번째와 두 번째 요소가 할당되었고, 나머지 모든 요소는 rest 배열에 할당되었습니다.

객체 디스트럭처링

객체 디스트럭처링은 다음과 같이 사용할 수 있습니다:

const person = { name: 'Alice', age: 30, city: 'New York' };
const { name, age } = person;

console.log(name); // 'Alice'
console.log(age); // 30

위 예시에서 name과 age에 객체 person의 각 속성이 할당되었습니다.

ES6의 애로우 함수와 디스트럭처링은 JavaScript 코드를 더 간결하고 가독성 있게 만들어줍니다.

더 많은 정보를 원하시면 MDN web docs를 참고하세요.