[JS] DeepDive - 4장

Baoro·2022년 5월 3일
0

DeepDive

목록 보기
2/9
post-thumbnail

카페에서 동기가 나한테 "변수의 정의를 정확히 아시나요"라는 질문을 했을 때 나는 '무언가를 담는 가방'이라고만 설명할뿐 정확한 개념을 설명하지 못했다. 뿐만아니라 이 가방이 왜 필요한지에 대해서도 명확히 설명하지 못했다. 그 동기를 만나 변수개념과 그 용도를 다시 잘 설명할 수 있도록 자세히 알아보도록 하자.


변수란?

1. 메모리공간 측면

  • 하나의 값을 저장하기 위해 확보한 메모리 공간 자체

2. 식별 측면

  • 그 메모리 공간을 식별하기 위해 붙인 이름

변수가 왜 필요할까?

10+20 이라는 식을 자바스크립트를 이용해 계산한다고 생각해보자.

  • 첫번째로 10,20,+라는 기호와 의미를 알아야할 것이다.
  • 두번째로 x+y라는 식의 의미도 해석할 수 있어야 할 것이다. 여기서 식의 의미를 해석하려면 피연산자(x와 y)를 기억해야한다.

우선 메모리에 피연산자(데이터)를 저장하는 과정을 보자.

10, 20은 메모리 상의 임의의 위치에 저장되고 CPU는 이 값을 읽어들여 연산을 수행 후 연산결과값인 30또한 임의의 위치에 저장한다. 여기서 한가지 문제가 발생한다.

연산 결과값을 재사용할 수 없다!

메모리 주소를 통해 직접 접근하는 방법도 있지만 실수로 운영체제가 사용하고 있는 값을 변경하면 치명적인 오류가 발생할 수도 있기 때문에 자바스크립트는 직접적인 메모리제어를 허용하지 않는다. 만약 허용하더라도 코드가 실행될 때마다 메모리 주소가 바뀌므로 올바른 방식은 아니다.

바로 이럴 때 변수가 필요하다!

기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수를 사용한다. 위 그림을 보면 30이라는 연산결과값의 위치를 가르키는 것은 result라는 변수이다. 따라서 이 변수를 이용하면 개발자는 직접 메모리 주소를 통해 값을 저장하거나 직접 갖다쓸일이 없어진다.

주의
변수(식별자)는 30이라는 값을 기억하는 것이 아니라 30이라는 값이 담긴 메모리 주소를 기억하고 있다.


변수 특징

1. 일단 undefined!

변수를 선언만 하고 할당을 하지 않으면 이 변수는 암묵적으로 undefined값이 할당된다. 이것은 javascript의 특징이다.

2. 변수 호이스팅

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작

console.log(score);
var score;

해당 코드는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 에러가 나올 것 같지만 정상적으로 동작한다.

왜?

자바스크립트 엔진은 소스코드를 한줄한줄 실행하기 앞서서 모든 선언문을 찾아서 실행하는 평가과정이라는 것을 거치기 때문이다.
즉, 변수 선언이 런타임 이전 단계에서 실행된다. 따라서 위 결과값은 undefined 이다.

3. 재할당

var score = 80;
score = 90;

위 코드를 쳤을 때의 메모리 상태는 그림과 같다. 자바스크립트는 앞서 말했듯이 자바스크립트는 변수를 선언하면 암묵적으로 undefined값을 할당한다. 이 상태에 80이라는 값을 할당한다면 어떻게 될까?
undefined 값이 지워지고 그 자리에 80이 할당되는 것 같지만 사실은 새로운 메모리에 80을 저장하고 변수가 그 주소값을 다시 가리키는 것이다. 이 것을 재할당이라고 한다. 따라서 위 코드는 재할당을 총 2번 하는 것이다.
그렇다면 undefined와 80은 더 이상 필요없는데 메모리에 계속 남아있는걸까?
이 문제는 가비지 콜렉터가 해결해준다.
애플리케이션이 할당한 메모리 공간을 주기적으로 검사해서 사용되지 않는 메모리를 해제하는 것이다.

profile
꾸준히.... 깔끔하게.... 끝까지....

0개의 댓글