모던자바스크립트 6~8장

김동현 (마늘향기)·2023년 4월 13일

자바스크립트 스터디

목록 보기

3/12

6장 데이터 타입

데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다.

자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 원시 타입과 객체 타입으로 분류할 수 있다.

구분	데이터 타입	설명
원시 타입	숫자 타입	숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재
원시 타입	문자열 타입	문자열
원시 타입	불리언 타입	논리적 참(true)과 거짓(false)
원시 타입	undefined 타입	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
원시 타입	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
원시 타입	심벌 타입	ES6에서 추가된 7번째 타입
객체 타입	객체 타입	객체, 함수, 배열 등

숫자 타입

숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.

정수, 실수 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 이들 값을 참조하면 모두 10진수로 해석된다.

//표기법만 다를 뿐 모두 같은 값.
var binary = 0b01000001; // 2진수 ->65
var octal = 0o101; // 8진수 ->65
var hex = 0x41; // 16진수 ->65

🥪 **배정밀도란?** 단정밀도(single-precision)/배정밀도(double-precision) (나중에 추가로 정리.. 우선 아래 글로 개략적인 느낌을 알 수 있다.) [[IEEE_754](https://ko.wikipedia.org/wiki/IEEE_754)], [[부동소수점](https://ko.wikipedia.org/wiki/%EB%B6%80%EB%8F%99%EC%86%8C%EC%88%98%EC%A0%90)], [[Double-precision_floating-point_format](https://en.wikipedia.org/wiki/Double-precision_floating-point_format)]

숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.

Infinity: 양의 무한대
-Infinity: 음의 무한대
NaN: 산술 연산 불가(not-a-number);

문자열 타입

문자열 타입은 텍스트 데이터를 나타내는 데 사용한다. 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)의 집합이다. 작은따옴표(’’), 큰따옴표(””) 또는 백틱(``)으로 텍스트를 감싼다.

자바스크립트의 문자열은 원시 타입이며, 변경 불가능한 값이다. 문자열이 생성되면 그 문자열을 변경할 수 없다.

템플릿 리터럴

ES6부터 새로운 문자열 표기법이 도입되었다. 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 문자열 처리 기능을 제공한다. 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.

멀티라인 문자열 일반 문자열(작은따옴표, 큰따옴표) 내에서는 줄바꿈이 허용되지 않는데, 템플릿 리터럴을 사용하면 가능하다.
```
var temp = `<ul>
	<li><a href="#">Home</a></li>
</ul>`;
```
표현식 삽입 문자열은 연산자 +를 사용해 연결할 수 있다. + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외엔 덧셈 연산자로 동작한다.
```
var first = 'Dong Hyun';
var last = 'Kim';

console.log(`My name is ${first} ${last}.`); //My name is Dong Hyun Kim.
```

불리언 타입

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false뿐이다.

undefined 타입

undefined 타입의 값은 undefined가 유일하다.

undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다. 변수를 참조했을 때 undefined가 반환된다면 초기화되지 않은 변수라는 것을 간파할 수 있다.

🥪 **선언과 정의** 자바스크립트의 undefined에서 말하는 정의란 변수에 값을 할당하여 변수의 실체를 명확히 하는 것을 말한다. ECMAScript 사양에서 변수는 ‘선언한다’라고 표현하고, 함수는 ‘정의한다’라고 표현한다.

변수 선언과 함수 정의

선언(Declaration)은 코드 일부로서 변수나 함수가 있음을 알려주는 것이고 정의(Difinition)은 코드 일부로서 변수나 함수가 무엇인지 알려주는 것이다. 즉 있음을 알려주는 것이 선언, 무엇인지 알려주는 것이 정의이다. [참고: https://ingorae.tistory.com/918]

var 키워드를 사용한 변수 선언문 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가되지만 함수 선언문으로 정의한 함수를 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 가능하다.

변수 선언

var a; //변수 선언
a = 12; //변수 정의

var b = 'b';// 선언 + 정의

하지만 자바스크립트의 경우 변수를 선언하면 암묵적으로 정의가 이뤄지기 때문에 선언과 정의의 구분이 모호하다.

함수 정의

함수는 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다. (p.158)

→ 함수 식별자에 객체가 할당되기 때문에 함수는 ‘정의한다’ 라고 표현한다.

null 타입

null 타입의 값은 null이 유일하다.

프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미다.

함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다. document.querySelector()메서드 조건에 부합하는 html요소가 없는 경우 에러 대신 null을 반환한다.

심벌 타입

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

심벌은 Symbol 함수를 호출해 생성한다. 이때 생성된 심벌 값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. var key = Symbol('key');

객체 타입

위에서의 7가지 타입 이외의 값은 모두 객체 타입이다.

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

데이터 타입의 필요성

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

동적 타이핑

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이런 특징을 동적 타이핑이라고 하며, 자바스크립트를 동적 타입 언어라 한다.

자바스크립트의 모든 값은 데이터 타입을 갖는다. 그렇다면 변수는 데이터 타입을 가질까? 기본적으로 변수는 타입을 갖지 않는다. 하지만 값은 타입을 갖는다. 따라서 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고 표현하는 것이 더 적절하다. 변수는 값에 묶여 있는 값에 대한 별명이기 때문이다.

동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다.

7장 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 연산의 대상을 피연산자라 한다. 피연산자는 표현식이며, 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

피연산자가 ‘값’이라는 명사의 역할을 한다면 연산자는 ‘피연산자를 연산하여 새로운 값을 만든다’라는 동사의 역할을 한다.

산술 연산자

산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다.

이항 산술 연산자

2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 피연산자의 값을 변경하는 부수 효과가 없다. (+,-,*,/,%)

연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

+undefined; // NaN undefined는 숫자로 타입 변환되지 않는다.

단항 산술 연산자

단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. (++,--,+,-)

증가/감소(++,--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.

증가/감소(++,--) 연산자는 위치에 의미가 있다.

피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

단항 연산자는 피연사에 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환한다.

단항 연산자는 피연산자의 부호를 반전한 값을 반환한다. + 단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 부호를 반전한 값을 생성해 반환한다.

할당 연산자

할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.(=,+=,-=,*=,/=,%=)

할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

비교 연산자

비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

동등/일치 비교 연산자

동등/일치 비교연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. (==,===,!=,!==)

동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다.

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; //-> false
// 빌트인 함수 isNaN을 사용한다.
isNaN(NaN); //-> true

// +0, -0도 주의하자.
-0 === +0; //-> true
Object.is(-0,+0); //-> false

대소 관계 비교 연산자

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다. (>, <, >=, <=)

삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

논리 연산자

논리 연산자는 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다. (||, &&, !)

논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적을 타입 변환된다.

논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 2개의 피연산자 중 어느 한쪽으로 평가된다.

쉼표 연산자

쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다. x=1,y=2,z=3; // 3

그룹 연산자

소괄호(’()’)로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 그룹 연산자는 연산자 우선순위가 가장 높다.

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

typeof null; //→ “object” object 를 반환한다는 데 주의하자. 자바스크립트의 첫 번째 버전의 버그다.

null 타입인지 확인할 때는 일치 비교 연산자를(===) 사용하자.

선언하지 않은 식별자를 typeof 연산자로 연산하면 undefined를 반환한다.

지수 연산자

좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

2 ** 2; //4
2 ** 2 ** 2; //16
(-5) ** 2; //25

연산자의 부수 효과

부수 효과가 있는 연산자는 할당 연산자(=), 증가/감소 연산자(++,--), delete 연산자다.

8장 제어문

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.

블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다.

조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.

if…else 문

else if 문과 else 문은 옵션이다. else if 문은 여러 번 사용할 수 있다.

if…else 문은 표현식이 아닌 문이다.

if(조건식){
	// 조건식이 참이면 이 코드 블록이 실행된다.
} else{
	// 조건식이 거짓이면 이 코드 블록이 실행된다.
}

if(조건식1){
	// 조건식1이 참이면 이 코드 블록이 실행된다.
} else if(조건식2){
	// 조건식2가 참이면 이 코드 블록이 실행된다.
} else {
	// 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}

switch문

switch 문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. case 문은 상황을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행할 문들을 위치시킨다.

일치하는 case 문이 없다면 default 문으로 이동한다. default 문 작성은 선택사항이다.

switch(표현식){
	case 표현식1: 
		//switch 문의 표현식과 표현식1이 일치하면 실행될 문;
		break;
	case 표현식2:
		//switch 문의 표현식과 표현식2이 일치하면 실행될 문;
		break;
	default:
		//switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
}

if…else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다. switch 문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.

반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

for 문

for문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.

for(변수 선언문 또는 할당문; 조건식; 증감식){
	조건식이 참인 경우 반복 실행될 문;
}

while 문

while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. for 문은 반복 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.

var count = 0;

while (count < 3){
	console.log(count);
	count++;
	if(count === 2) break;
}

do…while 문

do…while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.

var count = 0;

do {
	console.log(count);
	count++;
	if(count === 2) break;
} while (count < 3)

break 문

레이블 문, 반복문 또는 switch 문의 코드 블록을 탈출한다. 그 외의 경우 SyntaxError(문법 에러)가 발생한다.

continue 문

continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.

김동현 (마늘향기)

안녕하세요, 김동현입니다. 공부한 내용을 기록하고자 블로그를 생성하였습니다. 감사합니다.