더북(TheBook)

간결한 형태의 화살표 함수에 대해 알아야 할 한 가지 “함정”이 있다. 객체 리터럴로 생성된 객체를 반환하는 간결한 화살표 함수이다.

문자열 배열이 있고 문자열을 name 속성으로 사용하여 객체 배열로 변환하려고 한다고 가정하자. 이 말은 Arraymap 메서드와 간결한 화살표 함수에 대한 작업처럼 들린다.

const a = ["Joe", "Mohammed", "María"];
const b = a.map(name => {name: name});        // 동작하지 않는다.
console.log(b);

하지만 실행하려고 하면 객체 대신 undefined가 많은 배열이 있는 배열을 얻게 된다(또는 생성한 객체에 따라 구문 오류가 발생한다). 무슨 일이 일어난 걸까? 문제는 여는 중괄호가 자바스크립트 파서에게 간결한 양식이 아닌 자세한 양식을 사용하고 있음을 알려주므로 해당 중괄호를 사용하여 본문을 시작한 다음 내용(name: name)을 전통적인 함수처럼 본문으로 사용한다는 것이다.

const a = ["Joe", "Mohammed", "María"];
const b = a.map(function(name) {              // 동작하지 않는다.
    name: name
});
console.log(b);
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.