Variables

자바스크립트 변수는 프로그램 내에서 데이터를 효과적으로 저장하고 관리하는 기본 도구이다.
변수는 숫자, 문자열, 객체 등 다양한 값들을 저장할 수 있으며, 이를 통해 코드를 더욱 동적이고 재사용 가능하게 만든다.

변수는 컴퓨터 메모리에 저장된 데이터를 가리키는 이름이라고 생각하시면 된다.

JavaScript 변수의 기본 개념

변수 선언 및 초기화 방법

자바스크립트에서는 변수를 선언하는 방법으로 주로 세 가지 키워드를 사용한다.

키워드스코프재할당 여부특징
var함수 스코프 또는 전역 스코프가능과거부터 사용되어 왔으며, 재선언 및 재할당 모두 가능함
let블록 스코프가능변수의 재선언은 금지되지만, 재할당은 가능함
const블록 스코프불가능선언과 동시에 초기화해야 하며, 상수로 취급되어 재할당이 불가능함

변수 선언과 동시에 값을 할당하는 것을 변수의 초기화라고 하며, 미리 선언만 하고 값은 나중에 할당할 수도 있다.

변수의 스코프와 사용 예시

스코프는 변수의 접근 가능한 범위를 의미한다.

함수 스코프(Function Scope)

var로 선언된 변수는 함수 스코프를 가진다.
함수 내에서 선언된 변수는 함수 외부에서 접근할 수 없다.

1
2
3
4
5
6
7

function showName() {
  var name = "홍길동"; // 함수 내부에서만 접근 가능
  console.log(name);
}

showName(); // "홍길동" 출력
// console.log(name); // 오류 발생: name은 정의되지 않음

블록 스코프(Block Scope)

let과 const로 선언된 변수는 블록 스코프를 가진다.
중괄호 {} 내에서 선언된 변수는 그 블록 내에서만 접근 가능하다.

1
2
3
4
5
6
7

if (true) {
  let x = 10; // 블록 내부에서만 접근 가능
  const y = 20; // 블록 내부에서만 접근 가능
  console.log(x, y); // 10, 20 출력
}

// console.log(x, y); // 오류 발생: x와 y는 정의되지 않음

호이스팅(Hoisting)

호이스팅은 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 저장하는 동작이다.

Var 호이스팅

1
2

console.log(name); // undefined 출력 (오류 발생하지 않음)
var name = "홍길동";

위 코드는 자바스크립트 엔진에 의해 다음과 같이 해석된다:

1
2
3

var name; // 선언이 최상단으로 끌어올려짐(호이스팅)
console.log(name); // undefined 출력
name = "홍길동"; // 할당은 원래 위치에 남음

Let과 Const 호이스팅

let과 const도 호이스팅이 발생하지만, 선언 전에 접근하면 ‘Temporal Dead Zone(TDZ)’ 오류가 발생한다.

1
2

// console.log(name); // 오류 발생: name에 접근할 수 없음
let name = "홍길동";

변수 네이밍 규칙

자바스크립트 변수 이름은 다음 규칙을 따라야 한다:

1
2
3
4
5
6
7
8
9

// 올바른 변수명
let userName = "홍길동";
let $price = 100;
let _count = 5;
let camelCase = "카멜 케이스";

// 잘못된 변수명
// let 1user = "홍길동"; // 숫자로 시작할 수 없음
// let if = "조건문"; // 예약어 사용 불가

데이터 타입

자바스크립트의 변수는 어떤 타입의 데이터도 저장할 수 있다.

기본 타입(Primitive Type)

1
2
3
4
5
6
7

let name = "홍길동"; // 문자열(String)
let age = 30; // 숫자(Number)
let isActive = true; // 불리언(Boolean)
let empty = null; // Null
let undefined_var; // Undefined
let bigNumber = 1234567890123456789012345n; // BigInt (ES2020)
let uniqueId = Symbol("id"); // Symbol (ES6)

참조 타입(Reference Type)

1
2
3
4

let user = { name: "홍길동", age: 30 }; // 객체(Object)
let numbers = [1, 2, 3, 4, 5]; // 배열(Array)
let sayHello = function() { console.log("안녕하세요!"); }; // 함수(Function)
let today = new Date(); // 날짜(Date)

변수 활용 예시

다음은 변수를 활용한 간단한 예시:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// 계산기 함수
function calculator(a, b, operation) {
  let result; // 결과를 저장할 변수
  
  // 연산 수행
  if (operation === "add") {
    result = a + b;
  } else if (operation === "subtract") {
    result = a - b;
  } else if (operation === "multiply") {
    result = a * b;
  } else if (operation === "divide") {
    result = a / b;
  } else {
    result = "지원하지 않는 연산입니다.";
  }
  
  return result; // 결과 반환
}

// 변수 선언 및 함수 호출
const num1 = 10;
const num2 = 5;
let sum = calculator(num1, num2, "add"); // 15
let difference = calculator(num1, num2, "subtract"); // 5

console.log(`${num1} + ${num2} = ${sum}`); // "10 + 5 = 15" 출력
console.log(`${num1} - ${num2} = ${difference}`); // "10 - 5 = 5" 출력

변수의 생명주기

변수의 생명주기는 선언 방식과 스코프에 따라 달라진다.

  1. var 변수: 함수 내에서 선언된 경우 함수가 종료될 때 소멸. 전역에서 선언된 경우 웹 페이지가 닫힐 때까지 유지.
  2. let/const 변수: 블록 내에서 선언된 경우 블록이 종료될 때 소멸. 전역에서 선언된 경우 웹 페이지가 닫힐 때까지 유지.

좋은 변수 사용 습관

  1. 의미 있는 이름 사용: x보다는 userName과 같이 명확한 이름 사용.
  2. camelCase 사용: 자바스크립트에서는 일반적으로 camelCase 스타일(첫 단어는 소문자, 이후 단어는 대문자로 시작) 사용.
  3. 상수는 대문자와 Snake_Case 사용: MAX_SIZE, API_KEY와 같이 상수는 대문자와 언더스코어로 구분.
  4. 불필요한 전역 변수 사용 자제: 가능한 함수나 블록 내에서 변수 선언.
  5. 적절한 키워드 선택: 변경할 필요가 없는 값은 const 사용.

참고 및 출처