자바스크립트는 모던 웹 애플리케이션을 개발하는 데에 널리 사용되는 언어입니다. 이번 글에서는 ES6부터 도입된 애로우 함수와 제너레이터에 대해 알아보겠습니다.

애로우 함수

애로우 함수는 함수 표현식을 간결하게 만들어주는 ES6의 기능입니다. function 키워드 대신 =>를 사용하여 함수를 정의할 수 있습니다. 애로우 함수는 this를 lexical하게 바인딩하여 현재 컨텍스트의 this 값을 유지합니다.

// 기존 함수 표현식
function add(a, b) {
  return a + b;
}

// 애로우 함수
const add = (a, b) => a + b;

애로우 함수는 간결하고 가독성이 좋은 코드를 작성할 수 있도록 도와줍니다. 그러나 this의 동작이 일반 함수와 다르기 때문에 주의하여 사용해야 합니다.

제너레이터

제너레이터는 함수의 실행을 멈추고 다시 시작할 수 있는 독특한 형태의 함수입니다. function* 키워드를 사용하여 제너레이터 함수를 정의하고, yield를 사용하여 값을 반환하거나 함수의 실행을 일시 정지할 수 있습니다.

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generatorFunction();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

제너레이터는 비동기 코드나 이터러블을 다루는 데에 유용하게 활용될 수 있습니다.

애로우 함수와 제너레이터는 ES6 이후의 자바스크립트에서 많은 개발자들에게 선호되는 기능이 되었습니다.

이상으로 애로우 함수와 제너레이터에 대한 간단한 소개를 마치겠습니다.