자바스크립트의 변수

자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. 처음에는 단순히 웹 브라우저 내에서 사용자 인터페이스를 향상하기 위해 만들어졌지만, 현재는 웹의 프론트엔드(클라이언트 측)와 백엔드(서버 측) 모두에서 널리 사용되는 언어가 되었습니다. 

자바스크립트의 변수 선언

자바스크립트에서 변수는 데이터를 저장하고 참조하는 데 사용되는 중요한 요소입니다. 변수를 사용하면 데이터를 이름으로 관리할 수 있으며, 프로그램 내에서 데이터를 쉽게 조작하고 사용할 수 있습니다. 변수를 사용하기 위해서는 먼저 변수를 선언해야 합니다.

• var
  - 가장 오래된 방식으로,  함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다라는  함수 레벨 스코프(function-level scope)를 가집니다.
  - 재선언이 가능하며, 함수 내에서 선언되면 해당 함수 내에서, 함수 외부에서 선언되면 전역 변수가 됩니다.
  - 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻하는 호이스팅(hoisting)이 발생하는 특징이 있습니다.

var greeting = "Hello, World!" // var로 변수선언
console.log(greeting); // 출력: Hello World!

function sayHello() {
	var name = "dongoori";
}
console.log(name) // 오류: name is not defined(name변수는 함수 내부에서만 접근가능)

• let
  - ES6부터 도입된 방식으로, 블록 레벨 스코프(block-level scope)를 가집니다.
  - 재할당은 가능하지만, 같은 스코프 내에서 재선언은 불가능합니다.
  - 호이스팅이 발생하지만, 초기화 전에 접근하려고 하면 참조 에러(ReferenceError)가 발생합니다.

let age = 25;
console.log(age); // 출력: 25

age = 26; // let 변수는 재할당 가능
console.log(age); // 출력: 26

if (true) {
    let age = 30; // 블록 내에서 새로운 let 변수 선언
    console.log(age); // 출력: 30 (블록 내의 지역 변수)
}

console.log(age); // 출력: 26 (블록 외부의 변수)

• const
  - ES6부터 도입된 방식으로, let과 마찬가지로 블록 레벨 스코프를 가집니다.
  - 변수 선언 시 초기화를 해야 하며, 한 번 할당된 값을 변경할 수 없습니다.(상수)
  - 객체나 배열을 할당한 경우, 객체나 배열 자체는 변경할 수 없지만, 내부 속성이나 요소는 변경할 수 있습니다. 

const pi = 3.14;
console.log(pi); // 출력: 3.14

// pi = 3.14159; // 오류: Assignment to constant variable.

const numbers = [1, 2, 3];
numbers.push(4); // 배열에 요소 추가 가능
console.log(numbers); // 출력: [1, 2, 3, 4]

// numbers = [1, 2, 3, 4, 5]; // 오류: Assignment to constant variable.

 

변수에 저장할 수 있는 데이터

1. 숫자(Number): 자바스크립트는 정수와 실수를 구분하지 않고, 모든 숫자를 실수로 처리합니다. 예를 들어, 5, 4.3, -10 등이 있습니다.
2. 문자열(String): 텍스트 데이터를 나타냅니다. 작은따옴표('), 큰따옴표("), 또는 백틱(````)으로 묶여 있습니다. 예: 'Hello', "World", `Hello, ${name}!`
3. 불리언(Boolean): true 또는 false의 두 가지 값만을 가지며, 조건문 등에서 사용됩니다.
4. 객체(Object): 키와 값의 쌍으로 구성된 복합 데이터 타입입니다. 예: { name: "dongoori", age: 20 }
5. 배열(Array): 여러 값을 순서대로 저장하는 데 사용되며, 0부터 시작하는 인덱스로 각 요소에 접근할 수 있습니다. 예: [1, 2, 3, "Hello"]
6. 함수(Function): 실행 가능한 코드의 블록입니다. 자바스크립트에서 함수도 객체의 일종으로 취급됩니다.
7. undefined: 변수가 선언되었으나 아직 값이 할당되지 않았을 때 사용됩니다.
8. null: '값이 없음'을 나타내는데 사용되며, 의도적으로 변수에 '비어있음' 또는 '알 수 없음'을 표시할 때 사용됩니다.
9. Symbol: ES6에서 도입된 새로운 데이터 타입으로, 고유하고 변경 불가능한 데이터 타입입니다.