Chapter 02: 화살표 함수 (Arrow Function)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

# 2.1 화살표 함수

---

// 일반 함수
const greeting = function(name) {
    return "hello " + name;
}

// 화살표 함수
const greeting = (name) => {
    return `hello ${name}`;
}

// 화살표 함수 (매개 변수가 하나 일 경우, 괄호 생략)
const greeting = name => {
    return `hello ${name}`;
}

// 화살표 함수 (매개 변수가 없을 경우, 괄호 필수)
const greeting = () => {
    return `hello`;
}

참고 : 템플릿 리터럴

Template Literals

백틱을 사용하여 string + 변수의 형태를 표현하는 방법

const sayHello = (name = ‘Newstar’) => `Hello ${name}!`

# 2.2 암시적 반환

---

Arrow Function은 {} 를 사용하지 않으면 화살표 뒤에 나오는 내용에 기본적으로 return 을 함축.

객체 리터럴 반환 시 객체를 () 로 감싸주어 반환하고자 하는 값이 객체임을 표현해주어야 한다.

// string 반환
const greeting = (name) => `hello ${name}`;

// object literal 반환
const race = "100m dash";
const runners = ["Usain Bolt", "Justin Gatlin", "Asafa Powell"];

const results = runners.map((runner, i) => ({name: runner, race, place: i + 1}));
console.log(results);

참고 : map

Array.map()

Calls a defined callback function on each element of an array, and returns an array that contains the results.
배열의 각 요소에 대해 정의된 콜백함수를 호출하고 그 결과를 포함한 배열을 리턴한다.

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
    const result = students.map((student) => student.score);
  console.log(result);
}

위 콜백함수의 인자를 student 대신 value , item 등으로 대신할 수도 있지만 직관적이지 못하기 때문에 최대한 그 의미를 직관적으로 알아볼 수 있도록 네이밍하는 것이 중요

# 2.3 화살표 함수는 익명 함수

---

화살표 함수는 항상 이름이 없는 익명 함수이며, 참조가 필요할 경우 함수를 변수에 할당하여 사용

const greeting = name => `hello ${name}`;

greeting("Newstar");

# 2.4 화살표 함수와 this 키워드

---

화살표 함수 내의 this는 상위 스코프의 this 를 상속 받는다. 이를 Lexical this라 한다.

아래와 같은 경우 유용하게 활용 가능하다.

const box = document.querySelector(".box");
// click 이벤트 핸들러 등록
box.addEventListener("click", function() {
    // div에 opening 클래스 토글
    this.classList.toggle("opening"); // this == box
    setTimeout(() => { // 여기서 일반 함수 사용할 경우, 함수 내부의 this가 전역 객체인 window를 가리켜 오류 발생
        // 클래스 다시 토글
        this.classList.toggle("opening"); // this == box
    }, 500);
})

참고 : addEventListener 함수 내의 this

addEventListener 함수 내의 this

📎 참고 링크

• 화살표 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 전역 객체 Window를 가리킨다.

// Bad  
var button = document.getElementById('myButton');

button.addEventListener('click', () => {
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});

• 일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다.

// Good
var button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this === button); // => true
  this.innerHTML = 'Clicked button';
});

참고 : 전역객체(Global Object)

전역객체(Global Object)

전역객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다.

// in browser console
this === window // true

// in Terminal node
this === global // true

# 2.5 화살표 함수를 피해야 하는 경우

---

문제 상황 1.

const button = document.querySelector('btn');
button.addEventListener('click', () => {
    // 오류 : 여기서 this는 Window 객체
    this.classList.toggle('on');
})

문제 상황 2.

const person1 = {
    age: 10,
    grow: function() {
        this.age++;
        console.log(this.age);
    }
}

person1.grow(); // 11

const person2 = {
    age: 10,
    grow: () => {
        this.age++;
        console.log(this.age);
    }
}

person2.grow(); // NaN

문제 상황 3.

// 문제 상황
const showWinner = () => {
    const winner = arguments[0];
    console.log(`${winner} was the winner`);
}

showWinner("Usain", "Justin", "Asafa"); // arguments is not defined

// 해결 방법 1 : 일반 함수 사용
const showWinner = function() {
    const winner = arguments[0];
    console.log(`${winner} was the winner`);
}

showWinner("Usain", "Justin", "Asafa"); // Usain was the winner

// 해결 방법 2 : 스프레드 문법 사용
const showWinner = (...args) => {
    const winner = args[0];
    console.log(`${winner} was the winner`);
}

showWinner("Usain", "Justin", "Asafa"); // Usain was the winner

참고 : spread

spread

spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 이다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다. 아래와 같이 기존의 객체를 건드리지 않고 새로운 객체를 생성해야하는 경우 유용하게 사용할 수 있다.

const slime = {
  name: '슬라임'
};

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const purpleCuteSlime = {
  ...cuteSlime,
  color: 'purple'
};

console.log(slime); // { name: "슬라임" }
console.log(cuteSlime); // { attribute: "cute", name: "슬라임" }
console.log(purpleCuteSlime); // { attribute: "cute", name: "슬라임", color: "purple" }

마찬가지로 배열에서도 사용 가능하다.

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];

console.log(animals); // ['개', '고양이', '참새']
console.log(anotherAnimals); // ['개', '고양이', '참새', "비둘기"]

배열에서 spread 연산자를 여러번 사용 할 수도 있다.

const numbers = [1, 2, 3, 4, 5];

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

2.6 QUIZ

---

Q 2.1. 다음 중 화살표 함수를 문법에 맞게 활용한 예는?

let arr = [1, 2, 3];

// a)
let func = arr.map(n -> n + 1);

// b)
let func = arr.map(n => n + 1);

// b)
let func = arr.map(n ~> n + 1);

• 답 : A. b

Q 2.2. 다음 코드의 올바른 출력은?

const person = {
    age: 10,
    grow: () => {
        this.age++;
    }
}
person.grow();

console.log(person.age);

• 답 : A. 10
  • 위 코드에서 this 는 전역객체 Window를 가리키므로 person.age 의 값은 변함 없이 10이다.

Q 2.3. 화살표 함수 문법을 사용해서 다음 코드를 리팩터링하자.

function(arg) {
    console.log(arg);
}

• 답
• const arrFunc = arg => { console.log(arg) }