본문 바로가기

[JS] 화살표 함수

[JS] 화살표 함수

블록스코프만 신경쓸 수 있도록 되도록 화살표 함수를 쓰자. (함수 스코프 X)

함수를 정의하는 방법에는 함수선언문과 함수표현식이 있다.

// 함수선언문
function sum (x, y) {
	return x + y;
}

// 함수표현식
const subtract = function (x, y) {
	return x - y;
}

ES6가 등장하면서 함수를 정의하는 방법이 하나 더 생겼는데 그것은 바로 화살표 함수(arrow function)이다. 함수표현식으로 함수를 정의할 때 function 키워드 대신 화살표(=>)를 사용한다. (ES6에서 새롭게 적용된 문법 중 하나이다. )

// 화살표 함수
const multiply = (x, y) => {
	return x * y;
}

이처럼 화살표 함수를 사용하면 함수표현식으로 함수를 정의할 때보다 간략하게 함수를 정의할 수 있다. 또한 화살표 함수로 함수를 정의할 때 생략할 수 있는 몇 가지 규칙이 있다. 


화살표 함수 규칙 

1. 매개변수가 한 개일 때, 소괄호(())를 생략할 수 있다.

// 매개변수가 한 개일 때, 소괄호를 생략할 수 있다.
const square = x => { return x * x }

// 아래 코드와 동일하게 동작한다.
const square = ( x ) => { return x * x }

// 단, 매개변수가 없는 경우엔 소괄호를 생략할 수 없다.
const greeting = () => { return 'hello world' }

2. return 키워드를 생략할 수 있다.

const squre = x => { x * x }

// 아래 코드와 동일하게 동작한다.
const square = function (x) {
	return x * x
}

3. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호({})를 생략할 수 있다.

const square = x => x * x

// 아래 코드와 동일하게 동작한다.
const square = function (x) {
	return x * x
}
 
728x90

'FE > JavaScript' 카테고리의 다른 글

[JS] spread/rest  (0) 2023.03.03
[JS] Spread syntax 용례  (0) 2023.03.03
[JS] 구조분해할당  (0) 2023.03.03
[JS] Scope 문제 풀이 - 다양한 패턴  (0) 2023.03.03
[JS] 클로저 활용 (함수, 커링, 모듈)  (0) 2023.03.03
⬆︎