10 + 30 위 식을 컴퓨터로 연산하면 어떤 동작을 할까요? 일단 +라는 기호를 파싱하고 피연산자값(더한값)을 구합니다. 사람이 위 식을 연산하면 계산과 기억을 모두 머릿속에서 하지만 컴퓨터는 연산과 기억을 수행하는 부분이 나누어져 있습니다.
컴퓨터는 CPU를 이용해서 연산하고 메모리를 사용해 데이터를 기억합니다.
사진에는 이해를 돕기위해 숫자로 작성했지만 실은 메모리에는 2진수로 저장됩니다.(30 → 11110, 10 → 1010)
이를 연산한 결과도 주소가 다른 메모리 공간에 할당됩니다.
연산한 값을 다시 사용할 일이 없다면 그냥 연산하면 그만이지만 재사용할 일이 생겨서 메모리 공간에 접근하면 어떻게 될까요?
메모리 공간에 직접접근하게 되면 치명적 오류로 이어질 수 있습니다. 실수로 운영체제가 사용하고 있는 값을 변경해버리면 시스템 자체를 멈추게 하는 일이 생길 수 도 있습니다.
다행히 직접접근은 못하도록 되어 있습니다. 만약 된다고 하더라도 메모리 주소 할당은 랜덤(?)으로 되기 때문에 같은 컴퓨터에서 같은 코드를 실행할 때마다 모두 다른 메모리 주소에 할당되어 버리기 때문에 값을 조작하는 의미가 거의 없다고 볼 수 있습니다.
그래서 프로그래밍 언어는 값을 기억하고 싶고 재사용하고 싶기 때문에 변수라는 것을 사용합니다.
var result = 10;
변수를 사용하면 변수에 메모리 공간에 있는 값이 치환되어 실행됩니다. 따라서 메모리 값을 직접적으로 조작하지 않고 변수를 통해 안전하게 값에 접근할 수 있습니다.
따라서 변수란 값이 할당된 메모리 공간 자체 또는 메모리 공간을 식별하기 위한 이름을 말합니다.
식별자
변수를 식별자라고 부르기도 합니다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다.
var result = 30; 코드에는 result에 30이 할당되어 있다고 보여지지만 실제로는 30이 할당된 메모리 주소를 기억하고 있습니다.
변수 키워드
변수를 선언할 때는 var, let, const키워드를 사용합니다. ES6(2015ECMAScript)도입 전까지는 var 키워드가 유일한 변수를 선언하는 방법이였습니다. 지금은 let, const가 도입되어 var키워드를 잘 사용하지 않습니다. 왜냐하면 var는 여러가지 단점**이 있었기 때문입니다.
블록 레벨 스코프
var 키워드는 블록 레벨 스코프가 아닌 함수 레벨 스코프를 지원합니다. 이로 인해 전역 변수가 선언되어 부작용이 발생할 수 있습니다.
전역변수 → 코드 전체에 영향을 미치는 변수.
쉽게 말해서 이미 result라는 변수가 선언되었는데 모르고 같은 이름으로 선언해도 오류가 발생하지 않고 그 값으로 변경되어 적용될 수 있다는 말입니다.
var result = 10;
console.log(result); // 10
var result = 30;
console.log(result); // 30
// 나중에 result에 다른 값이 들어와서 코드에 혼란을 야기할 수 있습니다.선언
var result; // 값을 할당하지 않고 선언만 했습니다.선언만 했을 경우, 우리는 메모리 공간이 비어있을 거라고 생각할 수 있지만 사실은 undefined값이 암묵적으로 할당되어 있습니다.
undefined가 할당되기 전에 초기화단계를 거치는데 이는 이전 값(garbage value, 쓰레기 값)이 남아있을 수 있기 때문에 값을 초기화하고 아직 할당된 값은 없기 때문에 undefined를 할당합니다. 초기화하지 않으면 이전 값이 할당되어서 코드수행의 위험을 일으킬 수 있습니다. 다행히 자바스크립트는 자동으로 수행하는 기능입니다.
호이스팅
console.log(result); // undefined
var result;
console.log(result2); // Reference Error!
let result;
console.log(result3); // Reference Error!
const result;
위 코드를 보면 우리가 일반적으로 알고있는 코드 순서가 아닙니다. 그럼에도 불구하고 var키워드는 undefined라는 값이 할당되어 출력됩니다. 왜 그럴까요?
이는 자바스크립트 엔진이 실행 컨텍스트 소스코드 평가 과정에서 이미 변수를 선언하고 런타임이 진행되기 때문입니다. 간단히 말하자면 코드실행이 시작되기 전에 이미 코드 전체를 훑어보고 선언된 변수들을 이미 수집(?)해있다는 겁니다.
이렇게 나중에 변수가 선언되어도 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 합니다.
할당
할당은 위에 예시들처럼 등호를 사용하여 값을 지정합니다.
var result = 10; // 값을 할당합니다.
console.log(result); // 10값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행됩니다. 이 말은 할당된 값을 출력한다는 의미입니다.
console.log(result); // ?
var result = 10;
console.log(result); // ? 두 개의 출력값이 어떻게 나올까요? 네 맞습니다! 위에는 undefined 밑에는 10이 나옵니다. 왜냐하면 위 출력값은 선언된 값을 출력하고 밑에는 런타임으로 인해 할당된 값을 출력하기 때문입니다.
실행 컨텍스트(코드평가) - 선언되어 있는 코드인식 → 실행(런타임) - 코드실행(변수, 함수 등)
더 자세히 알고싶으면 실행 컨텍스트에 대해 알아보시면 되겠습니다.
재할당
var와 let 키워드는 값을 재할당할 수 있습니다.
let result = 10;
console.log(result); // 10
result = 30;
console.log(result); // 30 하지만 const 키워드는 값의 재할당이 되지 않습니다.
const result = 1;
console.log(result); // 1
result = 4;
console.log(reuslt); // Type Error!
// 왜냐하면 const 키워드는 재할당을 할 수 없는 변수가 아닌 '상수'이기 때문입니다.
// 한 번 정해지면 변하지 않는 값입니다.이러한 키워드 덕분에 코드의 안정성을 확보할 수 있습니다.
가비지 콜렉터?
가비지 콜렉터(garbage collector)란 일정시간 사용되지 않는 메모리를 해제하는 기능을 말합니다. 간단히 말하자면 별로 사용하지 않는 메모리를 비우는 기능입니다. 자바스크립트는 가비지 콜렉터를 내장하는 매니지드 언어로서 이 기능이 자동으로 실행되어 메모리 누수를 막을 수 있습니다.
