[Javascript] 1. 변수

SebellKO·2022년 1월 7일
0

Javascript

목록 보기
2/23
post-thumbnail

내가 이해한대로 정리한 내용이니 정확하지 않을 수 있다. 😉

변수

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

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

간단히 말하자면 값의 위치를 가리키는 상징적인 이름이다.
상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다.

다음의 예제를 보자

10 + 20

간단한 예제이다 10 + 20, 연산의 결과가 30 이라는 것은 모두가 예상할 수 있을것이다.

해당 문장이 실행되면 자바스크립트 엔진은 10, 20 이라는 피연산자를 메모리에 임의로 할당한다. 물론 연산 결과인 30도 메모리의 임의의 위치에 저장된다.

연산이 성공적으로 끝났고 연산 결과도 메모리에 저장되었지만 문제가 있다.
연산 결과인 30을 재사용할 수 없다는 것이다.

그래서 우리는 결과값을 재사용 하기위해 변수를 사용한다.

var result = 10 + 20;

이처럼 위의 예제를 실행한다면 이전의 예제와 마찬가지로 피연산자와 연산 결과는 메모리상의 임의의 위치에 저장이 된다.

그러나 차이점은 결과값 30이 저장된 메모리 공간에 상징적인 이름 result가 붙게된다.

여기서 result = 변수이름, 30 = 변수값이라 한다. 또한
변수에 값을 저장하는 것을 할당이라 하고, 변수에 저장된 값을 일어 들이는 것을 참조라 한다.

식별자

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

변수 이름을 식별자라고도 하며 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미이다.

즉, 식별자는 메모리 주소에 붙인 이름이라고도 할 수 있다.

식별자라는 용어는 변수 이름에만 국한해서 사용하지 않고 변수, 함수 클래스 등의 이름은 모두 식별자이다.

변수 선언

변수 선언이란 변수를 생성하는 것을 말한다.

값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.

도한 변수를 사용하려면 반드시 선언이 필요하며 변수를 선언할 때는 var, let, const키워드를 사용한다.

다음의 예시를 보자

var score;

위의 문장이 실행되면 score는 변수가 되고 score가 가르키는 메모리상의 위치에는 값이 할당 되지 않았다.
자바스크립트는 독특한 특징이 있는데 값이 할당되지 않은 빈 변수에는 undefined를 암묵적으로 할당하여 초기화 한다

초기화 되지 않은 변수에는 쓰레기값이 할당 되어 있을 수 있다.
자바스크립트는 암묵적으로 초기화를 수행 하므로 쓰레기값 참조를 방지한다.

변수 선언의 실행 시점과 변수 호이스팅

예제를 먼저 살펴보자

console.log(score);

var score;

일반적으로 순차지향적으로 실행이 된다 생각한다면 score를 참조하는 문장이 먼저 실행되기 때문에 참조 에러가 발생할 것이라고 생각될 것이다.

하지만 에러는 발생하지 않고 undefined가 콘솔창에 출력된다.

그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.

즉, 자바스크립트 엔진은 변수선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.

변수 선언문, 함수 선언문 등 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅 이라 한다.

값의할당

var score = 80;

위의 예시는 score라는 변수를 선언하고 해당 변수에 80이라는 값을 할당하는 문장이다.

자바스크립트는 해당 문장을 변수선언(1), 값 할당(2) 두가지 동작으로 나누어 실행한다.
이렇게 나누어 실행하는 이유는 변수 선언과 값의 할당 실행 시점이 다르기 때문이다.

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

console.log(score);

var score;
score = 80;

console.log(score);

위의 예시를 살펴보자.

이전의 절에서 살펴 봤듯이 첫번째 문장에서 참조 에러가 발생하지 않고 undefined가 출력될 것이라는 것은 알고있다.

그러면 마지막 문장의 출력 결과값은 무엇일까?
80이 출력될 것이다.

이러한 결과가 나오는 이유는 score 선언문은 런타임 이전 즉, 제일 먼저 실행이 되어 이미 선언이 되고,
그후 곧바로 80이라는 값이 할당 되는것이 아닌 첫번째 문장인 console.log(score); 부터 차례로 실행 되기 때문이다.

값의 재할당

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

만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라 한다.

var score = 80;
score = 90;

위의 예시를 참조하자.

변수의 선언이 먼저 실행되기 때문에 score에는 undefined가 먼저 할당이 된다.
그후 런타임 시간에 80이 할당되고 차례로 90이 재할당 된다.

여기서 주의할 점이 있다.
변수의 재할당시 재할당값은 그전과 같은 메모리상의 위치에 할당되지 않는다.

위의 예시를 참고한다면 처음에 score에 할당된 undefined는 A라는 임의의 메모리 위치에 할당됐다고 하자.
그러면 score는 A라는 위치를 나타내고 A위치의 값은 undefined이다.

그후 score에 80이 할당된다면 80은 A위치에 다시 할당이 되는것이 아니라 임의의 메모리 위치 B에 할당이 된다.
그러면 score는 B라는 위치를 나타내고 B위치의 값은 80이 된다.

또 그후 score에 90이 재할당 된다면 90은 다시 임의의 메모리 위치 C에 할당이 된다.
그러면 다시 score는 C라는 위치를 나타내고 C위치의 값은 90이 된다.

현재 score 변수의 값은 90이며 undefined와 80은 어떤 변수도 값으로 갖고 있지 않다.

이렇게 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

가비지 콜렉터란 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능을 말하며, 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수를 방지한다.

식별자 네이밍 규칙

식별자는 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름을 말한다.
식별자는 다음과 같은 네이밍 규칙을 준수해야 한다.

  • 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호를 포함할 수 있다.
  • 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러기호로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
  • 예약어는 식별자로 사용할 수 없다.

또한 네이밍 컨벤션이라는 명명 규칙이 있다.

  • 카멜 케이스
  • 스네이크 케이스
  • 파스칼 케이스
  • 헝가리언 케이스

나는 무난하게 카멜 케이스를 사용한다.
그러나 책에서는 변수명은 카멜, 함수명은 파스칼 케이스를 사용하는 것을 권장한다고 한다.

0개의 댓글