#일반 함수와 화살표 함수의 차이 1 - 문법
화살표 함수를 사용하면 일반 함수보다 간결하게 코드 작성이 가능함
■ 일반 함수
함수 선언식
- 함수 선언식으로 작성된 함수는 호이스팅되어 함수를 선언하기 전에 실행시킬 수 있음
- 익명 함수를 작성할 수 없음
1
2
3
4
5
6
7
| // 선언
function main() {
console.log("hello");
}
// 호출
main();
|
함수 표현식
- 함수의 이름을 생략해줄 수 있음 (익명함수 작성 가능)
- 호이스팅이 되지 않음
1
2
3
4
5
| const main = function () {
console.log("hello");
};
main();
|
■ 화살표 함수
- 간결하게 작성할 수 있게 해 줌
- 매개변수가 1개일 때에는 매개변수의 소괄호를 생략 가능
1
2
3
4
5
6
| const main = () => {
console.log("hello");
};
// 호출
main();
|
■ 예시 1
1
2
3
4
5
6
7
8
9
10
11
12
13
| // 일반 함수
function add(a, b) {
return a + b;
}
add();
// 화살표 함수
const add = (a, b) => {
return a + b;
};
// 더 간단하게 작성하기
const add = (a, b) => a + b;
|
■ 예시 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 일반 함수
function print(text) {
console.log(text);
}
print("hi");
// 화살표 함수
const print = (text) => {
console.log(text);
};
print("hi");
// 더 간단하게 작성하기 (매개변수가 하나라면 소괄호로 생략 가능)
const print = (text) => console.log(text);
print("hi");
|
#일반 함수와 화살표 함수의 차이 2 - arguments와 가변인자
■ 일반 함수는 arguments를 암묵적으로 전달 받음
1
2
3
4
| function main() {
console.log(arguments); // [1,2,3, ... ]
}
main(1, 2, 3);
|
■ 화살표 함수는 arguments를 전달 받지 않음
1
2
3
4
5
| const main = () => {
console.log(arguments); // arguments is not defined
};
main(1, 2, 3);
|
화살표에서 가변 인자를 처리하고 싶다면, 매개변수를 작성하면 됨
1
2
3
4
5
| const main = (...args) => {
console.log(args); // [1,2,3]
};
main(1, 2, 3);
|
#일반 함수와 화살표 함수의 차이 3 - this
this: 함수를 호출한 객체
■ 일반함수의 this
- 일반 함수의 this는 함수의 선언 위치에 상관없이, 함수를 호출하는 방법에 따라 달라진다.
- 일반 함수의 this는 함수를 호출한 객체를 가리킨다.
- 런타임 바인딩, 다이나믹 바인딩
1
2
3
4
5
6
7
8
| const object = {
name: "혜민",
main: function () {
console.log(this); // { name: '혜민', main: f }
}
};
object.main();
|
◆ 함수를 호출한 객체에 따라 변경되는 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function main() {
console.log(this);
}
const object = {
name: "혜민",
main
};
const object2 = {
name: "다른 객체",
main: main
};
object1.main(); // object
object2.main(); // object2
|
■ 화살표 함수의 this
- 화살표 함수의 this는 함수의 호출 방법에 상관 없이, 함수를 선언한 위치에 의해 결정된다. (변동되지 않음)
- 화살표 함수의 this는 함수를 감싸는 상위 스코프의 this를 그대로 가져와서 사용한다.
- 자신만의 this를 가지지 않음
- bind()를 사용할 수 없음
1
2
3
4
5
6
7
8
9
| const object = {
name: "혜민",
main: function () {
console.log(this);
},
mainArrow: () => console.log(this); // window
};
object.mainArrow()
|
1
2
3
4
5
6
7
8
9
10
11
12
| const object = {
name: "혜민",
mainArrow: () => console.log(this); // window
};
const object2 = {
name: "다른 객체",
mainArrow: object.mainArrow; // window
};
object1.mainArrow();
object2.mainArrow();
|
예제1
◆ 일반함수 innerFunction은 어떤 객체로부터 호출된 것이 아니기 때문에 this = window
1
2
3
4
5
6
7
8
9
10
| const object = {
name: "혜민",
main: function () {
function innerFunction() {
conosole.log(this); // window
}
innerFunction();
}
};
object.main();
|
◆ 일반함수 - bind 사용해서 우리가 원하는 객체로 고정시키기
1
2
3
4
5
6
7
8
9
10
| const object = {
name: "혜민",
main: function () {
function innerFunction() {
conosole.log(this); // { hi: 'hi' }
}.bind({hi:'hi'})
innerFunction();
}
};
object.main();
|
◆ 화살표 함수
화살표 함수의 this는 화살표함수를 감싸고 있는 스코프를 그대로 가져와 사용하기 때문에 this = object
1
2
3
4
5
6
7
8
9
10
| const object = {
name: "혜민",
main: function () {
const innerFunction = () => {
conosole.log(this); // { name: '혜민', main: f }
};
innerFunction();
}
};
object.main();
|
예제2
◆ 일반함수
1
2
3
4
5
6
7
8
9
| const object = {
name: "혜민",
main: function () {
setTimeout(function () {
console.log(this); // window
}, 1000);
}
};
object.main();
|
◆ 화살표 함수
1
2
3
4
5
6
7
8
9
| const object = {
name: "혜민",
main: function () {
setTimeout(() => {
console.log(this); // { name: '혜민', main: f }
}, 1000);
}
};
object.main();
|
영상
| [자바스크립트 - 화살표 함수 #1 (기본편) | 일반 함수 VS 화살표 함수](https://www.youtube.com/watch?v=mfaQOlc73pU) |
| [자바스크립트 - 화살표 함수 #2 (this 편) | 일반 함수와 화살표 함수의 THIS](https://www.youtube.com/watch?v=2lIde1abdBY) |