함수 표현식을 화살표 함수로 변경하기

함수 표현식은 화살표 함수로 간단히 변환할 수 있다

// 함수 표현식
const hello = function(name) {

return 안녕하세요, ${name}님!;
}

// 화살표 함수로 변형
const helloArrow = (name) => {
  return `안녕하세요, ${name}님!`;
}

console.log(helloArrow("변우석")); // 안녕하세요, 변우석님!

function키워드를 생략하고 => 를 사용하면 같은 동작의 화살표 함수로 변경된다.

매개변수가 하나일 때는 괄호 생략이 가능하고 매개변수가 없는 경우 괄호는 생략할 수 없다.
그리고 매개변수가 여러 개일 때 괄호는 필수로 한다.
(예시의 함수name의 괄호를 의미)

본문이 한 줄일 때 return과 중괄호 생략이 가능하다

const square = num => num * num;
console.log(square(4)); // 16

여러줄의 코드가 필요한 경우에는 반드시 {}와 return을 써야 한다.

객체 리터럴 반환시 소괄호로 감싸야한다.

const getUser = () => ({ name: "김코딩", age: 29 });
console.log(getUser()); // { name: '김코딩', age: 29 }

객체 리터럴{}은 JavaScript에서 코드블록으로 인식되기 때문에 반환하려는 객체를 괄호로 감싸야 return 없이도 반환이 가능하다.
그렇기 않는 경우 undefined나 오류가 발생한다.

화살표 함수 this

화살표 함수에서의 this는 다르게 작동한다.

함수표현식에서의 this는

const user = {
name: "김코딩",
greet: function () {
console.log(안녕하세요! 저는 ${this.name}입니다.);
}
};

user.greet(); // 안녕하세요! 저는 김코딩입니다.

this가 해당 매서드를 호출할 객체(user)를 가르킨다.

화살표 함수에서의 this는

const user = {
name: "김코딩",
greet: () => {
console.log(안녕하세요! 저는 ${this.name}입니다.);
}
};

user.greet(); // 안녕하세요! 저는 undefined입니다.

greet()는 user객체의 속성으로 정의되어 있지만, 화살표 함수는 자신만의 this응 가지고 있지 않기 때문에 this는 user 객체가 아니라, 해당 함수가 정의된 시점의 상위 스코프를 따른다.
결과적으로 this.name은 undefined가 된다.

하지만, 자신이 정의된 위치의 상위 스코프에서 이 값들을 그대로 가져와 사용하기 때문에 함수 안에서 중첩된 함수로 사용할 때는 오히려 장점이 될 수 있다.

const user = {
name: "김코딩",
hobbies: ]"코딩", "산책", "커피"],
showHobbies: function () {
this.hobbies.forEach(hobby => {
console.log(${this.name}의 취미: ${hobby});
});
}
};

user.showHobbies();
// 김코딩의 취미: 코딩
// 김코딩의 취미: 산책
// 김코딩의 취미: 커피