자바스크립트 핵심 정리 3
global, Number, Math, Date, RegExp, String
1. 전역 객체와 빌트인 전역 함수
1-1. 전역 프로퍼티
전역 객체(global/window)에 붙어 있는 빌트인 전역 값들이다.
console.log(global.Infinity === Infinity); // true
console.log(10 / 0); // Infinity
console.log(-10 / 0); // -Infinity
console.log(typeof Infinity); // "number"-
Infinity- 양·음의 무한대를 나타내는 숫자 값
-
NaN- 숫자가 아님(Not a Number)
Number('abc'),10 * 'abc'같은 연산의 결과
-
undefined- 값이 할당되지 않은 상태를 나타내는 원시값
console.log(global.NaN); // NaN
console.log(global.undefined); // undefined
let nothing;
console.log(nothing); // undefined1-2. 빌트인 전역 함수
isFinite
isFinite(value);- 유한수면
true, 아니면false - 숫자가 아니면 숫자로 변환 후 검사
console.log(isFinite(10)); // true
console.log(isFinite('10')); // true
console.log(isFinite(null)); // true // null → 0
console.log(isFinite(Infinity)); // false
console.log(isFinite(NaN)); // false
console.log(isFinite('abc')); // falseisNaN
isNaN(value);- NaN 여부를 검사하고
true/false반환 - 역시 숫자가 아니면 숫자로 변환 후 검사
console.log(isNaN(NaN)); // true
console.log(isNaN(10)); // false
console.log(isNaN('abc')); // true
console.log(isNaN('10')); // false
console.log(isNaN(undefined));// true
console.log(isNaN({})); // trueparseFloat / parseInt
문자열 → 숫자 변환용 전역 함수.
console.log(parseFloat('10.01')); // 10.01
console.log(parseFloat('10')); // 10
console.log(parseFloat('10 20')); // 10
console.log(parseFloat('10cm')); // 10
console.log(parseFloat('GS25')); // NaN
console.log(parseInt('10')); // 10
console.log(parseInt('10.01')); // 10URI 관련 함수
-
encodeURI/decodeURI- 전체 URI 인코딩/디코딩
: / ? & =등 일부 문자는 인코딩하지 않음
const uri = 'http://greedy.com?name=홍길동&job=student';
const enc = encodeURI(uri);
console.log(enc);
// http://greedy.com?name=%ED%99%8D%EA%B8%B8%EB%8F%99&job=student
const dec = decodeURI(enc);
console.log(dec);
// http://greedy.com?name=홍길동&job=student-
encodeURIComponent/decodeURIComponent- 쿼리스트링 구성 요소 인코딩용
=,?,&까지 전부 인코딩
const comp = 'name=홍길동&job=student';
const encComp = encodeURIComponent(comp);
console.log(encComp);
// name%3D...%26job%3Dstudent
const decComp = decodeURIComponent(encComp);
console.log(decComp); // name=홍길동&job=student2. Number 객체
숫자 타입을 다룰 때 유용한 프로퍼티와 메서드를 가진 표준 빌트인 객체다.
2-1. Number 생성자
const n1 = new Number(); // 0
const n2 = new Number(1); // 1
const n3 = new Number('1'); // 1
const n4 = new Number('abc'); // NaN
console.log(n1, n2, n3, n4);2-2. 정적 프로퍼티
console.log(Number.MAX_VALUE); // JS에서 표현 가능한 가장 큰 양수
console.log(Number.MIN_VALUE); // JS에서 표현 가능한 가장 작은 양수
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
console.log(Number.POSITIVE_INFINITY); // Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.NaN); // NaNNumber.EPSILON과 실수 오차
console.log(Number.EPSILON); // 1과 1보다 큰 수 중 가장 작은 수의 차이
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false
function isEqual(a, b) {
return Math.abs(a - b) < Number.EPSILON;
}
console.log(isEqual(0.1 + 0.2, 0.3)); // true2-3. Number 메서드
Number.isFinite(10); // true
Number.isFinite(Infinity);// false
Number.isInteger(10); // true
Number.isInteger(10.1); // false
Number.isNaN(NaN); // true
Number.isSafeInteger(10); // true전역 함수 isFinite, isNaN은 암묵적 타입 변환을 하지만,
Number.isFinite, Number.isNaN 등은 그냥 전달된 값 그대로 검사한다.
지수 표기, 고정 소수점, 유효 자릿수
(1.23456).toExponential(); // "1.23456e+0"
(1.23456).toExponential(3); // "1.235e+0"
(1.23456).toFixed(); // "1"
(1.23456).toFixed(3); // "1.235"
(123.456).toPrecision(); // "123.456"
(123.456).toPrecision(5); // "123.46"
(123.456).toPrecision(1); // "1e+2"진법 변환
(100).toString(); // "100"
(100).toString(2); // "1100100"
(100).toString(8); // "144"
(100).toString(16); // "64"3. Math 객체
Math는 생성자 함수가 아닌 순수 유틸 객체다.
모든 프로퍼티와 메서드는 정적 메서드로 사용한다.
3-1. 상수
console.log(Math.PI); // 3.1415926535897933-2. 자주 쓰는 메서드
Math.abs(-10); // 10
Math.round(10.9); // 11
Math.ceil(10.1); // 11
Math.floor(10.9); // 10
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142...난수
Math.random(); // 0 이상 1 미만
// 1 ~ 100 사이 정수 난수
const random = Math.floor(Math.random() * 100) + 1;거듭제곱, 최대/최소
Math.pow(2, 2); // 4
Math.pow(2, -2); // 0.25
// ES7 지수 연산자
2 ** 2; // 4
2 ** -2; // 0.25
Math.max(10, 20, 30); // 30
Math.min(10, 20, 30); // 104. Date 객체
날짜와 시간을 다루는 빌트인 객체이면서 생성자 함수다.
내부적으로는 1970-01-01T00:00:00(UTC) 기준 경과 밀리초를 저장한다.
4-1. Date 생성 방법
// 1) 현재 날짜/시간
new Date();
// 2) 기준 시점 + 밀리초
new Date(0); // 1970-01-01T00:00:00.000Z
new Date(24 * 60 * 60 * 1000); // 1970-01-02T00:00:00.000Z
// 3) 날짜 문자열
new Date('Jul 26, 2022 09:00:00');
new Date('2022/07/26/09:00:00');
// 4) 연, 월[, 일, 시, 분, 초, ms]
new Date(2022, 1); // 월은 0~11
new Date(2022, 1, 1, 9, 0, 0, 0);4-2. 정적 메서드: now / parse / UTC
Date.now(); // 기준 시점부터 현재까지 경과 밀리초
Date.parse('Jan 1, 1970 09:00:00'); // 0 (KST 기준)
Date.parse('Jan 1, 1970 09:00:00 UTC'); // 32400000
Date.UTC(1970, 0, 1); // 04-3. 날짜/시간 읽기·설정
const date = new Date();
date.getFullYear(); // 년
date.getMonth(); // 월 (0~11)
date.getDate(); // 일
date.getDay(); // 요일 (0=일요일)
date.getHours(); // 시
date.getMinutes(); // 분
date.getSeconds(); // 초
date.getMilliseconds();// msconst d = new Date();
d.setFullYear(2020);
d.setMonth(0);
d.setDate(1);
d.setHours(9);
d.setMinutes(10);
d.setSeconds(10);
d.setMilliseconds(10);
console.log(d);4-4. 타임존, 포맷 메서드
const today = new Date();
today.getTime(); // 기준 시점부터 경과 밀리초
today.getTimezoneOffset();// UTC와의 차이 (분 단위, 한국은 -540)
today.toString();
today.toDateString();
today.toTimeString();
today.toISOString();
today.toLocaleString();
today.toLocaleTimeString();5. 정규 표현식 RegExp
문자열 패턴 매칭을 위한 형식 언어다.
비밀번호 패턴, 전화번호/이메일 형식 검사 같은 곳에서 활용한다.
5-1. RegExp 생성
const target = 'JavaScript';
// 리터럴
let regexp = /j/i; // 패턴: j, 플래그: i (대소문자 무시)
// 생성자
regexp = new RegExp('j', 'i');
regexp = new RegExp(/j/, 'i');
regexp = new RegExp(/j/i);
console.log(regexp.test(target)); // true/false5-2. 주요 메서드
const target = 'Java JavaScript';
/va/.exec(target);
// ["va", index: 2, input: "Java JavaScript", ...]
/va/g.exec(target); // g 플래그 있어도 첫 번째 매칭만
/hello/.exec(target); // null
/va/.test(target); // true
/hello/.test(target); // false
target.match(/va/); // 첫 매칭
target.match(/va/g); // 전체 매칭 ["va", "va"]
target.match(/hello/);// nullreplace, search, split도 정규식을 인수로 받을 수 있다.
5-3. 플래그
i: ignore case, 대소문자 무시g: global, 전역 검색
let t = 'Java JavaScript';
t.match(/VA/); // null
t.match(/VA/i); // ["va"]
t.match(/VA/ig); // ["va", "va"]5-4. 자주 쓰는 패턴
// . : 임의의 한 글자
'abcdefg'.match(/../g); // ["ab", "cd", "ef"]
// {m,n} : 최소 m번, 최대 n번 반복
const s = 'a aa aaa b bb bbb ab aab abb';
s.match(/a{2,3}/g); // ["aa", "aaa", "aa"]
s.match(/b{2}/g); // ["bb", "bb", "bb"]
s.match(/b{3,}/g); // ["bbb"]
// + : 1번 이상 반복 ( {1,} )
s.match(/b+/g); // ["b", "bb", "bbb", "b", "b", "bb"]
// ? : 0~1번 반복 ( {0,1} )
'soul seoul'.match(/se?oul/g); // ["soul", "seoul"]// | : or
let t2 = 'aa bb cc dd 123 456 _@';
t2.match(/a|b/g); // ["a","a","b","b"]
t2.match(/a+|b+/g); // ["aa","bb"]
// [] : 문자셋
t2.match(/[ab]+/g); // ["aa","bb"]
t2.match(/[a-z]+/g); // 소문자
t2.match(/[A-Za-z]+/g); // 알파벳 전체
t2.match(/[0-9]+/g); // 숫자// 숫자/문자 계열
t2.match(/\d+/g); // 숫자 [ '123', '456' ]
t2.match(/\D+/g); // 숫자가 아닌 것들
t2.match(/\w+/g); // 알파벳, 숫자, _
t2.match(/\W+/g); // 그 외 기호/공백// [] 안의 ^ : not
t2.match(/[^0-9]+/g); // 숫자를 제외한 것들
// [] 밖의 ^ : 시작, $ : 끝
const url = 'https://www.google.com';
(/^https/.test(url)); // https로 시작하는지
(/com$/.test(url)); // com으로 끝나는지5-5. 실전 예제 패턴
// http:// 또는 https:// 로 시작하는 URL
/^https?:\/\//.test(url);
// .js 확장자
/js$/.test('test.js');
// 숫자만
/^\d+$/.test('12345');
// 6~12자리, 영문자/숫자 아이디
/^[A-Za-z0-9]{6,12}$/.test('hello123');
// 휴대폰 번호 010-1234-5678 형식
/^\d{3}-\d{3,4}-\d{4}$/.test('010-1234-5678');
// 특수 문자 포함 여부
/[^A-Za-z0-9]/.test('hello#world'); // true6. String 객체
문자열을 다룰 때 사용하는 표준 빌트인 객체다.
문자열은 원시 타입이지만, 메서드를 사용할 때 래퍼 객체 String이 잠깐 생성된다.
6-1. 생성과 기본 속성
const obj = new String(); // 빈 문자열
const obj2 = new String('홍길동');
console.log(obj2.length); // 문자 개수
console.log(obj2[0]); // '홍'
// 문자열은 변경 불가
obj2[0] = '김';
console.log(obj2[0]); // 여전히 '홍'문자열이 아닌 값을 넘기면 내부적으로 문자열로 강제 변환한다.
6-2. 검색·존재 확인 계열
const str = 'JavaScript';
// indexOf
str.indexOf('a'); // 1
str.indexOf('b'); // -1
str.indexOf('a', 2); // 3
// includes
str.includes('a'); // true
str.includes('b'); // false
str.includes('a', 2); // true
// search (정규식)
str.search(/a/); // 1
str.search(/b/); // -1
// startsWith / endsWith
str.startsWith('Ja'); // true
str.startsWith('va', 2); // true
str.endsWith('pt'); // true
str.endsWith('va', 4); // true6-3. 부분 문자열 추출
const s = 'JavaScript';
// charAt
for (let i = 0; i < s.length; i++) {
console.log(s.charAt(i));
}
// substring(start, end?)
s.substring(1, 4); // "ava"
s.substring(1); // "avaScript"
s.substring(4, 1); // "ava" (인수 교환)
s.substring(-1); // "JavaScript" (음수는 0)
// slice(start, end?)
s.slice(1, 4); // "ava"
s.slice(1); // "avaScript"
s.slice(4, 1); // "" (교환 안 함)
s.slice(-1); // "t" (뒤에서부터)6-4. 대소문자, 공백, 반복
const s2 = 'JavaScript';
s2.toUpperCase(); // "JAVASCRIPT"
s2.toLowerCase(); // "javascript"
const s3 = ' JavaScript ';
s3.trim(); // "JavaScript"
// repeat
s2.repeat(); // ""
s2.repeat(0); // ""
s2.repeat(1); // "JavaScript"
s2.repeat(2.5); // "JavaScriptJavaScript"
// 음수는 RangeError6-5. 치환과 분리
const s4 = 'JavaScript';
// replace
s4.replace('Java', 'Type'); // "TypeScript"
s4.replace('a', 'b'); // "JbvaScript" (첫 번째만)
s4.replace(/j/i, 'Z'); // "ZavaScript"
// split
const sentence = 'Hello, Everyone! Nice to see you again.';
sentence.split(' '); // 공백 기준
sentence.split(''); // 문자 하나씩
sentence.split(); // [문자열 전체]
sentence.split(' ', 5); // 앞에서부터 5개까지만마무리 요약
-
전역 객체
Infinity,NaN,undefined같은 값과isFinite,isNaN,parseFloat,parseInt,encodeURI계열 전역 함수가 있다.
-
Number
MAX_VALUE,MAX_SAFE_INTEGER,EPSILON같은 상수와Number.isFinite,toFixed,toString(2)같은 메서드를 제공한다.
-
Math
Math.PI,Math.random,Math.round,Math.max등을 정적 메서드로 사용한다.
-
Date
- 내부적으로는 1970-01-01 기준 밀리초를 저장하고
now,parse,UTC,getFullYear,toLocaleString등으로 날짜/시간을 다룬다.
-
RegExp
- 패턴 + 플래그(i, g)를 이용해서 문자열 검사, 치환, 분리에 활용한다.
-
String
- 원시 문자열을 감싸는 래퍼 객체 역할이고
indexOf,includes,substring,slice,toUpperCase,replace,split등으로 문자열을 편하게 다룰 수 있다.
개발자 희망자