[모던 자바스크립트] 4~6장 정리

MiMi·2022년 5월 26일
0

📒JavaScript

목록 보기
3/3

4장 변수

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

할당과 참조

변수에 값을 저장하는 것을 할당(대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라고 한다.

식별자

변수 이름을 식별자라고도 하는데 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
식별자는 값이 아니라 메모리 주소를 기억하고 있다.

변수 선언

변수를 사용하려면 반드시 선언이 필요한데, var, let, const 키워드를 사용한다. 변수 선언은 2단계에 거쳐 수행된다.

  • 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.

호이스팅

console.log(score); //undefined

var score

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 아직 score가 초기화되지 않아참조 에러가 발생될 것처럼 보이지만 undefined가 출력된다.
그 이유는 변수 선언이 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

  • 런타임 : 소스코드가 한 줄씩 순차적으로 실행되는 시점

자바스크립트 엔진은 소스코드를 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

변수 선언뿐 아니라 var, let, const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

5장 표현식과 문

값은 식(표현식)이 평가되어 생성된 결과를 말한다.

//변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.
var sum = 10 + 20;

리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 즉, 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다.

표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 리터럴, 식별자, 연산자, 함수 호출 등 값으로 평가될 수 있는 문은 모두 표현식이다.

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문은 여러 토큰으로 구성된다.

  • 토큰 : 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

개발자 도구에서 표현식이 아닌 문을 실행하면 완료 값 undefined를 출력한다.

6장 데이터 타입

자바스크립트(ES6)는 원시 타입과 객체 타입으로 분류할 수 있다.

숫자(Number) 타입

var integer = 10;
var double = 10.12;
var negative = -20;

console.log(0b0100001); // 65
console.log(10 / 0); // Infinity
console.log(1 * 'String') // NaN

C나 자바는 int, long, float, double 등과 같은 다양한 숫자 타입이 있지만 자바스크립트는 모든 수를 실수로 처리한다. 또한, 2진수, 8진수 등을 표현하기 위한 데이터 타입을 제공하지 않기 때문에 모두 10진수로 해석된다.
숫자 타입은 추가적으로 세 가지 값도 표현할 수 있다.

  • Infinity
  • -Infinity
  • NaN: 산술 연산 불가 (not-a-number)

자바스크립트는 대소문자를 구별하므로 NaN이라고 정확하게 입력해야한다.

문자열(String) 타입

var string;
string = '문자열'; // 작은따옴표
string = "문자열"; // 큰따옴표
string = `문자열`; // 백틱(ES6)

문자열은 따옴표 또는 백틱으로 텍스트를 감싼다. 따옴표로 감싸지 않으면 식별자로 인식한다.

템플릿 리터럴(Template Literal)

템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리되며 백틱을 사용해 표현한다.

var template = `<ul>
	<li><a href="#">Home</a></li>
</ul>`;

var first = 'M';
var last = 'M';
console.log(`My name is ${first} ${last}.`);

템플릿 리터럴 내에서는 줄바꿈이 허용되며 모든 공백도 있는 그대로 적용된다.
표현식을 삽입할 때는 ${ }으로 표현식을 감싼다.

불리언(Boolean) 타입

불리언 타입은 true와 false뿐이다. 조건문에서 자주 사용한다.

undefined 타입

변수를 참조했을 때 undefined가 반환된다면 초기화되지 않은 변수라는 말이다.
따라서 의도적으로 변수에 undefined를 할당하는건 권장되지 않는다.

null 타입

null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.
또한, 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.
ex) document.querySelector 메서드에서 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환한다.

심벌 타입

ES6에서 추가된 7번째 타입으로, 변경 불가능한 원시 타입의 값이다. 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

//이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]);

객체 타입

앞에서 정의한 데이터 타입 외의 값은 모두 객체 타입이다.

데이터 타입의 필요성

  1. 값을 저장할 때 확보해야 하는 메모리 공간의 크기 결정
  2. 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기 결정
  3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정

동적 타이핑

동적 타입 언어와 정적 타입 언어

정적 타입 언어

C나 자바 같은 정적 타입 언어는 변수를 선언할 때 변수에 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다.

정적 타입 언어는 변수의 타입을 변경할 수 없으며 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크를 한다. 통과하지 못하면 에러가 나고 실행이 되지 않는다.

동적 타입 언어

반면 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라 한다. 정적 타입 언어와 반대되는 특징을 가진 언어를 동적 타입 언어라 한다.

참고문헌

  • 그림
  • 모던 자바스크립트 Deep Dive - 이웅모
profile
이제 막 입문한 코린이 -> 이전중 https://mimi98.tistory.com/

0개의 댓글