[JavaScript/ES6] Arrow function

📌 기본함수 & arrow fuction 선언 및 호출

// 자바스크립트에서 함수를 만드는 방법 두 가지
// 1)
function test () {
    console.log('test 함수 입니다.')
}

// 2)
var test2 = function () {
    console.log('test2 함수 입니다.');
}

// 함수 실행하는 방법
test();
test2();


// arrow fuction
var test3 = () => {
    console.log('test3 함수입니다.')
}
// 화살표 함수의 실행
test3();

 

 

📌 arrow function 을 쓰는 이유

1. 함수 본연의 기능을 아주 잘 표현함

function 문법을 사용하는 이유?

1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (+ 나중에 재사용할 때)

2) 입출력기능을 만들 때

- ex) x를 넣으면 x+2 가 출력된다.

 

arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다.

// arrow fuction 은 직관적이다.
var 두배만들기 = (x) => { return x * 2 }

 

2. 소괄호 생략이 가능함

파라미터가 하나라면 소괄호 생략 가능하다.

// 소괄호 생략이 가능
var 두배만들기 = x => { return x * 2 }

 

3. 중괄호 생략이 가능함

중괄호 안에 return 이 한 줄 뿐이라면 중괄호와 return 도 생략가능하다.

// 중괄호, return 생략 가능
// 원래 { } 가 있을 땐 세미콜론 필요 없지만 중괄호 생략시에는 ; 을 넣어준다.
var 두배만들기 = x => x * 2;

 

 

⚡ 중괄호 생략할 땐 ; (세미콜론) 추가하기

 

4. arrow fuction 을 쓰면 내부에서 this 값을 쓸 때 밖에 있던 this 값을 그대로 사용

arrow fuction은 어디서 쓰든간에 내부의 this 값을 변화시키지 않는다.

바깥에 있던 this 의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow fuction 이다.

=> arrow fuction 을 쓰는 핵심 이유!

 

var obj = {
        // 메소드
        sayHi : function () {
            console.log('안녕하세요');
            console.log('this > ', this);
        },
        name : 'kim',
        age : 20
}

 

sayHi 를 실행하면 this 는 무엇이 나올까?

 

 

obj 자체가 출력된다.

 

 

var obj = {
        // 메소드
        sayHi : () => { 
            console.log('안녕하세요');
            console.log('this > ', this) },
        name : 'kim',
        age : 20
    }

 

화살표 함수를 썼을 때의 this 는 무엇이 출력될까?

 

 

window 가 출력된다.

 

왜냐하면, arrow fuction 은 외부에 있던 this 를 그대로 가져와서 사용하는 함수기 때문이다.

(이런 특성이 항상 장점은 아님)