😏변수란 무엇이고 왜 필요할까?

코딩을 하다보면 굉장히 많은 변수들을 다룹니다. 서버에서 요청한 데이터들이나 라이브러리의 기능 같은 다양한 것들을 변수안에 저장해 사용합니다. 근데 변수란 것을 let,const 등을 이용해 저장하는 것만 알았지 어떤 순서로 저장되고 정확한 개념이 뭔지 알고 사용한다면 더 멋진 코드를 만들 수 있지 않을까? 생각해봅니다.

결론부터 말하자면..

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위한 이름을 말합니다.

10 + 20 //이라는 코드를 실행하면 자바스크립트에서는 무슨일이 일어날까?

간단히 순서로 나타내 보겠습니다.

1. 자바스크립트 엔진이 10 + 20 이라는 식의 의미를 해석하면 + 연산을 수행하기 위해 먼저 + 연산자의 숫자 값, 즉 피연산자를 기억합니다. (연산은 CPU에서 , 메모리를 통해 데이터를 기억함)

2. 위의 숫자 10과 20이 메모리 주소에 저장되고 CPU가 이 값을 읽어 연산을 수행한 후에 30이란 숫자를 메모리에 저장됩니다.(✅모든 숫자 값들은 전부 이진수입니다!)

-> 문제는 이 다음에 발생합니다. 30이라는 연산된 값을 재사용하고 싶지만 그러기 위해선 저장된 메모리 주소에 직접 접근해야 합니다. 하지만 메모리 주소에 직접 접근하는 것은 굉장히 위험한 일입니다. 만약 실수로 운영체제가 사용하고 있는 값을 변경해버리면 치명적인 오류가 생길 수 있기 때문에..

이러한 오류를 발생시키지 않고, 개발자는 직접 메모리 주소를 통해 값을 저장할 필요없이 변수를 통해 안전하게 값에 접근할 수 있습니다.

변수에 값을 저장하는 것을 할당(assignment)
변수에 저장된 값을 읽어 들이는 것을 참조(reference)라고 합니다.

이러한 변수들은 명명한 이름을 통해서 변수에 저장된 값의 의미를 명확히 알 수 있기 때문에
딥다이브에 나와있듯이.. 변수이름은 심사숙고해서 짓도록 해보자..!

이 변수들은 var, let, const를 사용해 선언합니다.

값의 할당?

var score ; // 변수 선언
score = 80; // 값의 할당

var score  = 80 // 동시에 할 수도 있습니다!

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행됩니다.

🐱‍👤 let , const 어떤차이가 있을까?

그전에 scope의 개념먼저 알아보겠습니다.

• global scope : 전역에 선언되어 있어 어느 곳에든지 해당 변수에 접근할 수 있습니다
• local scope : 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근 할 수 없습니다.
  • block scope : 코드 문단 { } ( 중괄호 ) 에 의해서 생기는 변수의 유효범위
  • function scope : 함수에 의해서 생기는 범위

let과 const는 블록스코프 개념으로 오직 { } 로 형성된 내부에서 접근이 가능합니다.

function a() { // 함수 스코프 시작
  for(let i = 0; i < 5; i++) { // 블록 스코프 시작
    console.log(i);
  } // 블록 스코프 종료
  console.log('최종', i);
}; // 함수 스코프 종료
a();

/* 결과물
ReferenceError: i is not defined
*/

• 반면 var는 함수스코프 개념으로 함수가 만들어진 곳이라면 어떤 다른 블록인 { }가 있어도 접근이 가능합니다.

  function a() { // 함수 스코프 시작
    // var로 변수를 선언했을 때
    for(var i = 0; i < 5; i++) { // 블록 스코프 시작
      console.log(i);
    } // 블록 스코프 종료
    console.log('최종', i);
  }; // 함수 스코프 종료
  a();
  
  /* 결과물
    0
    1
    2
    3
    4
    최종 5
  */

• 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알립니다.

• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화합니다

• 호이스팅(hoisting) : 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징.

• var로 선언하기 이전에 변수에 접근하게 된다면 undefined를 도출하게 됩니다.

  • var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행

console.log(a); // undefined
var a = 5;

• let과 const로 만약 위 처럼 선언 이전에 접근을 하게 된다면 Reference Error를 도출하게 됩니다
  • 호이스팅이 됐지만 , 초기화가 진행되지 않았기 때문에 Reference Error가 나옵니다

console.log(a); // Reference Error: a is not defined
let a = 5;

🍕값의 재할당?

재할당이란 이미 값이 할당 되어있는 변수에 새로운 값을 또다시 할당하는 것을 말합니다.

var score = 90;
score = 80;

위에서 보셨듯이 var로 선언한 변수는 함수 스코프 개념이고, 값을 재할당 할 수도 있습니다. 다른 값으로 변할 수 있죠. 그래서 변수라고 하는 것입니다.
값을 재할당 할 수 없다면 그것은 변수가 아니라 상수(constant)라고 합니다.