JavaScript
Arrow Function
화살표 함수는 ES6에서 새로 추가된 기능으로 기존 함수 표현식보다 비교적 간단하게 사용 가능하다는 장점이 있다.
화살표 함수는 익명 匿 숨길 닉 名 이름 명 신분을 드러내지 않기위해 이름을 밝히지 않는 상태 함수이다.
function add(a, b) {
return a + b;
}
const add = (a, b) => {
return a + b;
}일반 함수와 화살표 함수의 차이
바인딩 bind : 묶다.
=> 바인딩이란 함수 호출과 실제 함수를 연결하는 방법이다.
=> 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩이다.
- 정적 바인딩 (Static Binding)
실행 시간 전에 일어남. 실행 시간에는 변하지 않는 상태로 유지
- 동적 바인딩 (Dynamic Binding)
실행 시간에 이루어지거나 실행 시간에 변경됨
1. this
JavaScript에서 모든 함수는 실행 될 때마다 함수 내부에 this라는 객체가 추가된다.
일반 함수의 this 바인딩 절차
1. 함수 실행 시에는, 전역(window) 객체를 가리킨다.
2. 메소드 실행 시에는 메소드를 소유하고 있는 객체를 가리킨다.
3. 생성자 실행 시에는 새롭게 만들어진 객체를 가리킨다.
※ 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
함수를 호출할 때 함수가 어떻게 호출 되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다!!
화살표 함수의 this 바인딩 절차
화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. (Lexical: 어휘의 this)
call, apply, bind 메소드를 사용하여 this를 변경 할 수 없다.
function name() {
this.name = "kim";
return {
name: "lee",
speak: function () {
console.log(this.name);
},
};
}
function arrName() {
this.name = "kim";
return {
name: "park",
speak: () => {
console.log(this.name);
},
};
}
const func = new name();
func.speak(); // lee
const arrFunc = new arrName();
arrFunc.speak(); // kim※ 일반 함수는 자신이 종속된 '객체'를 this로 가리키고 화살표 함수는 자신이 종속된 '인스턴스'를 가리킨다.
2. 생성자 함수로 사용 가능 여부
일반 함수는 생성자 함수로 사용할 수 있다.
화살표 함수는 생성자 함수로 사용할 수 없다. prototype 프로퍼티를 가지고 있지 않기 때문이다.
화살표 함수는 prototype 객체가 없다!!
const func = new name();
func.speak(); // lee
const arrFunc = new arrName();
arrFunc.speak(); // kim
function fun() {
this.num = 1234;
}
console.log(fun.prototype); // {}
console.log(fun.__proto__);
const arrFun = () => {
return 1234;
};
console.log(arrFun.prototype); // undefined
console.log(arrFun.__proto__); // {}
const a = new fun();
console.log(a.num);
// const b = new arrFun();
// console.log(b.num); error : TypeError: arrFun is not a constructor
3. arguments(인수) 사용 가능 여부
// arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.
일반 함수에서는 한수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용 가능
function checkArgs() {
// arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.
console.log(arguments.callee); // Function: checkArgs
console.log(arguments.length); // 4
console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
}
checkArgs(1, 2, 3, 4);
const checkArrArgs = () => {
console.log(arguments.callee);
console.log(arguments.length);
console.log(arguments);
};
checkArrArgs(1, 2, 3, 4);