함수 작성 - 화살표 함수

화살표 함수

함수 작성법에는 함수 선언식, 함수 표현식이 있었다.
마지막으로 화살표 함수를 알아보자!!!

function sum(a,b){
 return a + b; 
}

기존에 우리는 위처럼 함수를 선언했었다. ES6 부터는 화살표 =>를 사용하여 function 키워드를 생략하여 사용할 것이다.

let sum = (a,b) => {
  return a+b;
}

// 단순히 return 문만 있다면 한 줄로 표현 가능
// 중괄호 {}와 return을 생략 가능.
const sum = (a,b) => a + b;

하지만 만약 return할 값이 객체인 경우에는 괄호 생략 불가능.

추가로 화살표 함수 사용 방식 예제를 살펴보자

// 같은 함수다.
var pow = function (x) { return x * x; };
const pow = x => x * x;

🏷️ 객체 리터럴 반환

객체 리터럴을 반환하려면 소괄호를 감싸야 한다.
중괄호 {} 만 사용하면 함수 블록인지 객체 블록인지 알 수 없기 때문.

() => { return { a: 1 }; }

() => ({ a: 1 })

🏷️ 화살표 함수 특징

✔️ 화살표 함수엔 this가 없다.
this 키워드로 접근하면 자신이 아닌 외부에서 값을 가져온다.

const obj = {
  name: 'abc',
  callme: function() {
    console.log(this.name) // abc
  }
}
obj.callme()

const obj2 = {
  name: 'abc',
  callme: () => {
    console.log(this.name) // ''
  }
}
obj2.callme()

obj2의 경우 this가 없기 때문에 name을 출력하지 못하고 ''를 출력하게 됨.

✔️ 화살표 함수의 this 특징 때문에 JS의 콜백함수를 유용히 사용할 수 있다.

먼저 화살표 함수를 사용하지 않은 경우

let school;

school = {
  class: "1반",
  students: ["짱구", "철수", "훈이"],

  showList() {
    school.students.forEach(
      function(student) { 
        // this ==== window
      	console.log(this.class + ': ' + student) 
      } 
    );
  }
};

school.showList();

forEach()의 콜백 함수에 넣게 되면 this는 window를 가리키게 되어 undefined가 된다.

let school;

school = {
  class: "1반",
  students: ["짱구", "철수", "훈이"],

  showList() {
    school.students.forEach(
      (student) => { 
        // this ==== window
      	console.log(this.class + ': ' + student) 
      } 
    );
  }
};

school.showList();

화살표 함수를 사용하면 forEach()의 콜백 함수 내 this는 group 객체를 가리키게 되어 자신만의 고유 this가 없기 때문에 외부 school의 this를 따르게 된다.

콜백 함수 때문에 화살표 함수의 this가 상위의 this를 그대로 가져온 것이다.

✔️ 화살표 함수엔 arguments가 없다.

let test = () => {
  console.log(arguments);
}

test(1, 2, 3); // 에러 발생

let test2 = (...args) => {
  console.log(args);
}
test2(1, 2, 3);

arguments가 없기 때문에 에러가 발생한다. 그래서 rest parameter 라는 문법을 사용해서 인수들을 배열로 받는다.

✔️ 화살표 함수는 생성자 함수가 없다.
생성자 함수는 new 연산자를 통해서 객체를 생성하는 함수다.

let User = (name) => {
  this.name = name;
}

let user = new User("Alice");
// TypeError: User is not a constructor

super도 불가능하다.

---

Reference

🔗 JS 화살표 함수
🔗 https://poiemaweb.com/es6-arrow-function - Arrow function