es6: Arrow function(화살표 함수)

코드 연습장 위의 화살표 with chatGPT

 

화살표 함수(Arrow function)는 ES6에서 도입된 함수 표현 방식으로, 기존의 function 키워드를 사용한 함수와 다르게 간결한 문법과 this 바인딩이 특징입니다.

 

1.기본문법

화살표 함수는 function 키워드 대신 화살표 => 를 사용하여 정의합니다.

//기본문법
(param1, param2, ...) => {
	//함수 본문
    return result;
};

//예시
const add = (a, b) => a+b;
console.log(add(2,3)); //5

 

2.문법의 간소화

화살표 함수는 문법이 간단하여 짧은 함수에 적합합니다.

• 매개변수가 하나일 때: 괄호를 생략할 수 있습니다.

const square = x => x * x;
console.log(squre(4)); //16

• 본문이 한 줄일때: 중괄호와 return 키워드를 생략할 수 있습니다.

const greet = name => `Hello, ${name}`;
console.log(greet("Alice")); //Hello, Alice

• 매개변수가 없을때: 빈 괄호 ( ) 를 사용합니다.

const sayHello = () => "Hello!";
console.log(sayHello()); //Hello!

 

3. this 바인딩

화살표 함수는 자신만의 this 를 가지지 않고, 선언된 위치의 상위 스코프의 this 를 그대로 사용합니다.

이를 Lexical this 라고 하며, 특히 콜백 함수에서 유용하게 사용됩니다.

function Person(){
	this.age = 0;
    
    setInterval(() => {
    	this.age ++; //상위 스코프의 this를 사용
        console.log(this.age);
    }, 1000);
}

const person = new Person();
// 1초마다 age가 증가하는것을 볼 수 있음

일반 함수 표현식의 경우 this 는 호출한 객체를 참조하므로, 위와 같은 코드를 작성하려면 .bind(this) 또는 self 와 같은 변수를 이용해야 합니다.

 

4. 화살표 함수의 제한사항

• this , arguments , super , new.target 을 가지지 않습니다. 특히 arguments 객체가 없기 때문에, 필요시에는 rest 파라미터를 사용해야 합니다.
• 생성자 함수로 사용할 수 없습니다. new 키워드를 사용할 수 없습니다. 

요약

화살표 함수는 코드가 간결해지고 this 바인딩 문제가 해결되므로 콜백 함수나 짧은 함수에 적합합니다.

다만, 생성자 함수나 특정 상황에서의 this 바인딩이 필요한 경우 주의가 필요합니다.