[ 모다딥 공부 정리 ] 04장 변수

변수 개념 정리

---

변수란,

변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

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

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

 

 

변수에 여러개의 값을 저장하는 방법

// 변수는 하나의 값을 저장하기 위한 수단이다.
var userId = 1;
var userName = 'Lee';
// 객체나 배열같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용이 가능
var user = { id : 1, name : 'Lee' };
var users = [
{ id : 1, name : 'Lee' },
{ id : 2, name : 'Kim' }
];

 

변수에 값을 넣어보자.

var result = 10 + 20;

10 + 20은 연산을 통해 새로운 값 30을 생성, 연산을 통해 생성된 값 30은 메모리 공간에 저장된다.

이 때 메모리 공간에 저장된 값 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 바로 변수다.

 

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

변수에 저장된 값 : 변수값 

변수에 값을 저장하는 것 :  할당(대입,저장)

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

---

식별자

• 변수 이름을 식별자라고도 한다.
• 식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
• 네이밍 규칙이 존재함

식별자는 값이아니라 메모리 주소를 기억하고 있다.

식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미이다.

변수, 함수,클래스 등의 이름은 모두 식별자이다.

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

또한 식별자는 네이밍 규칙을 준수해야하며, 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알림

 

식별자 네이밍 규칙

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

자바스크립트 예약어

( * 식별자로 사용 가능하지만 strict mode에서는 사용 불가)

 

네이밍 컨벤션 (Naming Convention)

 

카멜 케이스 (camelCase)

const firstName;

보통 자바스크립트의 변수나 함수명

 

스네이크 케이스 (snake_case)

const first_name;

 

파스칼 케이스 (PascalCase)

const FirstName;

보통 자바스크립트의 클래스명

 

헝가리언 케이스 (typeHungarianCase)

const strFirstName;	// type + identifier
const $element = document.querySelector('#myId');	// DOM Node
const observable$ = fromEvent(document, 'click');	// RxJS 옵저버블

---

변수 선언

변수 선언이란 변수를 생성하는 것을 말한다.

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

 

변수 선언 키워드 3가지

var , let , const

 

let , const  키워드가 도입된 이유 

• var 키워드의 여러 단점을 보완하기 위해서 도입됨

 

var 키워드 단점

• 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코를 지원하므로 전역 변수가 선언되어 심각한 부작용 발생

 

var , let , const 키워드 차이점

var	let	const
변수 재 할당 가능	변수 재 할당 가능	변수 재 할당 불가능
변수 재 선언 가능	변수 재 선언 불가능	변수 재 선언 불가능

 

자바스크립트 엔진이 변수 선언을 2단계에 거쳐 수행하는 방법

1. 선언단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림

2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해서 초기화 한다.

 

---

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

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행됨

console.log(score); // undefined
var score; // 변수 선언문

변수 선언이 콘솔로그 보다 아래에 있기 때문에 순차적으로 실행하기에 알맞지 않은 순서이기때문에

console.log(score) 는 원래라면 에러가 발생

undefined가 출력되는 이유는 변수 선언이 소스 코드가 한줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기때문

 

단, let , const 키워드로 실행했을 때는 에러가 발생한다.

 

호이스팅 : 

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

---

값 할당  / 값 재할당

console.log(score) // undefined

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

console.log(score) // 80

변수 선언 : 소스코드가 순차적으로 실행되는 시점(런타임 이전에 실행)

값의 할당 : 소스코드가 순차적으로 실행되는 시점(런타임에 실행)

 

변수 선언 : var score : 초기화 : undefined / 메모리 주소 : 0x001 
값의 할당 : score = 80 : 값 : 80 / 메모리 주소 : 0x002

변수 선언만 했을  시, 변수에 undefined로 초기화됨 , 값이 할당된거라고 봐야된다.

따라서 score = 80으로 값을 재할당 한거나 마찬가지.

또한, undefined로 초기화하고 값을 할당할 때 undefined 메모리 주소에 다시 80이란 값이 들어가는 것이아닌 새로운 메모리 주소에 80이 저장된다.

그럼 기존에 있던 undefined 메모리 주소는 아무도 사용하지 않는 불필요한 값이 되는데 ,

이러한 값들은 가비지 콜렉터에 의해 자동 해제 된다. 메모리에서 언제 해제될지는 예측 불가

 

가비지 콜렉터

애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능

자바스크립트는 개발자가 직접적으로 메모리 제어 기능을 허용하지 않기 때문에 개발자가 관여할 수 없음

따라서 불필요한 값들이 메모리에서 언제 해제될지는 예측이 불가함