자바스크립트의 변수!

변수

1. 변수란 무엇이고? 왜 필요한가

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체
메모리 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기로 데이터를 저장하거나 읽어 들인다.
각 셀은 메모리 공간의 위치를 나타내는 메모리 주소를 가진다.

컴퓨터는 모든 데이터를 2진수로 처리 -> 숫자, 텍스트, 이미지, 동영상 등
ex) 10,20 같은 값도 2진수로 저장됨(위의 그림은 편의상 10진수로 표기)

10 + 20

위 코드처럼 컴퓨터에서 실행을 하면 연산을 실행하고 결과도 메모리에 저장한다.
문제점 -> 결과값을 재사용 할 수 없음

위처럼 연산을 했다는 것은 그 결과가 필요하고 사용하겠다는 것인데 메모리 공간에 직접 접근하는 것외에 방법이 없다.
-> 메모리 주소를 통해 직접 접근하는 것은 치명적 오류를 방생시킬 가능성이 높다.
-> 그러므로 변수가 필요하다.

변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름-> 값의 위치를 가리키는 상징적인 이름

2. 식별자

식별자 - 어떤 값을 구별해서 식별할 수 있는 고유한 이름(변수 이름)

식별자 result는 값 30이 저장되어 있는 메모리 주소 0x0669F913을 기억해야 한다.
-> 식별자는 값이 아니라 메모리 주소를 기억하고 있다.

식별자로 메모리 상에 존재하는 변수 값을 식별한다. 즉 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 한다.(변수, 함수, 클래스 등의 이름)

3. 변수 선언

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

변수를 선언할 때는 var, let, const 키워드를 사용한다.

키워드는 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어
자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행
ex) var를 만나면 뒤에오는 변수 이름으로 새로운 변수를 선언

var scroe; //변수 선언

-> 변수 선언 후 값을 할당하지 않았지만 확보된 메모리 공간은 비어있지 않고 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.

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

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행
-> 초기화 단계를 거치지 않으면 확보된 메모리 공간에 이전에 다른 애플리케이션이 사용했던 값(쓰레기 값)이 남아 있을 수 있으므로 초기화를 수행함으로써 이러한 위험을 방지할 수 있다.

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

console.log(score);//undefined

var scroe;//변수 선언문

변수 선언문보다 변수를 참조하는 코드가 앞에 있으므로 한 줄씩 순차적으로 실행하면 참조 에러(ReferenceError)가 발생할 것 같지만 undefined가 출력됨
-> 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계(평가과정)에서 먼저 실행되기 때문이다.

평가 과정 - 소스코드 실행을 위한 준비단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(함수 선언문 등)을 소스코드에서 찾아 먼저 실행

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

5. 값의 할당

변수에 값을 할당 할 때는 할당 연산자 =를 사용(우변의 값을 좌변의 변수에 할당)

var score; // 변수 선언
score = 80; // 값의 할당

var score = 80; // 변수 선언과 값의 할당

자바스크립트 엔진은 변수 선언과 값의 할당을 하나의 문으로 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. (시점이 다르다.)
변수 선언은 런타임 이전에 먼저 실행 / 값의 할당은 런타임에 실행

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

동일한 예제이다

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

-> 그림처럼 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 공간에 값을 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장한다.

6. 값의 재할당

var 키워드로 선언한 변수는 값을 재할당할 수 있다.

재할당 - 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것

score의 이전 값인 undefined와 80은 어떤 변수도 값으로 갖고 있지 않으며(실별자와 연결되어 있지 않음) 더 이상 필요하지 않으므로 이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해체된다

가비지 콜렉터 - 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리(어떠한 식별자도 참조하지 않는 공간)를 해제하는 기능

7. 식별자 네이밍 규칙

식별자 - 어떤 값을 구별해서 식별해낼 수 있는 교유한 이름

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

예약어
await	break	case	catch	class	const
continue	debugger	default	delete	do	else
enum	export	extends	false	finally	for
function	if	implements*	import	in	instanceof
interface*	let*	new	null	package*	private*
protected*	public*	return	super	static*	switch
this	throw	true	try	typeof	var
void	while	with	yield*

*식별자로 사용 가능하나 stric mode에서는 사용불가

//변수는 쉼표로 구분해 한번에 여러개를 선언할 수 있지만 가독성이 나쁘다
var person, $elem, _name, first_name, vali1;

// 알파벳 외 유니코드 문자로도 식별자로 사용할 수 있지만 권장하지 않음
var 이름, var 韓國;

// 식별자 네이밍 규칙에 위배
var first-name;
var 1st;
var this;

// 자바스크립트는 대소문자 구별함으로 다음 변수는 별개의 변수이다.
var firstname;
var firstName;
var FIRSTNAME;

// 변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현
var x=3;    //x가 의미하는 바를 알 수 없음
var scroe=100;  //score 변수는 점수를 의미

// 변수 선언에 별도의 주석이 필요하다면 존재 목적을 명확히 드러내지 못하는 것

네이밍 컨벤션 - 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 구분하기 위해 규정한 명명 규칙

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

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

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

//헝가리언 케이스(typeHungarianCase)
var strFirstName;   // type+identifier
var $elem = document.getElementbyId('myId'); // DOM노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

자바스크립트에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를 사용하고, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.