✏️ [JavaScript] - 2. 변수

JavaScript 변수

오늘은 JavaScript 언어의 가장 기본이자 핵심적인 부분 중 하나인 변수에 대해 알아보겠습니다.

변수 (Variables)

1.1 변수란?

변수는 데이터를 담기 위한 그릇으로, 메모리에 값을 저장하고 참조하는 역할을 합니다. JavaScript에서는 var, let, const 키워드를 사용하여 변수를 선언합니다.

var

• ES5에서 사용되던 키워드로, 함수 스코프를 가지며 블록 스코프를 무시합니다.
• 변수 재선언이 가능합니다.

let

• ES6에서 도입된 키워드로, 블록 스코프를 지원하며 변수 재할당이 가능합니다.
• 호이스팅에 영향을 받습니다.

const

• 상수를 선언하는 데 사용되며, 한 번 할당한 값은 변경할 수 없습니다.
• 블록 스코프를 지원하며, 변수 재선언과 재할당이 금지됩니다.

1.2 선언과 할당

변수를 선언하고 값을 할당하는 방법은 다음과 같습니다:

// 변수 선언
var x;

// 값 할당
x = 10;

// 변수 선언과 동시에 값 할당
var y = 20;

1.3 네이밍 규칙

• 변수명은 의미 있게 작성되어야 합니다.
• Camel case를 사용하는 것이 일반적입니다 (예: myVariable).
• 변수명은 영문자, 숫자, 밑줄(_)로 이루어집니다.
• 숫자로 시작할 수 없습니다.

1.4 스코프

스코프는 변수가 어디에서 살아있는지 말씀드리는 개념입니다. 변수를 사용할 때, 그 변수가 어디까지 유효한지를 결정하는 규칙이라고 생각할 수 있습니다.

• 전역 스코프 (Global Scope):

  • 전체 프로그램에서 사용 가능한 스코프입니다.
  • 프로그램이 시작할 때 만들어지고, 프로그램이 끝날 때까지 존재합니다.
  • 전역 스코프에 속한 변수는 어디서든 사용할 수 있습니다.

• 지역 스코프 (Local Scope):

  • 특정한 부분에서만 사용 가능한 스코프입니다.
  • 함수 스코프와 블록 스코프는 지역 스코프의 일종으로 간주됩니다.

• 함수 스코프 (Function Scope):

  • 함수 내에서 선언된 변수는 해당 함수의 스코프에 속합니다.
  • 함수가 실행될 때 변수가 만들어지며, 함수가 종료되면 변수도 사라집니다.

  function exampleFunction() {
      var localVariable = 20; // 이 변수는 exampleFunction 안에서만 사용 가능해요
      console.log(localVariable);
  }
  
  console.log(localVariable); // 에러! 여기서는 localVariable을 사용할 수 없어요

• 블록 스코프 (Block Scope):

  • {}로 감싸진 블록 내에서 선언된 변수는 그 블록의 스코프에 속합니다.

  • JavaScript에서는 let과 const 키워드를 사용하여 블록 스코프를 만들 수 있습니다.

    if (true) {
        let blockVariable = 30; // 이 변수는 if 블록 안에서만 사용 가능해요
        console.log(blockVariable);
    }
    
    console.log(blockVariable); // 에러! 여기서는 blockVariable을 사용할 수 없어요

💡 요약하면, 함수 스코프와 블록 스코프는 지역 스코프를 정의하는데 사용되는 용어입니다. 함수 스코프는 주로 함수 내에서 변수의 유효 범위를 나타내고, 블록 스코프는 {}로 감싸진 블록 내에서 변수의 유효 범위를 나타냅니다.

1.5 호이스팅

• 변수 및 함수 선언이 코드의 최상단으로 끌어올려지는 현상을 의미합니다.
• var는 선언은 호이스팅되지만 초기화는 되지 않습니다.
• let과 const는 블록 스코프이기 때문에 선언과 초기화가 모두 호이스팅됩니다.

console.log(hoistedVar); // undefined
var hoistedVar = '호이스팅 변수';

console.log(nonHoistedLet); // ReferenceError: Cannot access 'nonHoistedLet' before initialization
let nonHoistedLet = '호이스팅 되지 않는 변수';

변수는 JavaScript 프로그래밍의 핵심이므로, 스코프와 호이스팅 등의 개념을 이해하면 더욱 효과적으로 프로그래밍할 수 있습니다.

📌 참고: [ 자바스크립트 완벽 가이드 ]