IT&컴퓨터공학/Javascript
[Javascript] 화살표 함수 와 일반 함수
yan_z
2021. 1. 18. 22:05
1. 일반 함수와 화살표 함수 표현
- 매개변수가 없을때
// 일반함수
function foo(){
const a = 5;
const b = 10;
console.log(a+b);
return (a+b);
}
foo();
// 화살표함수
var foo = () =>{
const a = 5;
const b = 10;
console.log(a+b);
}
foo();
- 매개변수가 있을때
// 일반함수
function foo(a,b){
console.log(a+b);
}
foo(10,100);
// 화살표함수
var foo = (a,b) => {
console.log(a+b);
}
foo(10,100);
- 더 간편하게 쓰는 화살표함수
// 기본 화살표함수
var foo = (a,b) => {
return (a+b);
}
foo(100,100);
// 함수안에 별다른 식이없고 return 밖에없으면 : 중괄호 & return 생략가능
var foo1 = (a,b) => (a+b);
foo1(10,100);
2. 화살표 함수는 this 가 바인딩 되지 않음
-일반 함수의 경우
function Person() {
// Person() 생성자는 `this`를 자신의 인스턴스로 정의.
console.log(this); // 결과 : Person{ }
setTimeout(function growUp() {
// 비엄격 모드에서, growUp() 함수는 `this`를
// 전역 객체로 정의하고, 이는 Person() 생성자에
// 정의된 `this`와 다름.
console.log(this); // 결과 : Window
}, 1000);
}
var p = new Person();
: Person 의 this 객체와 growUp 의 this 객체는 서로 다른 객체임
- 화살표 함수의 경우
function Person(){
console.log(this); // 결과 : Person{}
setTimeout(() => {
console.log(this); // 결과 : Person{}
},1000);
}
var p = new Person();
: 화살표 함수는 자신의 this 를 생성하지 않으므로 둘다 Person{} 으로 나옴
3. 화살표 함수는 arguments 가 바인딩 되지 않음
4. 화살표 함수는 new 가 되지않음 . 고로 프로토타입을 가지지않음
주의할 점
리터럴 객체 반환 시 , () 안에 반환할 리터럴 객체를 정의해야 함
// 이렇게 쓰면 안된다
var func = () => { foo : 1 };
console.log(func()); // 결과 : undefined
// 이렇게 써야함
var func1 = () => ({ foo : 1 });
console.log(func1()); // 결과 : foo : 1