[JavaScript] 변수

변수란?

애플리케이션은 데이터를 입력받아 처리하고 출력합니다. 변수는 프로그래밍 언어에서 이러한 데이터를 관리하기 위한 핵심 개념으로, 사람과 다르게 컴퓨터는 CPU를 사용해 연산을 하고, *메모리를 사용해 데이터를 기억합니다. 각 셀은 고유한 메모리 주소를 가지게 되고 CPU는 메모리 주소에서 원하는 값을 읽어 들여 사용하게 됩니다. 하지만 메모리 주소를 통해 값에 직접 접근하는 방법은 안전하지 않아서 변수라는 매커니즘을 이용하게 됩니다.

 

*메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체. 셀 1개 = 1바이트(8비트)

 

변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름입니다. 즉, 값의 위치를 가리키는 상징적인 이름입니다.

 

// 변수는 하나의 값을 저장하기 위한 수단
var userId = 1;
var userName = 'Kim'

// 객체나 배열같은 자료구조를 활용하여 여러개의 값을 그룹화해서 사용 가능
var user = { id: 1, name: 'Kim' };

var users = [
	{ id: 1, name: 'Kim' },
    { id: 2, name: 'Lee' };
];

• 변수 이름 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 ex ) userId
• 변수 값 : 변수에 저장된 값 ex) 1
• 할당(대입, 저장) : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어 들이는 것

변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환하게 됩니다. 변수 이름은 가독성을 높이고, 명확한 네이밍은 코드 이해를 돕고 협업과 품질 향상에도 도움을 주는 중요한 요소입니다.

 

식별자

변수는 식별자라고도 하는데, 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다. 식별자는 값이 아니라 메모리 주소도 기억하고 있기 때문에 메모리 주소에 붙인 이름이라고 할 수 있습니다.

 

변수 이름 뿐만 아니라 변수, 함수, 클래스 등의 이름은 모두 식별자입니다. 또한 이를 선언하여 자바스크립트 엔진에 식별자의 존재를 알려 사용합니다.

 

변수 선언

변수 선언이란 변수를 생성하는 것입니다. 즉, 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값이 *해제되기 전까지 사용하게 합니다.

 

*자바스크립트의 메모리 해제 방식에 대해 알아보려면 아래를 참고하세요.

https://j-su2.tistory.com/24?category=1032243 

[JavaScript] 메모리 관리와 가비지 컬렉션 동작 방식

자바스크립트 엔진의 변수 선언 단계

• 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
• *초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화

변수를 선언할 때는 var, let, const라는 *키워드를 사용합니다. 만약, 선언 후 초기화단계를 거치지 않는다면 undefined라는 자바스크립트의 원시 타입 값이 저장됩니다. 만약, 선언하지 않은 식별자에 접근하면 참조 에러가 발생합니다.

 

var score; // undefined
score = 1; // 1

 

*초기화 : 변수가 선언된 이후 최초로 값을 할당하는 것

*키워드 : 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어

 

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

console.log(score); // undefined
var score;

위와 같은 코드가 있을때 score는 참조 에러가 나와야할것 같지만 undefined가 출력됩니다. 이는 변수 호이스팅과 관련이 있습니다.

 

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

이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 특징을 변수 호이스팅이라 합니다. 변수 선언 뿐만 아니라 var, let, const, function, function*, class 키워드를 사용한 모든 식별자는 호이스팅됩니다.

 

값의 할당과 재할당

변수에 값을 할당할때는 할당 연산자 =를 사용합니다. 이때 변수 선언과 값의 할당을 하나의 문으로 단축 표현할 수 있지만 단축하여도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행합니다.

console.log(score); //undefined

var score = 80;

console.log(score); // 80

• 변수 선언 : 런타임 이전에 먼저 실행 
• 값의 할당 : 런타임에 실행 

값의 재할당은 이미 값이 할당된 변수에 새로운 값을 다시 할당하는 것입니다. var키워드는 값을 재할당 할 수 있지만, const를 이용한다면 값을 재할당할 수 없습니다.

var score = 80; // 변수 선언과 할당
score = 90; // 재할당

const foo = 10;
foo = 100; // TypeError가 발생!!

• 상수 : 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없음. Const 키워드를 사용.

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 함. (숫자로 시작X)
• *예약어는 식별자로 사용할 수 없음
• 자바스크립트는 대소문자를 구별함
• 변수의 목적을 알 수 있도록 의미를 명확히 표현해야함

*네이밍 컨벤션 : 하나 이상의 영단어로 구성된 식별자를 만들 때 가독성을 높이기 위한 명명 규칙으로, 자바스크립트는 카멜 케이스를 주로 사용합니다. ex) firstName

출처 : https://www.w3bai.com/ko/js/js_reserved.html#gsc.tab=0

 

 

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리