JavaScript : 화살표 함수

화살표 함수

원래의 함수와 화살표 함수를 사용했을 때 선언 방법이다.

원래 함수

const greet = function(name) {
	return "hello" + name;
    }

위에 함수를 화살표 함수로 바꾸면

	var greet = (name) => {
    	return 	`hello ${name}`;
    };

매개 변수 하나만 있으면 괄호를 생략해도 된다.

var greet = name => {
	return 	`hello ${name}`;
};

매개변수가 없을 시에는 빈괄호를 사용해야 한다.

var greet = () => {
	return 	"hello";
};

암시적 반환

화살표 함수를 사용하면 명시적 반환대신 암시적 반환을 할 수 있다.

암시적 반환 시에 코드가 간결해진다.

const greet = name => `hello ${name}`;

객체 리터럴을 암시적으로 반환해야 한다면

const race = "100";
const runners = ["us","Js","As"];
const  result = runners.map((runner,i) =>({name: runner,race,palce : i+1}));
console.log(result);

이렇게 사용한다.

익명 함수

화살표 함수는 익명 함수이므로 참조할 이름이 필요할 시 함수를 변수에 할당하면 된다.

const greet = name => `hello ${name}`;
greet("YJ");

this 함수

this 키워드는 상위 스코프에서 상속된다.

(this가 대부분 윈도우 객체로 상속된다.)

화살표 함수가 부모 스코프에서 this의 값을 상속한다.

ex) const person = {
	age : 20,
    // => 는 상위 스코프에서 가져오므로 window 객체이다.
    grow : () =>{
    	this.age++;
        },
    };
   person.grow();
   console.log(person.age);

화살표 함수는 this와 arguments 객체를 사용할 때 조심해야한다.

arguments 객체는 함수 내부에서 접근 할 수 있는 배열 객체이며, 함수에 전달된 인수의 값을 담고 있는 것이다.
이 arguments 객체는 this와 마찬가지로 부모 스코프의 값을 상속한다.