화살표 함수에 없는 것
1. 함수 이름
함수에 이름을 주는게 가능했지만
function myFunc(){}
화살표 함수는 익명함수이다.
() => {}
이름을 주려면 요렇게 써야한다.
const myFunc = () => {}
2. this
var btn = document.getElementById('btn');
var obj = {
count : 3,
setCounter : function(){
console.log(this.count); // 3 (this = obj);
btn.addEventListener('click', function(){
console.log(this); // btn
}
// btn에서 this를 obj로 쓰려면 bind한다.
btn.addEventListener('click', (function(){
console.log(this); // obj
}).bind(this));
// 화살표 함수에선 bind 없이도 this는 obj이다.
}
}
this가 없기 때문에 new를 쓸 수 없다. (프로토타입도 없는 것)
const myFunc = function(){
this.~~
}
new myFunc();
3. arguments
var myFunc = function(){
console.log(arguments); // 1,2,3,4 배열은 아닌데 배열처럼 접근할 수 있게 보여줌.
}
myFunc(1,2,3,4);
const myFunc = () =>{
console.log(arguments); // 없음!
}
myFunc(1,2,3,4);
function outter(){
const myFunc = () =>{
console.log(arguments); // 1,2,3,4 자기한테 없어서 outter꺼 참조함
}
}
outter(1,2,3,4)
const myFunc = (...args) = > {
console.log(args); // 1,2,3,4 배열
}
myFunc(1,2,3,4);
화살표 함수의 장점
1. 타이핑 수가 줄어든다
2. this bind 안해도 된다.
this를 변수에 담아서 다른 곳에서 쓰고 그런거 안해도 된다는 것.
'UI개발' 카테고리의 다른 글
자바스크립트 객체지향 - 생성자와 new (0) | 2020.08.23 |
---|---|
자바스크립트 객체지향프로그래밍 (0) | 2020.08.23 |
UX/UI 기획을 위한 제반 이론 (0) | 2018.11.22 |
자바스크립트 참조타입 (0) | 2017.08.21 |
자바스크립트 배열 (0) | 2017.07.09 |