์ต๊ทผ์ ์น ๊ฐ๋ฐ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์ ์ ๋ํ์์ ๋ค์ ์น๊ฐ๋ฐ ์์ ์ ์๋ฃ๋ค์ ๋ค์ ๋ณต์ตํ๋ค
๋ณต์ตํ ๋ด์ฉ์ ํ๋ํ๋ ๋ค์ ์ ๋ฆฌํด๋ณด๋ ค ํ๋ค
์ค๋์ JavaScript์ const, let, var์ ๋ํด์ ์ ์ด๋ณด๋ ค ํ๋ค
const
1. const๋ ์์๋ฅผ ์ ์ธํ ๋ ์ฌ์ฉํ๋ค.
2. ์ ์ธํ๊ณ ํ ๋ฒ ํ ๋น๋ ๊ฐ์ ์ฌํ ๋น(reassign)ํ ์ ์๋ค.
const x = 10;
x = 20; // ์๋ฌ: x์ ๋ค๋ฅธ ๊ฐ์ ํ ๋นํ ์ ์์
const x = 10;
x = x + 10; // ์ด๊ฒ๋ ๋ถ๊ฐ๋ฅ
ํ์ง๋ง ๋ณ์๊ฐ ๋ค๋ฅธ ๊ฐ์ ์ฐธ์กฐํ ์ ์๋๋ก ํ๋ ๊ฒ์ด์ง, ๋ณ์๊ฐ ๊ฐ๋ฆฌํค๋ ๊ฐ ์์ฒด๊ฐ ํญ์ ๋ณํ์ง ์๋๋ค๋ ๊ฒ์ ์๋๋ค
ํ๋ง๋๋ก modification์ ๊ฐ๋ฅํ์ง๋ง reassingment๋ ๋ถ๊ฐ๋ฅํ๋ค
const x = {
message: "Hello, World!",
number: 11
}
x.number = 7 // ๊ฐ๋ฅ
์ด๋ฒ์ Yootion(Notion ํด๋ก ์ฝ๋ฉ)์ ๋ง๋ค๋ฉด์ ์์ฑํ ์ฝ๋ ์ค์ ์ด๋ฐ ์ฝ๋๊ฐ ์๋ค
const [isResetting, setIsResetting] = useState(false);
์ฌ๊ธฐ์ const๋ ๋ณ์์ ์ด๋ฆ isRestting์ setIsResetting์ด ๋ค๋ฅธ ๊ฐ์ผ๋ก ์ฌํ ๋น ๋์ง ์๋๋ก ๋ง๋ ๋ค.
๋ฌด์จ ๋ง์ด๋๋ฉด ์ฌ๊ธฐ์ ๋ค๋ฅธ ๊ฐ์ ๋์ ํ๋ ๊ฒ์ด ๊ธ์ง๋๋ค๋ ๋ง์ด๋ค.
์ฌ๊ธฐ์ React์ useState์ ๋ ๊ฐ์ง ๊ฐ์ ๋ฐํํ๋ค.
์ฒซ ๋ฒ์งธ๋ ํ์ฌ ์ํ๊ฐ, ๋ ๋ฒ์งธ๋ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ํจ์์ด๋ค
์ฌ๊ธฐ์ isRestting์ ํ์ฌ ์ํ๊ฐ์ด๊ณ
setIsRestting์ ์ํ๋ฅผ ๋ณ๊ฒฝํ๋ ํจ์๋ค
setIsRestting ํจ์๋ฅผ ํธ์ถํ๋ฉด isRestting ๋ณ์๊ฐ ๊ฐ๋ฆฌํค๋ ๊ฐ์ ๋ณ๊ฒฝํ ์ ์๋ค.
์ด๋ const๋ ๋ณ์ ์ด๋ฆ์ ๋ณ๊ฒฝํ๋ ๊ฑด ๋ง์ง๋ง, ๊ฐ ์์ฒด๋ฅผ ๋ณ๊ฒฝํ๋ ๊ฒ์ ํ์ฉํ๋ค.
๊ทธ๋์ ์ด ์ฝ๋๋ฅผ ์คํํ๋ฉด ํ์ฌ ์ํ๊ฐ์ ๋ณ๊ฒฝํ ์ ์๋ค
setIsResetting(true);
let
let์ ๋ณ์์ ๊ฐ์ ์ธ์ ๋ ์ง ๋ณ๊ฒฝํ ์ ์๊ฒ ํด ์ค๋ค.
ํ์ง๋ง block scope์ด๊ธฐ์ {} ์ธ๋ถ์์๋ ์ ๊ทผํ ์ ์๋ค.
if (true) {
let x = 10;
console.log(x); // 10์ด ๋์ด
}
console.log(x); // ์๋ฌ: x๋ ์ ์๋์ง ์์
๋ณ์์ ๊ฐ์ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ ๋
let counter = 0;
function incrementCounter() {
let counter = 0; // ์ด ๋ณ์๋ ํจ์ ๋ด๋ถ์์๋ง ์ ํจํ ๋ธ๋ก ์ค์ฝํ๋ฅผ ๊ฐ์ง
counter++;
console.log("Local Counter:", counter);
}
incrementCounter(); // Local Counter: 1
console.log("Global Counter:", counter); // Global Counter: 0
var
ํ๊ต์์ ๊ต์๋์ var์ ์ฌ์ฉํ๋ ๊ฒ์ ์ง์ํ์ จ๋๋ฐ, ๊ณผ์ ์์ var์ ์ฌ์ฉํ๋ฉด ์ ์๋ฅผ ๊น์ผ์ จ๋ค
๊ทธ ์ด์ ๋ hoisting ๋๋ฌธ์ธ๋ฐ ๋น์์๋ ์ดํด๊ฐ ์ฝ๊ฒ ๋์ง๋ ์์์ ๊ทธ๋ฅ ๋ ธํธ์๋ง ์ ์ด๋จ๋๋ฐ ์ด๋ฒ ๊ธฐํ์ ์ ํํ๊ฒ ์ดํดํ๋ค
hoisting์ด๋ ๋ณ์๋ ํจ์๋ฅผ ์ค์ฝํ์ ์๋จ์ผ๋ก ๋์ด์ฌ๋ฆฌ๋ ๊ฒ์ ๋งํ๋ค.
(์ข ๋ ์ ํํ๊ฒ ์ดํดํ๊ณ ์ถ๋ค๋ฉด ๋ฐ์ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค)
https://www.w3schools.com/js/js_hoisting.asp
JavaScript Hoisting
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
์ฌ์ค const, let, var ํธ์ด์คํ ์ด ๋๋ ๊ฑด ๋๊ฐ๋ค
๊ทผ๋ฐ ์ด๊ฒ ์ ๋ฌธ์ ๋?
console.log(a); // undefined
var a = 5;
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
์ด๋ ๊ฒ ๋๋๋ฐ var์ ์ฌ์ฉํ๋ฉด ์๋ฌ๊ฐ ๋จ์ง ์์ ์ฝ๋๋ฅผ ์์ธกํ๊ธฐ๊ฐ ์ด๋ ต๋ค๋ ๋จ์ ์ด ์๋ค.
๋ํ
var a = "Hello, World";
var b = 3;
if (b > 1) {
var a = "Hi";
}
console.log(a) // Hi๊ฐ ์ถ๋ ฅ๋จ
๋ง์ฝ์ ๋ค๋ฅธ ๋ถ๋ถ์์ a๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ด๋ค ๋ถ๋ถ์์ ๊ฐ์ด ๋ณ๊ฒฝ๋๊ณ ๋ฌธ์ ๊ฐ ๋์ค๋์ง ๋ชจ๋ฅด๊ธฐ์ ๋ด๊ฐ ์์ํ ์ถ๋ ฅ๊ณผ ๋ค๋ฅด๊ฒ ๋์ฌ ์ ์๋ค.
์ ๋ฆฌ
์ผ๋จ var์ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ผ๋ก ํ๊ณ
const๋ ๊ฐ์ด ๋ณ๊ฒฝ๋์ง ์์์ผ ํ๋ ๊ฒฝ์ฐ์ ์ฌ์ฉ
let์ ๊ฐ์ด ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋์ด์ผ ํ๋ ์ํฉ์์ ์ฌ์ฉ
์ฐธ๊ณ ํ๋ฉด ์ข์ ์ฌ์ดํธ
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
const - JavaScript | MDN
The const declaration declares block-scoped local variables. The value of a constant can't be changed through reassignment using the assignment operator, but if a constant is an object, its properties can be added, updated, or removed.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
let - JavaScript | MDN
The let declaration declares re-assignable, block-scoped local variables, optionally initializing each to a value.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
var - JavaScript | MDN
The var statement declares function-scoped or globally-scoped variables, optionally initializing each to a value.
developer.mozilla.org