모던 자바스크립트 4 - 변수

변수는 뭐지?

// 변수를 선언하고 할당하면
// 컴퓨터 메모리에 자바스크립트가 자동으로 고유의 메모리 주소를 생성
// (임의의 메모리 상의 위치에 저장, 메모리 저장 시 모두 2진수로 저장됨)
const number1 = 100
const number2 = 200

// CPU가 메모리로부터 두 변수의 값을 읽어서 연산
// 연산한 값은 그자체로는 재사용이 불가
number1 + number2 = 300

// 재사용하려면 연산결과 값을 변수에 담아야함
const sum = number1 + number2 // 30

• 자바스크립트는 메모리 주소를 통해 값에 직접 접근 불가
  • 가능하다면 시스템 멈추게하는 치명적인 오류가 발생할 수도 있음
  • 코드 실행 전에는 메모리 주소 알 수 없음

 

// number라는 이름으로 변수를 선언
// 그리고 임의의 메모리 위치에 undefined가 할당(초기화)
// 임의의 메모리 주소 생성

// 변수를 포함한 모든 식별자는 실행 컨텍스트에 등록됨
// 실행 컨텍스트는 소스코드 실행환경, 실행결과 관리 영역
// 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자, 스코프 관리함
const number

// 변수 number에 30이라는 값을 '할당'
const number = 30

// 변수 number를 '참조'해서 30을 더 더한다.
const result = number + 30

 

• 가비지 콜렉터
  
  • 자바스크립트는 가비지콜렉터를 내장하고있는 Managed Language
    
    • 성능적으로 어느정도 감수해야함(자동관리), 하지만 일관된 성능을 보장
  • Unmanaged Language는 개발자가 직접 메모리 할당, 해제를 해야함
    • 성능적으로 뛰어나게 할 수는 있겠지만, 치명적인 오류를 생산할 수도 있음

// 메모리에 100 할당
let number = 100

// 메모리에 200을 재할당 
// 이후에 자바스크립트의 가비지 콜렉터가 100은 이제 불필요한 값이라고 판단하면 100을 메모리에서 제거
number = 200

 

---

변수는 뭐가 있지?

var

• 블록 레벨 스코프 지원 안함(함수 레벨 스코프 지원) => 전역변수가 선언되어 부작용발생

// var 키워드를 사용하여 변수를 선언하면 함수 레벨 스코프를 지원합니다.
// 따라서 블록 안에서 선언된 변수들이 블록 밖에서도 접근 가능합니다.
// 이로 인해 의도치 않게 전역 변수가 선언되어 코드에서 예상치 못한 문제가 발생할 수 있습니다.

// 예시 코드:
var someVariable = 5;

if(true) {
	var someVariable = 10;
	console.log(someVariable); // 10
}

console.log(someVariable); // 10 (이전 변수 선언이 덮어써짐)

• 호이스팅 발생함

// 변수 선언이 런타임 그 이전(변수 평가 과정)에 자바스크립트 엔진이 모든 선언문을 소스코드에서 찾아 먼저 실행됨 
// (런타임이란 한 줄 씩 순차적으로 코드가 실행되는 시점임)
// 그리고 한 줄 씩 실행(런타임 시작)

console.log(number); // undefined

var number;

// 변수에 값을 할당하는 것은 런타임에 실행됨
// 따라서 초기화 값인 undefined 대신에
// 40이라는 값이 재할당 되는 것임
number = 40;

console.log(number); // 40

 

•  let
  • 재선언 안됨, 재할당 됨

function exampleFunction() {
  let x = 1;
  if (true) {
    let x = 2; // this declares a new variable x that is only accessible within the if block
    console.log(x); // outputs 2
  }
  console.log(x); // outputs 1 because the x in the if block is a different variable
}

exampleFunction();

 

• const
  • 재선언, 재할당 둘 다 안됨 (상수화됨)
    • 한 번 정해지면 변경 불가

function exampleFunction() {
  const x = 1;
  if (true) {
    const x = 2; // this declares a new variable x that is only accessible within the if block
    console.log(x); // outputs 2
  }
  console.log(x); // outputs 1 because the x in the if block is a different variable
}

exampleFunction();

const arr = [1, 2, 3];
arr.push(4); // this mutates the array by adding a new element
console.log(arr); // outputs [1, 2, 3, 4]