변수

변수의 선언과 할당

변수를 선언할 때는 let 키워드를 사용한다. let 키워드 뒤에 선언하고자 하는 변수명을 입력한다.

let name;

 

선언된 변수에 값을 할당할 때는 할당 연산자(=)를 사용한다.

name = 'kimcoding';

 

변수 선언과 값 할당을 동시에 할 수 있다.

let name = 'kimcoding';

 

변수에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당할 수 있다. 아래 예제에서 string, number, boolean 외의 다른 타입은 추후에 학습하게 될 자료형이다.

let string = '원주율';
string = 123;
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = { name: 'kimcoding', age: 25, course: 'FE' };
let empty = null;
let notDefined = undefined;

아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined가 자동으로 할당된다. 이는 초기화라는 JavaScript의 독특한 특징이다.

let variable;
console.log(variable); // undefined

 

 

값의 재할당

let 키워드로 선언한 변수에 새로운 값을 할당할 수 있다. 이를 재할당이라고 한다. 재할당에도 할당 연산자(=)를 사용한다.

let name = 'kimcoding';
console.log(name); // 'kimcoding'
name = 'parkhacker';
        console.log(name); // 'parkhacker'

 

 

재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지된다.

const name = 'kimcoding';
        console.log(name); // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

 

 

 

var 키워드

var 키워드는 let 키워드와 const 키워드가 등장하기 이전에 사용되던 변수 선언 키워드이다. var 키워드에는 여러 단점이 존재하고, 이를 보완하기 위해 let 키워드와 const 키워드가 등장하였다. 따라서 var 키워드는 사용을 되도록 지양하고, let 키워드와 const 키워드를 사용할 것을 권장한다. 재할당이 필요한 변수에는 let 키워드를, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const 키워드를 사용해야 한다. 

var name = 'kimcoding'; // var 키워드가 가지고 있는 단점으로 인해 사용을 지양하는 것이 좋다.

 

 

 

 

주의점 

자바스크립트에서 변수를 다루는 방법에는 몇 가지 주의할 점이 있다.

1. 얕은 복사에 주의해야 한다: 변수를 다른 변수에 할당할 때, 객체와 배열 같은 참조형 데이터를 할당할 경우 얕은 복사가 이루어져 원본 데이터가 변경될 수 있으므로 주의해야 한다.
2. let과 const 사용: var 대신에 let과 const를 사용하는 것이 권장된다. var는 호이스팅이 되지만, let과 const는 블록 스코프를 가지며 const는 재할당이 불가능한 상수를 선언할 때 사용된다.
3. 배열 요소의 추가 및 수정: const로 선언된 배열이라 하더라도 배열의 요소를 추가하거나 수정할 수 있다. 이는 배열의 주소값이 변경되지 않기 때문이다. 그러나 배열 자체를 다른 배열로 재할당하는 것은 불가능하다.
4. 템플릿 리터럴: `` 백를 사용한 템플릿 리터럴은
   1. 변수를 문자열에 쉽게 삽입할 수 있게 한다. ${} 안에 변수를 삽입하여 가독성을 향상시킬 수 있다.
   예시를 통해 설명을 보충하겠다.

// 얕은 복사 예시
let originalArray = [1, 2, 3];
let copiedArray = originalArray; // 얕은 복사
copiedArray.push(4);
console.log(originalArray); // [1, 2, 3, 4] 원본 배열이 변경됨

// let과 const 사용
let x = 10;
const y = 20;
// y = 30; // Error! const로 선언된 변수는 재할당이 불가능
        for (let i = 0; i < 3; i++) {
        console.log(i);
}
// console.log(i); // Error! let으로 선언된 변수는 블록 스코프를 가짐

// 템플릿 리터럴 사용
let name = 'John';
let greeting = `Hello, ${name}!`;
        console.log(greeting); // Hello, John!