[ Javascript ] 변수에 대해서 알아보기

 

 

 

 

🌱 자바스크립트 변수는 데이터를 저장하는 컨테이너입니다. 변수에 데이터를 저장하고, 필요에 따라 저장된 데이터를 불러오거나 변경할 수 있습니다. 자바스크립트에서 변수는 다음과 같은 특징을 가집니다.

1. 변수 선언 키워드:

• var: 과거에 주로 사용되었던 변수 선언 키워드입니다. 함수 스코프를 가지며, 변수 호이스팅이 발생하여 예기치 않은 동작을 유발할 수 있습니다.
• let: ES6(ECMAScript 2015)부터 도입된 변수 선언 키워드입니다. 블록 스코프를 가지며, 변수 호이스팅이 발생하지 않아 var 보다 안전하게 사용할 수 있습니다.
• const: let 과 유사하지만, 선언 시 초기값을 할당해야 하며, 이후 값을 변경할 수 없는 상수(constant)를 선언할 때 사용합니다. 블록 스코프를 가지며, 변수 호이스팅이 발생하지 않습니다.

 

2. 변수 이름 규칙:

• 변수 이름은 문자, 숫자, 밑줄(_), 달러 기호($)를 포함할 수 있습니다.
• 변수 이름은 숫자로 시작할 수 없습니다.
• 대소문자를 구분합니다. myVariable 과 myvariable 은 서로 다른 변수입니다.
• 자바스크립트 예약어(예: if, for, function 등)는 변수 이름으로 사용할 수 없습니다.
• 변수 이름은 간결하고 명확하게 작성하여 코드의 가독성을 높이는 것이 좋습니다.

 

3. 변수 스코프(Scope):

• 변수의 스코프는 변수가 어디까지 접근 가능한지를 나타냅니다.
• var 로 선언된 변수는 함수 스코프를 가지며, 함수 내에서 선언된 경우 해당 함수 내에서만 접근할 수 있습니다. 함수 외부에서 선언된 경우 전역 스코프를 가지며, 코드 어디에서든 접근할 수 있습니다.
• let 과 const 로 선언된 변수는 블록 스코프를 가지며, 선언된 블록({}) 내에서만 접근할 수 있습니다.

 

4. 변수 호이스팅(Hoisting):

• var 로 선언된 변수는 선언되기 전에 사용할 수 있습니다. 이를 변수 호이스팅이라고 합니다.
• let 과 const 로 선언된 변수는 호이스팅이 발생하지 않습니다. 선언되기 전에 사용하면 ReferenceError 가 발생합니다.

 

5. 변수 선언 및 초기화:

• 변수 선언: var, let, const 키워드를 사용하여 변수를 선언합니다.
  • 예시: let myVariable;
• 변수 초기화: 변수에 값을 할당합니다.
  • 예시: myVariable = 10;
• 변수 선언과 초기화를 동시에 수행할 수도 있습니다.
  • 예시: let myVariable = 10;

 

6. 변수 데이터 타입:

• 자바스크립트 변수는 다양한 데이터 타입을 저장할 수 있습니다.
  • 문자열(String): 문자열을 저장합니다. (예: "Hello")
  • 숫자(Number): 숫자를 저장합니다. (예: 10, 3.14)
  • 불리언(Boolean): 참(true) 또는 거짓(false) 값을 저장합니다.
  • 객체(Object): 여러 개의 프로퍼티를 가진 데이터를 저장합니다.
  • 배열(Array): 여러 개의 데이터를 순서대로 저장합니다.
  • null: 값이 없음을 나타냅니다.
  • undefined: 값이 할당되지 않은 변수의 초기값입니다.

추천:

• var 대신 let 또는 const 를 사용하는 것을 권장합니다.
• 변경되지 않는 값은 const 로 선언하고, 변경될 수 있는 값은 let 으로 선언합니다.
• 변수 이름을 명확하고 의미있게 작성하여 코드의 가독성을 높입니다.

 

7. 간단 예제

자바스크립트 변수 예제는 다음과 같습니다.

// var 변수 선언 및 초기화
var myVar = 10;
console.log(myVar); // 출력: 10

// var 변수 재할당
myVar = 20;
console.log(myVar); // 출력: 20

// let 변수 선언 및 초기화
let myLet = "Hello";
console.log(myLet); // 출력: Hello

// let 변수 재할당
myLet = "World";
console.log(myLet); // 출력: World

// const 상수 선언 및 초기화
const myConst = 3.14;
console.log(myConst); // 출력: 3.14

// const 상수 재할당 (오류 발생)
// myConst = 2.71; // TypeError: Assignment to constant variable.

// 블록 스코프 예제
if (true) {
  var functionScoped = "function scope";
  let blockScoped = "block scope";
  const blockConstant = "block constant";

  console.log(functionScoped); // 출력: function scope
  console.log(blockScoped); // 출력: block scope
  console.log(blockConstant); // 출력: block constant
}

console.log(functionScoped); // 출력: function scope
// console.log(blockScoped); // ReferenceError: blockScoped is not defined
// console.log(blockConstant); // ReferenceError: blockConstant is not defined

// 호이스팅 예제
console.log(hoistedVar); // 출력: undefined
var hoistedVar = "hoisted";
console.log(hoistedVar); // 출력: hoisted

// console.log(hoistedLet); // ReferenceError: hoistedLet is not defined
let hoistedLet = "hoisted let";

// console.log(hoistedConst); // ReferenceError: hoistedConst is not defined
const hoistedConst = "hoisted const";

예제 설명:

• var 변수는 함수 스코프를 가지므로 블록 외부에서도 접근할 수 있습니다.
• let 과 const 변수는 블록 스코프를 가지므로 선언된 블록 외부에서는 접근할 수 없습니다.
• const 변수는 상수로 선언되었으므로 값을 재할당할 수 없습니다.
• var 변수는 호이스팅되어 선언되기 전에 사용할 수 있지만, let 과 const 변수는 호이스팅되지 않습니다.