arrow function(화살표 함수)

표현방식

// 1번)

// 한 줄 작성
let arrow1 = (x, y) => x + y;

arrow(10,10) //20


// 여러줄 작성
let arrow2 = (x, y) => {
    console.log("여러줄 작성");
    return x + y;
}

arrow2(10,10) //20


// 여러 줄 작성 (return문 미작성)
let arrow2 = (x, y) => {
    console.log("여러줄 작성");
    x + y;
}

arrow2(10,10) //undefined

한줄로 코드를 작성할 경우 { }중괄호 생략이 가능하다. 하지만 여러 줄의 코드를 작성해야 하는경우 { }중괄호와 return문이 꼭 작성되어야한다. return문이 없는 경우 undefined를 반환한다.

// 2번)

const oneParameter = x => x;

oneParameter(10)// 10

매개변수가 하나일 경우 괄호도 생략이 가능하다. 매개변수가 두개인 경우에는 생략 불가

// 3번)

const obj = (x, y) => ({ x, y })

obj(123,456); // {x: 123, y: 456}

하지만 객체를 반환하는 경우에는 ( ) 소괄호를 사용해야 한다.

매개변수에 기본값 설정

화살표 함수를 포함한 함수 선언문방식과 함수 표현식에서 모두 매개변수에 기본값을 설정할 수 있다.

매개변수에 할당연산자를 이용하여 매개변수에 값이 전달되지 않은 경우 해당 기본값으로 계산되게 할 수 있다.

// ex1)
let arrow = (x=1, y=2) => {
    return x + y;
} 

arrow(); // 결과 : 3


// ex2)
let arrow = (x, y=2) => {
    return x + y;
} 

arrow(10); // 결과 : 12

Arrow function을 사용하기전과 후의 가장 큰 차이점은 this이다.

일반 함수의 this

function Person() {
    this.age = 0;
    console.log(this); // Person {age: 0}

    setTimeout(function growUp() {
        console.log(this); // Window
        this.age++; // NaN
    }, 1000);
}

var p = new Person();

일반 함수에서의 this를 사용한 위의 예제를 보면 첫번째 this는 Person 생성자 함수 객체를 가리키고 있고

두번째 this는 Window를 가리키고 있다. 서로 가리키고있는 this가 다르다.

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.

다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

생성자 함수와 객체의 메서드를 제외한 모든 함수(내부 함수, 콜백 함수 포함)의 this는 전역 객체인 window를 가리킨다.

이러한 문제를 해결하기 위해서 일반 함수에서 bind() 메서드를 사용하거나 this를 변수 that에 담아서 사용해야 한다.

// bind() 메서드 방식

function Person() {
    this.age = 0;
    console.log(this); // Person {age: 0}

    setTimeout(function () {
        this.age++;
        console.log(this); // Person {age: 1}
    }.bind(this), 1000);
}

var p = new Person();

// this를 변수 that에 담는 방식

function Person() {
    var that = this;
    that.age = 0;
    console.log(this); // Person {age: 0}

    setTimeout(function growUp() {
        that.age++; //age = 1
        console.log(that);// Person {age: 1}
    }, 1000);
}

var p = new Person();

화살표 함수(arrow function)의 this

// example1
const Person = () => {
    this.age = 0;
    console.log(this.age); // 0

    setTimeout(() => {
        this.age++; // 1
        console.log(this.age); // 1
    }, 1000);
}

Person();

// example2
const Person = () => {
    this.age = 0;
    this.person = "hong gil dong"
    console.log("age => " + this.age); // age => 0

    const inner1 = (() => {
        this.age++;
        console.log("age => " + this.age); // age => 1
        console.log(this.person); // hong gil dong
        const inner2 = (() => {
            this.age++;
            console.log("age => " + this.age); // age => 2
            console.log(this.person); // hong gil dong
        })();
    })();
}

Person();

화살표 함수를 사용하면 함수안의 this는 상위 scope의 this를 가리킨다.(Lexical this)

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고

함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다고 하였다.

그러나 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다. 즉 부모가 가르키는 this를 그대로 똑같이 가르킨다. 이를 Lexical this라 한다.

화살표 함수는 call, applay, bind 메소드를 사용하여 this를 변경할 수 없다.

화살표 함수를 사용해서는 안되는 경우

1. 메서드
2. prototype
3. 생성자 함수
4. addEventListener 함수의 콜백 함수

위 4가지의 경우에서 화살표 함수를 사용할 경우 this는 호출한 객체를 가르키지않고 상위 컨택스트인 전역 객체 window를 가리킨다.

이 블로그 검색

프로그래밍 공부 노트

Arrow function(화살표 함수)과 매개변수의 기본값 설정