자바스크립트 변수

변수란 무엇인가 ? 왜 필요한가 ?

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙여진 이름을 말한다.

말하자면 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다.

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

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

 

메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 '변수이름' 이라고 하고,

변수에 저장된 값을 '변수 값' 이라고한다.

변수에 값을 저장하는 것을 '할당(대입, 저장)'이라고 하고, 변수에 저장된 값을 읽어 들이는 것을 '참조'라한다.

 

 

사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 명확히 할 수 있다. 

따라서 좋은이름, 즉 변수에 저장된 값의 의미를 파악할 수 있는 변수이름은 가독성도 높이는 효과도 있다.

협업과 품질 향상에 도움을주니, 첫아이 이름을 짓듯 심사숙고해서 지어야한다. ✍

 

식별자 

변수 이름을 '식별자' 라고도 한다.

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

사람으로 치면 이름으로 구별하는 것 처럼..!

 

식별자는 값이 아니라 메모리 주소를 기억하고 있다. 즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

 

식별자는 변수이름에만 국한해서 사용하지않는다.

예를 들어, 변수, 함수, 클래스 등 이름은 모두 식별자다.

식별자인 변수 이름으로는 메모리 상에 존재하는 변수 값을 식별할 수 있고, 함수 이름으로는 메모리상에 존재하는 함수를 식별할 수 있다.

즉, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

 

변수, 함수, 클래스 등의 이름과 같은 식별자는 네이밍 규칙을 준수해야하며, 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

 

변수 선언

💡 변수 선언 = 변수를 생성한다. 💡

 

값을 저장하기 위한 메모리 공간을 확보

⬇

 변수 이름과 확보된 메모리 공간의 주소를 연결

⬇

값을 저장할 수 있게 준비하는 것

 

 

변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수있다.

 

또, 변수를 사용하려면 반드시 선언이 필요하다.

var, let, const 키워드를 사용한다. 

var 는 함수레벨 스코프를 지원한다.
이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다.

 

자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다.

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

       ##undefined :자바스크립트에서 제공하는 원시 타입의 값이다.

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

---

var  

선언 단계와 초기화 단계가 동시에 진행된다.

var score; 는 선언단계를 통해 변수 이름을 score를 등록하고, 초기화 단계를 통해 score 변수에 암묵적으로 undefined를 할당해 초기화한다.

var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 자동 수행된다. 따라서 var 키워드로 선언한 변수는 어떠한 값도 할당하지 않더라도 undefined라는 값을 갖는다.

 

마~안 약!!!! 초기화 단계를 거치지않으면, 

확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있는데 이값을 쓰레기 값이라고 한다.

따라서 메모리 공간을 확보하고 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수있는데, 초기화를 암묵적으로 수행하여 그럴 위험은 없다!!

 

변수를 사용하려면 반드시 선언이 필요하다.  뿐만아니라 모든 식별자 (함수, 클래스 등)가 그렇다!!

 

 

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

console.log(score); //undefined

var score; // 변수 선언문

이럴 때, 콘솔에는 뭐가 찍힐가?! 

👀 참조 에러가 발생하지 않을까..?!

❌땡 

 

답은 undefined가 출력됩니다.

 

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log가 실행되고 다음이 실행되는 것은 맞지만!!!!!! 

but , 순차적으로 실행하기 앞서 먼저 소스코드의 평가 과정을 거치면서 준비단계인 변수 선언을 포함한 모든 선언문(변수선언, 함수 선언 등)을 소스코드에서 찾아 먼저 실행하고 이후에 소스코드를 순차적으로 실행합니다.

 

즉, 자바스크립트 엔진은 변수 선언이 소스코드 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.

따라서 변수 선언인 소스코드의 어디에 위치하는지 상관없이 어디서든지 변수를 참조 할 수가 있다!

 

 

그렇다면 값의 할당을 알아보자! 

변수에 값을 할당(대입, 저장) 할 때는 할당 연산자 =를 사용한다. 할당연산자는 우변의 값을 좌변의 변수에 할당한다.

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

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

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

 

console.log(score); //undefined

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

console.log(score); //80

(1.)변수선언은 런타임 이전에 먼저 실행되고 (2.)값의 할당은 런타임에 실행된다.

따라서 score 변수에 값을 할당하는 시점(2.)에는 이미 변수 선언이 완료된 상태이며, 이미 undefined로 초기화 되어있다.

따라서 score 변수에 (2)값을 할당하면 값은 undefined에서 새롭게 할당한 숫자 80으로 변경(재할당)된다.

 

console.log(score); //undefined

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

console.log(score); // 80

변수의 선언과 값의 할당을 하나의 문장으로 단축해도 자바스크립트 엔진은 2개의 문으로 나누어 실행하여 변수에 undefined가 할당되어 초기화되는 것은 변함이 없다.

 

이번엔, 값의 재할당을 해볼것이다. 

재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.

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

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

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

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

 

변경할 수 있기에 변수라고 하는것인데, 만약 재할당할 수 없다면 변수가 아니라 상수라고 한다.

상수란 한번 정해지면 변하지 않는 값이다. 다시 말해 상수는 단 한 번만 할당할 수 있는 변수다.

 

재할당 할 때 할당되어 있는 메모리에 그 값을 지우고 새 값을 넣는 것이 아니고, 

새로운 메모리 공간을 만들어 그 값을 넣는 것이다.

그러면 그전에 있는 메모리 공간은 어떤 변수도 값으로 갖고 있지 않는걸로 어떤 식별자와도 연결되어 있지않는데 이러한 값을 가비지콜렉터라고 한다.

가비지 콜렉터란 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능을 말한다. 더 이상 사용되지 않는 메모리란 간단히 말하면 어떤 식별자도 참조하지 않는 메모리 공간을 의미한다. 

 

ES6에서 도입된 const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 즉, 한 번만 할 당할 수있는 변수를 선언한다.

 

 

식별자 네이밍 규칙

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

단, 특수문자를 제외한 문자, 언더스코어(_), 달러기호($)로 시작해야한다. 숫자는 불가능

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

//추가로 대소문자도 구별할 수 있기 때문에 각각 별개의 변수가 된다

var firstname;
var firstName;
var FIRSTNAME;

//변수의 이름은 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야한다.
var x = 3; // x가 의미하는 바를 알 수가 없다.
var score = 100; // score 변수는 점수를 의미한다는걸 알 수 있다.
// 별도로 주석을 넣어도 되지만, 그러면 변수의 존재 목적을 명확히 드러내지 못하는것임

 

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

//카멜 케이스
var firstName;

//스네이크케이스
var first_name;

//파스칼케이스
var FirstName;

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