본문 바로가기
Study/javascript

[JS] 모던 자바스크립트 Deep Dive 스터디 - 04장. 변수

by 박히밍 2023. 5. 8.
반응형

모던 자바스크립트 Deep Dive

 

내맘대로 정리하고 공부하는 모던 자바스크립트 Deep Dive 스터디

(언젠가 완독하겠지 ㅎㅅㅎ..)

 

 

 


 

 

[JS] 모던 자바스크립트 Deep Dive 스터디 - 04장. 변수

 

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

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

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

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

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

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

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

10 + 20은 연산을 통해 새로운 값 30을 생성하고, 메모리 공간에 저장된다. 이때 메모리 공간에 저장된 값 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것변수다.

  • 변수명: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
  • 변수값: 변수에 저장된 값
  • 할당: 변수에 값을 저장하는 행위
  • 참조: 변수에 저장된 값을 읽어들이는 행위
var result = 10+ 20;



 

4.2 식별자

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

식별자는 값이 아닌 메모리 주소를 기억한다. 즉, 직별자는 메모리 주소에 붙인 이름이다.

(변수 / 함수 / 클래스 등의 이름은 모두 식별자)

 



4.3 변수 선언

변수 선언 키워드

  • var: 변수 선언 단계와 초기화 단계가 동시에 진행된다.
  • let
  • const
//변수 선언 후 값을 할당하지 않은 상태
var score

위와 같이 변수를 선언만 하고 값을 할당하지 않은 경우ㅡ 변수 선언에 의해 확보된 메모리 공간은 비어있을 것이라 생각할 수 있으나.

확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화 된다.

 

자바스크립트 엔진의 변수 선언 2단계

  1. 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
  2. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당 후 초기화
    • 초기화란?var 키워드로 선언한 변수는 값을 할당하지 않을경우 암묵적으로 undefined로 초기화가 수행된다 . 만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에 이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있다. 이러한 값을 garbage value(쓰레기 값)이라 한다.
    • 변수가 선언된 이후 최초로 값을 할당하는 것.

변수를 사용하려면 반드시 선언이 필요하다. 만약 선언하지 않은 식별자에 접근하게 되면

ReferenceError(참조 에러)가 발생한다.

 



 

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

변수 선언의 실행 시점은 소스코드가 한 줄씩 실행되는 시점(런타임)이 아니라 소스코드 어느 위치에 있든 상관 없이 다른 코드보다 먼저 실행되는 것을

이를 변수 호이스팅(variable hoisting)이라 한다.






4.5 값의 할당

변수 선언은 호이스팅으로 선언 되지만 값의 할당은 런타임 시점에 실행된다.

console.log(score); // undefined

let score; // 1. 변수 선언 (or let score = 80)
score = 80 // 2. 값의 할당

console.log(score); // 80

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

 



4.6 값의 재할당

재할당이란?

  • 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.
  • 값을 재할당 할 수 없다면 그것은 상수이다.(const)








4.7 식별자 네이밍 규칙

식별자 네이밍 규칙

  • 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
  • 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야하고 숫자로 시작하는 것을 허용하지 않는다.
  • 예약어는 식별자로 사용할 수 X
// JS는 대소문자를 구분하므로 아래의 변수는 별개의 변수다.
let firstname;
let firstName;
let FIRSTNAME;




반응형