[모던JS] Number, Math, Date, RegExp

2023-01-15 23:11:09

Reading time ~11 minutes

📌 [모던 자바스크립트 13주 뿌시기] 28. Number & 29. Math & 30. Date & 31. RegExp

28. Number

Number 생성자 함수

Number는 표준 빌트인 객체이면서 생성자 함수이다.

아래와 같이 new 연산자와 함께 호출하는 경우 래퍼 객체를 생성한다.

const numObj = new Number();
console.log(numObj); 

[[PrimitiveValue]]는 접근할 수 없는 프로퍼티이다.
이는 [[NumberData]] 내부 슬롯을 가리킨다.
인수를 전달하지 않는 경우 이와 같이 0이 할당된다.
인수를 전달할 경우 전달받은 숫자를 할당한 Number 래퍼 객체를 생성한다.

const numObj = new Number(10);
console.log(numObj);

만약 인수를 숫자가 아닌 다른 값을 전달하면 어떻게 될까?

let numObj = new Number('-10');
console.log(numObj);

numObj = new Number('hello');
console.log(numObj);

numObj = new Number(true);
console.log(numObj);

인수를 숫자로 강제 변환한 후 내부슬롯에 할당한다.
숫자로 변환할 수 없는 경우 NaN을 내부슬롯에 할당한다.

Number 프로퍼티

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

Number.MAX_VALUE: 자바스크립트에서 표현할 수 있는 가장 큰 양수 값이다. Number.MAX_VALUE보다 큰 값은 Infinity다.

Number.MIN_VALUE: 자바스크립트에서 표현할 수 있는 가장 작은 양수 값이다. Number.MIN_VALUE보다 작은 값은 0이다.

Number.MAX_SAFE_INTEGER: 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값이다.

Number.MIN_SAF_INTEGER: 자바스크립트에서 안전하게 표현할 수 있는 가장 작은 정수값이다.

Number.POSITIVE_INFINITY: 양의 무한대를 나타내는 숫자값 Infinity와 같다.

Number.NEGATIVE_INFINITY: 음의 무한대를 나타내는 숫자값 -Infinity와 같다.

Number.NaN: 숫자가 아님을 나타내는 숫자값, Number.NaN은 window.NaN과 같다.

Number 메서드

Number.isFinite: 인수로 전달된 숫자값이 정상적인 유한수인지 검사하여 그 결과를 불리언 값으로 반환한다. 만약 인수가 NaN이면 언제나 false를 반환한다.

Number.isFinite 메서드는 빌트인 전역 함수 isFinite와 암묵적 타입 변환 여부의 차이가 있다.

// 인수를 숫자로 암묵적 타입 변환하지 않는다.
Number.isFinite(null); // false

// 인수를 숫자로 암묵적 타입 변환한다. 
isFinite(null); // true, null이 0으로 변환됐다.

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

Number.isFinite 메서드와 isFinite의 차이처럼 Number.isNaN 메서드와 빌트인 전역 함수isNaN는 암묵적 타입 변환 여부의 차이가 있다.

// 인수를 숫자로 암묵적 타입 변환하지 않는다.
Number.isNaN(undefined); // false

// 인수를 숫자로 암묵적 타입 변환한다. 
isNaN(undefined); // true, undefined이 NaN으로 변환됐다.

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

Number.isSafeInteger: 인수로 전달된 숫자값이 안전한 정수인지 검사하여 불리언 값으로 변환한다. 안전한 정수값의 범위는 -(2^53 - 1) ~ (2^53 - 1) 이다.

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

Number.prototype.toFixed: 숫자를 반올림하여 문자열로 반환한다. 반올림하는 소수점 이하 자릿수를 나타내는 0~20 사이의 정수값을 인수로 전달할 수 있다. 생략할 경우 기본값으로 0이 지정된다.

Number.prototype.toPrecision: 인수로 전달받은 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환한다.

Number.prototype.toString: 숫자를 문자열로 변환하여 반환한다. 인수로 진법을 정할 수 있다. 생략하면 기본 10진법이 지정된다.

29. Math

Math는 수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다.
Math는 생성자 함수가 아니므로 정적 프로퍼티와 정적 메서드만 제공한다.

Math 프로퍼티

Math.PI: 원주율 π값을 반환한다.

Math 메서드

Math.abs: 인수로 전달된 숫자의 절대값을 반환한다. 절대값은 반드시 0 또는 양수이어야한다.

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

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

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

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

Math.random: 임의의 난수를 반환한다. 이 범위는 0이상 ~ 1미만이다.

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

Math.max: 전달받은 인수 중에서 가장 큰 수를 반환한다. 인수가 전달되지 않으면 -Infinity를 반환한다.
배열을 인수로 받아서 배열 요소 중 최댓값을 구하고 싶은 경우 Function.prototype.apply 메서드 혹은 스프레드 문법을 사용해야 한다.

Math.min: 전달받은 인수 중에서 가장 작은 수를 반환한다. 인수가 전달되지 않으면 Infinity를 반환한다.
배열을 인수로 받아서 배열 요소 중 최솟값을 구하고 싶은 경우 Function.prototype.apply 메서드 혹은 스프레드 문법을 사용해야 한다.

30. Date

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

UTC(협정 세계시): 국제 표준시를 뜻하며 GMT(그리니치 평균시)로 불리기도 한다.
KST(한국 표준시): 국제 표준시에 9시간을 더한 시간이다.

현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다.

Date 생성자 함수

Date로 생성한 Date 객체는 날짜와 시간을 나타내는 정수값을 갖는다.
이 정수값은 1970년 1월 1일 00:00:00(UTC)을 기점으로 객체가 나타내는 날짜와 시간까지의 밀리초를 나타낸다.

ex) 1970년 1월 2일 0시를 나타내는 Date 객체는 86,400,000(24 x 60 x 60 x 1000)을 갖는다.

Date 객체는 인수가 없을 경우 기본적으로 현재 날짜와 시간을 나타내는 정수값을 가진다.

1. new Date()
new 연산자와 함께 호출할 경우, 현재 시간을 가지는 Date 객체를 반환한다.

new Date(); 
// Mon Jan 16 2023 02:39:46 GMT+0900 (한국 표준시)

new 연산자 없이 호출할 경우, Date 객체를 반환하지 않고 현재 날짜와 시간 정보를 나타내는 문자열을 반환한다.

Date(); 
// "Mon Jan 16 2023 02:39:46 GMT+0900 (한국 표준시)"

2. new Date(milliseconds)
Date 생성자 함수에 숫자 타입의 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체를 반환한다.

3. new Date(dateString)
Date 생성자 함수에 날짜와 시간을 나타내는 문자열을 인수로 전달할 경우, 지정된 날짜와 시간을 나타내는 객체를 반환한다.
Date.parse 메서드가 해석할 수 있는 형식은 정해져있다.

new Date('January 1, 2023 10:00:00');
// Sun Jan 01 2023 10:00:00 GMT+0900 (한국 표준시)

new Date('2023/01/15/10:00:00');
// Sun Jan 15 2023 10:00:00 GMT+0900 (한국 표준시)

4. new Date(year, month[, day, hour, minute, second, millisecond])
생성자 함수에 위와 같은 형태로 인수를 전달할 경우, 해당 날짜와 시간을 나타내는 Date 객체를 반환한다. year과 month는 필수이며 나머지는 지정하지 않을 경우 0 혹은 1로 초기화 된다.

Date 메서드

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

Date.parse: 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다.

Date.UTC: 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간까지의 밀리초를 숫자로 반환한다. 여기서 인수는 new Date(year, month[, day, hour, minute, second, millisecond])와 같은 형식을 갖춰야 한다. month는 0~11의 값이므로 주의.

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

Date.prototype.setFullYear: Date 객체에 연도를 나타내는 정수를 설정한다. 연도뿐만 아니라 월, 일도 설정할 수 있다.

Date.prototype.getMonth: Date 객체에 연도를 나타내는 0~11 정수를 반환한다.

Date.prototype.setMonth: Date 객체에 연도를 나타내는 0~11 정수를 설정한다.

Date.prototype.getDate: Date 객체의 날짜(1~31)를 나타내는 정수를 반환한다.

Date.prototype.setDate: Date 객체의 날짜(1~31)를 나타내는 정수를 설정한다.

Date.prototype.getDay: Date 객체의 요일(0~6)을 나타내는 정수를 반환한다.

Date.prototype.setDay: Date 객체의 요일(0~6)을 나타내는 정수를 설정한다.

요일을 나타내는 반환값은 아래와 같다.

요일	반환값
일요일	0
월요일	1
화요일	2
수요일	3
목요일	4
금요일	5
토요일	6

Date.prototype.getHours: Date 객체의 시간(0 ~ 23)을 나타내는 정수를 반환한다.

Date.prototype.setHours: Date 객체에 시간(0 ~ 23)을 나타내는 정수를 설정한다. 옵션으로 분, 초, 밀리초를 함께 설정할 수 있다.

Date.prototype.getMinutes: Date 객체의 분(0 ~ 59)을 나타내는 정수를 반환한다.

Date.prototype.setMinutes: Date 객체의 분(0 ~ 59)을 나타내는 정수를 설정한다. 옵션으로 초, 밀리초를 함께 설정할 수 있다.

Date.prototype.getSeconds: Date 객체의 초(0 ~ 59)를 나타내는 정수를 반환한다.

Date.prototype.setSeconds: Date 객체의 초(0 ~ 59)를 나타내는 정수를 설정한다. 옵션으로 밀리초를 설정할 수 있다.

Date.prototype.getMilliseconds: Date 객체의 밀리초(0 ~ 999)를 나타내는 정수를 반환한다.

Date.prototype.setMilliseconds: Date 객체의 밀리초(0 ~ 999)를 나타내는 정수를 설정한다.

Date.prototype.getTime: 1970년 1월 1일 00:00:00(UTC)를 기점으로 Date 객체의 시간까지 경과된 밀리초를 반환한다.

Date.prototype.setTime: Date 객체에 1970년 1월 1일 00:00:00(UTC)를 기점으로 경과된 밀리초를 설정한다.

Date.prototype.getTimezoneOffset: UTC와 Date 객체에 지정된 locale 시간과의 차이를 분 단위로 반환한다. 우리나라의 locale 시간은 KST = UTC + 9h 와 같다.

Date.prototype.toDateString: 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 날짜를 반환한다. ex) Fri Jul 24 2020

Date.prototype.toISOString: ISO 8601 형식으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환한다. ex) 2020-07-24T03:30:00.000Z

Date.prototype.toLocaleString: 인수로 전달한 locale을 기준으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환한다. 인수를 생략한 경우, 브라우저가 동작 중인 시스템의 locale을 사용한다.

Date.prototype.toLocaleTimeString: 인수로 전달한 locale을 기준으로 Date 객체의 시간을 표현한 문자열을 반환한다. 인수를 생략한 경우, 브라우저가 동작 중인 시스템의 locale을 사용한다.

31. RegExp

정규 표현식

정규 표현식: 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어. 대부분의 언어에 내장되어 있으며 자바스크립트는 ES3 때 Perl의 정규 표현식 문법을 첫 도입했다.

정규 표현식의 활용: 문자열을 대상으로 패턴 매칭 기능을 통해, 특정 패턴과 일치하는 문자열을 추출/치환할 수 있다. 정규 표현식을 통해 반복문과 조건문 사용하지 않고 패턴을 체크할 수 있다. 그러나 가독성이 좋지 않다는 단점이 있다.

정규 표현식의 생성

정규 표현식 리터럴 표현 방법

const target = 'Is this all there is?'; // 체크할 문자열

// 패턴: is
// 플래그: i > 대소문자를 구별하지 않고 검색한다는 의미
const regexp = /is/i;   

regexp.test(target);    // true

RegExp 생성자 함수를 사용한 객체 생성

// 생성자 함수 사용 방법
// pattern: 패턴
// flag: 정규 표현식 플래그
// new RegExp(pattern[, flags]);

const target = 'Is this all there is?'; // 체크할 문자열

// 패턴: is
// 플래그: i > 대소문자를 구별하지 않고 검색한다는 의미
const regexp = new RegExp(/is/i);

regexp.test(target);    // true

RegExp 생성자 함수를 변수와 함께 동적으로 객체 생성

const count = (str, char) => (str.match(new RegExp(char, 'gi')) ?? []).length;

count('Is this all there is?', 'is');   // 3
count('Is this all there is?', 'xx');   // 0

RegExp 메서드

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

const target = 'Is this all there is?';
const regexp = /is/i;

regexp.exec(target);

// [ 'Is', index: 0, input: 'Is this all there is?', groups: undefined ]

exec는 g 플래그를 지정하더라도 첫 번째 매칭 결과만 반환한다.

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

const target = 'Is this all there is?';
const regexp = /is/;

regexp.test(target); // true

String.prototype.match: 대상 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열로 반환한다. String 표준 빌트인 객체가 제공한다.

const target = 'Is this all there is?';
const regexp = /is/;

target.match(regexp);
// [ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]

match는 g 플래그가 지정되면 모든 매칭 결과를 배열로 반환한다.

플래그

플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.
총 6가지가 존재한다.
옵션이므로 선택적으로 사용 가능하다.
여러 개의 플래그를 동시에 설정할 수 있다.
플래그가 없을 경우, 대소문자를 구별하고 패턴이 1개 이상 존재해도 첫 번째 매칭한 대상만 검색한다.

i 플래그: Ignore case, 대소문자 구별없이 검색한다.
g 플래그: Global, 모든 문자열을 대상 문자열의 전역 검색한다.
m 플래그: Multi line, 문자열의 행이 바뀌어도 검색을 계속한다.

패턴

정규 표현식은 패턴과 플래그로 구성된다.
패턴은 문자열의 일정한 규칙을 표현하기 위해 사용한다.
플래그는 정규 표현식의 검색 방식을 설정한다.

패턴의 형식

패턴은 /로 열고 닫으며 문자열의 따옴표는 생략한다.
패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현할 수 있다.
매치한다: 어떤 문자열 내에 패턴과 일치하는 문자열이 존재할 때 매치한다고 한다.

문자열 검색
패턴에 문자/문자열을 지정하고 메서드를 사용하면 대상 문자열에서 패턴을 검색한다.

문자열 검색 예제1

const target = 'Is this all there is?';
const regExp = /is/;

regExp.test(target);    // true

target.match(regExp);   // [ 'is', index: 5, input: 'Is this all there is?', groups: undefined ]

문자열 검색 예제2 - i 플래그 사용

const target = 'Is this all there is?';
const regExp = /is/i;

target.match(regExp);   // [ 'Is', index: 0, input: 'Is this all there is?', groups: undefined ]

문자열 검색 예제3 - i, g 플래그 사용

const target = 'Is this all there is?';
const regExp = /is/ig;

target.match(regExp);   // [ 'Is', 'is', 'is' ]

임의의 문자열 검색
.은 임의의 문자 한 개를 의미한다. 내용과 상관없이 자리 수 패턴으로 매치한다.

const target = 'Is this all there is?';
const regExp = /.../g;

target.match(regExp);

// [
//   'Is ', 'thi',
//   's a', 'll ',
//   'the', 're ',
//   'is?'
// ]

반복검색
{m,m}은 앞선 패턴이 최소 m번, 최대 n번 반복되는 문자열을 의미한다. 콤마 뒤에는 공백 절대 X..

const target = 'A AA B BB Aa Bb AAA';

let regExp = /A{1,2}/g;
target.match(regExp);   // [ 'A', 'AA', 'A', 'AA', 'A' ]

regExp = /A{2}/g;   // 앞선 패턴이 2번 반복되는 문자열
target.match(regExp);   // [ 'AA', 'AA' ]

regExp = /A{2,}/g;  // 앞선 패턴이 최소 2번 이상 반복되는 문자열
target.match(regExp);   // [ 'AA', 'AAA' ]

+는 앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미한다.

const target = 'A AA B BB Aa Bb AAA';

let regExp = /A+/g; // 'A'가 최소 한 번 이상 반복되는 문자열을 전역 검색

target.match(regExp);   // [ 'A', 'AA', 'A', 'AAA' ]

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

const target = 'color colour';

let regExp = /colou?r/g; // colou가 반복되고 r이 이어지는 패턴

target.match(regExp);   // [ 'color', 'colour' ]

OR 검색
|(버티컬바)는 or의 의미를 갖는다.

let target = 'A AA B BB Aa Bb';

let regExp = /A|B/g; // 'A' 또는 'B'
target.match(regExp);
// [
//   'A', 'A', 'A',
//   'B', 'B', 'B',
//   'A', 'B'
// ]

egExp = /A+|B+/g; // 'A' 또는 'B'가 한 번 이상 반복되는 패턴
target.match(regExp);
// [ 'A', 'AA', 'B', 'BB', 'A', 'B' ]


// 위와 동일
regExp = /[AB]/g; // 'A' 또는 'B'가 한 번 이상 반복되는 패턴
target.match(regExp);
// [ 'A', 'AA', 'B', 'BB', 'A', 'B' ]


target = 'A AA BB ZZ Aa Bb';
regExp = /[A-Z]+/g; // 'A' ~ 'Z'가 한 번 이상 반복되는 패턴
target.match(regExp);
// [ 'A', 'AA', 'BB', 'ZZ', 'A', 'B' ]

// 대소문자 구별않고 알파벳을 검색하는 방법
target = 'AA BB Aa Bb 12';
regExp = /[A-Za-z]+/g; // 'A' ~ 'Z' 또는 'a' ~ 'z'가 한 번 이상 반복되는 패턴
target.match(regExp);
// [ 'AA', 'BB', 'Aa', 'Bb' ]

// 숫자 검색
target = 'AA BB 12,345';
regExp = /[0-9]+/g;
target.match(regExp);
// [ '12', '345' ]

NOT 검색
[] 내의 ^은 not의 의미를 가진다.

const target = 'AA BB 12 Aa Bb';

const regExp = /[^0-9]+/g;

target.match(regExp); // [ 'AA BB ', ' Aa Bb' ]

시작 위치로 검색
[] 밖의 ^(캐럿)은 문자열의 시작을 의미한다.

const target = 'https://poiemaweb.com';

const regExp = /^https/;

regExp.test(target); // true

마지막 위치로 검색
$는 문자열의 마지막을 의미한다.

const target = 'https://poiemaweb.com';

const regExp = /com$/;

regExp.test(target); // true

자주 사용하는 정규 표현식

// 특정 단어로 시작하는지 검사
let url = 'https://naver.com';
/^https?:\/\//.test(url);   // true
 

// 특정 단어로 끝나는지 검사
let fileName = 'index.html';
/com$/.test(fileName);   // true
 

// 숫자로만 이루어진 문자열인지 검사
let target = '12345';
/^\d+$/.test(target);   // true
 

// 하나 이상의 공백으로 시작하는지 검사
target = ' HI!';
/^[\s]+/.test(target);  // true
 

// 아이디로 사용가능한지 검사
let id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}/.test(id);  // true
 

// 메일 주소 형식에 맞는지 검사
const email = 'test@gmail.com';
/^[0-9a-zA-Z]([-_\.]?[a-9a-zA-Z]*)@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email);  // true
 

// 핸드폰 번호 형식에 맞는지 검사
const cellphone = '010-1234-5678';
/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone);  // true
 

// 특수 문자 포함 여부 검사
target = 'abc#123';
(/[^A-Za-z0-9]/gi).test(target);  // true

출처

위키북스, 『모던 자바스크립트 Deep Dive』, 이웅모

javascript