html
JavaScript์์ Variables ๋ฐ Code Blocks ์ดํดํ๊ธฐ
๋ชฉ์ฐจ
- ์๊ฐ - ํ์ด์ง 1
- JavaScript์ Variables - ํ์ด์ง 3
- let, const, ๋ฐ var - ํ์ด์ง 4
- Variables ์ฌํ ๋น - ํ์ด์ง 6
- Code Blocks ๋ฐ Scope - ํ์ด์ง 8
- Global vs. Local Scope - ํ์ด์ง 9
- Scope Chain ์ดํดํ๊ธฐ - ํ์ด์ง 11
- ์ต๊ณ ๊ดํ - ํ์ด์ง 13
- ๊ฒฐ๋ก - ํ์ด์ง 15
์๊ฐ
JavaScript์ Variables and Code Blocks์ ๋ํ ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค. JavaScript ์ธ๊ณ์ ์ฒ์ ๋ฐ์ ๋ค์ฌ๋๋ ์ด๋ณด์๋ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ค์ง๋ ค๋ ๊ฐ๋ฐ์๋ , ์ด eBook์ ์ธ์ด ๋ด์์ variables๊ณผ code blocks์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํด๋ฅผ ๋์ด๊ธฐ ์ํด ๋ง์ถ์ด์ก์ต๋๋ค.
์ด ๊ฐ์ด๋์์๋ ๋ค์์ ํ๊ตฌํ ๊ฒ์ ๋๋ค:
- Variables ์ ์ธ์ ๋ค์ํ ์ ํ: let, const, ๋ฐ var.
- Variables ์ฌํ ๋น์ด ์ด๋ป๊ฒ ์๋ํ๋์ง.
- Code Blocks์ ์ค์์ฑ๊ณผ ๊ทธ๊ฒ๋ค์ด variable scope์ ์ ์ํ๋ ๋ฐฉ๋ฒ.
- ๊นจ๋ํ๊ณ ํจ์จ์ ์ธ JavaScript ์ฝ๋๋ฅผ ์์ฑํ๊ธฐ ์ํ ์ต๊ณ ๊ดํ.
์ด ํต์ฌ ๊ฐ๋ ๋ค์ ์ดํดํ๋ ๊ฒ์ ํจ๊ณผ์ ์ด๊ณ ์ค๋ฅ ์๋ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ํ์์ ์ด๋ฉฐ, ๊ฐ๋ฐ ๊ณผ์ ์ ๋์ฑ ์ํํ๊ณ ํจ์จ์ ์ผ๋ก ๋ง๋ญ๋๋ค.
JavaScript์ Variables
let, const, ๋ฐ var
JavaScript๋ ๋ณ์๋ฅผ ์ ์ธํ๋ ์ธ ๊ฐ์ง ์ฃผ์ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค: let, const, ๋ฐ var. ๊ฐ๊ฐ์ ๊ณ ์ ํ ๋ชฉ์ ์ ๊ฐ์ง๋ฉฐ, ์ฝ๋์ scope ๋ด์์ ๋ค๋ฅด๊ฒ ๋์ํฉ๋๋ค.
Using let
let ํค์๋๋ ์ดํ์ ์ฌํ ๋นํ ์ ์๋ variables๋ฅผ ์ ์ธํ ์ ์๊ฒ ํด์ค๋๋ค. ์ด๋ ๋ธ๋ก ์ค์ฝํ๋ฅผ ๊ฐ์ง๋ฉฐ, ์ค๊ดํธ { }๋ก ์ ์๋ code blocks์ ๊ฒฝ๊ณ๋ฅผ ์กด์คํฉ๋๋ค.
1 2 3 4 5 6 7 |
let year = 2000; console.log(year); // Output: 2000 year = 2001; console.log(year); // Output: 2001 |
Using const
const ํค์๋๋ ์ด๊ธฐ ํ ๋น ํ์ ์ฌํ ๋นํ ์ ์๋ variables๋ฅผ ์ ์ธํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. let๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก, const๋ ๋ธ๋ก ์ค์ฝํ๋ฅผ ๊ฐ์ง๋๋ค.
1 2 3 4 5 6 7 |
const year = 2000; console.log(year); // Output: 2000 // Attempting to reassign will cause an error year = 2001; // Error: Assignment to constant variable. |
Using var
var ํค์๋๋ ํจ์ ์ค์ฝํ๋ฅผ ๊ฐ์ง๋ฉฐ, variables์ ์ ์ธ๊ณผ ์ฌํ ๋น์ ๋ชจ๋ ํ์ฉํฉ๋๋ค. ๊ทธ๋ฌ๋ scope์ด let๊ณผ const๋งํผ ์์ธก ๊ฐ๋ฅํ์ง ์์์, ๋ ํฐ ์ฝ๋๋ฒ ์ด์ค์์ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์ต๋๋ค.
1 2 3 4 5 6 7 |
var year = 2000; console.log(year); // Output: 2000 year = 2001; console.log(year); // Output: 2001 |
๋น๊ต ํ: let vs. const vs. var
ํน์ง | let | const | var |
---|---|---|---|
Scope | Block-scoped | Block-scoped | Function-scoped |
Reassignment | Allowed | Not allowed | Allowed |
Hoisting | Not initialized before hoisting | Not initialized before hoisting | Initialized as undefined before hoisting |
Redeclaration | Not allowed in the same scope | Not allowed in the same scope | Allowed within different contexts |
Variables ์ฌํ ๋น
Variables ์ฌํ ๋น์ let๊ณผ var์ ์ฌ์ฉํ๋ฉด ๊ฐ๋จํฉ๋๋ค. ๊ทธ๋ฌ๋ const์ ์ฌ์ฉํ ๊ฒฝ์ฐ, ๊ฐ์ ์ฌํ ๋นํ๋ ค๊ณ ํ๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
Example with let
1 2 3 4 5 6 7 |
let year = 2023; console.log(year); // Output: 2023 year = 2024; console.log(year); // Output: 2024 |
Example with var
1 2 3 4 5 6 7 |
var year = 2023; console.log(year); // Output: 2023 year = 2024; console.log(year); // Output: 2024 |
Attempting Reassignment with const
1 2 3 4 5 6 |
const year = 2023; console.log(year); // Output: 2023 year = 2024; // Error: Assignment to constant variable. |
Code Blocks ๋ฐ Scope
Code Blocks ๋ฐ variable scope์ ์ดํดํ๋ ๊ฒ์ ๋ชจ๋ํ๋๊ณ ์ค๋ฅ ์๋ JavaScript ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
Global vs. Local Scope
ํจ์๋ block ์ธ๋ถ์์ ์ ์ธ๋ variables๋ global scope์ ์ํ๋ฉฐ, ์ฝ๋ ์ด๋์์๋ ์ ๊ทผํ ์ ์์ต๋๋ค. ๋ฐ๋๋ก, block { } ๋ด์์ ์ ์ธ๋ variables๋ local scope์ ์ํ๋ฉฐ, ํด๋น block ๋ด์์๋ง ์ ๊ทผํ ์ ์์ต๋๋ค.
Global Scope์ ์
1 2 3 4 5 6 7 8 9 |
let year = 2000; if (true) { console.log(year); // Output: 2000 } console.log(year); // Output: 2000 |
Local Scope์ ์
1 2 3 4 5 6 7 8 9 10 |
let year = 2000; if (true) { let year = 2001; // Local variable console.log(year); // Output: 2001 } console.log(year); // Output: 2000 |
Scope Chain ์ดํดํ๊ธฐ
JavaScript๋ ๋ณ์ ์๋ณ์๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด scope chain์ ๋ฐ๋ฆ ๋๋ค. ๋ณ์๊ฐ ์ ๊ทผ๋ ๋, JavaScript๋ ๊ฐ์ฅ ๋ด๋ถ์ scope๋ถํฐ ์ธ๋ถ๋ก ๊ฒ์ํ์ฌ ์ผ์นํ๋ ๋ณ์๋ฅผ ์ฐพ์ต๋๋ค.
Nested Scopes์ ์
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
let year = 2000; if (true) { let year = 2001; if (true) { let year = 2002; console.log(year); // Output: 2002 } console.log(year); // Output: 2001 } console.log(year); // Output: 2000 |
์ด ์์ ์์, ๊ฐ ์ค์ฒฉ๋ block์ ์๋ก์ด ๋ก์ปฌ ๋ณ์ year์ ์์ฑํ์ฌ ์ธ๋ถ ๋ณ์๋ฅผ ๊ฐ๋ฆฝ๋๋ค.
์ต๊ณ ๊ดํ
๊นจ๋ํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ JavaScript ์ฝ๋๋ฅผ ์์ฑํ๊ธฐ ์ํด, ๋ค์์ ์ต๊ณ ๊ดํ์ ์ค์ํ์ญ์์ค:
const
๋ฅผlet
๋ฐvar
๋ณด๋ค ์ ํธ: ์ฌํ ๋นํด์๋ ์ ๋๋ variables์๋const
๋ฅผ ์ฌ์ฉํ์ญ์์ค. ์ด๋ ์ฐ๋ฐ์ ์ธ ๋ณ๊ฒฝ ๊ฐ๋ฅ์ฑ์ ์ค์ฌ์ค๋๋ค.var
์ ์ฌ์ฉ์ ์ ํ: ํจ์ ์ค์ฝํ ๋์ ๋ฐ hoisting ๋ฌธ์ ๋ก ์ธํด,var
๋ณด๋ค๋let
๋ฐconst
๋ฅผ ์ ํธํ์ญ์์ค.- ์ค๋ช ์ ์ธ ๋ณ์ ์ด๋ฆ ์ฌ์ฉ: ๋ณ์์ ๋ชฉ์ ์ ์ ๋ฌํ๋ ์๋ฏธ ์๋ ์ด๋ฆ์ ์ ํํ์ญ์์ค.
- ๋ณ์๋ฅผ ์ ์ธํ ๋ ์ด๊ธฐํ: ์ด๋ undefined ๋ณ์๋ฅผ ๋ฐฉ์งํ๊ณ ์ฝ๋๋ฅผ ๋์ฑ ์์ธก ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
- Global Variables ํผํ๊ธฐ: ๊ณผ๋ํ global variables์ ์ฌ์ฉ์ ์ถฉ๋๊ณผ ์ ์ง๋ณด์๊ฐ ์ด๋ ค์ด ์ฝ๋๋ฅผ ์ด๋ํ ์ ์์ต๋๋ค. ๋ณ์๋ฅผ ํจ์๋ block ๋ด์ ์บก์ํํ์ญ์์ค.
- Block Scope์ ํจ๊ณผ์ ์ผ๋ก ํ์ฉ:
let
๋ฐconst
์ block-scoping์ ํ์ฉํ์ฌ variable์ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํ๊ณ ์๊ธฐ์น ์์ ๋์์ ๋ฐฉ์งํ์ญ์์ค.
1 2 3 |
const PI = 3.14; |
1 2 3 |
let currentYear = 2023; |
1 2 3 |
const userName = "John Doe"; |
๊ฒฐ๋ก
JavaScript์์ variables ๋ฐ code blocks์ ์๋ฌํ๋ ๊ฒ์ ๋ฅ์ํ ๊ฐ๋ฐ์๊ฐ ๋๋ ๋ฐ ๊ธฐ๋ณธ์ ๋๋ค. let, const, ๋ฐ var์ ์ฐจ์ด์ ์ ์ดํดํ๊ณ , scope ๋ฐ code blocks์ ๋ฏธ๋ฌํ ์ ์ ํ์ ํ๋ฉด ๋ ์์ธก ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ํญ์ var๋ณด๋ค const์ let์ ์ ํธํ์ฌ block-scoping์ ํ์ฉํ๊ณ ์ ์ฌ์ ์ธ ๋ฒ๊ทธ๋ฅผ ์ค์ด์ญ์์ค. ์ต๊ณ ๊ดํ์ ์ค์ํ๋ฉด ํ๋ก์ ํธ๊ฐ ์ฑ์ฅํจ์ ๋ฐ๋ผ ์ฝ๋๊ฐ ๊นจ๋ํ๊ณ ํจ์จ์ ์ด๋ฉฐ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์ํ๋ฅผ ์ ์งํ ์ ์์ต๋๋ค.
ํค์๋: JavaScript variables, let vs const vs var, code blocks, variable scope, JavaScript scope chain, reassigning variables, block scope, global scope, local scope, JavaScript best practices, variable declaration, programming fundamentals, beginner JavaScript, developer guide, JavaScript coding tips
์ฐธ๊ณ : ์ด ๊ธฐ์ฌ๋ AI์ ์ํด ์์ฑ๋์์ต๋๋ค.