์ ๋๋ ๊ณตํด์ผ์ด์์ ~~ ๋ฌผ๋ก ๋ฐ๋ธ์ฝ์ค๋ ์ด์ด์ง์ฃ ~~
์กฐ๊ธ์ ์ง์น๊ฒ ๋ง๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ด ๋์ด๊ฐ๋ค. ๋์ด๊ฐ๋ค?๋ ์ข ์ด์ํ์ง๋ง ์ฃผ์ฐจ๊ฐ ๋ฌ๋ผ์ก๋ค. ๋ง์ด ์ด๋ ค์ ์ง๋ง ์กฐ๊ธ์ด๋๋ง for, if ๋์ ์ map, filter, reduce๋ฅผ ๋์ ์จ๋ณด๋ ์ฐ์ต์ ํ๊ณ ์๊ณ , ๋ช
๋ นํ ํ๋ก๊ทธ๋๋ฐ์ ์ง์ฐ๊ธฐ ์ํด ์๊ฐ์ ์ฒ์ฒํ ํ๋ ค๊ณ ๋
ธ๋ ฅ ์ค์ด๋ค. ์ฝ 3.5๋
์ ๋ช
๋ นํ ํ๋ก๊ทธ๋๋ฐ์ผ๋ก ๋๋ฒ๊น
ํ๊ณ ์ปดํ์ผ ํ์ผ๋ ๊ทธ ์ต๊ด์ด ๋น์ฅ ๊ณ ์ณ์ง์ง ์์ํ
์ง๋ง, ์ธ์ ๊ฐ ๋๊ฒ ์ง? :>
๊ณผ์ + ์คํฐ๋ + ๊ฐ์์ ์ง์น ์๊ฐ์๋ค์ ์ํด ๊ฐ๊ฐ๋งค๋์ ๋์ ์์์ผ์ ๋ผ์ดํธํ๊ฒ ๋ง๋ค์ด์ฃผ์ จ๋์~!
์ฝ๋์ cat์ new ํค์๋๊ฐ ๋ถ์ง ์๊ณ ํธ์ถ๋ "์ผ๋ฐ ํจ์"๋ค. ์ผ๋ฐ ํจ์๋ this๊ฐ window ์ฆ ์ ์ญ๊ฐ์ฒด๋ก ํ ๋น๋๊ณ , new๊ฐ ์๊ธฐ ๋๋ฌธ์ ์ธ์คํด์ค๋ ์์ฑํ์ง ์๋๋ค. ์์ฑ๋์ง ์์ ์ธ์คํด์ค + return ๊ฐ์ด ์๋ ํจ์๋ฅผ ํ ๋น ๋ฐ์ ๋ณ์๋ ๋น์ฐํ undefined๊ฐ ๋๋ค.
์คํฌ๋ฆฝํธ ํ์ผ ์ ์ญ์ ๋ณ์, ํจ์๋ฅผ ์ ์ธํ๋ ๊ฒ์ ์ฌ์ค ์กฐ๊ธ์ ์ํํ ์ ์๋ค. ์๋ํ๋ฉด ์ ์ญ์ ์ ์ธ๋ ๋ณ์๋ ํจ์๋ ์ ์ญ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ๋๊ธฐ ๋๋ฌธ. ์ด๋ฅผ ์ง์ํ๊ธฐ ์ํด ์ฆ์ ์คํ ํจ์๋ฅผ ์ฌ์ฉํ๋ค.
๊ฐ์ฒด์ this๋ ํธ์ถํ ๋ถ๋ถ์ ์ดํด๋ณด์์ผํ๋ค. ๋ํ this๋ ํจ์ ์ค์ฝํ ์ฒด์ธ์ฒ๋ผ ์๋ก ํ๊ณ ํ๊ณ ์ฌ๋ผ๊ฐ๋๊ฒ ์๊ธฐ ๋๋ฌธ์ ๊ฐ์ฒด์ this๊ฐ ๋๊ตฌ์ธ์ง๋ฅผ ์ ํํ ์ดํด๋ด์ผํ๋ค.
์ฝ๋ฐฑ ํจ์์ this๋ undefined๋ค. ์๋ํ๋ฉด ์ฝ๋ฐฑํจ์๋ฅผ ์คํํ ์์ ํจ์ ์คํ ์ปจํ ์คํธ๋ ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋ ๋ ์คํ ์ปจํ ์คํธ ์คํ์์ ์ด๋ฏธ pop๋์ด ์๊ธฐ ๋๋ฌธ์ด๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ 3๊ฐ์ง ๋ฐฉ๋ฒ์ (1) arrow func: ํ์ดํ ํจ์๋ ์ค์ฝํ๋ฅผ ๊ฐ์ง์ง ์๊ธฐ ๋๋ฌธ์ ์ ์ญ ๊ฐ์ฒด๊ฐ this๊ฐ ๋๋ค. (2) bind: this๋ฅผ ์ ํด์ค๋ค. (3) ํด๋ก์ : let that = this; ์ ๊ฐ์ ์ฝ๋๋ก ํ์ ํจ์์๊ฒ this๋ฅผ ๋๊ฒจ์ค๋ค.
์ฝ๋ฐฑ ํจ์๊ฐ ์คํ๋ ์์ ์ ์ด๋ฏธ i = 5์ ๊ฐ์ ๊ฐ์ง๋ค. ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป๊ธฐ ์ํด์ , 3๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๋ค. (1) IIFE (2) var๋ฅผ let์ผ๋ก ๋ฐ๊พธ๊ธฐ (3) for -> forEach ๋ฐ๊พธ๊ธฐ
์ด ๋ถ๋ถ์ ๋ค์๊ธ ๊ณต๋ถํด์ผํ ๊ฒ ๊ฐ๋ค. ๐ฌ
var - ํจ์ ์ค์ฝํ, ์ ์ธ + ์ด๊ธฐํ ๋จ๊ณ๊ฐ ๋์์ ์ด๋ค์ง
let, const - ๋ธ๋ญ ์ค์ฝํ, TDZ์ ๊ฐ์ง๋ค.
ํด๋ก์ ๋ ๋ฐํ๋ ๋ด๋ถ ํจ์๊ฐ ์์ ์ด ํธ์ถ๋ ๋ ์์ปฌ ํ๊ฒฝ์ ๊ธฐ์ตํ๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ฆ, ์์ ํจ์ ์ค์ฝํ์์ ๋ฒ์ด๋ฌ์ง๋ง ๋ ์์ปฌ ํ๊ฒฝ์ ๋จ์์์ด ๋ด๋ถ ํจ์์์ ์์ ํจ์์ ์ค์ฝํ๋ฅผ ๊ธฐ์ตํ๋ค.
ํ๋ก๊ทธ๋๋จธ์ค 3์ฃผ์ฐจ๊ฐ ์์๋์๋ค. ์์์ผ์ ๊ฐ๋ณ๊ฒ ํ ์คํธ๋ก ๋์ฒด ๋์๊ณ , ๋๋ถ์ ์ด ์๊ฐ์ด ์๊ฒจ์ ๋ค์๊ธ ๋ง์์ ๋ค ์ก๊ณ ! ๊ณต๋ถ๋ฅผ ์์ํ๊ธฐ๋ก ํ๋ค. 3์ฃผ์ฐจ ์ฃผ์ ๋ ๋ฐ๋๋ผ JS ๊ธฐ๋ณธ ์ญ๋ ๊ฐํ๋ก, ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ? ์ ๋ํด ๋ฐฐ์ฐ๋ ๋ฏ ํ๋ค. ์ค๋์ ๋ช ๋ นํ๊ณผ ์ ์ธํ์ ๊ฐ๋จํ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๊ณ ๋์ ์ฐจ์ด์ ์ ๋น๊ตํ ๋ค ๊ฐ๋จํ ๋ฒํผ์ ์ ์ธ์ ์ผ๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํ ์ค์ต์ ํ๋ค. 2์ฃผ์ฐจ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ํ๋ฉด์ for, if๋ฅผ ๋์ ํด map, reduce, filter์ ๊ฐ์ ํจ์๋ฅผ ์ฌ์ฉํ๋ ๋๋?์ ์ด๋์ ๋ ๋ฐ์๋ค๊ณ ์๊ฐํ๋๋ฐ, ์ด๋ ๊ฒ ์ผ๋ฐ์ ์ธ ์ฝ๋๋ก ๋์ด์ค๊ฒ ๋๋ฉด ๋ ๊ทธ ๊ฐ์ด ์ฌ๊ธ์ฌ๊ธ ์ฌ๋ผ์ง๋ ๊ธฐ๋ถ์ด๋ค. (๋๋์ฒด ์ ์ธํ... ๋ฌด์...)
๋ญ ํ๋ค๊ณ ๋ฒ์จ ์์์ผ์ธ๊ฐ์? ๋ฐ๋ธ์ฝ์ค์ ~ ํจ๊ปํ๋ ~ ์ผ์ ~ ๋ ~ ์ค๊ฐ ๊ณ ์ฌ ~ ๊ฐ์ ~ ๊ฑธ ~ !
3์ฃผ์ฐจ๊ฐ ๋๊ณ ๋์ ๊ฐ์ ๋์ด๋์ ์์ด ์ค์๋ค. ์๊ฐ๋ ์ ๋ฒ์ฃผ๋ณด๋จ ๋ง์ด ๋จ์์ ๋ฏธ๋ค๋๋ ํ๊ณ ์ถ์๋ ๊ณต๋ถ์, ์ด์ ํน๊ฐ + ๊ณ ๋ฏผ์๋ด์ ์งํ์ผ๋ก ์ป์ ๊ฒ๋ค์ ๋ํด ์๊ฐ์ ํ๋ ์ค์ด๋ค. ๊ฐ๋ฐ์๋ก ์ด์๊ฐ๋ค๋ ๊ฒ. ์ ํฐํ๋. ์๋ผ๋ฒจ๋ฑ ๊ฐ๋ฐ์๋ก์จ์ ๋ง์ ๊ฒ์ ์ป๊ธฐ๋ ํ์ง๋ง ๊ฐ๋ฐ์ ์
์ผ๋ก ์ผ๋ ์ด๋ฅธ์ ๋ง์ ๋ค์ ๊ธฐ๋ถ? ์ฝ๋๋ ๋๊ตฌ๋ ์งค ์ ์์ง๋ง ๊ฐ๋ฐ์ ๋๊ตฌ๋ ์ฝ๊ฒ ํ ์ ์๋ค. ๋๋ ๊ฐ๋ฐ์ ์ ํ๊ณ ์ถ๋ค!
์ธ๋ฒ์งธ ๋ฉํ ๋๊ณผ ์ปคํผ์ฑ์ด ์งํ๋ ๋ ์ด๋ค. ๋ฉํ ๋์ kdt๋ง๊ณ ๋ ๋ค๋ฅธ ๋์๋ฆฌ์์ ์ด์์ง์ผ๋ก ํ๋ํ๊ณ ๊ณ์๋ ํ์ ๊ฐ๋ฐ์์ ๋ฐ, ์ค๋์ ๋ฉํ ๋์ ์ทจ๋ฏธ๋ถํฐ ์ธ์คํ๊ทธ๋จ ํ๋ฐฉ์ ํตํด ๋ฉํ ๋๊ณผ ๋ฆฌ๋ชจํธ ์น๋ฐ๊ฐ์ด ํ์ฑ๋ ๋ ์ด๋คใ ใ ใ ใ :) ๋ฉํ ๋์ ๋ฎค์ง์ปฌ, ์ฝ์ํธ๋ฅผ ์ข์ํ์๊ณ ์ปคํผ๋ฅผ ์ข์ํ์ ๋ค. ์ธ์คํ๊ทธ๋จ์ ํตํด ๋ฉํ ๋์ ์์ด๋ดํฐํฐ์ ๊ฐ๋ฐ์ ์ ๋ง ์ฆ๊ฑฐ์ํ์๋ ๋ฏํ ๋๋์ ๋ฐ์ ์ ์์๋ค. ์ง๊ธ์ "๊ฐ๋ฐ์"๊ฐ ๋๋๊ฒ ๋ชฉํ๋ผ ์ฌ์ ๊ฐ ์์ง๋ง, ๊ผญ ๋๋๊ณ ์ด๊ณ ๐ ์ฆ๊ฒ๊ฒ ์ด๊ณ ๐ ์ทจ๋ฏธ๋ก ๋์ ํธ ์นดํ๋ฅผ ์ด์ํ๋ ๐ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๊ณ ์ถ๋ค.