화살표 함수(Arrow Function) 에 대해 알아보기

1. JS에서 함수를 정의하는 방법 

 

아래와 같이 두가지 방법이 있음. 

 

1. 일반함수

function main () {
	return "hi"
}

 

2. 화살표 함수 

const main = () => "hi"

 

 

2. 함수 선언식 vs 함수 표현식 에 대해 알아보자

 

< 함수 선언식 코드 > 

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

main()

 

함수 선언식으로 작성한 함수의 특징

1) 호이스팅이 된다!

2) 함수의 이름을 넣어주어야하기 때문에 익명함수를 만들수 없다. 

 

 

< 함수 표현식 코드 > 

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

main()

 

함수 표현식으로 작성한 함수의 특징

1) 호이스팅이 되지 않음.

2) 익명함수를 만들 수 있음. 

3) 익명함수를 변수에 할당할 수 있음. 

 

3. 화살표 함수에 대해 알아보자

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

main()

 

-> 요렇게 생긴게 화살표 함수 

 

< 예시 > 

 

변경 전

function add(a, b) {
	return a + b
}

add()

 

 

변경 후

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

add()

 

 

변경전

function print(text) {
	console.log(text)
}

print("hi")

 

 

변경후

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

print("hi")

 

 

4. 일반함수와 화살표 함수의 차이점 

 

출처 : 유튜브 별코딩

 

일반함수의 경우, 인자를 담고 있는 배열형태의 객체로 인자를 가지고 있음. 

그래서 위에 사진 에서, arguments[0] 이런식으로 사용 가능함. 

 

 

출처 : 유튜브 별코딩

 

별도의 문법을 통해 가변인자를 설정해주어야함. 

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

main(1, 2, 3)