Front-end Developer

0%

변수 / Variables

Posted on Edited on

변수란 무엇인가? 왜 필요한가?

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

  • 기억하고 싶은 값을 메모리에 저장하고, 재사용하기 위해 필요하다.
  • 값의 위치를 가리키는 상징적인 이름
1
2
3
4
5
1 + 2;
// 3 재사용 불가

var result = 1 + 2;
result; //3 재사용 가능

위와 같이 연산이 이루어질 때 피연산자는 메모리에 피연산자의 값을 저장한다. 연산자는 cpu에서 연산되어 값을 출력한다.

  • 변수명: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
  • 변수 값: 변수에 저장된 값
  • 할당: 변수에 값을 저장
  • 참조: 변수에 저장된 값을 읽어들임.
1
2
3
4
5
변수 키워드 변수명 = 변수 값
변수이름; //참조

var result= 30;
result;

식별자

어떤 값을 구별하여 식별해낼 수 있는 고유한 이름, 변수명을 식별자라 하기도 한다.
var result= 30;이라고 하면 식별자 result는 값 30이 아닌 값 30이 저장된 메모리 주소를 기억하고 있다. 따라서 메모리 주소에 붙인 이름이라고 할 수도 있다.

변수 선언

변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보(할당)하고, 변수명과 확보된 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비하는 것. 변수를 선언할 때는 var, let, const 키워드를 사용하며, 처음 변수가 선언되어 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 사용할 수 없다.

단, ES6 이후로는 var 키워드가 가진 의도치 않은 전역변수 선언이라는 부작용 때문에 const나 let을 주로 사용한다.

  1. 변수 선언: var result;라고 변수를 선언하면 메모리 공간에 result라는 식별자를 가진 메모리 공간이 확보된다. 이는 변수 이름을 등록하여 JS 엔진에게 변수의 존재를 알리는 것이다.
  2. 초기화: 선언 후 아무런 값을 할당하지 않았다면, 메모리 공간은 비어있을 것 같지만, 그렇지 않고 undefined라는 값이 암묵적으로 할당된다. 이를 초기화라 한다.

초기화: 변수 선언 이후 최초로 값을 할당하는 것. 만약 초기화를 거치지 않으면 이전에 다른 어플리케이션이 사용했던 값(Garbage value)이 남아있을 수 있다.

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

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

1
2
console.log(result); //undefined
var result;

위와 같이 var result;라고 선언하기 전에 변수를 먼저 참조하면 코드를 한 줄씩 순차적으로 실행하는 자바스크립트의 특성상 오류가 발생할 것 같지만, 그렇지 않고 undefined라는 값이 출력된다.

  1. 자바스크립트 엔진은 코드를 한 줄씩 실행하기 이전(런타임 이전)에 변수 선언문(함수 선언문 등의 모든 선언문)을 찾아내어 먼저 실행한다. 따라서 변수 선언문의 위치와 상관없이 런타임 이전에 먼저 실행된다고 할 수 있다.

  2. 선언문을 제외한 나머지 코드가 한줄씩 순차적으로 실행된다.

값의 할당

할당 연산자를 사용하여 우변의 값을 좌변에 할당한다.

1
2
3
4
var result; //변수 선언
result = 1; //값의 할당

var result = 1; //단축표현. 선언과 할당을 동시에.

값을 할당할 때는 이미 주어진 값을 지운 후 새로운 값을 할당한 것이 아니다. 위의 예시를 들자면 변수 선언시 초기화된 값 undefined를 지운 후 그 자리에 1을 할당하는 것이 아니라 새로운 메모리 공간을 확보한 후 그 곳에 값을 저장한다.

값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 할당하는 것. 단, var, let과 달리 const는 재할당이 금지되어 있다.

1
2
3
4
var result = 1; //단축표현. 선언과 할당을 동시에.
result = 2;

console.log(result); //2

위와 같이 result라는 변수에 값을 재할당하면 1에서 2로 값이 변경된다. 이때도 역시 1이 있던 공간의 값을 지우고 2를 저장하는 것이 아니라 새로운 메모리 공간을 확보하여 그 곳에 2라는 값을 저장한다.

가비지 컬렉터: 애플리케이션이 할당(allocate)한 메모리 공간을 주기적으로 검사하여 더 이상 사용되고 있지 않는 메모리를 해제(release)하는 기능.

위와 같이 재할당이 이루어지면 result가 가지고 있던 이전의 값인 undefined와 1은 어떤 변수도 가지고 있지 않기 때문에 불필요한 값들이므로 가비지 컬렉터가 메모리에서 자동해제 시킨다. 단 언제 해제되는지는 예측할 수 없다.

두 변수의 값을 교환하는 코드

1
2
3
4
5
6
7
8
9
10
11
var x = 1;
var y = 2;

x = 2;
y = 1;

//혹은 아래와 같이
x = y;
y = 1;

console.log(x, y); // 2 1

식별자 네이밍 규칙

  • 특수문자를 제외한 문자, 숫자, underscore(_), 달러기호($)는 포함가능
  • 숫자로 시작해서는 안됨. ex) var 1num;
  • 예약어(프로그래밍 언어에서 사용되거 있거나 사용될 예정인 단어) 사용금지 (ex. var var;)

자바스크립트는 대소문자를 구별한다. 따라서 var abc;와 var ABC는 별개의 변수이다.

  • 변수나 함수의 이름: 카멜 케이스를 사용. (ex. var firstName;)
  • 생성자 함수, 클래스의 이름: 파스칼 케이스를 사용 (ex. var FirstName;)

References

Poiemaweb