[메서드] => (Arrow함수)

ES6에서 새롭게 추가된 함수 선언 방법.

함수 표현식에서 사용할 수 있다.

 

//ES5

const plus = function (num1, num2) {
	return num1 + num2
}

//원래 가장 평범한 함수 표현식을 ES6 화살표함수로 나타내면,

/////////////////////////////////////////////////

//ES6

const plus = (num1, num2) => num1 + num2;

//이렇듯 화살표 함수로 사용할 수 있다.

이렇거나 함수의 내용이 한 줄이고, 리턴밖에 없으면 return 키워드와 중괄호 생략 가능

//예제

const square = x => x * x;

 

단! 화살표 함수의 주의사항 또한 존재한다.

 

바로! 

 

화살표 함수와 일반 함수 this 가 가리키는 대상이 다르다는 것

// 일반 함수에서의 this

function foo() {
	console.log(this);
}

foo(); //  window 객체

const user = {
	name: 'Jayden',
	age: 26,
    showAge() {
    	console.log(this.age);
    };
};
user.showAge(); // 26


// 화살표 함수에서의 this

const dog = {
	sound: '멍멍',
    arrowBark: ()=>{
    	console.log(this.sound);
    },
    normalBark() {
    	console.log(this.sound);
    }
};
dog.arrowBark(); // undefined
dog.normalBark(); // 멍멍

이해가 되었길 바란다.