2. [Javascript] 변수선언

JavaScript에서 let, const, var는 변수를 선언하는 세 가지 키워드입니다. 

이들은 변수를 선언하는 방법과 변수의 범위와 생명주기에 대한 동작에서 차이가 있습니다.

---

---

1. var

• var는 변수를 함수 범위(function scope)로 선언합니다.
• 함수 내에서 선언된 변수는 해당 함수에서만 접근할 수 있으며, 함수 외부에서는 접근할 수 없습니다.
• 변수가 선언되기 전에도 사용할 수 있습니다. 이를 변수 호이스팅(variable hoisting)이라고 합니다.
• var로 선언된 변수는 중복 선언이 가능하며, 동일한 이름의 변수를 여러 번 선언하면 나중에 선언한 값으로 덮어씁니다.

예시)

function example() {
  var x = 10;
  if (true) {
    var x = 20;
    console.log(x); // 20
  }
  console.log(x); // 20
}

---

2. let

• let은 블록 범위(block scope) 변수를 선언합니다.
• 블록은 중괄호 {}로 둘러싸인 코드 영역을 말합니다.
• if, for, while 등의 제어문이나 함수 내에서 변수를 선언할 때 주로 사용됩니다.
  변수는 선언된 블록 내에서만 접근할 수 있으며, 블록 외부에서는 접근할 수 없습니다.
  호이스팅은 발생하지만, 변수는 선언된 위치에서 초기화되기 전에는 사용할 수 없습니다.

 

예시)

function example() {
  let x = 10;
  if (true) {
    let x = 20;
    console.log(x); // 20
  }
  console.log(x); // 10
}

---

3. const

• const는 상수(constant)를 선언합니다. 한 번 할당된 값은 변경할 수 없습니다.
• const로 선언된 변수는 블록 범위를 가지며, 호이스팅은 발생하지만 초기화되기 전에는 사용할 수 없습니다.
• const로 선언된 객체나 배열은 변경할 수 없는 것을 의미하지 않습니다. 객체의 프로퍼티나 배열의 요소를 수정하는 것은 가능합니다.

예시)

function example() {
  const x = 10;
  // x = 20; // 오류: 상수에 값을 다시 할당할 수 없음
  const obj = { name: 'John' };
  obj.name = 'Jane'; // 가능: 객체 프로퍼티 수정
  console.log(obj.name); // 'Jane'
}

---

---

따라서.

• 일반적으로 var보다는 let과 const를 사용하는 것이 권장됩니다. 이는 변수의 범위를 명확하게 제한할 수 있고, 의도하지 않은 변수의 재할당을 방지할 수 있기 때문입니다. 그러나 상황에 따라서는 var를 사용해야 하는 경우도 있을 수 있습니다.
• let과 const의 사용 규칙:
  변수의 값을 변경해야 하는 경우에는 let을 사용합니다.
  변수의 값을 변경하지 않고 상수로 사용해야 하는 경우에는 const를 사용합니다.
  가능한 한 const를 사용하여 변수를 선언하고, 값이 변경되어야 하는 경우에만 let을 사용하는 것이 좋습니다.

예시)

function example() {
  const pi = 3.14; // 원주율은 변경되지 않으므로 상수로 선언
  let radius = 5; // 반지름은 변경될 수 있으므로 변수로 선언
  let area = pi * radius * radius;
  console.log(area); // 78.5

  radius = 7; // 변수 값 변경
  area = pi * radius * radius;
  console.log(area); // 153.86
}

위 예시에서 pi는 상수로 선언되어 변경되지 않는 값을 나타내고, radius는 변수로 선언되어 값을 변경할 수 있습니다. 이렇게 변수의 용도와 변경 가능성에 따라 적절한 키워드를 선택하여 사용하면 코드의 가독성과 유지 보수성을 높일 수 있습니다.

---

---

알아두면 좋은.

Object와 Array 비교

• Object (객체):

var person = {
  name: "John",
  age: 30,
  isStudent: false,
  sayHello: function() {
    console.log("안녕하세요!");
  }
};

console.log(person.name); // "John" 출력
console.log(person.age); // 30 출력
console.log(person.isStudent); // false 출력
person.sayHello(); // "안녕하세요!" 출력

 

• Object는 이름(key)과 해당하는 값(value)의 쌍으로 이루어진 속성들의 모음입니다.
• Object는 일반적으로 식별자나 이름으로 불리는 속성에 접근하는 데 사용됩니다.
• 속성은 객체 리터럴 문법 {} 또는 new Object() 생성자를 사용하여 생성할 수 있습니다.
• 속성에 접근할 때는 점(.) 또는 대괄호([]) 표기법을 사용할 수 있습니다.
• 속성의 값은 모든 유형의 데이터(문자열, 숫자, 불리언, 함수 등)가 될 수 있습니다.
• 객체는 동적으로 속성을 추가, 수정 또는 삭제할 수 있습니다.

---

• Array (배열):

var numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1 출력
console.log(numbers.length); // 5 출력

numbers.push(6); // 배열 끝에 요소 추가
console.log(numbers); // [1, 2, 3, 4, 5, 6] 출력

numbers.pop(); // 배열 끝의 요소 제거
console.log(numbers); // [1, 2, 3, 4, 5] 출력

numbers.splice(2, 1); // 인덱스 2의 요소 제거
console.log(numbers); // [1, 2, 4, 5] 출력

 

• Array는 값들의 순서화된 목록입니다. 각 값은 인덱스로 접근할 수 있습니다.
• Array는 일련의 값들을 보다 효율적으로 관리하고 조작하는 데 사용됩니다.
• 배열은 대괄호([])로 둘러싸여 있으며, 각 요소는 쉼표로 구분됩니다.
• 배열의 요소에 접근할 때는 인덱스(0부터 시작)를 사용하여 접근합니다.
• 배열에는 내장된 메서드와 속성이 있어 배열의 크기를 조정하거나 요소를 추가, 삭제, 검색할 수 있습니다.