[자바스크립트 / Vanilla JS] 화살표 함수란 무엇일까 ?

화살표 함수란 ❓

화살표 함수는 ES6에서 "=>"를 사용해서 함수를 선언하는 방법이고

특징으로는 다음과 같다.

자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다.
화살표 함수는 항상 익명이다.
화살표 함수는 메소드 함수가 아닌 곳에 가장 적합하다. 그래서 생성자로서 사용할 수 없다.

ES6 이 전 버전인 ES5에서 일반적으로 함수를 선언하는 방법은 다음과 같았다.

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

이를 화살표 함수 문법으로 바꾸면 다음과 같다.

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

return 값은 템플릿 리터럴을 사용하였다.

템플릿 리터럴은 해당 링크를 참조하면 된다 !

https://growing-jiwoo.tistory.com/7?category=563596

[자바스크립트 / Vanilla JS] ES6 템플릿 리터럴 (Template Literal)

템플릿 리터럴(Template Literal) 템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식이다. 기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)

growing-jiwoo.tistory.com

다음으로 화살표 함수에서 매개변수가 전혀 없으면 다음과 같이 빈 괄호를 써야 한다.

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

✔ 화살표 함수의 암시적 반환

화살표 함수를 사용하면 명시적인 반환을 생략하고 다음과 같이 반환할 수 있다.

const greeting = name - > `hello ${name}`;

ES5의 함수와 나란히 비교해보자.

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

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

두 함수 모두 결과는 같이만 화살표 함수를 사용하면 코드가 더 간결해진다.

❗ 하지만 여기서 놓치지 말아야 할 점은 코드의 간결함 보다 더 중요한 것은 가독성이다 !

혹시나 팀 단위의 프로젝트에서 모든 팀원이 ES6의 문법을 숙지하지 못했다면 다음과 같이 작성하는것도 좋다.

const arrowFuntion = (name) => {
	return `hello ${name}`;
};

그리고 만약 객체 리터럴을 암시적으로 반환해야 한다면, 다음과 같은 코드를 사용할 수 있다.

const race = "100m dash";
const runners = ["run1", "run2", "run3"];

const results = runners.map((runner, i) => ({name: runner, race, place: i+1}));

console.log(results);
// [ {name : "run1" race: "100m dash", place: 1}
// {name : "run2" race: "100m dash", place: 2}
// {name : "run3" race: "100m dash", place: 3} ]

이 예에서 map 함수를 사용하여 runners 배열에 대한 반복(순회)을 구현한다.

첫 번째 인수 runner는 배열의 현재 요소고, i는 배열의 인덱스이다.

배열의 각 원소에 대해 name, race, place 속성을 포함하는 객체를 results에 추가한다.

중괄호 안에 있는 것이 암시적으로 반환하려는 객체 리터럴임을 자바스크립트에 알리려면, 전체를 괄호 안에 감싸야한다.

여기서 race를 쓰나 race: race를 쓰나 모두 결과는 동일하다.

✔ 화살표 함수는 익명 함수

이전 예제에서 볼 수 있듯이 화살표 함수는 익명함수이다.

참조할 이름이 필요하다면 함수를 변수에 할당하면 된다.

const greeting = name => console.log(`hello ${name}`);

greeting("Tom"); // hello Tom

✔ 화살표 함수와 this 키워드

화살표 함수 내부에서 this 키워드를 사용할 때는 일반 함수와 다르게 동작하므로 주의해야 한다.

화살표 함수를 사용할 때 this키워드는 상위 스코프에서 상속된다.

이런 특성을 다음과 같은 경우에 유용하게 쓸 수 있다.

<HTML>

<div class="box open">
	This is a box
</div>

<CSS>

.opening {
	background-color: red;
}

<JS>

// box 클래스를 가진 div를 가져온다.
const box = document.querySelector(".box")

// click 이벤트 핸들러를 등록
box.addEventListener("click", function() {
	// div에 opening 클래스를 토글
    this.classList.toggle("opening");
    setTimeout(function(){
    //클래스를 다시 토글
      this.classList.toggle("opening");
  }, 500);
});

이 코드의 문제는, 첫 번째 this가 const box에 할당 되었지만 setTimeout 내부의 두 번째 this는 Window 객체로 설정되어

"Uncaught TypeError: cannot read property "toggle" of undefined" 에러가 발생한다는 점이다.

화살표 함수가 부모 스코프에서 this의 값을 상속한다는 것을 인지하면, 다음과 같이 작성할 수 있다.

const box = document.querySelector(".box")

// click 이벤트 핸들러를 등록
box.addEventListener("click", function() {
	// div에 opening 클래스를 토글
    this.classList.toggle("opening");
    setTimeout(() => { //차이점
    //클래스를 다시 토글
      this.classList.toggle("opening");
  }, 500);
});

여기서 두 번째 this는 부모로부터 상속되며 const box로 설정된다.

예제 코드를 실행하면 div가 0.5초 안에 빨간색으로 변하는 것을 볼 수 있다.

✔ 화살표 함수를 피해야 하는 경우

this 키워드의 상속에 대해 알았으니, 화살표 함수를 사용하면 문제가 될 수 있는 상황도 알아보자.

다음 예는 화살표 함수에서 this를 주의해서 사용해야 하는 경우이다.

const button = document.quertSelector("btn");
button.addEventListener("click", () => {
	//error: 여기서 this는 Window 객체를 가르킴
    this.classList.toggle("on");
});

앞서 말했듯이 화살표 함수에서 this는 상위 스코프에서 상속되므로 Window 객체를 가르킨다.

다음과 같은 예도 마찬가지다.

const person1 = {
	age: 10,
    grow: funtion() {
      this.age++;
      console.log(this.age);
    },
};

person1.grow();
// 11

const person2 = {
	age: 10,
    grow: () => {
    //error: 여기서 this는 Window 객체를 가리킴
      this.age++;
      console.log(this.age);
    },
};

person2.grow();
// error

화살표 함수와 일반 함수의 또 다른 차이점은 arguments 객체에 대한 접근 방식이다.

arguments 객체는 함수 내부에서 접근할 수 있는 배열 객체이며, 해당 함수에 전달된 인수의 값을 담고있다

간단한 예를 살펴보자.

function example() {
   console.log(arguments[0]);
}

example(1, 2, 3);
// 1

이와 같이 배열 표기법 arguments[0]을 사용하면 첫 번째 인수에 접근 할 수 있다.

this 키워드와 비슷하게, 화살표 함수에서 arguments 객체는 부모 스코프의 값을 상속한다.

앞에서 본 예제의 runners 배열을 응용한 다음 예를 살펴보자.

const showWinner = () => {
	const winner = arguments[0];
    console.log(`${winner} was the winner`);
};

showWinner("run1", "run2", "run3");

이 코드는 "RefernceError: arguments is not defined" 에러를 반환한다

함수에 전달된 모든 인수에 접근하려면, 기존 함수 표기법이나 스프레드 문법을 사용하면 된다.

여기서 arguments는 변수 이름이 아니라 키워드라는 점에 유의해야한다.

화살표 함수로 arguments에 접근하는 예는 다음과 같다.

const showWinner = (...args) => {
	const winner = args[0];
    console.log(`${winner} was the winner`);
};

showWinner("run1", "run2", "run3");
// run1 was the winner

위 함수를 일반 함수로 구현하면 다음과 같다

const showWinner = function() {
	const winner = arguments[0];
    console.log(`${winner} was the winner`);
};

showWinner("run1", "run2", "run3");
// run1 was the winner

출처 : 모던자바스크립트 핵심가이드 서적

'자바스크립트 - Vanilla JS' 카테고리의 다른 글

[자바스크립트 / Vanilla JS] 디스트럭처링이란 ? (객체 디스트럭처링, 배열 디스트럭처링) (1)	2022.09.13
[자바스크립트 / Vanilla JS] 함수 기본값 인수 (0)	2022.09.13
[자바스크립트 / Vanilla JS] this란 무엇일까 ? (0)	2022.09.07
[자바스크립트 / Vanilla JS] 객체와 객체 접근법 (점 표기법, 대괄호 표기법) (0)	2022.09.07
[자바스크립트 / Vanilla JS] 스코프(Scope) (0)	2022.08.17