λ³€μˆ˜(variable)

λ³€μˆ˜λŠ” 데이터λ₯Ό λ‹΄κΈ° μœ„ν•œ λ©”λͺ¨λ¦¬ 곡간을 μ˜λ―Έν•©λ‹ˆλ‹€.
μ‰½κ²Œ μƒκ°ν•˜λ©΄, μ–΄λ–€ 값을 λ‹΄κΈ° μœ„ν•œ μƒμžλ‚˜ 그릇이라고 λΉ„μœ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

1. λ³€μˆ˜ μ„ μ–Έ 및 ν• λ‹Ή

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” var ν‚€μ›Œλ“œλ‘œ λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©°, 선언함과 λ™μ‹œμ— 값을 ν• λ‹Ήν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ μ‰Όν‘œ(,)λ₯Ό 톡해 μ—¬λŸ¬ 개λ₯Ό ν•œ λ¬Έμž₯으둜 μ„ μ–Έν•  수 μžˆμŠ΅λ‹ˆλ‹€.
μ§€μ •λœ μ΄ˆκΉƒκ°’ 없이 μ„ μ–Έλœ λ³€μˆ˜λŠ” undefined 값을 κ°–μŠ΅λ‹ˆλ‹€.

✍ example

// var λ³€μˆ˜ 이름;
// var λ³€μˆ˜ 이름 = ν• λ‹Ήν•  κ°’;

var sum; // λ³€μˆ˜ sum을 μ„ μ–Έ. undifined
var a = 3; // λ³€μˆ˜ aλ₯Ό 선언함과 λ™μ‹œμ— 3을 a에 ν• λ‹Ή
var b, c, d;
var e = 1,
    f = 2,
    g = 3; // μ—¬λŸ¬ λ³€μˆ˜λ₯Ό ν•œ λ²ˆμ— μ„ μ–Έ 및 μ΄ˆκΈ°ν™” κ°€λŠ₯

2. λ³€μˆ˜ μ„ μ–Έ μƒλž΅

μ„ μ–Έλ˜μ§€ μ•Šμ€ λ³€μˆ˜λ₯Ό 읽으렀고 ν•˜λ©΄ μ°Έμ‘° 였λ₯˜κ°€ λ°œμƒν•©λ‹ˆλ‹€.
λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜μ§€ μ•Šκ³  μ‚¬μš©ν•˜λŠ” ν–‰μœ„λŠ” λ²„κ·Έμ˜ 원인이 될 수 μžˆμœΌλ‹ˆ, λ°˜λ“œμ‹œ μ„ μ–Έν•˜κ³  μ‚¬μš©ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. Strict λͺ¨λ“œλ₯Ό ν™œμš©ν•˜λ©΄ μ„ μ–Έν•˜μ§€ μ•Šμ€ λ³€μˆ˜μ— 값을 λŒ€μž…ν–ˆμ„ λ•Œ 였λ₯˜κ°€ λ°œμƒν•©λ‹ˆλ‹€. μžμ„Έν•œ μ„€λͺ…은 πŸ‘‰ Strict mode μ°Έκ³ !

πŸ“Œ μ„ μ–Έλ˜μ§€ μ•Šμ€ λ³€μˆ˜μ— 값을 λŒ€μž…ν•˜λ©΄?

var 문으둜 μ„ μ–Έλ˜μ§€ μ•Šμ€ λ³€μˆ˜μ— 값을 λŒ€μž…ν•˜λ©΄ 였λ₯˜κ°€ λ°œμƒν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
κ·Έ μ΄μœ λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 ν•΄λ‹Ή λ³€μˆ˜λ₯Ό μžλ™μœΌλ‘œ μ „μ—­ λ³€μˆ˜λ‘œ μ„ μ–Έν•˜κΈ° λ•Œλ¬ΈμΈλ°, μ΄λŠ” λ³€μˆ˜μ˜ 유효 λ²”μœ„μ™€ 관련이 μžˆμŠ΅λ‹ˆλ‹€. 후에 μž‘μ„±ν•˜λŠ” κΈ€μ—μ„œ 닀루도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€!

✍ example

// μ„ μ–Έλ˜μ§€ μ•Šμ€ λ³€μˆ˜λ₯Ό 읽으렀고 ν•  λ•Œ
console.log(x); // ➑ ReferenceError: x is not defined(였λ₯˜ 메세지)

// var 문으둜 μ„ μ–Έλ˜μ§€ μ•Šμ€ λ³€μˆ˜μ— 값을 λŒ€μž…ν•  λ•Œ
y = 2;
console.log(y); // ➑ 2

3. λ³€μˆ˜ λŒμ–΄μ˜¬λ¦Ό(ν˜Έμ΄μŠ€νŒ…, hoisting)

hoist의 사전적 μ •μ˜λ₯Ό μ‚΄νŽ΄λ³΄λ©΄, λ“€μ–΄μ˜¬λ¦¬λ‹€/λŒμ–΄μ˜¬λ¦¬λ‹€ λΌλŠ” λœ»μ„ κ°–κ³  μžˆμŠ΅λ‹ˆλ‹€.
ν”„λ‘œκ·Έλž¨μ€ μž‘μ„± μˆœμ„œμ— 따라 μ°¨λ‘€λŒ€λ‘œ μ‹€ν–‰λ˜μ§€λ§Œ, λ³€μˆ˜ 선언은 이 원칙을 λ”°λ₯΄μ§€ μ•Šκ³  λ²”μœ„μ— 따라 μ„ μ–Έκ³Ό 할당을 λΆ„λ¦¬μ‹œμΌœ μœ„λ‘œ λŒμ–΄μ˜¬λ¦½λ‹ˆλ‹€.

✍ example : ν˜Έμ΄μŠ€νŒ… μ „

console.log(x);
var x;

✍ example : ν˜Έμ΄μŠ€νŒ… ν›„

var x;
console.log(x);

πŸ“Œ μ„ μ–Έκ³Ό λ™μ‹œμ— λŒ€μž…ν•˜λ©΄?

μ„ μ–Έκ³Ό λ™μ‹œμ— λŒ€μž…ν•˜λŠ” μ½”λ“œλŠ” λŒμ–΄μ˜¬λ¦¬μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
μ •ν™•νžˆλŠ” μ„ μ–ΈλΆ€var xλŠ” λŒμ–΄ μ˜¬λ €μ§€μ§€λ§Œ, λŒ€μž…λΆ€x = 5λŠ” λŒμ–΄ μ˜¬λ €μ§€μ§€ μ•ŠλŠ”λ‹€κ³  μ„€λͺ…ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

✍ example

console.log(x); // ➑ undefined
var x = 5;
console.log(x); // ➑ 5

μœ„μ™€ 같은 μ½”λ“œλ₯Ό λ‹€μ‹œ ꡬ성해보면,

✍ example

var x;
console.log(x); // ➑ undefined
x = 5;
console.log(x); // ➑ 5

둜 μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

ν˜Έμ΄μŠ€νŒ…μ€ λ‹€λ₯Έ μ–Έμ–΄μ—λŠ” μ—†λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈλ§Œμ˜ κ³ μœ ν•œ νŠΉμ§•μ΄λ‚˜, μ΄ν•΄ν•˜κΈ° μ‰¬μš΄ μ½”λ“œ μž‘μ„±μ„ μœ„ν•΄μ„œλŠ” λ°˜λ“œμ‹œ μ‹œμž‘λΆ€μ— λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.

4. λ³€μˆ˜μ˜ 이름

πŸ“Ž μ‹λ³„μž

λ³€μˆ˜, ν•¨μˆ˜, 라벨 이름 λ“± μ‚¬μš©μžκ°€ μ •μ˜ν•˜λŠ” 이름을 μ‹λ³„μž(identifier)라고 ν•©λ‹ˆλ‹€. μ‹λ³„μžλŠ” λ‹€μŒκ³Ό 같은 κ·œμΉ™μ„ 따라야 ν•©λ‹ˆλ‹€.

  • μ•ŒνŒŒλ²³(A~Z, a~z), 숫자(0~9), 언더바(_), λ‹¬λŸ¬ 기호($) μ‚¬μš© κ°€λŠ₯
  • 첫 κΈ€μžλ‘œλŠ” 숫자λ₯Ό μ‚¬μš©ν•  수 μ—†μŒ. 숫자λ₯Ό μ œμ™Έν•œ μœ„μ˜ λ‚˜λ¨Έμ§€ 쀑 ν•˜λ‚˜λ₯Ό μ‚¬μš©
  • μ˜ˆμ•½μ–΄λ₯Ό μ‹λ³„μžλ‘œ μ‚¬μš©ν•  수 μ—†μŒ (μ˜ˆμ•½μ–΄λŠ” μ•„λž˜μ—μ„œ λ‹€λ€„μš”!)

✍ μ‚¬μš© κ°€λŠ₯ν•œ 예
sum newValue width result

✍ μ‚¬μš© λΆˆκ°€λŠ₯ν•œ 예
1st ❌ (첫 κΈ€μž 숫자) / new-value ❌ (ν•˜μ΄ν”ˆμ€ μ‚¬μš©λΆˆκ°€) / new ❌ (μ˜ˆμ•½μ–΄)

πŸ“Ž λ³€μˆ˜ 이름 짓기

λ³€μˆ˜μ˜ 이름은 μ‹λ³„μž κ·œμΉ™μ— μ–΄κΈ‹λ‚˜μ§€ μ•ŠλŠ”λ‹€λ©΄ 자유둭게 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.
κ·ΈλŸ¬λ‚˜ μΌλ°˜μ μœΌλ‘œλŠ” λ‹€λ₯Έ μ‚¬λžŒλ„ λ³€μˆ˜μ˜ 의미λ₯Ό μ•Œ 수 μžˆλ„λ‘ μΌμ •ν•œ ν‘œκΈ°λ²•μ„ μ‚¬μš©ν•˜λ©°, λ‹€μŒμ˜ μ„Έ 가지 ν‘œκΈ°λ²•μ„ 많이 μ‚¬μš©ν•©λ‹ˆλ‹€.

  • 캐멀 ν‘œκΈ°λ²•(camelCase)
  • 파슀칼 ν‘œκΈ°λ²•(PascalCase)
  • μŠ€λ„€μ΄ν¬ ν‘œκΈ°λ²•(snake_case)

βœ” 캐멀 ν‘œκΈ°λ²•(camelCase)

캐멀 ν‘œκΈ°λ²•μ΄λž€, 두 번째 이후 λ‹¨μ–΄μ˜ λŒ€λ¬Έμž 뢀뢄이 λ‚™νƒ€μ˜ 혹처럼 보인닀고 ν•΄μ„œ 지어진 μ΄λ¦„μž…λ‹ˆλ‹€.
두 번째 이후 λ‹¨μ–΄μ˜ 첫 κΈ€μžλ₯Ό λŒ€λ¬Έμžλ‘œ ν•˜λ©° λ‚˜λ¨Έμ§€λŠ” μ†Œλ¬Έμžλ‘œ ν‘œκΈ°ν•©λ‹ˆλ‹€.

✍ example
newName createLifeGame

βœ” 파슀칼 ν‘œκΈ°λ²•(PascalCase)

파슀칼 ν‘œκΈ°λ²•μ΄λž€, ν”„λ‘œκ·Έλž˜λ° 언어인 파슀칼(Pascal)μ—μ„œ μ‚¬μš©λœ ν‘œκΈ°λ²•μž…λ‹ˆλ‹€.
각 λ‹¨μ–΄μ˜ 첫 κΈ€μžλ₯Ό λͺ¨λ‘ λŒ€λ¬Έμžλ‘œ ν‘œκΈ°ν•©λ‹ˆλ‹€.

✍ example
NewName CreateLifeGame

βœ” μŠ€λ„€μ΄ν¬ ν‘œκΈ°λ²•(snake_case)

λͺ¨λ“  단어λ₯Ό μ†Œλ¬Έμžλ‘œ ν‘œκΈ°ν•˜λ©°, 단어 사이사이에 언더바(_)λ₯Ό λ„£μ–΄ ν‘œκΈ°ν•©λ‹ˆλ‹€.

✍ example
new_name create_life_game

λ³€μˆ˜μ˜ 이름을 지을 λ•ŒλŠ” 일반적으둜 μ•„λž˜μ™€ 같이 μž‘μ„±ν•©λ‹ˆλ‹€. (λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ μž…λ¬Έ 발췌)

  • 캐멀 ν‘œκΈ°λ²•μ΄λ‚˜ μŠ€λ„€μ΄ν¬ ν‘œκΈ°λ²•μ„ μ‚¬μš©ν•˜μ—¬ λ³€μˆ˜μ˜ 의미λ₯Ό νŒŒμ•…ν•  수 있게 함
  • 기본적으둜 μ˜μ–΄ 단어 μ‚¬μš©
  • 루프 μΉ΄μš΄ν„° λ³€μˆ˜ μ΄λ¦„μœΌλ‘œλŠ” i, j, k 등을 μ‚¬μš©
  • μƒμˆ˜λŠ” λŒ€λ¬Έμžλ‘œ ν‘œν˜„ ex) MAX_SIZE
  • 논리값 ν‘œν˜„ μ‹œμ—λŠ” 이름 μ•žμ— isλ₯Ό λΆ™μž„ ex) isMouseDown
  • μƒμ„±μž 이름을 뢙일 λ•ŒλŠ” 파슀칼 ν‘œκΈ°λ²•μ„ μ‚¬μš©

5. μ˜ˆμ•½μ–΄

μ˜ˆμ•½μ–΄λž€, μžλ°”μŠ€ν¬λ¦½νŠΈ 문법을 κ·œμ •μ§“κΈ° μœ„ν•œ 특수 ν‚€μ›Œλ“œλ₯Ό λ§ν•©λ‹ˆλ‹€.
μ˜ˆμ•½μ–΄λ‘œ μ§€μ •λœ ν‚€μ›Œλ“œλ“€μ€ μ‹λ³„μžλ‚˜ ν”„λ‘œνΌν‹° μ΄λ¦„μœΌλ‘œ μ‚¬μš©ν•˜μ§€ μ•ŠμœΌλ©°, 미리 μ •μ˜λœ μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ ν•¨μˆ˜ μ—­μ‹œ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” 편이 μ’‹μŠ΅λ‹ˆλ‹€. μ‚¬μš©ν•˜λ”λΌλ„ 였λ₯˜λŠ” λ°œμƒν•˜μ§€ μ•Šμ§€λ§Œ, 본래의 κΈ°λŠ₯을 μ‚¬μš©ν•  수 μ—†κ²Œ λ©λ‹ˆλ‹€.
λ˜ν•œ Window 객체의 이름과 DOMμ—μ„œ μ‚¬μš©ν•˜λŠ” 객체 이름도 μ‚¬μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μžμ„Έν•œ μ„€λͺ…은 πŸ‘‰ mdn ν‚€μ›Œλ“œ μ°Έκ³ !

마치며

κΈ΄ 글을 μž‘μ„±ν•œ κ²½ν—˜μ΄ λ§Žμ§€ μ•Šμ•„ κΈ€ ν•˜λ‚˜λ₯Ό μž‘μ„±ν•˜λŠ”λ°λ„ λ§Žμ€ μ‹œκ°„μ΄ κ±Έλ¦¬λ„€μš”πŸ˜…
ν˜Ήμ‹œλ‚˜ 잘λͺ» μž‘μ„±λœ λΆ€λΆ„μ΄λ‚˜ 빠진 뢀뢄이 μžˆλ‹€λ©΄ λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ„Έμš”! μ½μ–΄μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€πŸ˜Š

ES6와 κ΄€λ ¨λœ 뢀뢄은 λ‹€λ₯Έ μ‹œλ¦¬μ¦ˆλ₯Ό λ”°λ‘œ λ§Œλ“€ μ˜ˆμ •μž…λ‹ˆλ‹€. μ°Έκ³ ν•΄μ£Όμ„Έμš”πŸ™

🧐 참고

β–ͺ [mdn JavaScript] : (https://developer.mozilla.org/ko/docs/Web/JavaScript)
β–ͺ [tcpschool] : (http://tcpschool.com/javascript/js_datatype_variable)
β–ͺ λͺ¨λ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ μž…λ¬Έ
image.png