모던 자바스크립트 Deep Dive ― (7)

모던 자바스크립트 Deep Dive ― (7)

 

모던자바스크립트 Deep Dive, 이웅모 지음

 

28장 Number

표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다.

 

28.1 Number 생성자 함수

Number 객체는 생성자 함수 객체로서 new 연산자와 호출하여 Number 인스턴스를 생성할 수 있다. 

new 연산자와 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체를 생성한다. 

new 연산자 없이 호출하면 Number 인수의 타입을 변화시켜 인스턴스가 아닌 숫자를 반환한다. 

let numObj = new Number('10')
console.log(numObj) // Number {10}[[Prototype]]: Number[[PrimitiveValue]]: 10

let numType = Number('20')
console.log(numType) // 20

 

28.2 Number 프로퍼티

- Number.EPSILON : 1과 1보다 큰 숫자 중 가장 작은 숫자와의 차이와 같다. 부동소수점 산술 연산 등 부동소수점으로 발생하는 오차를 해결하기 위해 사용한다.

- Number.MAX_VALUE : 자바스크립트가 표현할 수 있는 최대 양수 값 

- Number.MIN_VALUE : 자바스크립트가 표현할 수 있는 최소 양수 값 

- Number.MAX_SAFE_VALUE : 자바스크립트에서 안전하게 표현할 수 있는 최대 정수 값 

- Number.MIN_SAFE_VALUE : 자바스크립트에서 안전하게 표현할 수 있는 최소 정수 값 

- Number.POSITIVE_INFINITY : 양의 무한대 

- Number.NEGATIVE_INFINITY : 음의 무한대

- Number.NaN : 숫자가 아님을 나타내는 숫자값 

 

28.3 Number 메서드

- Number.isFinite : 인수의 숫자값이 유한수인지 검사하여 결과를 불리언값으로 반환한다.

- Number.isInteger :인수로 전달된 숫자값이 정수인지 검사하여 결과를 불리언값으로 반환한다.

- Number.isNaN : 인수로 전달된 숫자값이 NaN인지 검사하여 결과를 불리언값으로 반환한다.

- Number.isSafeInteger : 인수로 전달된 숫자값이 안전한 정수인지 검사하여 결과를 불라언 값으로 반환한다.

- Number.prototype.toExponential : 숫자를 자수 표기법으로 변환하여 문자열로 반환한다.

- Number.prototype.toFixed : 숫자를 반올림하여 문자열로 반환한다. ( 인수로 소수점을 설정 )

- Number.prototype.toString : 숫자를 문자열로 전환하여 반환한다. 진법을 인수로 전달 가능하며 기본적으로 10진수다.

 

 

29장 Math

표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다.

생성자 함수가 아니며 정적 프로퍼티와 정적 메서드만 제공한다.

 

29.1 Math 프로퍼티

Math.PI : 원주율(파이)값을 반환한다. 

 

29.2 Math 메서드

- Math.abs : 인수로 전달된 숫자의 절대값을 반환한다. 

- Math.round : 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다.

- Math.ceil : 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다.

- Math.floor : 인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환한다. 

- Math.sqrt : 인수로 전달된 숫자의 제곱근을 반환한다.

- Math.random : 임의의 난수(랜덤숫자) 를 반환한다. 0에서 1미만의 실수다. 0은 포함되지만 1은 포함되지 않는다.

- Math.pow : 첫번째 인수를 밑으로 두 번째 인수를 지수로 거듭제곱한 결과를 반환한다.

- Math.max : 전달받은 인수 중 가장 큰 수를 반환한다. 인수가 없으면 -Infinity이며, 배열의 경우 spread문법으로 인수를 전달해야 한다.

- Math.min : 전달받은 인수 중 가장 작은 수를 반환한다. 인수가 없으면 Infinity이며, 배열의 경우 spread문법으로 인수를 전달해야 한다.

 

 

30장 Date

표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다. 

UTC는 국제 표준시를 말하며, 한국의 경우 UTC + 9시간이 표준이다. 

필자는 Date객체를 다룰 때 실무에서 주로 day.js를 쓰는 편 ( 무려 위클리 다운로드가 13,030,903...! ) 

 

30.1 Date 생성자 함수 

Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다. 

모든 시간의 기점은 1970년 1월 1일 00:00:00(UTC)이다. 

new Date() : 생성자 함수를 인수 없이 호출하면 현재 날짜와 시간을 가지는 Date 객체를 반환한다.

인수로 milliseconds, dateString 등이 들어갈 수 있다.

 

30.2 Date 메서드 

- Date.now : 시간의 기점(1970년 1월 1일 00:00-UTC)기준으로 현재까지 경과한 밀리초를 숫자로 반환한다.

- Date.parse : 시간의 기점 기준으로 인수로 전달된 지정 시간의 인수와 동일한 형식의 밀리초를 숫자로 반환한다.

- Date.UTC : 시간의 기점 기준으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다. 로컬타임이 아닌 UTC로 인수를 인식한다.

- Date.prototype.getFullYear : Date 객체의 연도를 나타내는 정수를 반환한다.

- Date.prototype.setFullYear : Date 객체의 연도를 나타내는 정수를 설정한다. 

- Date.prototype.getMonth : Date 객체의 월을 나타내는 0~11의 정수를 반환한다. 1월은 0, 12월은 11이다.

- Date.prototype.getMonth : Date 객체의 월을 나타내는 0~11의 정수를 설정한다. 1월은 0, 12월은 11이다.

- Date.prototype.getDate : Date 객체의 날짜를 나타내는 정수를 반환한다.

- Date.prototype.setDate : Date 객체의 날짜를 나타내는 정수를 설정한다.

- getHours, setHours, getMinutes, setMinutes, getSecounds, setSecounds, getMillisecounds, setMillisecounds

- Date.prototype.getTime : 시간의 기점을 기점으로 Date 객체의 시간까지 경과된 밀리초를 반환한다. 

- Date.prototype.getTime : 시간의 기점을 기점으로 Date 객체의 시간까지 경과된 밀리초를 설정한다.

- Date.prototype.getTimezoneOffset : UTC와 Date 객체에 지정된 로컬 시간과의 차이를 분 단위로 반환한다.

- Date.prototype.toDatestring : 사람이 읽을 수 있는 형식의 문자열로 Date객체의 날짜를 반환한다.

- Date.prototype.toTImeString : 사람이 읽을 수 있는 형식으로 Date객체의 시간을 표현한 문자열을 반환한다.

- Date.prototype.toISOString : ISO8601형식으로 객체의 날짜와 시간을 표현한 문자열을 반환한다.

- toLocaleString, toLocaleTimeString 

 

 

31장 RegExp

정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 

문재열을 대상으로 패턴 매칭 기능을 제공한다. 특정 패턴과 일치하는 문자열을 검색하거나 추출, 치환할 수 있다.

유저로부터 데이터를 받을 때(form) 유효성 검사에 유용하다. 

 

31.2 정규 표현식의 생성

정규 표현식 객체(RegExp) 생성시 일반적으로 정규 표현식 리터럴을 사용한다.

정규 표현식 리터럴은 패턴과 플래그로 구성된다. 

const target="Is this all there is?"
const regexp = 'is/i' // 정규표현식 객체로 패턴(is)과 플래그(i)가 있다.
regexp.test(target) // true

혹은 RegExp 생성자 함수를 사용하여 RegExp객체를 생성할 수도 있다. 

 

31.3 RegExp 메서드 

- RegExp.prototype.exec : 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환한다. 결과 없으면 null을 반환한다. 문자열 내의 모든 패턴을 검색하는 g플래그를 지정해도 첫 번째 매칭 결과만 반환한다.

- RegExp.prototype.test : 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.

- RegExp.prototype.match : 인수로 전달받은 정규표현식과의 매칭 결과를 배열로 반환한다. g플래그 사용 시 모든 매칭 결과를 배열로 반환한다.

 

31.4 플래그 

정규 표현식의 검색 방식을 설정하기 위해 사용한다.

옵션이기에 선택적으로 사용할 수 잇으며, 하나 이상의 플래그를 동시에 설정할 수도 있다.

- i : 대소문자를 구별하지 않고 패턴을 검색한다. (ignore case)

- g : 패턴과 일치하는 모든 문자열을 전역 검색한다. (global)

- m : 문자열의 행이 바뀌어도 패턴 검색을 계속한다. (multi line)

 

32.5 패턴

패턴은 / 로 열고 닫으며 문자열의 따옴표는 생략한다. 특별한 의미를 가지는 메타문자 또는 기호로 표현할 수 있다. 

1) 문자열 검색 

const target = 'Is there all there is?'
const regExp = '/is/ig' // is 문자열과 일치하는 패턴, 플래그 i,g
target.match(regExp) // ['Is','is','is']

 

2) 임의의 문자열 검색

.은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든 상관 없다. 

 

3) 반복 검색 

{m,n}패턴은 최소 m번, 최대 n번 반복되는 문자열을 의미한다.

{n} 은 앞선 패턴이 n번 반복되는 문자열을 의미한다. {n,n}은 곧 {n}이다.

{n,} 은 앞선 패턴이 최소 n번 이상 반복되는 문자열을 의미한다.

+는 앞선 패턴이 최소 한 번 이상 반복되는 문자열을 의미한다. +는 {1,}과 같다.

?는 앞선 패턴이 최대 한 번 이상(0번 포함) 반복되는 문자열을 의미한다. ?는 {0,1}과 같다. 

const target = 'A AA B BB Aa Bb AAA'
const regExp1 = /A{2,}/g 
target.match(regExp1) // ['AA','AAA']
const regExp2 = /A+/g 
target.match(regExp2) // ['A','AA','A' 'AAA'] 

counst colorTarget = 'color colour'
const regExpColor = /colou?r/g
colorTarget.match(regExpColor) // ['color','colour']

 

4) OR 검색

| 는 OR의 의미를 갖는다. /A|B/g 의 경우 'A'또는 'B'를 의미한다.

분해되지 않은 단어 레벨로 검색하기 위해서는 +를 함께 사용한다.

[]의 내의 문자는 or로 동작한다. 그 뒤에 +를 사용하면 앞선 패턴을 한 번 이상 반복한다.

범위를 지정하려면 []내에 - 를 사용한다. 

const target = 'AA BB Aa Bb 12,345'
const regExp = /[A-Za-z]+/g
target.match(regExp) // ['AA','BB','Aa','Bb']

//영어는 A-Z, 숫자는 0-9 처럼 사용하며, 금액과 같이 쉼표(,)가 들어가는 경우는 쉼표를 포함시킨다.
const regExp2 = /[0-9,]+/g
target.match(regExp1) // ['12,345']

\d 는 숫자를 의미한다. 즉 \d 는 [0-9]이다. \D 는 숫자가 아닌 문자를 의미한다. 

\w는 알파벳, 숫자, 언더스코어이다. \w는 [A-Za-z0-9_]이다. \W는 알파벳,숫자,언더스코어가 아닌 문자다.

 

5) NOT 검색

[...] 내의 ^은 not의 의미를 갖는다. [^0-9]는 숫자를 제외한 문자를 의미한다.

 

6) 시작 위치로 검색

[...] 밖의 ^은 문자열의 시작을 의미한다. /^https/ 는 https로 시작하는지를 의미한다.

 

7) 마지막 위치로 검색 

$는 문자열의 마지막을 의미한다.

 

31.6 자주 사용하는 정규표현식 

특정 단어로 시작, 특정 단어로 끝, 숫자로만, 문자로만, 아이디, 비밀번호, 메일주소, 핸드폰번호, 특수문자포함 여부 등을 많이 쓸 것이다.

필요할 때 마다 검색하여 사용하거나, 미리 만들어 두고 사용하면 좋을 듯 하다.

정규표현식 테스트 사이트에서 확인 해 가면서 사용하는 것이 좋겠다.