[Javascript] 화살표 함수 와 일반 함수

1. 일반 함수와 화살표 함수 표현 

 

• 매개변수가 없을때

// 일반함수

function foo(){
    const a = 5;
    const b = 10;

    console.log(a+b);
    return (a+b);
}
foo();

// 화살표함수

var foo = () =>{
    const a = 5;
    const b = 10;
    console.log(a+b);
}

foo();

 

• 매개변수가 있을때

// 일반함수 
function foo(a,b){
    console.log(a+b);
}
foo(10,100);

// 화살표함수
var foo = (a,b) => {
    console.log(a+b);
}
foo(10,100);

 

• 더 간편하게 쓰는 화살표함수

// 기본 화살표함수
var foo = (a,b) => {
    return (a+b);
}
foo(100,100);

// 함수안에 별다른 식이없고 return 밖에없으면 : 중괄호 & return 생략가능
var foo1 = (a,b) => (a+b);
foo1(10,100);

 

2. 화살표 함수는 this 가 바인딩 되지 않음 

 

-일반 함수의 경우 

function Person() { 
    // Person() 생성자는 `this`를 자신의 인스턴스로 정의. 
    console.log(this);  // 결과 : Person{ }
    setTimeout(function growUp() {
    // 비엄격 모드에서, growUp() 함수는 `this`를 
    // 전역 객체로 정의하고, 이는 Person() 생성자에 
    // 정의된 `this`와 다름. 
        console.log(this); // 결과 : Window
    }, 1000); 
}

var p = new Person();

: Person 의 this 객체와 growUp 의 this 객체는 서로 다른 객체임

 

- 화살표 함수의 경우

function Person(){
    console.log(this); // 결과 : Person{}
    setTimeout(() => {
        console.log(this); // 결과 : Person{}
    },1000);
}

var p = new Person();

: 화살표 함수는 자신의 this 를 생성하지 않으므로 둘다 Person{} 으로 나옴

 

3. 화살표 함수는 arguments 가 바인딩 되지 않음

 

4. 화살표 함수는 new 가 되지않음 . 고로 프로토타입을 가지지않음

 

 

 

주의할 점

 

리터럴 객체 반환 시 , () 안에 반환할 리터럴 객체를 정의해야 함

// 이렇게 쓰면 안된다
var func = () => { foo : 1 };
console.log(func()); // 결과 : undefined

// 이렇게 써야함
var func1 = () => ({ foo : 1 });
console.log(func1()); // 결과 : foo : 1