# π 1. μλ°μ€ν¬λ¦½νΈ λ³μ(Variable)

yuuuyeΒ·2019λ 9μ 18μΌ
1

1/2

# λ³μ(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` β (μμ½μ΄)

### π λ³μ μ΄λ¦ μ§κΈ°

λ³μμ μ΄λ¦μ μλ³μ κ·μΉμ μ΄κΈλμ§ μλλ€λ©΄ μμ λ‘­κ² μ§μ ν  μ μμ΅λλ€.

• νμ€μΉΌ νκΈ°λ²(PascalCase)
• μ€λ€μ΄ν¬ νκΈ°λ²(snake_case)

μΊλ© νκΈ°λ²μ΄λ, λ λ²μ§Έ μ΄ν λ¨μ΄μ λλ¬Έμ λΆλΆμ΄ λνμ νΉμ²λΌ λ³΄μΈλ€κ³  ν΄μ μ§μ΄μ§ μ΄λ¦μλλ€.

β 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 ν€μλ μ°Έκ³ !

κΈ΄ κΈμ μμ±ν κ²½νμ΄ λ§μ§ μμ κΈ νλλ₯Ό μμ±νλλ°λ λ§μ μκ°μ΄ κ±Έλ¦¬λ€μπ
νΉμλ μλͺ» μμ±λ λΆλΆμ΄λ λΉ μ§ λΆλΆμ΄ μλ€λ©΄ λκΈλ‘ μλ €μ£ΌμΈμ! μ½μ΄μ£Όμμ κ°μ¬ν©λλ€π

### π§ μ°Έκ³

βͺ [mdn JavaScript] : (https://developer.mozilla.org/ko/docs/Web/JavaScript)
βͺ [tcpschool] : (http://tcpschool.com/javascript/js_datatype_variable)
βͺ λͺ¨λ μλ°μ€ν¬λ¦½νΈ μλ¬Έ

βΎβ½π§β½π€