반응형
Arrow Function
- 함수를 간략히 정의할 수 있음
- 익명함수임
- function 키워드 대신 화살표를 사용
- this를 묶는것이 가능
- new 연산자로 인스턴스 생성 불가
- new 생성자와 함께 호출 할 수 없다
실행문법
- 화살표 함수 정의가 한 줄인 경우 {} 와 return 생략 가능
- 파라미터가 1개인 경우 () 생략 가능
// 기본 문법
(매개변수) => {}
// 한 줄일때 표현 ({}와 return 생략 가능)
const func = (a) => a+2
// 파라미터(매개변수)가 1개 인 경우 () 생략 가능
const func = a => ()
// 다른 선언 방법
const func = x => y => z => `${x], ${y}, ${z}`
// 일반 함수로 표현하면 아래오 같음
function func(x){
return function(y){
return function(z){
return `${x], ${y}, ${z}`
}
}
}
func(2)(4)(8)
// (key,value) object 반환 시 소괄호 사용
let get = param => ({sport:'soccer'})
// bool
(매개변수) => {
} bool 표현식 || boolean 값이 거짓을 떄 실행할 문장
화살표 함수에서 this
- 화살표 함수는 this 키워드는 상위 스코프에 상속
- this를 묶는것이 가능
- property에 화살표 함수를 연결하면 화살표 함수 블록에서 this가 인스턴스를 참조하지 못함
const box = document.querySelector('.box')
// 일반함수에서 this
box.addEventListener('click', function(){
this.style.color="red" // box를 가리킴
})
// 화살표 함수에서 this
box.addEventListener("click", ()=>{
this.style.color='red' // this가 Window 객체로 설정되어 property ~~ undefined 에러 발생
})
// 화살표 this의 적절한 활용
box.addEventListener("click", function () {
this.style.color = "red";
setTimeout(() => {
this.style.color = "black"; // 이 this는 상위스코프에 상속되어 box를 가리켜 정상 작동
}, 1000);
});
객체에서 화살표 함수의 this
const obj1 = {
num: 1,
test: function () {
this.num++; // obj1.num을 가리켜 정상 구현
console.log(this.num);
}
};
obj1.test(); // 2
const obj2 = {
num: 1,
test: ()=> {
this.num++; // this가 window 객체를 가리켜 오류 발생
console.log(this.num);
}
};
obj2.test(); // NaN
화살표 함수에서 arguments
- arguments 객체는 함수 내부에서 접근할 수 있는배열 객체로 해당 함수에 전달돼 인수의 값을 담고 있음
- 일반함수에서 arguments는 배열 표기법을 사용하여 해당 인수에 접근 가능
- 화살표 함수에서 arguments는 스프레드 문법을 활용하여 해당 인수에 접근 가능
// 일반함수의 arguments 활용
function test(){
console.log(arguments[0])
}
test(1,2) // => 1
// 화살표 함수의 arguments의 잘못된 사용
const show=()=>{
const name = arguments[0]
console.log(`name : ${name}`)
}
show('j','a','b') // 오류 :arguments is not defined
// 화살표 함수의 arguments 적절한 사용(스프레드 문법 활용)
const show2 = (...args) => {
const name = args[0]
console.log(`name : ${name}`)
}
show2('a','b','c') // name:a
반응형
'JS > Javascript' 카테고리의 다른 글
[함수] 클로저 함수 (Closure Function) (0) | 2023.02.25 |
---|---|
[함수] 중첩함수 (0) | 2023.02.25 |
[함수] 콜백(callback) 함수 (0) | 2023.02.25 |
[Javascript] 변수 (0) | 2023.02.04 |
[함수] 함수의 기본 (0) | 2023.02.04 |