[Javascript] 변수

#모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다.

 

 

변수는 무엇이고 왜 필요한가?

사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산을 CPU에서 기억을 메모리해서 수행한다. 컴퓨터는 메모리 1바이트 단위로 데이터를 저장하고 읽어들인다. 1바이트 단위의 메모리셀마다 고유의 메모리 주소 값을 가지고 있으며, 인간의 주소와 마찬가지로 공간의 위치를 나타낸다. 이 메모리에 저장되는 데이터는 종류(숫자, 텍스트, 이미지, 동영상 등)과 상관없이 모두 2진수로 변환되어 저장된다.

CPU가 메모리에 저장되어 있는 데이터를 읽어서 연산한 결과로 생성된 결과 값도 또 다른 메모리에 저장된다. 이때 자바스크립트의 경우 개발자가 직접적인 메모리 제어를 허용하지 않기때문에 우리는 어느 메모리 셀에 해당 값이 저장되어 있는지 모른다. 그러므로 결과 값을 재사용할 수 없다. 

 

변수 = 저장된 데이터의 메모리 위치를 가리키 것

따라서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 재사용하기 위해 변수라는 메커니즘을 제공한다. 결국 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

 

var result = 100 + 200;

//데이터 메모리
메모리 1 : 100,
메모리 2 : 200,
메모리 3 : 300,

//식별자 메모리
result : 메모리 3

위 예제에서 보면 변수 이름은 result이고 변수 값은 메모리3의 데이터, 즉 300이다. 변수 이름 result에 메모리3을  저장하는 것을 할당이라고 한다. 

 

변수 이름 = 식별자

변수 이름은 식별자라고 볼 수 있다. 식별자란 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다. 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야 한다(위 예제에서 result가 메모리3을 기억하고 있는 것 처럼).

식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보(ex/ result: 메모리3)도 메모리에 저장되어야 한다. 즉, 식별자는 특정 값을 직접적으로 기억하는 것이 아니라 해당 값이 있는 주소를 기억한다.

 

식별자는 변수 이름만을 말하는 것이 아니다. 변수, 함수, 클래스 등의 이름은 모두 식별자이다(자바스크립트에서 함수는 값이기 때문에). 자바스크립트 엔진이 식별자를 인식하기 위해서는 자바스크립트의 네이밍 규칙을 준수하여 선언해야 한다

 

//네이밍 규칙

//식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)포함 할 수 있다.
var *human //불가능
var $human //가능
var _human //가능

//단 식별자는 숫자로 시작할 수 없다
var 1human //불가능

//예약어(프로그래밍에서 이미 사용되고 있거나 예정인 단어)는 사용할 수 없다.
var await //불가능
var this //불가능

//변수의 이름은 존재 목적을 알 수 있도록 의미를 명확히 표현한다
var number; 
var phoneNumber; // number보다 의미 명확

//한글이나 다른 언어(유니코드)도 사용할 수 있지만, 권장하지 않는다.

//자바스크립트는 대소문자를 구분한다.(phonenumber !== phoneNumber)

 

변수 선언

선언이란 값을 저장하기 위한 메모리 공간을 확보하고 값이 있는 메모리 공간의 주소를 연결해 저장하기 위한 준비단계이다. 변수로 사용할 이름 앞에 var,let,const와 같은 키워드를 사용한다. 

var answer;
let result;

이때, 위 예제에서 anwer이나 result 변수에 아무것도 할당되지 않는 것이 아니라 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.  즉 아래와 같다고 보면 된다.

var answer;
let result;

//아래와 같다
var answer = undefined;
var result = undefined;

undefined를 할당하여 초기화하는 이유는 이전에 다른 곳에서 사용했던 값(쓰레기 값이라고 함)이 해당 메모리에 남아 있을수 있으므로 undefined를 할당하여 이러한 위험을 막는 것이다.

 

호이스팅

자바스크립트는 일반적으로 코드를 한줄씩 아래로 읽어가며 실행하는 방식으로 진행된다. 따라서 변수의 선언 시점보다 해당 변수를 읽어들이는(사용하는)시점이 먼저라면 해당 변수가 없다는 에러를 발생시켜야 할 것 같지만, 자바스크립트는 에러가 발생하지 않는다. 

console.log(human);
let human;

(처음 자바스크립트 개발을 접하는 사람들이 이게 왜 되는겨? 혹은 자바스크립트가 근본이 없다고 말하게 되는 한가지 포인트.....)

그 이유는 바로 자바스크립트가 코드가 위에서 아래로 착착착 실행되는 런타임 이전에, 변수 선언문과 함수 선언문들만 모아서 선언을 실행을 먼저 하고 난 뒤, 런타임이 진행되기 때문이다.

//코드 순서
console.log(human);(1)
let human;(2)
console.log(human, "사람");(3)


//호이스팅되어 실행되는 순서
let humamn (1)
console.log(human);(2)
console.log(human, "사람");(3)

자바스크립트들은 코드를 순차적으로 실행허기에 앞서 먼저 소스코드 평가과정을 거친다. 그 평가과정에서 소스코드를 실행하기 위한 준비를 하는데, 이때 모든 선언문을 찾아내 먼저 실행하는 것이다. 그이후 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행하는 것이다.

따라서 자바스크립트에서는 소스코드의 어디에 선언이 위치하는 상관없이 어디서든 변수를 참조할 수 있다.

 

var, let, const 및 class, function 모든 식별자 선언은 호이스팅된다(let,const라고 호이스팅이 안되는 것이 아닙니다!)

 

할당

할당 연사자 = 을 이용하여 좌변의 변수에 우변의 값을 할당하며, 한줄로 단축 표현할 수도 있다.

var phoneNumber; //선언
phoneNumber = "010-1234-4567"; //할당

var phoneNumber = "010-1234-4567" //단축표현

단축 표현을 사용하더라도 실제 자바스크립트 엔진은 두개의 문으로 나눠서 실행하므로 실행 순서는 같다. 따라서 하나의 단축 표현으로 코드를 작성해도, 호이스팅이 일어나기 때문에 변수의 선언은 미리 일어나지만, 할당은 순차적으로 일어난다.

//코드
console.log(phoneNumber); //undefined

let phoneNumber = "010-1234-5678";

console.log(phoneNumber); //"010-1234-5678"

//실행 순서
let phoneNumber; // undefined 할당 됨

console.log(phoneNumber);

phoneNumber = "010-1234-5678"

console.log(phoneNumber);

변수의 값에 다른 값을 재할당할때 원래 있던 값의 메모리에 바뀐 값을 저장하는 것이 아니라, 변수에 연결되어 있는 원래 메모리에서 다른 메모리 값으로 메모리 주소가 바뀐다는 점을 명심해야 한다.

let phoneNumber;
phoneNumber = "010-1234-5678";


//메모리 1 : undefined
//phoneNumber : 메모리 1
//재할당
//메모리 2 : "010-1234-5678"
//phoneNumber : 메모리 2

이때 예전에 phoneNumber와 연결되어 있던 메모리1 값은 더 이상 변수와 매핑되어 있지 않고, 이것은  필요하지 않은 값이란 뜻이다. 불필요한 값은 나중에(언제인지는 모르지만)가비지 콜렉터에 의해 자동으로 해제(삭제,정리)된다.

 

변수와 상수

변수는 할당된 값이 변할 수 있기때문에 변수라고 한다. 한번 할당된 값을 변경할 수 없는 것은 상수라고 한다. 이때 키워드 const 를 사용해 상수를 표현할 수 있다.(const가 무조건 상수라는 뜻은 아니다)

 

네이밍 컨벤션

하나 이상의 영어 단어로 된 식별자(즉, 띄어쓰기가 있는)를 만들때, 코드에서는 식별자에 띄어쓰기를 할 수 없으므로 아래와 같은 규칙을 사용한다.

//카멜케이스(camelCase)
var firstName

//스네이크케이스(snake_case)
var first_name;

//파스칼케이스(PascalCase)
var FirstName;