JavaScript - 화살표 함수

1. 함수 선언식 vs 함수 표현식

함수 선언식

호이스팅 -> 함수의 선언을 코드의 최상단으로 끌어올리는 것
함수의 이름을 필수적으로 넣어주어야 한다. (익명함수 만들 수 없음)

function main() {
	console.log('hello')
}

main()

함수 표현식

함수 이름 생략 가능
호이스팅 X

const main = function() {
	console.log('hello')
}

main()

💘 화살표 함수

함수 표현식을 더 간단하게 표현한 것이다.
항상 익명함수이기 때문에 함수를 변수에 할당해주면 변수의 이름으로 호출가능하다.

const main = () => {
	console.log('hello')
}

함수 블럭 내부에 코드가 한줄이라면 중괄호와 return을 생략해줄 수 있다.

const add = (a, b) => a + b

add()

화살표함수에 매개변수가 하나뿐이라면 소괄호를 생략해도 된다.

const print = text => console.log(text)

print()

매개변수가 하나도 없거나 두개 이상이라면 소괄호를 생략할 수 없다.

const print = () => console.log('hi')

print('hi')

객체 한줄을 리턴하는 함수일 경우 중괄호만 있다면 함수에 혼란을 줄 수 있기 때문에 소괄호에 넣어준다.

const getObject = () => ({ name: '서지연' })
console.log(getObject())

2. arguments & 가변인자

function 키워드를 사용해서 정의한 일반함수는 매개변수를 따로 명시해주지 않아도 arguments라는 변수를 암묵적으로 전달받는다.
arguments 변수는 함수가 전달받은 인자를 담고있는 배열형태의 객체이다.
접근하고자 할 때에는 배열에 접근하는 것처럼 접근하면 된다.
arguments는 인자의 갯수가 정해지지 않은 가변인자가 전달되는 함수를 쓸 때 유용하게 사용할 수 있다.
화살표함수는 arguments를 전달받지 않는다.

function main() {
	console.log(arguments)
}

main(1, 2, 3)
// Arguments(3) [1, 2, 3, callee: f, symbol]...

화살표함수에 가변인자를 받고 싶다면 아래처럼 해주면 된다.
매개변수의 이름은 아무거나 설정 가능....!

const main = (...args) => {
	console.log(...args)
}

main(1, 2, 3) // [1, 2, 3]