[JS] 화살표 함수

화살표 함수

 

function 키워드 대신 화살표를 사용하여 기존의 함수 정의 방식보다 간략하게 정의하고 콜백 함수에서 사용이 유리하다.

 

const power = x => x ** 2;
console.log(power(2)); // 4

// 객체로 반환하는 경우는 반환값을 리터럴로 감싸 주어야 한다.
const create = (id, content) =>({id, content});
console.log(create(1, 'giwon'));

//sum

const sum = (a, b) =>{
    return a + b;
}
console.log(sum(1,2));

// 즉시 실행 함수

const person = (name =>({
    sayHi(){
        return `Hi My name is ${name}.`;
    }
}))('Lee');

console.log(person.sayHi());

 

 

---

화살표 함수의 this는 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 가리킨다.

즉, 언제나 상위 스코프의 this를 가리킨다.

 

콜백 함수에서는 화살표 함수를 일반 함수로 호출하는데 모든 함수 내부의 this는 전역 객체를 가리킨다, 하지만 'strict mode '  자동적으로 적용되서 일반 함수로 호출된 this는 모두 undefined가 선언된다.

 

class Prefixer{
    constructor(prefix){
        this.prefix = prefix;
    }
    add(arr){
        return arr.map(function (item){
        // 상위 객체는 전역 객체이다.
        // prefix : undefined 선언
            return this.prefix = item;
        });
    }
}

const prefixer = new Prefixer(`-webkit-`);
console.log(prefixer.add(['transition', 'user-select']));

 

const person = {
    name : "hyun",
    // this 가리키는 건 상위 객체(전역)이다.
    sayHi : () => {console.log(`Hi ${this.name}`)}
};
person.sayHi();
//Hi undefined

 

 

 

따라서 화잘표 함수로 메서드를 정의하지는 않고 메서드 축약 표현을 사용해야 한다.

 

const person = {
    name : "hyun",
    sayHi() {
        console.log(`hi ${this.name}`);
    }
}
person.sayHi() //hi hyun