#JavaScript Grammar_변수와 상수

# 변수란? 

- 데이터를 저장하고 나중에 사용할 때 데이터를 참조하는데 사용함.

- 메모리 상의 위치에 이름을 붙인 것이며, 데이터 위치를 가리키기 위한 이름 또는 식별자로 사용함.

 

# 상수란? 

- 변수와 유사하지만, 한 번 할당하면 값을 변경할 수 없는 식별자

- 주로 변하지 않아야 하는 값에 사용되며, 코드의 가독성과 안정성을 향상시킴 

 

상수 예시) 

const pi = 3.14159265359; // 'pi' 상수에 원주율 값을 할당한 후 다시 할당 불가능

 

---

<변수의 5가지 주요 개념>

var myVar = "Hello World!"; //가 있다고 가정

1. 변수 이름(Variable Name):

- 변수 이름은 데이터를 고유하게 식별하는 이름. 이것은 변수를 사용하여 값을 저장하고 추적하는 방법 

- 변수 이름은 일반적으로 문자, 숫자, 밑줄(_)로 구성되며 대소문자를 구분.

- 예시) `myVar` 라는 변수 이름.  

 

2. 변수 값(Variable Value): 

- 변수 값은 변수에 실제로 저장되는 데이터 정보이며, 변수가 "가지고 있는" 데이터.

- 변수 값은 어떠한 데이터 형식이든 가능하며, 숫자, 문자열, 객체 등이 될 수 있음.

- 예시) `myVar`의 값은 `"Hello World!"`.

 

3. 변수 할당(Variable Assignment): 

- 변수 할당은 변수에 값을 저장하는 행위를 의미, 변수를 초기화 하거나 업데이트할 때 사용.

- 할당 연산자 ('=')를 사용하여 값을 변수에 넣음.

- 예시)`myVar` 변수에 `"Hello World"`를 할당하는 것 >>> `myVar = "Hello World!"`. 

 

4. 변수 선언(Variable Declaration): 

- 변수를 사용하려면 먼저 변수를 선언해야 함, 변수 선언은 컴퓨터에 이 변수를 인식하도록 하는 행위.

- 선언 시, `var`, `let`, 또는 `const` 키워드를 사용하며 이는 변수의 유형을 지정. 

- 예시) `var` 키워드를 사용하여 `myVar` 변수를 선언 >>> `var myVar;`.

 

5. 변수 참조(Variable Reference): 

- 변수 참조는 변수의 할당된 값을 읽거나 사용하는 행위를 말하며, 변수의 값을 다른 코드에서 사용할 수 있게 함. 

- 예시) `myVar` 변수의 값을 콘솔에 출력하는 것 >>> `console.log(myVar)`.

 

---

<변수를 선언하는 3가지 방법>

 

1. `var`(옛날 방식) :

- `var`로 선언한 변수는 함수 스코프를 가지며, 호이스팅(hoisting)이 발생함.

- `var`로 선언한 변수는 중복 선언이 가능하며, 동일한 변수의 이름을 여러 번 선언해도 오류가 발생하지 않음. 

- `var`는 값을 재할당할 수 있음. 

var myVar = "Hello World"; 
console.log(myVar); // "Hello World"

myVar = "New Value"; // 값 변경 가능
console.log(myVar); // "New Value"

 

2. `let`(모던 방식_ ES6에서 새롭게 도입된 방식) :

- `let`을 사용하여 변수를 선언할 때, 변수는 블록 스코프를 가지며 호이스팅이 발생함. 

- `let`으로 선언한 변수는 중복 선언이 불가능하며, 같은 변수 이름을 두 번 선언하면 오류가 발생함.

- `let`은 값을 재할당할 수 있음. 

let myLet = "Hello World"; 
console.log(myLet); // "Hello World"

myLet = "New Value"; // 값 변경 가능
console.log(myLet); // "New Value"

 

3. `const`(상수_ ES6에서 새롭게 도입된 방식):

- `const`를 사용하여 변수를 선언할 때, 변수는 블록 스코프를 가지며 한 번 할당하면 값을 변경할 수 없음.

- `const`로 선언한 변수는 중복 선언이 불가능하며, 값을 변경하려고 하면 오류가 발생함. 

const myConst = "Hello World"; 
console.log(myConst); // "Hello World"

myConst = "New Value"; // 오류 발생: 상수는 값 변경 불가능

 

---

+ 위 정리글에 나온 호이스팅(Hoisting)과 블록스코프(Block Scope)에 관하여...

# 호이스팅(Hoisting)이란? 

- JavaScript에서 변수 및 함구 선언을 해당 스코프의 최상단으로 "끌어 올리는" 동작을 나타냄.

- 이것은 코드 실행 전에 발생하며 개발자가 코드를 작성한 순서와는 다르게 작동할 수 있음. 

 

예시 1) 변수 선언 호이스팅:

- JavaScript는 변수 선언문을 해당 스코프의 최상단으로 끌어 올림.

- 이렇게 하면 변수를 선언하기 전에 변수를 참조할 수 있지만, 변수 초기화(값 할당)는 끌어 올라가지 않으며 선언 시에만 발생함.

console.log(myVar); // 출력: undefined
var myVar = 42;

위의 코드는 실제로 다음과 같이 작동함

var myVar;
console.log(myVar); // 출력: undefined
myVar = 42;

---

예시 2) 함수 선언 호이스팅: 

함수 선언도 마찬가지로 해당 스코프의 최상단으로 끌어 올리며 함수를 선언하기 전에 호출이 가능함. 

sayHello(); // 출력: "Hello!"
function sayHello() {
  console.log("Hello!");
}

위의 코드는 실제로 다음과 같이 작동함 

function sayHello() {
  console.log("Hello!");
}
sayHello(); // 출력: "Hello!"

- 호이스팅은 코드 작성의 편의성을 높이지만, 주의해서 사용을 해야함.

- 유지보수하기 쉽게 하려면 변수와 함수를 사용하기전에 선언하는 것이 좋음. 

 

#블록 스코프(Block Scope)란? 

- 변수나 상수가 유효한 번위를 나타내는 개념

- 중괄로 `{ }`로 둘러 쌓인 코드 블록 내에서 선언된 변수나 상수가 해당 블록 내에서만 유효함.

- 블록 외부에서는 접근불가능.

- 즉, 변수나 상수가 선언된 중괄호 내에서만 사용 가능한 범위를 뜻함. 

 

블록 스코프 예시) 

if (true) {
  let blockScopedVar = "I'm in a block";
  console.log(blockScopedVar); // "I'm in a block"
}

console.log(blockScopedVar); // 에러 발생: blockScopedVar는 블록 외부에서 접근 불가능

- 위의 코드에서 `blockScopedVar`는 `if`문 내에서 선언되었으며, `if` 블록 외부에서는 접근할 수 없음.