[JavaScript_DeepDive] 4. 변수

#변수란?

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

- 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘, 값의 위치를 기억하는 상징적인 이름 

 

ex)  var result = 10 + 20;  의 의미는 10+20이 연산된 30을 result 변수에 할당/대입/저장 한다는 것

    변수 이름 : result  /  변수 값 : 30  

 

※ 특징

- 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 메모리 공간의 주소로 치환되어 실행( 직접 메모리 주소를 통해 값을 저장하고 참조할 필요 X 안전하게 접근 가능)

 

#변수에 여러 개의 값 저장하는 방법 = 배열 사용

var userId = 1;
var userName = 'Lee';

var user = { id:1, name:'Lee'};

//객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용 가능하다
var users=[
	{ id:1, name:'Lee'},
    { id:2, name:'Kim'}
];

#식별자(=변수이름)

-어떠한 값을 구별해서 식별할 수 있는 고유한 이름

-식별자는 값이 아니라 메모리 주소를 기억하고 있다.(식별자가 기억하고 있는 메모리 주소를 통해 공간에 접근 할 수 있다는 의미)

-변수, 함수(자바스크립트에서 함수는 값), 클래스 등의 이름은 모두 식별자이다(메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름을 식별자라고 부름)

 

#변수 선언(variable declaration)

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

-변수 선언에 의해 확보된 메모리 공간은 해제 되기 전까지 보호되므로 안전하게 사용 가능

-변수를 사용하려면 반드시 선언이 필요. 변수를 선언할 때는 var, let. const키워드를 사용한다.

-var : 뒤에 오는 변수 이름으로 새로운 변수를 선언할 것을 지시하는 키워드

-변수를 선언한 이후, 아직 변수에 값을 할당하지 않으면 공간이 비어있는 것이 아니라 undefined라는 값이 암묵적으로 할당되어 초기화된다. (undefine : 자바스크립트에서 제공하는 원시타입의 값)

-변수를 초기화 하지 않고 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다.(쓰레기 값 : 이 전에 다른 애플리 케이션에서 사용했던 남아있는 값) But. 자바스크립트의 var키워드는 암묵적 초기화(undefined)를 하기 떄문에 이러한 위험으로부터 안전하다.

-변수 뿐 아니라 모든 선언하지 않은 식별자에 접근하면 ReferenceError(참조에러)가 발생한다. 

 

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

자바스크립트 엔진은 소스코드를 한 줄 씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평과 과정을 거쳐서 소스코드를 실행하기 위한 준비(변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아 먼저 실행)를 한다. 준비를 마친 후에는 한줄 씩 순차적으로 실행한다.

 

그래서 아래 코드는 변수 선언이 소스코드가 한 줄 씩 순차적으로 실행되는 시점, 런타임이 아니라 그 이전단계에서 먼저 실행되기 때문에 ReferenceError가 뜨지 않고 undefined가 콘솔에 뜬다.

console.log(score);

var score;

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

-var, let, const, function, function*, class 모두 호이스팅된다. 

 

#값의 할당과 재할당

변수의 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 실행되지만, 값의 할당은 런타임 중에 실행된다.

console.log(score); //undefined

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

console.log(score);	//80

위 코드를 보면 런타임 이전에 변수 선언으로 인해 콘솔창에서 score가 undefined으로 초기화 되어있지만

아래 콘솔창에서는 값의 할당이 되었기 때문에 런타임 이후에 score는 80으로 초기화 되어 있다. 

 

변수의 선언과 값의 할당을 하나의 문장으로 단축 표현해도 자바스크립트 엔진은 변수의 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. 

위 코드처럼 값을 할당 할 때는 이전 값 uindefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 80을 할당 하는 것이 아닌 새로운 메모리 공간을 확보하고 그 곳에  할당 값 80을 저장한다.

 

※ 재할당 : 이미 값이 할당되어 있는 변수에 새로운 값을 다시 할당하는 것

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

-var키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 변수에 처음으로 값을 할당하는 것도 재할당이다.

-재할당은 변수에 저장된 값을 다른 값으로 변경한다.

-값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)라고 한다.

-const 키워드는 재할당이 금지되어서 단 한번만 할당 할 수 있는 변수를 선언한다.(상수를 표현한다)

 

위 코드로 인해 score의 변수 값은 90이고 이전 값인 undefined와 80은 더이상 필요하지 않기 때문에 가비지 콜렉터에의해 메모리에서 자동으로 해제된다.

 

※가바지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제 하는 기능. 메모리누수를 방지함

 

#식별자 네이밍 규칙

-식별자는 특수문자를 제외한 문자, 숫자, 언더스코어( _ ), 달러기호($)를 포함할 수 있다.

-식별자는 특수문자를 제외한 문자, 언더스코어( _ ), 달러기호($)로 시작해야 한다. 숫자로 시작은 허용하지 않는다.

-예약어는 식별자로 사용할 수 없다

-자바스크립트는 대소문자를 구별한다. 이름이 같아도 각각 별개의 변수다. 

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

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

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

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

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

 

---

공부하면서 몰랐던 단어

#파싱(해석이라는 의미) :

하나의 프로그램을 런타임 환경이 실제로 실행할 수 잇는 내부 포맷으로 분석하고변환하는 것을 의미.
/ 문서의 내용을 토큰으로 분석하고 문법적 의미와 구조를 반영한 파스트리를 생성하는 과정
/ 문장이나 데이터 문자열(html, json등)에서 원하는 데이터를 분석하여 추출하는 기술