변수와 상수

변수와 상수의 차이와 활용

JavaScript에서 변수(variable)와 상수(constant)는 데이터를 저장하고 관리하는 핵심 요소이다.
var, let, const는 각각의 특성과 용도가 다르며, 코드 작성 시 이를 적절히 사용하는 것이 중요하다.

 

변수와 상수 선언 방법

1. var

• 특징:
  • 재선언 및 재할당 가능.
  • 함수 스코프(Function Scope)를 가짐.
  • 블록 스코프를 지원하지 않음.
• 사용 예:

  var name = "John";
  
  name = "Doe"; // 재할당 가능

주의: var는 의도치 않은 호이스팅 문제를 유발할 수 있으므로 현대 코드에서는 let과 const 사용이 권장된다.

 

2. let

• 특징:
  • 재선언 불가능하지만 재할당 가능.
  • 블록 스코프(Block Scope)를 지원.
• 사용 예:

let age = 25;

age = 26; // 재할당 가능

 

3. const

• 특징:
  • 재선언 및 재할당 불가능.
  • 반드시 선언 시 초기화 필요.
  • 블록 스코프를 지원.
• 사용 예:

const PI = 3.14;

// PI = 3.15; // Error: 재할당 불가능

 

변수와 상수의 주요 차이점

특성	var	let	const
재선언 가능 여부	Yes	No	No
재할당 가능 여부	Yes	Yes	No
초기화 필요 여부	No	No	Yes
스코프	함수 스코프	블록 스코프	블록 스코프

 

스코프(Scope)와 호이스팅(Hoisting)

1. 스코프

• 함수 스코프: var로 선언된 변수는 함수 내에서만 유효.
• 블록 스코프: let과 const는 {}로 감싼 블록 내에서만 유효.

if (true) {
  let x = 0;
}

console.log(x); // Error: x is not defined​

 

2. 호이스팅

• JavaScript는 변수 선언을 코드의 상단으로 끌어올리는 호이스팅을 수행한다.
• var는 선언부만 끌어올려져 초기화되지 않은 상태로 처리된다.

console.log(a); // undefined
var a = 5;

console.log(b); // Error: Cannot access 'b' before initialization
let b = 10;​

 

let과 const의 추천 사용법

1. const를 기본적으로 사용.
값이 변하지 않는 데이터를 선언할 때 사용

const maxUsers = 100;

 

2. 필요할 때만 let 사용.
동적으로 변경되는 데이터에 적합

let userCount = 0;
userCount++;

 

 

3. var는 사용하지 않음.
var의 함수 스코프와 호이스팅 문제는 유지보수에 적합하지 않다.

 

객체와 배열의 상수 처리

const로 선언된 객체와 배열은 내부 데이터 변경이 가능하다.

const user = { name: "Alice" };
user.name = "Bob"; // 가능

const numbers = [1, 2, 3];
numbers.push(4); // 가능

 

하지만 참조 자체를 변경하는 것은 불가능합니다:

user = { name: "Charlie" }; // Error: 재할당 불가능

 

변수 선언 관련 유용한 팁

 

1. 명확한 변수 이름 사용:
변수의 목적을 쉽게 알 수 있도록 작성

let userAge = 30; // 명확한 변수명

 

2. 초기화와 함께 선언:

선언과 초기화를 동시에 하여 예측 가능한 코드를 작성

const isLoggedIn = false;

3. 스코프를 잘 이해하고 활용:
불필요한 전역 변수 사용을 지양

 

요약

• var 대신 let과 const를 사용
• const는 값을 변경하지 않을 때, let은 변경 가능성이 있을 때 사용한다.
• 스코프와 호이스팅의 작동 방식을 이해하면 코드 오류를 줄이고 가독성을 높일 수 있다.

최적의 코드 작성: 명확한 변수 선언과 스코프 활용은 코드 품질을 높이고, 협업 시 이해도를 향상시킨다.

 

 

 

참조: 
https://tcpschool.com/javascript/js_intro_syntax#google_vignette

https://ko.javascript.info/variables

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85#thankYou