S05L02 – ๋ณ€์ˆ˜์™€ ์ฝ”๋“œ ๋ธ”๋ก

html

JavaScript์—์„œ Variables ๋ฐ Code Blocks ์ดํ•ดํ•˜๊ธฐ

๋ชฉ์ฐจ

  1. ์†Œ๊ฐœ - ํŽ˜์ด์ง€ 1
  2. JavaScript์˜ Variables - ํŽ˜์ด์ง€ 3
  3. Code Blocks ๋ฐ Scope - ํŽ˜์ด์ง€ 8
  4. ์ตœ๊ณ  ๊ด€ํ–‰ - ํŽ˜์ด์ง€ 13
  5. ๊ฒฐ๋ก  - ํŽ˜์ด์ง€ 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์˜ ๊ฒฝ๊ณ„๋ฅผ ์กด์ค‘ํ•ฉ๋‹ˆ๋‹ค.

Using const

const ํ‚ค์›Œ๋“œ๋Š” ์ดˆ๊ธฐ ํ• ๋‹น ํ›„์— ์žฌํ• ๋‹นํ•  ์ˆ˜ ์—†๋Š” variables๋ฅผ ์„ ์–ธํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. let๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, const๋„ ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

Using var

var ํ‚ค์›Œ๋“œ๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๋ฉฐ, variables์˜ ์„ ์–ธ๊ณผ ์žฌํ• ๋‹น์„ ๋ชจ๋‘ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ scope์ด let๊ณผ const๋งŒํผ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜์ง€ ์•Š์•„์„œ, ๋” ํฐ ์ฝ”๋“œ๋ฒ ์ด์Šค์—์„œ ์ž ์žฌ์ ์ธ ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋น„๊ต ํ‘œ: 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

Example with var

Attempting Reassignment with const


Code Blocks ๋ฐ Scope

Code Blocks ๋ฐ variable scope์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์€ ๋ชจ๋“ˆํ™”๋˜๊ณ  ์˜ค๋ฅ˜ ์—†๋Š” JavaScript ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.

Global vs. Local Scope

ํ•จ์ˆ˜๋‚˜ block ์™ธ๋ถ€์—์„œ ์„ ์–ธ๋œ variables๋Š” global scope์— ์†ํ•˜๋ฉฐ, ์ฝ”๋“œ ์–ด๋””์—์„œ๋‚˜ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ˜๋Œ€๋กœ, block { } ๋‚ด์—์„œ ์„ ์–ธ๋œ variables๋Š” local scope์— ์†ํ•˜๋ฉฐ, ํ•ด๋‹น block ๋‚ด์—์„œ๋งŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Global Scope์˜ ์˜ˆ

Local Scope์˜ ์˜ˆ

Scope Chain ์ดํ•ดํ•˜๊ธฐ

JavaScript๋Š” ๋ณ€์ˆ˜ ์‹๋ณ„์ž๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด scope chain์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๊ฐ€ ์ ‘๊ทผ๋  ๋•Œ, JavaScript๋Š” ๊ฐ€์žฅ ๋‚ด๋ถ€์˜ scope๋ถ€ํ„ฐ ์™ธ๋ถ€๋กœ ๊ฒ€์ƒ‰ํ•˜์—ฌ ์ผ์น˜ํ•˜๋Š” ๋ณ€์ˆ˜๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค.

Nested Scopes์˜ ์˜ˆ

์ด ์˜ˆ์ œ์—์„œ, ๊ฐ ์ค‘์ฒฉ๋œ block์€ ์ƒˆ๋กœ์šด ๋กœ์ปฌ ๋ณ€์ˆ˜ year์„ ์ƒ์„ฑํ•˜์—ฌ ์™ธ๋ถ€ ๋ณ€์ˆ˜๋ฅผ ๊ฐ€๋ฆฝ๋‹ˆ๋‹ค.


์ตœ๊ณ  ๊ด€ํ–‰

๊นจ๋—ํ•˜๊ณ  ์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•œ JavaScript ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด, ๋‹ค์Œ์˜ ์ตœ๊ณ  ๊ด€ํ–‰์„ ์ค€์ˆ˜ํ•˜์‹ญ์‹œ์˜ค:

  1. const๋ฅผ let ๋ฐ var๋ณด๋‹ค ์„ ํ˜ธ: ์žฌํ• ๋‹นํ•ด์„œ๋Š” ์•ˆ ๋˜๋Š” variables์—๋Š” const๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค. ์ด๋Š” ์šฐ๋ฐœ์ ์ธ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ์„ฑ์„ ์ค„์—ฌ์ค๋‹ˆ๋‹ค.
  2. var์˜ ์‚ฌ์šฉ์„ ์ œํ•œ: ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„ ๋™์ž‘ ๋ฐ hoisting ๋ฌธ์ œ๋กœ ์ธํ•ด, var๋ณด๋‹ค๋Š” let ๋ฐ const๋ฅผ ์„ ํ˜ธํ•˜์‹ญ์‹œ์˜ค.
  3. ์„ค๋ช…์ ์ธ ๋ณ€์ˆ˜ ์ด๋ฆ„ ์‚ฌ์šฉ: ๋ณ€์ˆ˜์˜ ๋ชฉ์ ์„ ์ „๋‹ฌํ•˜๋Š” ์˜๋ฏธ ์žˆ๋Š” ์ด๋ฆ„์„ ์„ ํƒํ•˜์‹ญ์‹œ์˜ค.
  4. ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ์ดˆ๊ธฐํ™”: ์ด๋Š” undefined ๋ณ€์ˆ˜๋ฅผ ๋ฐฉ์ง€ํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ๋”์šฑ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  5. Global Variables ํ”ผํ•˜๊ธฐ: ๊ณผ๋„ํ•œ global variables์˜ ์‚ฌ์šฉ์€ ์ถฉ๋Œ๊ณผ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์šด ์ฝ”๋“œ๋ฅผ ์ดˆ๋ž˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋ฅผ ํ•จ์ˆ˜๋‚˜ block ๋‚ด์— ์บก์Šํ™”ํ•˜์‹ญ์‹œ์˜ค.
  6. Block Scope์„ ํšจ๊ณผ์ ์œผ๋กœ ํ™œ์šฉ: let ๋ฐ const์˜ block-scoping์„ ํ™œ์šฉํ•˜์—ฌ variable์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๋™์ž‘์„ ๋ฐฉ์ง€ํ•˜์‹ญ์‹œ์˜ค.

๊ฒฐ๋ก 

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์— ์˜ํ•ด ์ƒ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.






Share your love