동그란 도그린
[모던 자바스크립트 Deep Dive🦎] 4장 : 변수 본문
📍 변수란?
- 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억함
- 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체, 셀 하나의 크기는 1바이트(8비트), 각 셀은 고유의 메모리 주소를 가짐
- 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않음 (메모리 주소를 통해 값에 직접 접근 불가)
- 변수
- 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 / 메모리 공간을 식별하기 위해 붙인 이름
- 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됨
- 변수를 통해 값에 안전하게 접근 가능
- 할당 : 변수에 값을 저장하는 것, 참조 : 변수에 저장된 값을 읽는 것
- 식별자
- 변수의 이름
- 값이 아니라 어떤 값이 저장되어 있는 메모리 주소를 기억함
- 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 함
- 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알림
📍 변수 선언
- 변수 생성을 의미
- 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 메모리 공간의 주소를 매핑해서 값을 저장할 수 있도록 준비하는 것
- 확보된 메모리 공간은 확보 해제되기 전까지는 누구도 사용할 수 없도록 보호됨
- 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행됨
- 변수 선언 시 var, const, let 키워드를 사용
- 🔅 키워드 : 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어
- 자바스크립트 엔진은 다음 2단계를 거쳐 변수 선언을 수행함
- 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
- 초기화 단계 : 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
🔅 모든 식별자는 실행 컨텍스트에 등록됨 (실행 컨텍스트 : 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역)
🔅 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 어플리케이션이 사용한 값(쓰레기 값)이 남아있을 수 있음
- var 키워드
- 선언 단계와 초기화 단계가 동시에 진행됨
- 값을 할당하지 않아도 undefined 값을 가짐
- 호이스팅 특징
- 자바스크립트 엔진은 변수 선언 코드가 어디에 있든 다른 코드보다 먼저 실행됨
- 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것
- 변수 선언 뿐만 아니라 모든 식별자(변수, 함수, 클래스 등)에 해당되는 특징
📍 변수 할당
- 런타임에 실행됨
🔅 변수의 선언과 값의 할당을 하나의 문장으로 단축해도 자바스크립트 엔진은 변수의 선언과 할당을 2개의 문으로 나누어 각각 실행함
🔅 값 할당 시 이전 값인 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 새로운 할당 값을 저장하는 게 아니라, 또 다른 새로운 메모리 공간을 확보해서 그곳에 값을 저장함
📍 변수 재할당
- const 키워드를 사용해 선언한 변수는 재할당이 금지됨
- 변수 재할당을 해서 어떤 식별자와도 연결되어 있지 않은 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제됨 (언제 해제될지는 모름)
🔅 managed 언어와 unmanaged 언어
managed 언어 | unmanaged 언어 |
C 언어 | 자바스크립트 |
개발자가 메모리를 할당하고 해제하기 위해 malloc(), free()와 같은 메모리 제어 기능을 제공 | 개발자의 직접적인 메모리 제어를 허용하지 않음, 메모리 해제는 가비지 콜렉터가 수행함 |
개발자의 역량에 따라 최적의 성능 확보 가능 | 성능 면에서 어느 정도의 손실 |
치명적 오류 생산 가능성 | 개발자의 역량에 의존하는 부분이 작아져 일정한 생산성 확보 가능 |
📍 식별자 네이밍 규칙
- 네이밍 규칙
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어( _ ), 달러 기호($) 포함 가능
- 식별자는 숫자로 시작할 수 없음
- 예약서는 식별자로 사용될 수 없음
- ES5부터 유니코드 문자도 허용되므로 알파벳 외에 한글이나 일본어 식별자도 사용 가능
- 자바스크립트는 대소문자를 구별함
- 4가지 네이밍 컨벤션
// 카멜 케이스
var firstName;
// 스네이크 케이스
var first_name;
// 파스칼 케이스
var FirstName;
// 헝가리언 케이스
var strFirstName; // 타입 + 식별자
var $elem = document.getElementById("myId"); // DOM 노드
var observable$ = fromEvent(document, "click"); // RxJS 옵저버블
- 일반적으로 변수나 함수의 이름 - 카멜 케이스
- 생성자 함수, 클래스의 이름 - 파스칼 케이스
- ECMAScript 사양에 정의되어 있는 객체와 함수들 - 카멜 케이스와 파스칼 케이스
'FrontEnd > Javascript' 카테고리의 다른 글
[자바스크립트 완벽 가이드🦏] 4장 : 표현식과 연산자 (0) | 2023.03.22 |
---|---|
[모던 자바스크립트 Deep Dive🦎] 5장 : 표현식과 문 (0) | 2023.03.22 |
[모던 자바스크립트 Deep Dive🦎] 1-3장 : 프로그래밍, 자바스크립트, 자바스크립트 개발 환경 (0) | 2023.03.20 |
[자바스크립트 완벽 가이드🦏] 3장 : 타입, 값, 변수 (1) | 2023.03.12 |
[자바스크립트 완벽 가이드🦏] 2장 : 어휘구조 (0) | 2023.03.12 |
Comments