๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- HTML,css,Javascript

[Javascript-Core] Execution Context์™€ Hoisting์˜ ์ƒ๊ด€ ๊ด€๊ณ„์™€ ์˜คํ•ด, ๊ทธ๋ฆฌ๊ณ  ์ดํ•ด ๋ถ€์ œ :: EnvironmentRecord๊ฐ€ Hoisting์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•

by Wonit 2020. 7. 28.

ํ˜ธ์ด์ŠคํŒ…(Hoisting)

ํ˜ธ์ด์ŠคํŒ…์€ ์ง€๋‚œ ์‹œ๊ฐ„์— ์ด์•ผ๊ธฐ ํ–ˆ๋˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ Creation Phase์—์„œ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๋ฐฉ์‹์ธ๋ฐ, MDN์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฒฝ๊ณ ํ•˜๊ณ  ์žˆ๋‹ค.

 

MDN-Mozilla

 

๋ณดํ†ต ์‚ฌ๋žŒ๋“ค์ด ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚˜๋ฉด ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๊ฐ€ ์ฝ”๋“œ ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค์ง„๋‹ค๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ์ด๋Š” ์ž˜๋ชป๋œ ์ •๋ณด์ด๋‹ค.


๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜ ์ฝ”๋“œ๋Š” ์‹ค์ œ ์œ„์น˜ ๊ทธ๋Œ€๋กœ ์กด์žฌํ•˜๊ณ  ๊ฐœ๋…์ ์œผ๋กœ ์ƒ๋‹จ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค์ง„๋‹ค๋ผ๊ณ  ํ‘œํ˜„ํ•˜๋Š”๊ฒŒ ์ •ํ™•ํ•˜๋‹ค.

Hoisting์„ ์ดํ•ดํ–ˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž.

MDN์—์„œ๋Š” ์œ„์™€ ๊ฐ™์€ ๋ฐฉ์‹์„ ํ˜ธ์ด์ŠคํŒ…์ด๋ผ๊ณ  ์˜ˆ์‹œ๋ฅผ ์ œ์‹œํ•˜๊ณ  ์žˆ๋‹ค.

MDN-Mozilla

๊ทธ๋Ÿผ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ๊ฐ๊ฐ์˜ x๋Š” ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ถœ๋ ฅ๋ ์ง€ ์Šค์Šค๋กœ์—๊ฒŒ ๋Œ€๋‹ตํ•ด๋ณด์ž.

๊ฒฐ๊ณผ๊ฐ€ ๋ฌด์—‡์ผ์ง€ ์ฒดํฌํ•ด๋ณด์ž.

  • 1 undefined 2
  • 1 1 2

EnvironmentRecord์— ์˜ํ•œ Hoisting

EnvironmentRecord๊ฐ€ ์ง€๋‚œ ์‹œ๊ฐ„์— ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ •๋ณด(๋ณ€์ˆ˜, ๋งค๊ฐœ๋ณ€์ˆ˜, ํ•จ์ˆ˜)๋ฅผ ๊ตฌ์„ฑํ•œ๋‹ค๊ณ  ์ด์•ผ๊ธฐ ํ–ˆ๋‹ค.

 

ํ˜ธ์ด์ŠคํŒ…๋„ ๋ฐ”๋กœ EnvironmentRecord๊ฐ€ ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•˜๋Š” ๋‹จ๊ณ„์ธ๋ฐ, ๊ทธ๋Ÿผ EnvironmentRecord๊ฐ€ ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋Œ€ํ•ด์„œ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ ์ •๋ณด๋Š” ์œ„์˜ ์ฝ”๋“œ์—์„œ ๋ฌด์—‡์ด ์žˆ์„๊นŒ?

 

  1. function a(x) ํ•จ์ˆ˜์˜ ๋งค๊ฐœ ๋ณ€์ˆ˜ x = 10์— ํ•ด๋‹นํ•˜๋Š” var x
  2. ํ•จ์ˆ˜ ๋‚ด์˜ ์„ ์–ธ๋œ ๋ณ€์ˆ˜ var x
  3. var x = 2์— ํ• ๋‹น๋œ ๋ณ€์ˆ˜ var x

๊ทธ๋Ÿผ EnvironmentRecord๊ฐ€ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•˜๋‹ค.

 

์ด ๊ฒƒ์ด ๋ฐ”๋กœ Hoisting์ด๋ผ๊ณ  ํ•œ๋‹ค.

 

๊ทธ๋Ÿผ EnvironmentRecord๊ฐ€ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ˆ˜์ง‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ ๊ฐ์ƒ‰ํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๊ฐ€ ๋‚˜์˜ฌ ๊ฒƒ์ด๋‹ค.(์‹ค์ œ๋กœ ์ด๋ ‡๊ฒŒ ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค.)

function hoisting(x) {

    var x; // 1๋ฒˆ 
    var x; // 2๋ฒˆ
    var x; // 3๋ฒˆ 

    x = 1; // ๋งค๊ฐœ๋ณ€์ˆ˜

    console.log(x); // 1

    console.log(x); // 2

    x = 2; // ๋ณ€์ˆ˜ ํ• ๋‹น

    console.log(x); // 3
}

a(1)

๊ทธ๋Ÿผ ์ด์ œ ์œ„์—์„œ ๋ณธ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋ฅผ ์ •ํ™•ํžˆ ์˜ˆ์ธกํ•  ์ˆ˜ ์žˆ๋‹ค.


์ฝ˜์†”์„ ํ†ตํ•ด์„œ ์ถœ๋ ฅ๋œ ๊ฒฐ๊ณผ์™€ ์šฐ๋ฆฌ๊ฐ€ ์˜ˆ์ธกํ•œ ๊ฒฐ๊ณผ์™€ ๋™์ผํ•œ์ง€ ์•Œ์•„๋ณด์ž.

 

๊ฒฐ๊ณผ

๊ทธ๋Ÿผ ์ด์ œ ๋‘ ๋ฒˆ์งธ ํ˜ธ์ด์ŠคํŒ…์— ๊ด€๋ จ๋œ ์ด์•ผ๊ธฐ๋ฅผ ํ•ด๋ณด์ž.

ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…

ํ•จ์ˆ˜ ํ˜ธ์ด์ŠคํŒ…๋„ ์œ„์—์„œ ๋ดค๋˜ ํ˜ธ์ด์ŠคํŒ…๊ณผ ํฌ๊ฒŒ ๋‹ค๋ฅด์ง€ ์•Š๋‹ค.

 

์ด๋ฒˆ ๋ฌผ์Œ์— ํ•œ ๋ฒˆ ๋‹ตํ•ด๋ณด์ž.

  • undefined bbb function b()
  • function b() bbb bbb

EnvironmentRecord์— ์˜ํ•œ Hoisting

๋˜ EnvironmentRecord๊ฐ€ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ณผ์ •์„ ๋ณด์ž๋ฉด,

function hoisting() {

      var b; 
    function b() {};

    console.log(b);

    b = 'bbb';

    console.log(b);

    console.lob(b);
}

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์ ์€ ๋ณ€์ˆ˜์˜ ์„ ์–ธ๋ถ€๋Š” Hoisting๋‹นํ•˜๊ณ  ํ• ๋‹น๋ถ€๋Š” ์›๋ž˜ ์ž๋ฆฌ์— ์œ„์น˜ํ•˜๋ฉฐ ํ•จ์ˆ˜ ์„ ์–ธ์€ ํ•จ์ˆ˜ ์ „์ฒด๋ฅผ ๋Œ์–ด์˜ฌ๋ฆฐ๋‹ค๋Š” ์ ์ด๋‹ค.

 

์ด์ œ ๊ฒฐ๊ณผ๋ฅผ ๋ด๋ณด์ž.

 

๊ฒฐ๊ณผ

 

์šฐ๋ฆฌ๊ฐ€ ์˜ˆ์ƒํ•œ๋Œ€๋กœ ๊ฒฐ๊ณผ๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ์ถœ๋ ฅ๋˜์—ˆ๋‹ค.


์ด๋ ‡๊ฒŒ ์‹คํ–‰ ๋ฌธ๋งฅ์˜ EnvironmentRecord๊ฐ€ ์–ด๋–ป๊ฒŒ ์‹คํ–‰ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค.


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ๋•Œ ๊ฐ€๋”, ์•„๋‹ˆ ์ด๊ฒŒ ์™œ ์ด๋ ‡๊ฒŒ ์ถœ๋ ฅ๋˜์ง€? ํ•˜๋Š” ์˜๋ฌธ์ด ๋“ค์—ˆ๋˜ ์ ์ด ์žˆ๋˜ ์‚ฌ๋žŒ์ด๋ผ๋ฉด ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ ๋งŽ์€ ๊ฒƒ์„ ์•Œ์•„๊ฐ”์œผ๋ฉด ์ข‹๊ฒ ๋‹ค.


๊ธฐ๋ณธ์ ์œผ๋กœ ์œ„์˜ ๊ธ€์€ ์ •์žฌ๋‚จ๋‹˜์˜ ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ณด๊ณ  ํ•™์Šตํ•œ ๋‚ด์šฉ๊ณผ ์—ฌ๋Ÿฌ ๋ฌธ์„œ์™€ ์ž๋ฃŒ๋“ค์„ ํ•ฉ์ณ ์ข…ํ•ฉ์ ์œผ๋กœ ๋ถ„์„ํ•œ ๊ธ€์ด๋‹ค. ์ž์„ธํ•œ ์ •๋ณด๋ฅผ ์•Œ๊ณ ์‹ถ๋‹ค๋ฉด ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ฑ…์„ ์ฐธ๊ณ ํ•˜๋Š” ๊ฒƒ๋„ ์ถ”์ฒœํ•œ๋‹ค.

๋Œ“๊ธ€