-
[모던 자바스크립트 Deep Dive] 4. 변수 - 6. 데이터 타입Front/모던 자바스크립트 Deep Dive 2026. 3. 15. 16:45
4. 변수
4.1 변수란 무엇인가? 왜 필요한가?
애플리케이션: 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부이다.
예를 들어, 이런 10 + 20 이라는 식이 있다고 가정해 보자. 자바 스크립트 엔진은 이 값을 계산하기 위해서 먼저 10, 20, +라는 기호의 의미를 알고 있어야 하며, 10+20이라는 식의 의미도 해석할 수 있어야 한다. 또한 이를 저장할 공간이 필요한데 컴퓨터에서는 이를 메모리라고 한다. 메모리에 접근하기 위해서는 메모리의 주소를 알아야 하며 16진수로 이루어져 있다. (직접 접근하는 것은 오류 발생 확률 높음)
프로그래밍 언어는 기억해야 하는 값을 메모리에 저장하고 그 값을 읽어 재사용할 수 있도록 '변수'를 제공한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이다. 변수에 값을 저장하는 것을 할당, 대입, 저장 등으로 표현하고 변수의 값을 읽는 것을 참조라고 표현한다.
4.2 식별자
변수 이름 = 식별자(식별할 수 있는 고유한 이름)
식별자는 메모리 주소와 매핑 관계 맺고, 메모리 주소를 기억하고 있다. 또한 변수, 함수, 클래스 등의 이름은 모두 식별자이며 선언으로 자바스크립트 엔진에 식별자의 존재를 띄울 수 있다.
4.3 변수 선언
값을 저장하기 위해 메모리 공간 확보 후 변수의 이름과 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비한다. let 등을 사용하여 선언한다.
* 변수 선언 과정
- 변수의 이름 등록하여 엔진에 변수의 존재 알림.
- 값을 저장할 메모리 공간 확보
- undefined 값이 암묵적으로 할당되어 초기화 수행(js에서 제공하는 원시 타입)
자바 스크립트 엔진이 소스 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 실행 context에 변수의 이름을 비롯한 모든 식별자 등록.
4.4 변수 선언의 실행 시점과 변수 호이스팅
* 변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바 스크립트 고유의 특징
4.5 값 할당
변수 선언은 소스 코드가 순차적으로 실행되는 시점인 런타임 이전 실행.
값 할당은 소스 코드가 순차적으로 실행되는 시점인 런타임에 실행.
4.6 값 재할당
* 상수(Constant) : 단 한 번만 할당 가능한 변수 (값을 재할당할 수 없어 저장된 값을 변경 불가능한 수)
* 언매니지드 언어: C와 같이 메모리 제어를 개발자가 주도적으로 할 수 있음 (<-> 매니지드 언어)
* 재할당: 새로운 메모리 공간에 값을 저장함. (기존 공간에 새로운 값을 저장하는 것이 아님.)
* 더이상 사용되지 않는 메모리는 가비지 콜렉터에 의해 메모리에서 자동 해제됨.
* var 키워드로 선언된 변수는 undefined 초기화 때문에 변수 처음 값 할당도 재할당
4.7 식별자 네이밍 규칙
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.
- 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야 한다.
- 예약어는 식별자로 사용할 수 없다.
- 변수의 존재 목적을 위해 명확히 표현하여야 한다.
* 네이밍 컨밴션
- 카멜케이스
- 스네이크케이스
-파스칼케이스
5. 표현식과 문
5-1. 값
10 + 20; //30
* 값: 식이 해석(평가)되어 생성된 결과
5-2. 리터럴
* 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
5-3. 표현식
* 표현식: 값으로 해석될 수 있는 문. 표현식이 해석되면 새로운 값을 참조하거나 기존 값을 참조. (값이 위치할 수 있는 자리에 위치할 수 있음.)
5-4. 문
* 문: 프로그램을 구성하는 기본 단위, 최소 실행 단위
* 토큰: 문법적인 의미를 가지고 문법적으로 더이상 나눌 수 없는 코드의 기본 요소
5-5. 세미콜론과 세미콜론 자동 삽입 기능
- 세미콜론은 문의 종료를 나타냄. 자바 스크립트에서는 세미콜론을 자동적으로 붙여 주는 세미콜론 자동 삽입 기능(ASI)가 존재한다. 하지만 직접 사용하는 것을 권장함.
5-6. 표현식인 문 vs 표현식이 아닌 문
- 변수에 할당했을 때 SyntaxError 발생하는 것이 표현식이 아닌 문.
6. 데이터 타입
6-1. 숫자 타입
- 정수 vs 실수 구분하지 않고 하나의 타입만 존재한다. 모든 실수를 실수로 처리하며 정수를 표현하기 위한 데이터 타입은 존재하지 않는다. 정수 간 나눗셈에서도 실수가 나올 수 있다.
- 모두 메모리에는 64bit 부동소수점 2진수로 저장된다. 값을 참조할 때 항상 10진수로 해석된다.
6-2. 문자열 타입 [원시 타입]
- 0개 이상, 16bit 유니코드 문자의 집합.
- 문자열은 작은 따옴표, 큰 따옴표, 백틱으로 텍스트를 감싸야 한다.(키워드나 식별자 같은 토큰과 구분 필요.)
- 문자열 생성 후 변경 불가(원시 타입)
6-3. 템플릿 리터럴
- 백틱 사용해 표현
* 멀티라인 문자열
- 일반 문자열 내 줄바꿈 허용하지 않는다. (줄바꿈의 공백 표현 시 \로 시작하는 이스케이프 시퀀스 사용)
- 템플릿 리터럴 내에서는 이스케이프 시퀀스 미사용해도 줄바꿈과 공백이 허용된다.
* 표현식 삽입 - ${}으로 표현식 감싸기
- 문자열은 문자열 연산자 '+'를 통해 연결 가능하다. (피연산자 중 하나 이상이 문자열인 경우 동작)
- 템플릿 리터럴 내에서 표현식삽입을 통해 간단히 문자열 삽입이 가능하고 문자열 연산자보다 간편하다.
6-4. 불리언 타입- true / false
6-5. undefined 타입
var 선언 - 암묵적 undefined 초기화
6-6. null 타입
- 변수에 값이 없다는 것을 명시할 때 사용한다. (이전 값을 명시적으로 제거하며 더이상 참조하지 않겠다는 의미)
- 함수가 유효한 값을 반환할 수 없을 때도 명시적으로 null을 반환한다.
6-7. 심벌 타입 (ES6에 추가된 7번째 타입) [원시 타입]
- 다른 값과 중복되지 않는 유일무이한 값. (이름 충돌 위험이 없는 객체의 유일한 프로퍼티 키를 만들 때 사용한다.)
- 심벌 외에 원시 타입은 리터럴을 통해 생성하면 심벌은 Symbol 함수를 호출하여 생성한다.
6-8. 객체 타입 (vs 원시 타입)
- 자바스크립트는 객체 기반의 언어로 위 6개의 데이터 타입 이외는 객체 타입.
6-9. 데이터 타입의 필요성
- 데이터 타입에 의한 메모리 공간의 확보와 참조 (값을 참조할 때, 식별자를 통해 값이 저장되어 있는 메모리 공간의 선두 메모리 셀의 주소를 찾아갈 수 있다. 자바스크립트의 엔진은 변수의 데이터 타입을 인식하여 변수를 참조할 때 메모리 셀의 크기를 한 번에 읽어들인다.)
- 데이터 타입에 의한 값의 해석
6-10. 동적 타이핑
- 자바 스크립트의 변수는 선언할 때 타입을 선언하지 않는데 이는 변수가 선언이 아닌 할당에 의해 타입이 결정되고 재할당에 의해 변수의 타입이 언제든지 동적으로 변할 수 있기 때문에 동적 타입 언어이다.
- 값을 확인하기 전까지는 타입 확신을 할 수 없기 때문에 변수를 제한적으로 사용, 유효 범위를 최대한 작게 하고, 전역 변수를 사용하는 것을 지양하고 변수보다는 상수 사용을 늘리며 목적과 의미를 파악할 수 있도록 네이밍하는 것이 중요하다.
'Front > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 11. 원시 값과 객체의 비교 - 12. 함수 (0) 2026.04.05 [모던 자바스크립트 Deep Dive] 9. 타입 변환과 단축평가 - 10. 객체 리터럴 (0) 2026.03.29 [모던 자바스크립트 Deep Dive] 7. 연산 - 8. 제어문 (0) 2026.03.21