자바스크립트 - 변수의 소개

자바스크립트의 주요 주제에 따른 간략한 설명과 각 주제에 대한 코드 예제를 아래에 제공합니다.

1. 변수 소개 (Introduction to Variables):

변수는 데이터를 저장하고 참조하는 데 사용되는 식별자입니다. 자바스크립트에서 변수를 선언하고 값을 할당하는 방법을 배우게 됩니다. 변수선언 끝에 세미콜론 붙입니다. 세미콜론은 문장의 끝을 의미
예제:

let age = 30; // 변수 "age"를 선언하고 30을 할당

2. 변수 만들기 (Creating Variables):

변수를 만들고 초기값을 할당하는 방법을 배웁니다. 이 주제에서는 하나의 변수 또는 여러 변수를 동시에 만드는 방법을 다룰 것입니다.
예제:

let name = "John"; // 하나의 변수 만들기
let x, y, z; // 여러 변수 만들기

3. 변수 만들 때 주의사항 (Considerations When Creating Variables):

변수명을 정할 때 주의할 사항에 대해 배웁니다. 변수명은 특정 규칙을 따르고, 의미를 가지도록 선택해야 합니다.

숫자로 시작해선 안되고 알파벳 대소문자를 구분해야 합니다.

변하지 않는 환경변수는 전부 대문자로 해주세요 (DB이름, 관리자 이름)
예제:

// 유효한 변수명
let myVariable = "Valid variable name";

// 잘못된 변수명 (숫자로 시작)
let 123variable = "Invalid variable name";

4. 변수에 저장할 수 있는 데이터 종류 (Data Types for Variables):

자바스크립트에서 변수가 저장할 수 있는 다양한 데이터 유형을 알아봅니다. 이에는 숫자, 문자열, 배열, 객체 등이 포함됩니다.
예제:

let number = 42; // 숫자
let text = "Hello, World!"; // 문자열
let myArray = [1, 2, 3]; // 배열
let person = { name: "Alice", age: 25 }; // 객체

5. 데이터 위치와 종류 (Data Storage and Types):

변수가 데이터를 어떻게 저장하고 참조하는지 이해합니다. 이에는 데이터 유형의 메모리 저장 위치와 값의 변경 가능성에 대한 정보가 포함됩니다.
예제:

let a = 10; // "a" 변수에는 숫자 데이터가 저장됩니다.
let b = a; // "b"에 "a"의 값이 복사됩니다.
a = 20; // "a"의 값 변경
console.log(b); // "b"의 값은 여전히 10

6. 변수 값 저장 및 변경 (Storing and Modifying Variable Values):

변수 값 저장 및 변경 방법에 대해 배웁니다. 변수 값을 변경하고 다른 값으로 업데이트하는 방법을 다룰 것입니다.
예제:

let counter = 0; // 변수 초기화
counter = counter + 1; // 변수 값 변경
console.log(counter); // 1 출력

 

변수 선언 방식

자바스크립트에서 변수를 선언하는 방식에는 let, const, 그리고 var가 있습니다. 각각의 변수 선언 방식에 대한 설명과 예시 코드를 아래에서 제공합니다:

let (Block-Scoped Variable):

let 선언 방식의 특징은 변수 재선언이 불가 합니다. 그러므로 다른 함수나 데이터가 변수 재선언으로 덮어쓰기가 되는 현상을 방지합니다.

 

let x = 8;
let x = 1; //오류가 납니다.

 

 

변수 재선언이 불가한 let 키워드의 속성을 생각해 본다면 아래의 예시를 통해 let을 사용하여 변수를 선언하면 해당 변수는 블록 스코프를 가진다는 것을 알 수 있습니다. 즉, 변수는 선언된 블록 내에서만 유효합니다. let을 사용하여 선언한 변수는 값을 변경할 수 있습니다. 

예제:

let x = 10;
if (true) {
  let x = 20; // 새로운 변수 x를 블록 내에서 선언
  console.log(x); // 20 출력
}
console.log(x); // 10 출력

const (Constant):

const 키워드를 사용하여 변수를 선언하면 해당 변수는 상수로 취급되며 한 번 값을 할당하면 다시 변경할 수 없습니다. const는 변수 재선언도 불가하고 값 재할당도 안됩니다.
const로 선언한 변수는 블록 스코프를 가집니다.

단, 배열 데이터의 일부를 재할당할 수는 있습니다

예제:

const PI = 3.14;
// PI = 3.14159265359; // 에러 - 상수로 선언된 값은 변경할 수 없음

 

const x = [1,2,3];
x[0] = 4;
console.log(x); //오류없이 됩니다

var (Function-Scoped Variable):

ES6 이전부터 사용되는 키워드입니다. var 키워드를 사용하여 변수를 선언하면 해당 변수는 지정된 함수 범위에서 유효한 함수 스코프를 가집니다. 이것은 변수가 선언된 함수 내에서만 유효함을 의미합니다. var로 선언한 변수는 값이 변경될 수 있습니다.

예제:

function example() {
  var y = 5;
  if (true) {
    var y = 10; // 동일한 변수 y를 블록 내에서 다시 할당
  }
  console.log(y); // 10 출력
}

 

var 변수 선언 방식은  let과 const 변수 선언 방식과 달리 변수의 재선언과 재할당 모두 가능합니다.

예를 들어:

var x = 10;
var x = 20; // 재선언 가능

let y = 30;
// let y = 40; // 에러 - 재선언 불가능

const z = 50;
// const z = 60; // 에러 - 재선언 불가능

var로 선언한 변수는 같은 스코프 내에서 여러 번 선언할 수 있으며, 나중에 선언한 값으로 변수가 업데이트됩니다. 반면 let과 const로 선언한 변수는 같은 스코프 내에서 한 번만 선언할 수 있습니다.

 

ES6 부터 소개된 let, const 선언방식의 이점

 

let과 const를 사용하는 것이 코드의 안전성과 가독성 측면에서 일반적으로 더 권장됩니다. 이는 여러 이유로 인해 발생합니다:

• 재선언 방지: let과 const는 변수 재선언을 방지합니다. 이것은 실수로 동일한 변수명을 여러 번 선언하는 오류를 방지하고 코드의 일관성을 유지하는 데 도움이 됩니다.
• 블록 스코프: let과 const는 블록 스코프를 가지므로 변수의 범위가 블록 내로 제한됩니다. 이는 변수를 블록 내에서만 사용하고 블록 외부에서 접근할 수 없도록 합니다. 이것은 버그를 줄이고 코드를 더 예측 가능하게 만듭니다.
• 값 변경 제한: const는 변수에 한 번 값을 할당하면 다시 변경할 수 없도록 합니다. 이것은 상수를 정의하는 데 유용하며, 값을 더 안정적으로 유지하는 데 도움이 됩니다.
• 호이스팅 문제 완화: var는 호이스팅(hoisting) 문제를 일으키기 쉽습니다. let과 const는 호이스팅 문제를 완화하고 초기화하기 전에 변수에 액세스하지 못하도록 합니다.
• 보다 명확한 코드: let과 const는 코드의 의도를 명확히 나타내는데 도움을 줍니다. 예를 들어, 변수의 값이 변경되지 않아야 하는 경우 const를 사용하면 다른 개발자가 이를 알고 코드를 더 잘 이해할 수 있습니다.

결론적으로, let와 const는 코드의 안전성과 가독성을 높이고 버그를 줄이는 데 도움을 주며, 일반적으로 더 권장되는 변수 선언 방식입니다. var는 이전 버전의 자바스크립트와의 하위 호환성을 위해 남아 있지만, 가능한 한 let와 const를 사용하는 것이 좋습니다.

 

변수값을 업데이트 하려면?

 

변수 값을 업데이트하려면 let 또는 const를 사용할 수 있습니다. 이는 var보다 블록 스코프를 가지며 재선언을 방지하기 때문에 코드의 안전성을 높일 수 있습니다. 아래는 let와 const를 사용하여 변수 값을 업데이트하는 예제입니다:

let 사용:

let count = 0;
count = count + 1; // 변수 값을 업데이트

const 사용 (배열 또는 객체 내의 속성 값 업데이트):

const person = { name: "John", age: 30 };
person.age = 31; // 객체 속성 값을 업데이트

const numbers = [1, 2, 3];
numbers.push(4); // 배열에 요소 추가

let를 사용하면 변수 자체의 값을 변경할 수 있고, const를 사용하면 변수가 상수로 선언되어 값을 변경할 수 없지만 객체나 배열 내의 속성 또는 요소는 변경할 수 있습니다.

또한, 객체 또는 배열을 완전히 새로운 값을 할당하여 변수 값을 업데이트할 수도 있습니다. 이렇게 하면 변수에 새로운 객체 또는 배열이 할당되어 이전 값은 사라지게 됩니다.