JS ① Variable(변수)

1. 식별자 (Identifier)

• 변수를 구분할 수 있는 변수명
• 반드시 문자, $, _로 시작해야 하며, 클래스명 외에는 모두 소문자로 시작

🚩 식별자 작성 스타일

1. 카멜 케이스(camelCase, lower-camel-case)

   • 변수, 객체, 함수에 사용

     // [example]
     let variableName
     const userInfo = { name: 'pepper', age: 5 }
     function getUserName () {}

2. 파스칼 케이스(PascalCase, upper-camel-case)

   • 클래스, 생성자에 사용

     // [example]
     class User {
       constructor(options) {
         this.name = options.name
       }
     }
     const person = new user({
       name: 'Pepper'
     })

3. 대문자 스네이크 케이스(SNAKE_CASE)

   • 상수(개발자의 의도와 상관없이 변경될 가능성이 없는 값)에 사용

     // [example]
     const API_KEY = 'adslhalf-wrljr21'
     const PI = Math.PI

2. 변수 선언

• JavaScript에서 변수를 선언하는 키워드는 크게 3가지로 볼 수 있습니다. ES6에서는 const와 let 예약어로 변수를 선언합니다.

  키워드	재선언	재할당	스코프	etc.
  let	X	O	블록	ES6 도입
  const	X	X	블록	ES6 도입
  var	O	O	함수	-

1. 기본 개념

1. 선언(Declaration)
   • 변수를 생성하는 행위 또는 시점
2. 할당(Assignment)
   • 선언된 변수에 값을 저장하는 행위 또는 시점
3. 초기화(Intialization)
   • 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점

2. 변수 선언 키워드

let	const	var
- 변수 재할당 가능 - 변수 재선언 불가능 - 블록 스코프	- 변수 재할당 불가능 - 변수 재선언 불가능 - 블록 스코프	- 변수 재할당 가능 - 변수 재선언 가능 - 함수 스코프

1. let

• let 예약어는 재할당이 가능하지만, 재선언은 불가능합니다.

// 재할당 가능
let number = 1
number = 2
console.log(number) // → 2

// 재선언 불가능 (SyntaxError)
let number = 3 // → Uncaught SyntaxError: Identifier 'number' has already been declared

2. const

• let 예약어는 재할당과 재선언 모두 불가능합니다.

const number = 1
number = 2 // → Uncaught TypeError: Assignment to constant variable.

• 단, Object({})나 Array([]) 선언 시, 객체의 속성과 배열의 요소는 변경할 수 있습니다.

// 1) 객체의 속성 변경
const user = {
  name: 'Pepper',
  age: 5
}
console.log(user.age) // → 5

user.age = 6
console.log(user.age) // → 6

// 2) 배열 요소 추가
const animals = ['cat']
animals.push('dog')
console.log(animals) // → ['cat', 'dog']

3. var

• ES5의 var 예약어는 재할당, 재선언 모두 가능합니다.
• const, let과의 가장 큰 차이점은 유효범위입니다.
  • var의 유효 범위는 함수의 블록 단위로 제한되며, const와 let은 블록({}) 단위로 제한됩니다.

// 블록 스코프: let, const
let name = 'Pepper'
if (name === 'Pepper') {
  let name = 'Kanda'
  console.log('블록 스코프:', name) // 블록 스코프: Kanda
}
console.log('전역 스코프:', name) // 전역 스코프: Pepper

const name = 'Pepper'
if (name === 'Pepper') {
  const name = 'Kanda'
  console.log('블록 스코프:', name) // 블록 스코프: Kanda
}
console.log('전역 스코프:', name) // 전역 스코프: Pepper

// 함수 스코프: var
var name = 'Pepper'
if (name === 'Pepper') {
  var name = 'Kanda'
  console.log('블록 스코프:', name) // 블록 스코프: Kanda
}
console.log('전역 스코프:', name) // 전역 스코프: Kanda

• var의 경우, 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능합니다.
  • 호이스팅은, 변수를 선언 이전에 참조할 수 있는 현상으로 선언 이전의 위치에서 접근 시 undefined 반환합니다.

// let, const의 경우, 변수 선언 이전 접근 시 에러가 발생
console.log(age) // Uncaught ReferenceError: age is not defined
let age = 5

// var의 경우, 호이스팅 현상 발생
console.log(name) // undefined
var name = 'Pepper'

// 선언 이전에 접근하면, 아래와 같은 방식으로 인식
var name // → 선언문이 위로 끌어올려지는 것!
console.log(name) // undefined
name = 'Pepper'