sharingStorage

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

Front-End/모던 자바스크립트 Deep Dive

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

Anstrengung 2022. 6. 1. 22:25

6장 데이터 타입

자바스크립트(ES6)는 7개의 데이터타입을 제공한다.

 

 

6-1 숫자타입

C나 자바의 경우 정수와 실수를 구분해서 숫자타입을 제공하지만 자바스크립트는 독특하게 하나의 숫자타입 만 존재한다. 즉 정수를 표기하기위한 데이터타입 (int와 같은)이 존재하지 않고 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입도 제공하지 않는다.  (타입스크립트라면? )

var binary = 0b0100001; // 2진수
var octal = 0o101;   // 8진수
var hex = 0x41;    // 16진수

console.log(binary); // 65
console.log(octal); // 65
console.log(0x41); // 65

console.log(octal === hex) // ture

자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다고 했다. 이는 즉 정수로 표시된다해도 사실은 실수라는 것을 의미하며 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.

 


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

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

- 자바스크립트는 대소문자를 구분하므로 nan이나 NAN으로 표기하지 않도록 주의한다.

 

 

6-2 문자열타입

문자열은 작은따옴표(' '), 큰따옴표(" "), 백틱(` `)으로 텍스트를 감싼다.

string= '작은따옴표로 감싼 문자열 안에 "큰따옴표는" 문자열로 인식';

string= "큰따옴표로 감싼 문자열 안에 '작은따옴표는' 문자열로 인식";

 

C는 문자열 타입을 제공하지않고 문자의 배열로 문자열을 표현하고 자바는 문자열을 객체로 표현한다.

자바스크립트의 문자열은 원시타입이며, 변경 불가능한 값이다. 

 

 

6-3 템플릿 리터럴

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

 

백틱을 사용해 표현한다.

 

일반 문자열 내에는 개행이 허용되지 않고 다른 특수문자를 사용하려면 이스케이프 시퀀스를 사용해야하지만 템플릿 리터럴을 사용하면 줄바꿈과 특수문자가 모두 허용된다.

 

 

6-3-2 표현식삽입

표현식 삽입은 간단하게 +기호를 사용하는 방법과 템플릿 리터럴 내에서는 백틱네에 ${ }으로 표현식을 감싼다. 

이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입된다.  

var first= 'JAEHUN';
var last= 'LEE';

console.log('My name is ' + first + ' '+last); // My name is JAEHUN LEE


var ss=1234;
var a=12;

console.log(`${ss}`+`${a}`);// 123412

 

6-7 심벌 타입

심벌은 ES6에서 추가된 타입으로 변경 불가능한 원시 타입 이다.

심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라사 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

var key= Symbol('key');
console.log(key); // symbol

var obj={};

obj[key] = 'value';
console.log(obj[key]); //value

 

 

6-9 데이터타입의 필요성

데이터 타입이 필요한 이유는 다음과 같다.

 - 값을 저장할 때 확보해야하는 메모리 공간의 크기를 정하기 위해

 - 값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해

 - 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

 

 

6-10 동적타이핑

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

정적 타입 언어는 변수의 타입을 변경할 수 없으며 변수에 선언한 타입에 맞는 값만 할당할 수 있다.

정적 타입 언어는 컴파일 시점에 타입 체크를 수행한다. 타입 체크를 통과하지 못하면 에러를 발생시키고 실행을 막음으로서 안정적인 코드의 구현을 돕고 런타임에 발생하는 에러를 줄인다.

 

자바스크립트는 var, let, const 키워드를 사용해 변수를 선언한다. 따라서 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다.

 

즉 자바스크립트는 변수의 선언이 아니라 할당에 의해 타입이 결정되고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.

이러한 특징을 동적타이핑이라하며 자바스크립트는 동적 타입언어 이다.

 

컴퓨터가 이해하는 코드는 어떤 바보도 쓸 수 있다. 하지만 훌륭한 프로그래머는 사람이 이해할 수 있는 코드를 쓴다.

 - 마틴 파울러 -

 

 

7장 연산자

단항 산술 연산자 

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

++, --, +, - 등이 있고 +, - 는 부수효과가 없다. 즉 +, -는 값을 변경하는 것이 아니고 피연산자를 숫자타입으로 바꿔 반환하는 것이다. 

-'10'; // -10

-true; // -1

 

 

7-3 비교연산자

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

비교 연산자는 동등 비교 연산자와 일치 비교 연산자가 있다.

== 동등 비교 x와 y의 값이 같음
=== 일치 비교 x와 y의 값과 타입이 같음
!= 부동등 비교 x와 y의 값이 다름
!== 불일치 비교 x와 y의 갑과 타입이 다름

일치 비교 연산자가 조금 더 엄격한 비교를 한다.

 

동등 비교는 암묵적 타입 변환을 통해 타입을 일치시키고 값을 비교한다.

동등 비교는 예측하기 어려운 결과를 만들기 때문에 사용을 지양하는 것이 좋다.

 

NAN 비교하기

NaN === NaN; // false;

//NAN은 자신과 일치하지 않는 유일한 값이다. 따라서 값을 조사하려면 빌트인 함수 Number.isNaN 사용

Number.isNaN(NaN); // true;
Number.isNan(10); // false;
Number.isNaN(1+ undefined); //true;

 

Object.is 메서드

앞에서 살펴본 ==과 ===는 +0과 -0을 동일하다고 평가하고 NaN과 NaN을 비교하면 다른 값이라고 평가한다.

이는 ES6에서 도입된 Object.is 메서드를 사용해 정확한 비교 결과를 얻을 수 있고 이 메서드는 그 외에는 비교 연산자(===)와 동일하게 동작한다.

 

 

7-9 지수 연산자

ES7애서 도입된 지수 연산자는 거듭제곱을 연산한다

2 ** 2; // 4
2 ** 2.5; // 5.65685424 ...;
2 ** -2; // 0.25

 

지수 연산자 도입 전에는 Math.pow 메서드를 활용했다.

Math.pow(2,2); //4
Math.pow(2,0); //1
Math.pow(2,-2); //0.25

지수 연산자는 이항 연산자 중에서 운선순위가 가장 높고 음수 사용시 괄호를 사용해야한다.

 

 

7-11 연산자의 부수효과

부수효과는 다른 코드에 영향을 주는 것이다.

할당 연산자 (=), 증감연산자(++, --), delete연산자는 부수효과가 존재한다.

var x;

x = 1; //할당 
//x변수를 사용하는 다른 코드에 영향을 줌

x++;
// 피연산자의 값을 변경하기에 부수효과 존재

var o= {a:1};
delete o.a;
console.log(o); //객체의 프로퍼티를 삭제하는 부수효과가 있다.

 

Comments