본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

화살표함수

• 함수를 간단히 표현할 수 있는 ES6 문법

기본 문법

let function_name = (parameter1, paremeter2, ...) => expression;

화살표함수의 특징

• 자신의 this가 없다.
  • 화살표함수 내부에서 this를 참조하면 상위스코프의 this를 가져온다.
• argument 객체가 없다.
  • 화살표함수 내부에서 argument 객체를 참조하면 상위 스코프의 argument 객체 값을 가져온다.
• new 연산자로 인스턴스를 생성할 수 없다.
  • 화살표 함수에는 property가 없기 때문
• 중복된 매개변수 이름을 허용하지 않는다.

예제코드

this 바인딩

let user = {
    name: "Alice",
    sayHi: function() {
        console.log("Hi, I'm " + this.name);
    }
}
user.sayHi();    // Hi, I'm Alice

• 만약 sayHi: function 안에 function을 넣고 this를 사용하면 상위 중괄호인 sayhi에는 name이 없어서 undefined가 뜨는데 이를 해결하려면 bind() 메소드를 사용한다.

bind() 메소드 1번 예제

let user = {
    name: "Alice",
    sayHi: function() {
        let self = this;    // this를 self에 저장하고 사용
        setTimeout(function() {
            console.log("Hi, I'm " + self.name);
         }, 1000);
    }
};

bind() 메소드 2번 예제

let user = {
    name: "Alice",
    sayHi: function() {
        setTimeout(function() {
            console.log("Hi, I'm " + this.name);
         }, bind(this), 1000);    // bind(this)를 사용해 바인딩
    }
};  

bind() 메소드를 사용하지않고 화살표함수를 사용

let user = {
    name: "Alice",
    sayHi: function() {
        setTimeout(() => {
            console.log("Hi, I'm " + this.name);
         }, 1000);
    }
};  

argument 객체

function sum() {
    let result = 0;
    for (let i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

argument 객체를 화살표함수로 가져오려면 rest parameter를 사용

let sum = (...args) => {
    let result = 0;
    for (let i = 0; i < args.length; i++) {
        result += arguments[i];
    }
    return result;
}

생성자

function Person(name){
    this.name = name;
}
let alice = new Person("Alice");
console.log(alice.name);    // Alice

• 생성자는 화살표함수를 사용할 수 없다.(property가 없기 때문)

중복된 매개변수 이름 불가

function add(x, x) {    // 불가
    return x + x;
}