๐งฎ ์ ์ญ์ค์ฝํ์ ์ง์ญ์ค์ฝํ
- ๊ฐ์ฅ ๋ฐ๊นฅ์ชฝ์ ์๋ ์ ์ญ ์ค์ฝํ๋ ์ด๋์๋ ์ ๊ทผ์ด ๊ฐ๋ฅํ๋ค.
ex) let number = 'one';
- ์ด๋์๋ ๋ณ๊ฒฝ๋ ๊ฐ๋ฅํ๋ค. ์ด๋์๋ ์ฌ์ ์๊ฐ ๊ฐ๋ฅํ๋ค๋ ๊ฒ์ด ํฐ ๋จ์
- ์์ธก ๋ถ๊ฐ๋ฅํ๋ค.
- ์ง์ญ ์ค์ฝํ๋ ํจ์ ์ค์ฝํ ํน์ ๋ธ๋ก ์ค์ฝํ๋ผ๊ณ ๋ ํ๋ค.
ex) {} ํน์ function func() {} ํน์ if๋ฌธ๋ ๋ธ๋ก์ค์ฝํ๋ผ๊ณ ํ ์ ์๋ค.
- ์์ธก ๊ฐ๋ฅํ๋ค
+๋ฐํ์ : ํ๋ก๊ทธ๋จ์ด ๋์๋๋ ์์
๐งฎ ์ ์ญ๊ฐ์ฒด
1. ๋ธ๋ผ์ฐ์ ํ๊ฒฝ
- ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์ ์ ์ญ๊ฐ์ฒด๋ window ์ด๋ค.
- window ๊ฐ์ฒด
2. NodeJS ํ๊ฒฝ
- this๋ฅผ ์ ์ญ๊ณต๊ฐ์์ ํธ์ถํ๊ฒ ๋๋ฉด ๋ธ๋ผ์ฐ์ ์์ window๋ฅผ ํธ์ถํ๊ฒ๋๋ค.
- global ๊ฐ์ฒด
๐งฎ ํธ์ด์คํ
- ์ธํฐํ๋ฆฌํฐ๊ฐ ๋ณ์์ ํจ์์ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์ ์ธ ์ ์ ๋ฏธ๋ฆฌ ํ ๋นํ๋ ๊ฒ์ ์๋ฏธํ๋ค.
function func() {
console.log(hoist);
var hoist = 'hoisting';
console.log(hoist);
}
์ด๋ ๊ฒ ์ฝ๋๋ฅผ ์์ฑํ์ ๋ ์๋ฌ๊ฐ ๋์ง ์๋๋ค.
ํธ์ด์คํ ์ด ์ผ์ด๋๋ ์ด์ ?
์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ณ์ ์ ์ธ์ ์ง์ ์ ์ผ๋ก ๋์ด์ฌ๋ฆฐ๋ค.
๊ทธ๋์ ์์ ์ฝ๋๋ฅผ ๋ณด๋ฉด let hoist ๋ถ๋ถ๋ง ์๋ก ๋์ด์ฌ๋ ค์ง๋ค.
๊ฒฐ๊ตญ var hoist ์ ์ธ -> hoist ํธ์ถ -> hoist = 'hoisting' ํ ๋น -> hoist ํธ์ถ ์ด๋ฐ ํํ
var๋ฅผ ์ฐ์ง ์๋๊ฒ๋ง์ผ๋ก ํธ์ด์คํ ์ ๋ฐฉ์งํ ์ ์๋ค.
์์ ์ฝ๋์์ var ๋์ let์ ์ฌ์ฉํด์ฃผ๋ฉด ์๋ฌ๊ฐ ๋ ๊ฒ
์ด๊ฒ์ ์์์ ์ฌ๊ฐ ์ง๋ TDZ ๋ผ๊ณ ํ๋ค.
๋ด๋ถ์ ์ผ๋ก ํธ์ด์คํ ์ด ์ผ์ด๋์ง๋ง ๋ณด์ด์ง ์๋ ๊ฒ์ฒ๋ผ ์ฌ์ฉ์์๊ฒ ์๋ฌ๋ฅผ ๋์ ธ์ค์ ๋ง์์ค๋ค.
ํธ์ด์คํ ์ ๋ง์์ฃผ๊ธฐ ์ํด์ let๊ณผ const๋ฅผ ์ฌ์ฉํ๋๊ฒ์ด ์ข๋ค.
๐งฎ IIFE
- Immediately Invoked Function Expression ์ฆ์ ์คํ ํจ์ ํํ
- ํจ์๋ฅผ ๊ดํธ ์์ ๋ฃ๊ณ ๋ฐ๋ก ์คํ์์ผ์ค๋ค.
- ์ผ์ข ์ ๋ธ๋ญ ์ค์ฝํ๋ฅผ ํ๋ด๋ด๋ ์๋ก์ด ์ค์ฝํ๋ฅผ ๋ง๋ค์ด๋ธ๋ค๊ณ ๋ณผ ์ ์๋ค.
IIFE ์ฌ์ฉํ๋ ์ด์ ?
- ๊ณต๊ฐ์ ์์ ํ ๋ถ๋ฆฌํ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค. ํจ์ ๊ณต๊ฐ์ ์์ผ๋ฉด ๋ช ํํ๊ฒ ์๋ก์ด ์ค์ฝํ๋ฅผ ๋ง๋ค์ด๋ผ ์ ์๋ค.
- ๋ฌด์ธ๊ฐ ์จ๊ฒจ์ผํ ๋ฐ์ดํฐ๋ฅผ ๋ฃ์๋ ์ฌ์ฉํ๊ธฐ ์ข๋ค. ์จ๊ฒจ์ง ๋ฐ์ดํฐ๋ ์จ๊ฒจ์ง ๋ณ์๋ฅผ ์ ์ฅํ ๋ ์ฐ๊ธฐ ์ข๋ค.
(function() { //IIFE ์์
//IIFE ๋ด๋ถ ๋์ ์ฝ๋
})(๋งค๊ฐ๋ณ์); // IIFE ์ข
๋ฃ
- ์ฆ์ ์คํ ํจ์๋ฅผ ์ฌ์ฉํ ๋๋ ์ฒ์์ด๋ ๋์ ์ธ๋ฏธ์ฝ๋ก ์ ๋ถ์ฌ์ ์์ญ์ด ์นจ๋ฒ๋์ง ์๋๋ก ์ฃผ์ํด์ผํ๋ค.
'L'etude' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Javascript : this (0) | 2022.05.23 |
---|---|
Javascript : Ajax (0) | 2022.05.20 |
Currying ์ปค๋ง (0) | 2022.05.18 |
๋งค์ง๋๋ฒ/๋งค์ง๋ฆฌํฐ๋ด (0) | 2022.05.18 |
Material UI Modal: BackdropProps (0) | 2022.05.16 |
๋๊ธ