๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/Vanilla JS

JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ• (28)_ Arrow function

by KASSID 2023. 8. 2.

JS์˜ Arrow function์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

 

1. Arrow Function ์ด๋ž€?

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•œ๋‹ค.

let a = ()=> {
  ...
}

a();

 

๊ธฐ์กด์˜ function( ){ ... } ๊ณผ ๋‹ค๋ฅด๊ฒŒ

=>(ํ™”์‚ดํ‘œ)๋ฅผ ์ด์šฉํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ ๋‹ค.

 

2.  Arrow Function์˜ ์žฅ์ 

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ?

 

๋จผ์ € ํ•จ์ˆ˜๋ฅผ ์–ด๋– ํ•œ ๊ฒฝ์šฐ์— ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์‚ดํŽด๋ณด๋ฉด

1. ์ฝ”๋“œ๋“ค์„ ๊ธฐ๋Šฅ์œผ๋กœ ๋ฌถ๊ณ  ์‹ถ์„ ๋•Œ / 2. ์ž…์ถœ๋ ฅ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค ๋•Œ

์‚ฌ์šฉํ•œ๋‹ค.

 

1) ์ž…์ถœ๋ ฅ ๊ธฐ๋Šฅ์„ ์ž˜ ํ‘œํ˜„ํ•˜๋Š” ๋ฌธ๋ฒ•์ด๋‹ค.

arrow function์€ ํ•จ์ˆ˜์˜ ๊ธฐ๋Šฅ ์ค‘ ์ž…์ถœ๋ ฅ ๊ธฐ๋Šฅ์„ ์ž˜ ํ‘œํ˜„ํ•ด์ฃผ๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

 

let func = (x, y) => { return x + y } // x, y๋ฅผ ๋„ฃ์œผ๋ฉด ๋‘ ๊ฐ’์„ ๋”ํ•ด์ค€๋‹ค!

 

2) ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ํ•˜๋‚˜์ผ ๊ฒฝ์šฐ ์†Œ๊ด„ํ˜ธ ์ƒ๋žต ๊ฐ€๋Šฅ

ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ํ•˜๋‚˜๋งŒ ์กด์žฌํ•  ๊ฒฝ์šฐ์—๋Š” ์†Œ๊ด„ํ˜ธ๋ฅผ ์ƒ๋žตํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

let func2 = i => {return i + 10}

 

3) ์ฝ”๋“œ๊ฐ€ ํ•œ ์ค„๋กœ ๋๋‚  ๊ฒฝ์šฐ ์ค‘๊ด„ํ˜ธ ์ƒ๋žต ๊ฐ€๋Šฅ

ํ•จ์ˆ˜์˜ ๋ณธ๋ฌธ์ด ํ•œ ์ค„๋กœ ๋๋‚˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์ค‘๊ด„ํ˜ธ๋ฅผ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ๋‹ค.

let func2 = i => return i + 10;

 

์ด๋•Œ return ํ•˜๋‚˜๋งŒ ์กด์žฌํ•  ๊ฒฝ์šฐ์—๋Š” return๋„ ์ƒ๋žต์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

let func2 = i => i + 10;

 

func2(1); //11
func2(10); //20

 

 

์˜ˆ์‹œ

let arr = [1,2,3];

arr.forEach( a => console.log(a) );

========
1
2
3

 

4) ์™ธ๋ถ€์˜ this ๊ฐ’์„ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ๊ฐ€๋Šฅ

Arrow Function์˜ ์ฃผ์š” ํŠน์ง•์€

ํ•จ์ˆ˜ ๋‚ด์—์„œ this๋Š” ์™ธ๋ถ€์˜ this๋ฅผ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด๋‹ค.

//case 1. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์•ˆ function(){}
document.getElementsByClassName("box")[0].addEventListener("click",
  function(e){
    console.log(this)
  }
)

//case 2. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์•ˆ Arrow Func
document.getElementsByClassName("box")[1].addEventListener("click",
  e => console.log(this)
)

//case 3. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์•ˆ ์ฝœ๋ฐฑํ•จ์ˆ˜๋กœ ArrowFunc
document.getElementsByClassName("box")[2].addEventListener("click", function(e){
  let arr = [1];
  arr.forEach( a => console.log(this) );
})

 

 

case1๊ณผ 2๋ฅผ ๋น„๊ตํ•ด๋ณด์•˜์„๋•Œ

1์˜ ๊ฒฝ์šฐ์—๋Š” ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋‚ด์—์„œ this์ด๋ฏ€๋กœ e.currentTarget์„ ๋ฐ˜ํ™˜ํ•˜์˜€๋‹ค.

๋ฐ˜๋ฉด 2๋Š” ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ์™ธ๋ถ€์˜ window๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

case3์ฒ˜๋Ÿผ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋‚ด์—์„œ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ

์ผ๋ฐ˜์ ์ธ function( ){ ... } ๋กœ ํ•œ ๊ฒฝ์šฐ, ์ผ๋ฐ˜ ํ•จ์ˆ˜์ด๋ฏ€๋กœ window๋ฅผ ๋ฐ˜ํ™˜ํ•˜์ง€๋งŒ

Arrow Function์€ ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ์™ธ๋ถ€์ธ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์—์„œ์˜ this ์ฆ‰, e.currentTarget์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

 

 

 

๋Œ“๊ธ€