๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
L'etude

Javacript : Scope ์Šค์ฝ”ํ”„

by hxunz 2022. 5. 19.
๐Ÿงฎ ์ „์—ญ์Šค์ฝ”ํ”„์™€ ์ง€์—ญ์Šค์ฝ”ํ”„

 - ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ์— ์žˆ๋Š” ์ „์—ญ ์Šค์ฝ”ํ”„๋Š” ์–ด๋””์„œ๋‚˜ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

 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

๋Œ“๊ธ€