๋ชฉ์ฐจ
์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์
๋ณ์(variable)๋ ๋ง ๊ทธ๋๋ก ๋ณํ๋ ์, ๊ฐ์ ์ ์ฅํ๊ธฐ ์ํด ํ๋ณดํ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ ๋๋ ๊ทธ ์ฃผ์๋ฅผ ์๋ณํ๊ธฐ ์ํด ๋ถ์ธ ์ด๋ฆ์ด๋ค.
const myVar = 'hello'; // ๋ณ์๋ช
: myVar // ๋ฉ๋ชจ๋ฆฌ ์ฃผ์(์์น): 0x00000010 // ๋ณ์ ๊ฐ: hello
โ ๋ณ์์ ์ ์ธ(declaration)
๋ณ์๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ ์์ง(์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ํด์ํ๋ ๋๊ตฌ)์ ์ด๋ฆ์ด '๋ณ์๋ช '์ธ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ๋ง๋ จํ๋๋ก ํ๋ ๊ฒ์ ๋ณ์๋ฅผ ์ ์ธํ๋ค๊ณ ํ๋ค. ๋ณ์์ ์ ์ธ๊ณผ ๋์์ ๊ฐ์ ํ ๋นํ๋ ๊ฒ์ ์ด๊ธฐํํ๋ค๊ณ ํํํ๋ค.
var ๋ณ์์ ๊ฒฝ์ฐ ๋ฐ๋ก ์ด๊ธฐํํ์ง ์์ผ๋ฉด undefined๋ฅผ ํ ๋นํด ์ด๊ธฐํํ๋ค.
๋ฐ๋ฉด let, const ๋ณ์๋ ์ด๊ธฐํ๋์ง ์์ ์ํ๋ก ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋์ด ์ฐธ์กฐํ ๊ฒฝ์ฐ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
var myVar; console.log(myVar); // undefined const yourVal; console.log(yourVal); // Uncaught SyntaxError: Missing initializer in const declaration
โ ๋ณ์์ ํ ๋น(assignment)
ํ ๋น ์ฐ์ฐ์(=)๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ์์ ๊ฐ์ ์ ์ฅํ๋ ๊ฒ์ ํ ๋นํ๋ค๊ณ ํํํ๋ค.
๋ณ์์ ์ ์ฅ๋ ๊ฐ์ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ณ๊ฒฝํ๋ ๊ฒ์ ์ฌํ ๋นํ๋ค๊ณ ํํํ๋ค.
์ ์ธ์ ๋ฐํ์ ์ด์ ์ ์คํ๋๊ณ ํ ๋น์ ์์ค์ฝ๋๋ฅผ ์์ฐจ์ ์ผ๋ก ์ฝ์ผ๋ฉฐ ๋ฐํ์์ ์คํ๋๋ค. (์ ์ธ๊ณผ ํ ๋น์ ํ๋์ ๊ตฌ๋ฌธ์ผ๋ก ํํํ๋๋ผ๋)
โ ๋ณ์์ ์ฐธ์กฐ(reference)
๋ณ์์ ์ ์ฅ๋ ๊ฐ์ ์ฝ๋ ๊ฒ์ ๋ณ์๋ฅผ ์ฐธ์กฐํ๋ค๊ณ ํํํ๋ค.
ํธ์ด์คํ (hoisting)
var ๋ณ์ ์ ์ธ๊ณผ ํจ์ ์ ์ธ์ด ํด๋น ์ค์ฝํ ๋ด ์ต์๋จ์ ์๋ ๊ฒ ๊ฐ์ ํ์์ ํธ์ด์คํ ์ด๋ผ๊ณ ํ๋ค.
// ๋ณ์ ์ ์ธ ์ console.log(myVar); // undefined // ๋ณ์ ์ ์ธ ํ var myVar; console.log(myVar); // undefined
์์๋ฅผ ๋ณด๋ฉด ๋ณ์๋ฅผ ์ ์ธํ๊ธฐ ์ ์๋ undefined๋ก ํ ๋น๋์ด ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฝ๋๋ฅผ ์คํํ๊ธฐ ์ Parser ๋ด๋ถ์ ์ผ๋ก ๋ชจ๋ ์ ์ธ์ ๋ชจ์ ์ต์๋จ์ ์ ์ฅํ๊ณ ๊ธฐ์ตํ๊ณ ์๋ค๊ฐ ์คํ์ํจ๋ค. ๋ฐ๋ผ์ ์ฝ๋ ์คํ ์ ์ด๋ฏธ ์ ์ธ๋ค์ ๋ชจ๋ ์ ์ฅํ๊ธฐ ๋๋ฌธ์ ์ ์ธ ์ ์ฐธ์กฐ๋ฅผ ํ๋๋ผ๋ ์ค๋ฅ ์์ด ๋์ํ๋ค.
func1(); // hello func2(); // Uncaught TypeError: func2 is not a function // ํจ์ ์ ์ธ๋ฌธ function func1() { console.log("hello"); } // ํจ์ ํํ์ var func2 = function() { console.log("bye"); } func2(); // ์ฝ๋ ์คํ ์์ ์ ์ด๊ธฐํ ํ์ ์์นํ๋ฏ๋ก bye ์ถ๋ ฅ
๊ฐ์ ๋งฅ๋ฝ์์ ํจ์ ์ ์ธ๊ณผ ํจ์ ํํ์์ ๋ณ์์ ์ ์ฅํ๋ ๊ฒ์ ์ฐจ์ด๊ฐ ์๋ค.
func1์ JS Parser ๋ด๋ถ ํธ์ด์คํ ์ด ๋ฐ์ํด ์ ์ธ ์ ์ ํธ์ถํ๋๋ผ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ง ์๋๋ค.
func2๋ ์ต๋ช ํจ์๋ฅผ ๋ณ์์ ์ด๊ธฐํํ๋ ์ฝ๋ ์ด์ ์ ํธ์ถํ ๊ฒฝ์ฐ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.
์ฝ๋์ ๊ฐ๋ ์ฑ๊ณผ ์ ์ง๋ณด์๋ฅผ ์ํด ๋๋๋ก ํธ์ด์คํ ์ด ์ผ์ด๋์ง ์๋๋ก ํด์ผ ํ๋๋ฐ, ํจ์๋ ๋ณ์๋ฅผ ๊ฐ๊ธ์ ์ฝ๋ ์๋จ๋ถ์ ์ ์ธํ๊ณ var ๋ณ์ ๋์ const๋ let ๋ณ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
var, let, const ์ฐจ์ด
const์ let์ ES6์์ ์ถ๊ฐ๋์๋ค.
var | let | const | |
์ค๋ณต ์ ์ธ | ๊ฐ๋ฅ | ๋ถ๊ฐ๋ฅ | ๋ถ๊ฐ๋ฅ |
์ฌํ ๋น | ๊ฐ๋ฅ | ๊ฐ๋ฅ | ๋ถ๊ฐ๋ฅ |
์ค์ฝํ ์ ํจ๋ฒ์ | ํจ์ ๋ ๋ฒจ ์ค์ฝํ | ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ | ๋ธ๋ก ๋ ๋ฒจ ์ค์ฝํ |
ํธ์ด์คํ | ๋ฐ์ (์ ์ธํ๊ณ undefined๋ก ์ด๊ธฐํ) |
๋ฐ์ (์ ์ธ๋ง ํ๊ณ ์์ฐจ์ ์ผ๋ก ์ฝ๋ ์คํ ๊ณผ์ ์์ ์ด๊ธฐํ) |
๋ฐ์ (์ ์ธ๋ง ํ๊ณ ์์ฐจ์ ์ผ๋ก ์ฝ๋ ์คํ ๊ณผ์ ์์ ์ด๊ธฐํ) |
์ ์ญ๊ฐ์ฒด ํ๋กํผํฐ ์ฌ๋ถ | O | X | X |
๊ฐ์ ์ฌํ ๋นํ๋ ๊ฒฝ์ฐ์๋ let, ์๋ ๊ฒฝ์ฐ์๋ const๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข๋ค.
โ var ๋ณ์
// 1. ์ค๋ณต์ ์ธ var test1 = 1; console.log(test1); // 1 var test1 = 2; // ๋ง์ง๋ง์ ํ ๋น๋ ๊ฐ console.log(test1); // 2 var test1; // ์ ์ธ๋ง ํ ๊ฒฝ์ฐ ์ ์ธ๋ฌธ ์์ฒด๊ฐ ๋ฌด์๋จ console.log(test1); // 2 // 2. ์ฌํ ๋น var test2 = 1; test2 = 100; // ๊ฐ ๋ณ๊ฒฝ ๊ฐ๋ฅ(์ฌํ ๋น) console.log(test2); // 100 // 3. ์ค์ฝํ ์ ํจ๋ฒ // ํจ์ ๋ฐ์์ ์ฐธ์กฐ ๋ถ๊ฐ function test3() { var x1 = 100; console.log(x1); } test3(); // 100 // console.log(x1); // Uncaught ReferenceError: x1 is not defined // ๋ธ๋ก ๋ฐ์์ ์ฐธ์กฐ ๊ฐ๋ฅ if (true) { var x2 = 200; } console.log(x2); // 200 // 4. ํธ์ด์คํ
for (var i=0; i < 10; i++) { // console.log('i: ' + i) } console.log('after i: ' + i) // after i: 10 // 5. ์ ์ญ๊ฐ์ฒด ํ๋กํผํฐ ์ฌ๋ถ(๋ธ๋ผ์ฐ์ ํ๊ฒฝ) var test5 = 5; console.log(window.test5); // 5
โ let ๋ณ์
// 1. ์ค๋ณต์ ์ธ let test1 = 1; // let test1 = 2; // Uncaught SyntaxError: Identifier 'test1' has already been declared // 2. ์ฌํ ๋น let test2 = 1; test2 = 100; // ๊ฐ ๋ณ๊ฒฝ ๊ฐ๋ฅ(์ฌํ ๋น) console.log(test2); // 100 // 3. ์ค์ฝํ ์ ํจ๋ฒ // ํจ์ ๋ฐ์์ ์ฐธ์กฐ ๋ถ๊ฐ function test3() { let x1 = 100; console.log(x1); } test3(); // 100 // console.log(x1); // Uncaught ReferenceError: x1 is not defined // ๋ธ๋ก ๋ฐ์์ ์ฐธ์กฐ ๋ถ๊ฐ if (true) { let x2 = 200; } // console.log(x2); // Uncaught ReferenceError: x2 is not defined // 4. ํธ์ด์คํ
for (let i=0; i < 10; i++) { console.log('i: ' + i) } // console.log('after i: ' + i) // Uncaught ReferenceError: i is not defined // 5. ์ ์ญ๊ฐ์ฒด ํ๋กํผํฐ ์ฌ๋ถ(๋ธ๋ผ์ฐ์ ํ๊ฒฝ) let test5 = 5; // ์ ์ญ๊ฐ์ฒด ํ๋กํผํฐ๊ฐ ์๋ console.log(window.test5); // undefined
โ const ๋ณ์
// 1. ์ค๋ณต์ ์ธ const test1 = 1; // const test1 = 2; // Uncaught SyntaxError: Identifier 'test1' has already been declared // 2. ์ฌํ ๋น const test2 = 1; // test2 = 100; // Uncaught TypeError: Assignment to constant variable. console.log(test2); // 1 // 3. ์ค์ฝํ ์ ํจ๋ฒ // ํจ์ ๋ฐ์์ ์ฐธ์กฐ ๋ถ๊ฐ function test3() { const x1 = 100; console.log(x1); } test3(); // 100 // console.log(x1); // Uncaught ReferenceError: x1 is not defined // ๋ธ๋ก ๋ฐ์์ ์ฐธ์กฐ ๋ถ๊ฐ if (true) { const x2 = 200; } // console.log(x2); // Uncaught ReferenceError: x2 is not defined // 4. ํธ์ด์คํ
// ํธ์ด์คํ
์ด ๋ฐ์ํ์ง๋ง ๋ณ์๊ฐ ์ ์ธ์ ๋์๊ณ ์ด๊ธฐํ๊ฐ ์๋์ด์์ // console.log(test4); // Cannot access 'test4' before initialization const test4 = 10; // 5. ์ ์ญ๊ฐ์ฒด ํ๋กํผํฐ ์ฌ๋ถ(๋ธ๋ผ์ฐ์ ํ๊ฒฝ) const test5 = 5; // ์ ์ญ๊ฐ์ฒด ํ๋กํผํฐ๊ฐ ์๋ console.log(window.test5); // undefined
์ฐธ๊ณ ์๋ฃ ๋ฐ ์ถ์ฒ ๐โโ๏ธ
https://www.howdy-mj.me/javascript/var-let-const/
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://curryyou.tistory.com/192
'๊ฐ๋ฐ > Javascript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ES6 Syntax (0) | 2022.05.03 |
---|---|
TypeScript (0) | 2022.04.28 |
์๋ฐ์คํฌ๋ฆฝํธ ๋น๋๊ธฐ ์ฒ๋ฆฌ / Promise / async / await / fetch (0) | 2022.04.20 |
Promise ํจํด (0) | 2022.04.14 |
javascript ํจ์ํ ํ๋ก๊ทธ๋๋ฐ (0) | 2022.02.06 |
๋๊ธ