[ JS ] 표준 내장 객체 (1) - String / Number / Math / Date

메이·2024년 4월 22일

JavaScript

목록 보기

5/12

📍 표준 내장 객체 (Built-in Object)

01. String (문자)

.length

: 문자의 길이(숫자)를 반환한다.

const msg1 = 'Hello world!'
//            012345678901
console.log(msg1.length)   // 12

const msg2 = 'The quick brown fox jumps over the lazy dog.'
//            01234567890123456789012345678901234567890123
console.log(msg2.length)   // 44

const h1E1 = document.querySelector('h1')
h1E1.textContent = msg2.length > 20 ? `${msg2.slice(0, 20)}...` : msg2   // 삼항 연산자

.includes( )

: 문자에서 특정 문자가 포함되어 있는지 확인한다.

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.includes('!'))
console.log(msg2.includes('dog'))
console.log(msg2.includes('cat'))

true
true
false

.replace( )

: 문자에서 특정 문자를 다른 문자로 바꾼 새로운 문자를 반환한다.

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.replace('world', 'earth'))
console.log(msg1)
console.log(msg2.replace('dog', 'cat'))
console.log(msg2)

console.log(msg1.replace(' '), (''))   // 'Hello world!'
console.log(msg2.replace(' '), (''))

Hello earth!
Hello world! ⭐
The quick brown fox jumps over the lazy cat. ⭐
The quick brown fox jumps over the lazy dog.
Helloworld!
Thequick brown fox jumps over the lazy dog. ⭐

⭐ 원본의 데이터는 변하지 않는다!

⭐ msg2 변수의 내용을 모르더라도 replace 메소드가 사용되고 있다라고 한다면
msg2라는 변수가 문자 데이터 타입인 것을 알 수 있다.

⭐ .replace() 는 첫번째 인수로 적는 문자를 찾으면 두번째 인수로 바꿔주지만, 모든 문자를 다 바꿔주지 않고 제일 먼저 발견한 문자만 바꿔준다.

.replaceAll( )

: 문자에서 특정 문자를 다른 문자로 바꾼 새로운 문자를 반환한다.

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.replace(' '), (''))
console.log(msg2.replace(' '), (''))

console.log(msg1.replaceAll(' '), (''))
console.log(msg2.replaceAll(' '), (''))

Helloworld!
Thequick brown fox jumps over the lazy dog.
Helloworld!
Thequickbrownfoxjumpsoverthelazydog.

.slice( )

: 문자에서 일부를 추출해 새로운 문자를 반환한다.

const msg1 = 'Hello world!'
//            012345678901
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.slice(0, 5))
console.log(msg1)
console.log(msg1.slice(6, -1))   // -는 문자 뒤쪽에서 부터의 번호
console.log(msg1.slice(6))
console.log(msg2.slice(10, 19))
console.log(msg2.slice(35, -1))

Hello
Hello world!
world
world!
brown fox
lazy dog

⭐ 메소드를 사용할 때 적는 두번째 인수는 그 직전 번호까지만 추출한다.

.split( )

: 문자를 구분자로 나누어 배열로 반환한다.

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.split(' '))
console.log(msg2.split(' '))

console.log(msg1.split(''))
console.log(msg1.split('').reverse().join(''))

['Hello', 'world!']
['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']
['H', 'e', 'l' , 'l', 'o', 'w', 'o', 'r', 'l', 'd', '!']
!dlrow olleH

.toLowerCase( ) / .toUpperCase( )

.toLowerCase() : 문자를 영어 소문자로 바꾼 새로운 문자로 반환한다.
.toUpperCase() : 문자를 영어 대문자로 바꾼 새로운 문자로 반환한다.

const msg1 = 'Hello world!'
const msg2 = 'The quick brown fox jumps over the lazy dog.'

console.log(msg1.toLowerCase())
console.log(msg1)
console.log(msg2.toLowerCase())

console.log(msg1.toUpperCase())
console.log(msg2.toUpperCase())

hello world!
Hello world!
the quick brown fox jumps over the lazy dog.
HELLO WORLD!
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.

.trim( )

: 문자에서 앞뒤 공백을 제거한 새로운 문자를 반환한다.

✍ 예제1

const msg = '  Hello world!    '

console.log(msg.trim())
console.log(msg)

'Hello world!'
' Hello world! '

✍ 예제2

/* html */
<input>
<button>확인!</button>

const inputEl = document.querySelector('input')
const buttonEl = document.querySelector('button')

inputEl.addEventListener('keydown', event => {
  if (event.key === 'Enter') {   // 누른 키가 엔터 키라면
    const value = inputEl.value.trim()
      if (value) {
        console.log(`//${value}//`)
      }
    }
})
buttonEl.addEventListener('click', () => {
  const value = input.value.trim()
    if (value) {
      console.log(`//${value}//`)
    }
})

//입력값//

02. Number (숫자)

.toFixed( )

: 숫자에서 지정된 자릿수까지 표현하는 새로운 문자를 반환한다.

const num = 3.1415926535

console.log(num.toFixed(2))   // '3.14'(문자)
console.log(Number(num.toFixed(2)))   // 3.14(숫자)

.toLocaleString( )

: 숫자에서 현지 언어 형식으로 바꾼 새로운 문자를 반환한다.

const num1 = 1000
const num2 = 100000000
const num3 = num1.toLocaleString()
const num4 = num2.toLocaleString()

console.log(num3)
console.log(num4)
console.log(Number(num3.replaceAll(',', '')))
console.log(Number(num4.replaceAll(',', '')))

'1,000'(문자)
'100,000,000'
1000 (숫자)
100000000

Number( ) / Number.parseInt( ) / Number.parseFloat( )

✍ 예제1

// 더 광범위하게 해석, 유연함.
console.log('Number(데이터)')   // 데이터를 숫자로 변환합니다.
console.log(Number('123'))
console.log(Number('123.456'))
console.log(Number('abc123'))
console.log(Number('123abc'))
console.log(Number(''))
console.log(Number('abc'))
console.log(Number('true'))
console.log(Number('false'))
console.log(Number('{}'))
console.log(Number('[]'))

123
123.456
NaN
NaN
0
NaN
1
0
NaN
0

✍ 예제2

// 숫자를 추출해 명확하고 예측 가능하게 동작, 진법 지정 가능, 정수만 처리.
console.log('Number.parseInt(문자, 진수)')   // 문자를 정수로 변환합니다.
console.log(Number.parseInt('123', 10))
console.log(Number.parseInt('123.456', 10))
console.log(Number.parseInt('abc123', 10))
console.log(Number.parseInt('123abc', 10))
console.log(Number.parseInt('', 10))
console.log(Number.parseInt('abc', 10))
console.log(Number.parseInt('true', 10))
console.log(Number.parseInt('false', 10))

123
123
NaN
123
NaN
NaN
NaN
NaN

✍ 예제3

// parseInt 장점에 더해, 부동소수점 실수까지 처리
console.log('Number.parseFloat(문자)')   // 문자를 부동소수점 실수로 변환합니다.
console.log(Number.parseFloat('123'))
console.log(Number.parseFloat('123.456'))
console.log(Number.parseFloat('abc123'))
console.log(Number.parseFloat('123abc'))

123
123.456
NaN
123

Number.isInteger( )

: 데이터가 정수(숫자 데이터)인지 확인한다.

console.log(Number.isInteger(123))
console.log(Number.isInteger(3.14))
console.log(Number.isInteger(-82))
console.log(Number.isInteger(0))
console.log(Number.isInteger('123'))
console.log(Number.isInteger('abc'))

true
false
true
true
false
false

Number.isNaN( )

: 데이터가 'NaN'인지 확인한다.

console.log(Number.isNaN(NaN))
console.log(Number.isNaN(123))
console.log(Number.isNaN(Infinity))
console.log(Number.isNaN('abc'))

true
false
false
false

03. Math (수학)

Math.abs( )

: 주어진 숫자의 절댓값을 반환한다. (absolute)

console.log(Math.abs(7))   // 7
console.log(Math.abs(-7))   // 7
console.log(Math.abs(3.14))   // 3.14
console.log(Math.abs(-3.14))   // 3.14

Math.ceil( ) / Math.floor( ) / Math.round( )

Math.ceil() : 주어진 숫자를 올림해 정수를 반환한다.
Math.floor() : 주어진 숫자를 내림해 정수를 반환한다.
Math.round() : 주어진 숫자를 반올림해 정수를 반환한다.

console.log(Math.ceil(3.1415926535))
console.log(Math.ceil(3.1415926535 * 100) / 100)

console.log(Math.floor(3.1415926535))
console.log(Math.floor(3.1415926535 * 100) / 100)

console.log(Math.round(3.141))
console.log(Math.round(3.768))

console.log(Math.round(3.141 * 10) / 10)
console.log(Math.round(3.768 * 10) / 10)

4
3.15
3
3.14
3
4
3.1
3.8

Math.max( ) / Math.min( )

Math.max() : 주어진 숫자 중 가장 큰 숫자를 반환한다.
Math.min() : 주어진 숫자 중 가장 작은 숫자를 반환한다.

console.log(Math.max(10, 128, 12, 49, 7))   // 128
console.log(Math.min(10, 128, 12, 49, 7))   // 7

const numbers = [10, 128, 12, 49, 7]
console.log(Math.max(...numbers))   // 128
// console.log(Math.max(10, 128, 12, 49, 7))
console.log(Math.min(...numbers))   // 7

Math.random( )

: 0 이상 1 미만의 난수(무작위 수)를 반환한다.

console.log(Math.random())   // 0.19279119046854789 (랜덤한 수)
console.log(Math.random())   // 0. 41148517860478373

//원하는 범위의 무작위 정수를 얻는 함수
function random(min = 0, max = 10) {
  return Math.floor(Math.random() * (max-min)) + min
}

console.log(random())   // 0~9
console.log(random(0, 100))   // 0~99
console.log(random(101, 200))   // 101~199

04. Date (날짜)

new Date( )

new Date()를 통해 반환된 인스턴스를 '타임스탬프'(Timestamp)라고 한다.

✍ 예제1

let date = new Date()   // new 키워드와 함께 호출하는 함수(클래스)를 '생성자 함수'라고 한다
console.log(date)

Mon April 22 2024 15:35:43 GMT+0900 (한국 표준시)

✍ 예제2

//2024년 12월 16일 17시 23분 31초
date = new Date(2024, 11, 16, 17, 23, 31)
console.log(date)

console.log(date.getFullYear())
console.log(date.getMonth() + 1)
console.log(date.getDate())
console.log(date.getDay())
console.log(getDayKo(date.getDay()))
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())

const h1El = document.querySelector('h1')
h1El.textContent = `${date.getFullYear()}년`

function getDayKo(day) {
  switch (day) {
    case 0: return '일요일'
    case 1: return '월요일'
    case 2: return '화요일'
    case 3: return '수요일'
    case 4: return '목요일'
    case 5: return '금요일'
    case 6: return '토요일'
  }
}

Mon Dec 16 2024 17:23:31 GMT+0900 (한국 표준시)
2024
12
16
1
월요일
17
23
31

⭐ get.Month는 월 정보를 0~11까지 출력함!
ex) 1월은 0으로 출력, 2월은 1로 출력

.getTime( ) / Date.now( )

.getTime() : 유닉스 타임(UNIX Time)으로부터 경과한 시간(ms)을 반환한다.
Date.now() : 현재 시간을 유닉스 타임으로 반환한다.
유닉스 타임이란, 1970.01.01 00:00:00 시간을 의미함

const date1 = new Date()
const date2 = Date.now()

console.log(date1)
console.log(date1.getTime())
console.log(date2)

setTimeout(() => {
  console.log(Date.now() - date2)
}, 1000)
// setTimeout : 몇 초 뒤에 특정한 함수를 실행할 것인지 타이머를 지정

Fri Jan 05 2024 19:42:23 GMT+0900 (한국 표준시)
1704451343119
1704451343119
1000(ms) = 1초

.toISOString( )

// 날짜 인스턴스의 협정 세계시(UTC)를 'ISO 8601'포맷으로 반환한다.
// 'ISO 8601'는 날짜와 시간을 표현하는 국제 표준 규격입니다.
console.log(new Date())
console.log(new Date().toISOString())

Mon Apr 22 2024 19:06:24 GMT+0900 (한국 표준시)
2024-04-22T10:06:24.383Z

⭐ 중간에 T와 마지막에 Z가 포함되어져있는 시간이면 국제 표준의 ISO 문자다.
⭐ 전세계 어디에서 쓰일 수 있도록 국제 표준으로 바꿔서 저장하는 경우가 있다.

메이

프론트엔드 개발자를 꿈꾸는 코린이₊⋆ ☾⋆⁺

이전 포스트

[ JS ] 함수

다음 포스트

[ JS ] 표준 내장 객체 (1) - String / Number / Math / Date

JavaScript

📍 표준 내장 객체 (Built-in Object)

01. String (문자)

.length

.includes( )

.replace( )

.replaceAll( )

.slice( )

.split( )

.toLowerCase( ) / .toUpperCase( )

.trim( )

02. Number (숫자)

.toFixed( )

.toLocaleString( )

Number( ) / Number.parseInt( ) / Number.parseFloat( )

Number.isInteger( )

Number.isNaN( )

03. Math (수학)

Math.abs( )

Math.ceil( ) / Math.floor( ) / Math.round( )

Math.max( ) / Math.min( )

Math.random( )

04. Date (날짜)

new Date( )

.getTime( ) / Date.now( )

.toISOString( )

[ JS ] 함수

[ JS ] 표준 내장 객체 (2) - Array

0개의 댓글