[JS] 4. 변수

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

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

메모리는 데이터를 저장할 수 있는 데이터 셀의 집합체. 메모리 셀 하나의 크기는 1 바이트( 8비트 )이며, 컴퓨터는 메모리 셀의 크기, 즉, 1바이트 단위로 데이터를 저장하거나 읽음. 각 셀은 고유의 메모리 주소를 갖는데, 이는 메모리 공간의 위치를 나타냄. 메모리에 저장되는 모든 값은 2진수로 저장됨.

10 + 20 을 위해 10과 20은 메모리 상의 임의의 위치에 기억되고, CPU는 이 값을 읽어들여 연산을 수행함. 결과인 30도 메모리 상의 임의의 위치에 저장.

30이라는 결과를 재사용할 수 있는가?

30이 저장된 메모리 공간에 직접 접근하는 방법밖에 없지만, 이 과정은 치명적 오류를 발생시킬 가능성이 매우 높음.

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 ‘변수'라는 메커니즘 제공

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

// 변수는 하나의 값을 저장하기 위한 수단

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

// 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용할 수 있다. 

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

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

]

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

변수 값: 변수에 저장된 값

할당: 변수에 값을 저장하는 것. 대입, 저장이라고도 부름

참조: 변수에 저장된 값을 읽어 들이는 것

좋은 변수 이름은 코드를 이해하기 쉽게 하며, 협업과 품질 향상에도 기여할 수 있다. 따라서 변수 이름 정하는건 굉장히 중요한 일이다!!

4.2 식별자

식별자: 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 변수 이름을 식별자라고도 함.

식별자는 값이 아니라 메모리 주소를 기억하고 있음. 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미. 즉, 메모리 주소에 붙인 이름을 식별자라고도 할 수 있음

식별자는 변수에 국한되지 x. 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부름. 따라서 함수, 클래스 등도 식별자.

식별자는 네이밍 규칙을 준수해야 함.

4.3 변수 선언

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

변수를 사용하려면 반드시 선언이 필요. var, let, const 의 키워드를 사용

var 키워드의 단점을 보안하기 위해 ES6에서 let, const가 도입됨. 도입이유를 알기 위해선 var 의 단점을 정확히 이해해야 하는데 이는 15장에서 다룰 예정.

ES6는 기본적으로 하위 호환성을 유지하면서 ES5의 기반 위에 새로운 기능을 추가한 것. ES6는 ES5의 상위 집합임.

var score; // 변수 선언 ( 변수 선언문 )
// 위처럼 변수를 선언한 이후, 아직 변수에 값을 할당하지 않았다면 
// undefined라는 값이 암묵적으로 할당되어 초기화됨. => javascript 특징

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

var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 수행.

변수를 사용하려면 반드시 선언이 필요한데, 선언하지 않은 채 식별자에 접근을 하면 Reference Error(참조 에러) 가 발생. 식별자를 찾을 수 없을 때 발생하는 에러

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

console.log(score);

var score;

위 코드는 Reference Error 가 발생할까?

No

굉장히 흥미로운 부분...

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

변수 선언이 소스코드가 한 줄씩 순차벅으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 Reference Error 가 발생하지 않음.

정리→ 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행. 변수 선언 뿐 아니라 var, let, const, function, funtion*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 됨.

4.5 값의 할당

// 1
var score;
score = 80;

//2
var score = 80;

위의 두 코드는 정확히 동일하게 동작하나, 변수 선언과 값의 할당의 실행 시점이 다름.

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

// A
console.log(score) // undefined

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

console.log(score); // 80

1번은 런타임 이전에 먼저 실행되고 값을 할당(2)은 런타임에 실행

따라서 2에서는 이미 변수 선언이 완료되어 undefined로 초기화가 되어 있는 상태

//B

console.log(score) // undefined

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

console.log(score); // 80

A와 B의 차이점:

A → 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고, 그 메모리 공간에 할당 값 80을 새롭게 저장

B → 새로운 메모리 공간 확보, 그곳에 할당 값 80 저장.

4.6 값의 재할당

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

상수: 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없음

const 키워드를 사용해 선언한 변수는 재할당 금지. 즉 const 키워드로 상수 표현 가능

값을 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 재할당 값을 새롭게 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그 메모리 공간에 재할당 값을 저장.

그럼 이전 값들은 영영 메모리에 남아있는건가?

NO

가비지 콜렉터에 의해 불필요한 값들은 메모리에서 자동 해제

가비지 콜렉터: 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용하지 않는 메모리를 헤제하는 기능

⇒ 자바스크립트는 매니지드 언어라는 것을 알 수 있음

메모리 관리 방식에 따라 언매니지드, 매니지드 언어로 구분 가능

C 언어 같은 언매니지드 언어는 개발자가 메모리 제어를 주도. 최적의 성능 확보 가능하지만, 치명적인 오류 생산할 가능성 있음

자바스크립트 같은 언매니지드 언어는 개발자가 메모리를 제어하는 것을 허용하지 않음. 일정한 생선성을 확볼할 수 있지만 성능에서는 어느정도의 손실은 감수

식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야함. 숫자로 시작하는 것은 허용 안함
• 예약어는 식별자로 사용할 수 없음. 예약어: 프로그래밍 언어에서 사용되고 있거나 사요오딜 예정인 단어.
  

변수는 쉼표로 구분해 하나의 문에서 여러 개를 한번에 선언할 수 있으나 가독성이 나빠지므로 권장 x

ES5부터 식별자를 만들 때 유니코드 문자 허용해 한글 등으로 식별자 사용 가능.

‘-’ 는 변수 이름으로 사용할 수 없음

자바스크립트는 대소문자를 구분

변수이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확하게 표현해야 함.

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

// 카멜 케이스 ( cameCase ). 변수나 함수의 이름에 사용
var firstName;

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

// 파스칼 케이스 ( PascalCase ). 생성자 함수, 클래스 이름에 사용
var FirstName;

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