[Javascript] 모던자바스크립트 딥 다이브 5일차 (~613p)
28. Number
표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때
유용한 프로퍼티와 메서드를 제공한다.
//문자열 타입 => 숫자 타입
Number('2.3') // 2.3
//boolean 타입 => 숫자 타입
Number(true) // 1
Number(false) // 0Number.isNaN
Number.isNaN 정적 메서드는 인수로 전달된 숫자값이
NaN인지 검사하여 그 결과를 불리언 값으로 반환한다.
//Number.isNaN은 암묵적 타입 변환 X
Number.isNaN(NaN) // true
Number.isNaN(undefined) // false
//isNaN은 인수를 숫자로 암묵적 타입 변환한다.
isNaN(undefined) // true
Number.prototype.toFixed
toFixed 메서드는 숫자를 반올림하여 문자열로 반환한다.
반올림하는 소수점 이하 자릿수를 나타내는 0~20 사이의 정수값을 인수로 전달할 수 있다.
인수 생략시 기본값 0이 지정된다.
(1234.23).toFixed() // 1234.23
(1234.2324).toFixed(2) // 1234.23
Number.prototype.toPrecision
toPrecision 메서드는 인수로 전달받은 전체 자릿수까지 유효하도록
나머지 자릿수를 반올림하여 문자열로 반환한다.
//전체 3자릿수 유효, 나머지 반올림
(1234.2342).toPrecision(3) //'1.23e+3'
(1234.2342).toPrecision(5) // 1234.2
Number.prototype.toString
toString 메서드는 숫자를 문자열로 반환하여 반환한다.
// 인수 생략시 10진수 문자열을 반환한다.
(10).toString() // '10'
// 2진수 문자열을 반환한다.
(10).toString(2) // '1010'
// 4진수 문자열을 반환한다.
(10).toString(4) // '22'
29. Math
Math.random
Math.random 메서드는 임의의 난수(랜덤 숫자)를 반환한다.
난수는 0~1미만 즉(0~0.9999999) 숫자를 반환한다.
// 1을 더하는 이유는 1~10까지 숫자 반환 때문
const random = Math.floor( Math.random() *10 +1 )
30. Date
Date를 활용한 시계 예제
(function printTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() +1;
const date = now.getDate();
const dayName = [ '일','월','화','수','목','금','토'];
const day = dayName[now.getDay()];
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
const ampm = hour >=12 ? 'Pm' : 'Am';
hour = hour <10 ? '0'+hour : hour;
minute = minute < 10 ? '0'+minute : minute;
const time = `${year}년 ${month}월 ${date}일 ${day}요일 ${ampm} ${hour}:${minute}:${second}`;
console.log(time);
setTimeout(printTime,1000);
}());
// 2023년 1월 26일 목요일 Am 07:41:53
// 2023년 1월 26일 목요일 Am 07:42:11
// 계속 1초씩 출력
31. RegExp
정규 표현식
정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다.
정규표현식은 리터럴 표기법으로 생성할 수 있다. 정규 표현식 리터럴은 아래와 같이 표현한다.
플래그
플래그는 아래와 같은 종류가 있다.
| i | Ignore Case | 대소문자를 구별하지 않고 검색한다. |
| g | Global | 문자열 내의 모든 패턴을 검색한다. |
| m | Multi Line | 문자열의 행이 바뀌더라도 검색을 계속한다. |
패턴
패턴에는 검색하고 싶은 문자열을 지정한다. 이때 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지도 검색한다. 또한 패턴은 특별한 의미를 가지는 메타문자(Metacharacter) 또는 기호로 표현할 수 있다. 몇가지 패턴 표현 방법을 소개한다.
const targetStr = 'AA BB Aa Bb';
// 임의의 문자 3개
const regexr = /.../;
.은 임의의 문자 한 개를 의미한다. 문자의 내용은 무엇이든지 상관없다. 위 예제의 경우 .를 3개 연속하여 패턴을 생성하였으므로 3자리 문자를 추출한다.
반복검색
{최소,최대}
//'A'가 최소 1번 , 최대 2번 반복되는 문자열 검색
"A B AAA B AA B AAA B AA".match(/A{1,2}/g); // ['A', 'AA', 'A', 'AA', 'AA', 'A', 'AA']
//1개만 적을 시 최소 = 최대
"A AAA AA B AAA AA".match(/A{2}/g); // ['AA', 'AA', 'AA', 'AA']
// 1개, 최소 0개
"A AAA AA B AAA AA".match(/A{2,}/g); // ['AAA', 'AA', 'AAA', 'AA']
\d는 숫자를 의미한다. \D는 \d와 반대로 동작한다.
const targetStr = 'AA BB Aa Bb 24,000';
// '0' ~ '9' 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
let regexr = /[\d,]+/g;
console.log(targetStr.match(regexr)); // [ '24,000' ]
// '0' ~ '9'가 아닌 문자(숫자가 아닌 문자) 또는 ','가 한번 이상 반복되는 문자열을 반복 검색
regexr = /[\D,]+/g;
console.log(targetStr.match(regexr)); // [ 'AA BB Aa Bb ', ',' ]
\w는 알파벳과 숫자를 의미한다. \W는 \w와 반대로 동작한다.
앞선 패턴을 최소 한번 반복하려면 앞선 패턴 뒤에 +를 붙인다. 아래 예제의 경우, 앞선 패턴은 A이므로 A+는 A만으로 이루어진 문자열(‘A’, ‘AA’, ‘AAA’, …)를 의미한다.
const targetStr = 'AA AAA BB Aa Bb';
// 'A'가 한번이상 반복되는 문자열('A', 'AA', 'AAA', ...)을 반복 검색
const regexr = /A+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'AAA', 'A' ]
하나 이상의 공백으로 시작하는지 검사한다.
const targetStr = ' Hi!';
// 1개 이상의 공백으로 시작하는지 검사
// \s : 여러 가지 공백 문자 (스페이스, 탭 등) => [\t\r\n\v\f]
const regexr = /^[\s]+/;
console.log(regexr.test(targetStr)); // true
32. string
string.prototype.indexOf / includes
indexOf 메서드는 대상 문자열에서 인수로 전달받은 문자열을 검색해서 첫번째 인덱스를 반환한다.
만약 실패시 -1을 반환한다.
includes 메서드는 문자열에 인수(문자열)이 있으면 true 없으면 false를 출력한다.
"asdf".indexOf('a') // 0
"asdf".includes('a') // true
카멜 케이스 / 스네이크 케이스
카멜 표기법
또는 낙타 표기법은 프로그래밍에서 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이
짓기 위하여 따르는 관례인 네이밍컨벤션의 하나다.
스네이크 표기법
언더바(_) 가 들어 있는 표현 방식을 뱀처럼 생겼다고 하여 스네이크 케이스라고 한다.