자바스크립트

REACT _ 1

zayn 2024. 10. 29. 20:15

01. 변수 선언 매커니즘

 

(1) 왜 변수가 필요할까요?

  • (1)-1. 데이터 저장 및 관리의 필요성변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 해줍니다. 예를 들어, 사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야 할 때 변수 없이는 각 단계마다 데이터를 반복적으로 처리해야 해요. 효율적인 데이터 관리를 위해선 변수 선언 매커니즘은 필수라고 할 수 있습니다.
let numberOfUsers = 50; // 사용자 수를 저장
numberOfUsers = numberOfUsers + 5; // 새로운 사용자 추가
// numberOfUsers += 5;
console.log("Total users: " + numberOfUsers); // 출력: Total users: 55

 

  • (1)-2. 프로그램의 복잡성 관리
  • 변수가 없다면 직접 값을 기입해야 하므로 코드의 복잡성이 증가하고, 오류 가능성이 높아집니다. 또한, 프로그램의 확장성과 유지보수성이 떨어질 수 있습니다. 변수를 사용하면 코드의 가독성이 높아지고, 수정이 필요할 때 적은 변경으로 원하는 결과를 얻을 수 있습니다.
  • 아래 코드 예시에서도 36.5라는 값을 여러 군데에서 사용하게 된다면 복잡성이 상당히 늘어나게 되겠죠!
let temperature = 36.5; // 체온 값 저장

// if (36.5 > 37.5) { // 변수가 없다면?
if (temperature > 37.5) {
    console.log("You might have a fever.");
} else {
    console.log("Your temperature is normal.");
}
 
 
(1)-3. 재사용성 및 유지보수 향상
변수를 통해 정의된 데이터 값을 여러 위치에서 재사용함으로써 코드의 재사용성을 높일 수 있습니다. 예를 들어, 한 함수에서 계산된 결과를 다른 여러 함수에서도 활용할 수 있습니다. 특히 큰 프로그램이나 복잡한 시스템에서 큰 이점이 되겠죠?
아래 코드 예시에서 totalPrice라는 값을 사용하지 않고 계산하는 식을 여러 군데에 넣는다면 어떨까요? 수정할 때 정말 곤란할 것 같네요
이렇게 변수를 사용함으로써 프로그램의 유연성, 효율성, 그리고 확장성을 동시에 증진시킬 수 있습니다. 데이터의 중요성과 처리 과정에서 변수의 역할은 필수적인 요소가 됩니다.
 

(2) 변수의 종류는 어떤 것이 존재하며, 어떤 분류로 나누게 될까요?

 
(2)-1. let, const, var
자바스크립트의 변수에는 let, const, var가 존재해요.
 
(2)-2. 스코프에 따른 분류
변수는 그들이 선언되는 위치에 따라 다른 스코프(유효 범위)를 가집니다. 자바스크립트의 주요 스코프 유형은 글로벌 스코프, 블록 스코프, 함수 스코프입니다.

글로벌 변수는 전체 코드에서 접근할 수 있으며, 블록 스코프 변수(let, const)는 선언된 블록 내에서만 접근할 수 있고, 함수 스코프 변수(var)는 선언된 함수 내에서 유효합니다.

  • (2)-3. 재할당 가능성에 따른 분류
  • 변수는 또한 그들이 재할당될 수 있는지 여부에 따라 분류될 수 있습니다. **const**는 값을 재할당할 수 없는 상수를 선언할 때 사용되며, 초기 선언 이후 그 값을 변경할 수 없습니다. 반면에 **var**와 **let**은 값을 재할당할 수 있습니다. 변수의 사용 목적과 예상되는 데이터 변경 유무에 따라 적절한 키워드를 선택하는 것이 중요하겠네요!

 

(1) const

  • (1)-1. 상수 선언의 중요성
  • const를 사용하여 상수를 선언하면, 프로그램 내에서 값이 변경되지 않는 변수를 명확하게 표현할 수 있습니다. 코드의 안정성을 높이고, 의도치 않은 값 변경으로 인한 버그를 예방할 수 있기 때문에 올바른 상수를 사용하는 것은 매우 중요해요.
const MAX_USERS = 100;
// MAX_USERS = 150; // TypeError: Assignment to constant variable.
console.log(MAX_USERS); // 100

 

  • (1)-2. 블록스코프와 안전한 프로그래밍
  • const는 블록 스코프를 갖기 때문에 선언된 블록 내에서만 유효해요. 스코프를 이해한 상태에서 개발을 한다면 예측 가능한 코드를 작성할 수 있기 때문에 안전해요!
// 누구라도 temp라는 변수는 if문 안에서만 사용될 거라고 예상할거에요.
if (true) {
    const temp = 'local';
    console.log(temp); // 'local'
}
// console.log(temp); // ReferenceError: temp is not defined

 

(2) let

  • (2)-1. 변수의 유연한 관리
  • let을 사용하면 변수의 값을 필요에 따라 유연하게 변경할 수 있어요. 계산이나 조건에 따라 변할 수 있는 값을 사용해야 할 때 적합하겠죠! 아래 코드가 const로 작성되었다면 한번 할당한 값을 영원히 바꿀 수 없답니다 
let score = 90;
score += 10;
console.log(score); // 100

 

  • (2)-2. 블록 스코프의 이점
  • let 또한 블록 스코프를 따릅니다. 이는 변수를 블록 내부에서만 사용하도록 함으로써 외부에서의 접근을 제한하고, 변수의 충돌을 방지하여 프로그램의 안전성을 높이게 돼요. 우리가 잘 알고있는 for문의 경우에도 사실 블록 스코프로서의 let을 사용한 예시라도 이해해주시면 돼요!
for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
}
// console.log(i); // ReferenceError: i is not defined

 

(3) const vs let을 잘 고르는 팁!

변수 선언은 가장 먼저 const 를 떠올리고 재할당이 필요한 경우만 let 을 떠올리면 좋겠습니다 

 

(1) var

  • (1)-1. 함수 스코프를 가지는 var
  • var는 함수 스코프를 가지며, 함수 내부 어디에서든 접근할 수 있습니다. 이는 때때로 예상치 못한 범위에서 변수가 접근 가능하게 되어 문제를 일으킬 수 있어요..!!! var를 쓸 때는 조심하고 또 조심해야 해요.
function testFunction() {
    var test = "accessible within this function";
    if (true) {
        var test = "still accessible within the whole function";
    }
    console.log(test); // 'still accessible within the whole function'
}
testFunction();

 

(2) var를 사용하면 안되는 이유

  • (2)-1. 범위 관리의 어려움
  • var로 선언된 변수는 예상치 못한 범위에서 사용될 수 있어 프로그램의 버그를 초래할 가능성이 높습니다. 블록 스코프를 가지는 let과 const는 이러한 문제를 해결하여 더 안전한 코드 작성을 가능하게 합시다!
if (true) {
    var notBlockScoped = "I am available outside this block.";
}

// 당...황!!
console.log(notBlockScoped); // "I am available outside this block."

'자바스크립트' 카테고리의 다른 글

2024.11.09  (2) 2024.11.09
2024.10.19  (1) 2024.10.18
JS _ 1  (1) 2024.10.08
보충수업 (JAVA)  (1) 2024.09.20
Javascript란?  (0) 2024.08.29