[JavaScript] 변수(Variable)

변수란 무엇인가?

• 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.
• 하나의 값을 저장하기 위해 확보한 메모리 공간자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

변수는 왜 필요한가?

100 + 200

자바스크립트 엔진이 식을 계산하기 위해 알아야 할 부분

1. 100, 200, + 기호가 뜻하는 바를 모두 알고 있어야한다.
2. 100 + 200이라는 표현식의 의미도 해석(파싱)할 수 있어야 한다.

자바스크립트는 우선 좌변(100)과 우변(200)의 값(즉, 피연산자)을 메모리에 기억을 하고 CPU를 사용해 연산한다.

메모리

• 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체이며, 메모리 셀 하나의 크기는 1바이트(8비트)이다.
  컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.
• 각 셀은 고유의 메모리 주소(memory address)를 가진다. 이 메모리 주소는 메모리 공간의 위치를 나타내며 메모리의 크기만큼 정수로 표현된다.
• 컴퓨너는 2진수로 데이터를 처리하기 때문에 메모리에 저장되는 데이터는 모두 2진수로 저장된다.

즉 위의 식을 예로 들자면 100 과 200 은 각각의 고유한 메모리 주소를 가지는 메모리 셀에 저장이 되며 CPU는 이 값을 읽어 연산을 수행한다. 연산의 결과값인 300도 메모리셀에 저장이 된다.

그러나 연산의 결과값인 300은 일회성 데이터로써 재사용이 불가능한 상태이다. 메모리주소를 통해 직접적으로 접근을 해야지만 재사용이 가능한데 이는 오류를 발생시킬 가능성이 높은 방법임과 동시에 메모리주소는 임의로 배정이 되기 때문에 상황마다 다른 주소를 가진다는 문제점이 있다.

그럼으로 프로그래밍 언어에서는 변수 라는 핵심개념을 이용하여 데이터를 재사용할 수 있다.

변수에 여러 개의 값을 저장하는 방법

변수는 하나의 값을 저장하는 개념이다. 그렇기 때문에 여러개의 데이터는 여러개의 변수를 선언해 줘야 한다.
그러나 객체, 배열같은 구조를 이용하면 그룹화를 통해 하나의 변수에 할당해줄 수 있다.

할당(assignment) 과 참조(reference)

• 할당 : 변수의 값을 저장하는 것
• 참조 : 변수의 값을 읽어들이는 것

식별자와 메모리 주소

변수명의 또다른 이름은 식별자이다.

• 식별자는 데이터의 값을 저장하고 있는 것이 아니라 데이터의 값이 저장되어 있는 메모리의 주소를 기억하고 있다.

변수선언

변수를 선언 한다. 라는 것은 변수명과 매핑하고자 하는 데이터의 메모리 주소를 저장할 또하나의 메모리공간을 확보하는 것이다.
변수를 사용하기 위해서는 꼭 선언이 필요하다. 자바스크립트에서는 vat, let, const 키워드를 사용한다.
let, const는 ES6부터 도입된 개념이며 그전에는 var 만을 사용해서 변수를 선언했다.

변수선언 단계

자바스크립트는 변수선언에 관해 2단계에 거쳐 진행이 된다.

1. 선언단계: 변수이름을 등록, 변수의 존재를 알림.
2. 초기화단계: 메모리 공간을 확보, undefined를 할당해 초기화
   초기화 단계라고 부르는 이유는 이전에 저장되었던 데이터(garbage value)가 남아있을 수 있는것을 초기화하는 동작을 진행하기 때문이다.

변수 선언실행, 변수 호이스팅

console.log(test);

var test;

자바스크립트는 인터프리터 에 의해 한줄씩 순차적으로 실행이 된다. 그렇다면 이경우 test라는 변수는 아직 선언이 되지 않았기 때문에 참조에러(Reference Error)가 발생해야 할 것 이다. 러나 실제로 작동을 해보면 undefined라고 출력이 된다.
그 이유는 런타임(runtime) 에 앞서 변수선언이 먼저 진행이 되기 때문이다.

호이스팅 이란 변수선언이 코드상으로는 후위에 위치해 있더라도 가장 앞으로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

변수할당의 시점

변수의 할당은 변수의 선언과는 다르게 런타임(runtime)에 진행이 된다.

console.log(test) // undefined
var test = 0;
console.log(test) // 0

변수 재할당을 하게되면 기존의 undefined의 메모리에 0을 할당할 것 같지만 실제로는 또다른 메모리공간을 확보하여 0을 할당한다.

변수명 선언 규칙

1. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_) 달러($)를 포함
2. 단 가장 첫번째자리는 숫자가 올 수 없다.
3. 자바스크립트의 예약어는 식별자로 사용할 수 없다.
4. 자바스크립트는 대소문자를 구별함으로 주의해야한다.

변수의 존재 목적을 나타낼 수 있는 변수명을 지어야 한다.

예약어: 프로그래밍 언어 내부에서 미리 정해진 약속어들을 이야기 한다.

 

var 의 특징

var 의 경우 변수의 선언, 초기화단계를 동시에 진행한다. 그렇기 때문에 변수참조시 garbage value가 참조 될 위험이 없다.

단점

1. 블록 레벨 스코프(Block Scope)를 지원하지 않고 함수 레벨 스코프(Function Scope)만을 지원한다.
2. 의도치않은 전역변수선언이 이루어 질 수 있다.

 

용어정리

eferenceError(참조에러)
식별자를 통해 값을 참조하려 했으나 자바스크립트 엔진이 식별자를 찾을 수 없을 경우 발생하는 에러이다.

runtime(런타인)
인터프리터에 의해 코드가 한줄씨 순차적으로 실행되는 시점

할당연사자 (=)
우변의 값을 좌변에 할당한다.

변수, 상수
변수란 재할당이 가능한 경우, 상수는 재할당이 불가능한 경우

가비지 콜렉터(garbage collector)
할당된 메모리 공간을 주기적으로 검사하여 사용되지 않는 메모리를 해제하는 기능이다.

카멜케이스, 스네이크 케이스, 파스칼 케이스
카멜케이스(camelCase) : 두번째 단어부터는 첫글자를 대문자로 표기한다.
스네이크 케이스(snake_case): 단어의 사이에는 언더스코어(_)로 연결한다.
파스칼케이스(PascalCase) : 첫번째 단어부터 첫글자를 대문자로 한다.