1. [Modern JS Deep Dive] 변수

민토의 블로그·2022년 5월 26일
1

JS Deep Dive

목록 보기
3/9
post-thumbnail

변수란?

변수에 대해서 공부하기 전에 변수가 왜 필요한지 부터 알아볼 필요가 있다.

10 + 20이라는 코드가 있을때 10과 20은 메모리 공간상 어딘가에 저장이 되고 이 값의 결과인 30은 메모리상에 어떤 곳에 저장이 된다.
결과값을 다시 가져와서 사용하려면 매번 메모리주소를 참조해서 사용해야 하는데 매번 저장되는 공간이 달라지기 때문에 거의 불가능한 방법이다 그리고 직접 메모리 공간에 접근해서 제어한다는건 위험한 작업이기 때문에 그다지 추천하지 않는다.
그래서 결과의 메모리를 참조할만한 변수라는 식별자를 선언하면 사용자는 메모리 주소를 몰라도 해당 결과값을 식별자를 이용해서 편리하게 사용이 가능하기 때문에 변수를 사용한다.

변수 선언이란?

변수선언은 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결하는 작업을 의미한다.

JS에서는 var, const, let 키워드를 통해서 변수를 선언해야한다.

var score;

위에 처럼 변수를 선언할 수 있다. 하지만 JS에서는 선언되고 JS 엔진에 의해서 자동으로 undefined이란 값이 메모리상에 할당이 된다.

여기서 호이스팅 개념을 조금 설명할 수 있다.

변수선언의 호이스팅

console.log(score); // undefined

var score;

위 코드에는 에러가 발생하지 않는다. score 변수가 메모리상에 공간을 확보하기 전인데도 undefined이 할당되어 출력되는 특징을 호이스팅 이라고 한다.

이유는 뭘까?

코드가 한줄씩 읽는 상태를 런타임 환경이라고 하는데 변수선언은 런타임 환경에서 수행되는게 아닌 그 이전 단계에서 먼저 수행되기 때문에 선언문에 도착하기 전에 이미 메모리상에 undefined가 할당 된것이다.
이와 같은 과정을 평가 과정이라고 하고 JS만에 고유한 특징이라고 보면 된다. 이런 과정을 통해 런타임 환경에선 변수 선언문은 무시하고 한 줄씩 읽어 나간다.

즉 호이스팅이란 선두로 끌어 올려진 것처럼 동작하는 JS만에 고유한 특징을 의미한다.

변수할당

선언은 런타임 과정 이전에 수행이 되고 할당은 런타임 환경에서 수행된다.

console.log(score); // undefined

var score = 80;

console.log(score); // 80

하지만 여기서 중요하게 봐야할점은 처음에 선언 될때 할당 되는 undefined과 80의 메모리주소는 다르다는 점이다.

변수에 새로운 데이터를 재할당 하는경우 기존 메모리 주소에 그대로 업데이트 하는게 아닌 새로운 메모리 주소에 데이터를 저장한다. 그리고 기존에 있던 데이터에 메모리는 가비지 컬렉터가 자동으로 지워주는 식으로 동작을 한다.

변수 이름

그럼 변수 이름은 어떤식으로 작성하는게 좋을까?

같이 일하는 팀별로 다르겠지만 보통 JS같은 경우에는 camelCase를 주로 사용을 하고 생성자 함수나 클래스 이름에는 PascalCase 방식을 주로 사용을 한다.

그리고 다른 사람이 내 코드를 봐도 이 변수가 어떤 데이터를 가지고 있는지 변수 이름만 보고 알 수 있도록 짓는게 중요하다.

profile
블로그 이전했습니다. https://frontend-minto.tistory.com/

0개의 댓글