[JavaScript] Ch06. 표준 내장 객체

jinjoo-jung·2023년 7월 20일

JavaScript

목록 보기

4/17

01. 문자1

.length

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

 const str = 'Hello world!'
 //           012345678901

 console.log(str.length)

.includes

 // .includes()
 // 대상 문자에 주어진 문자가 포함되어 있는지(불린) 확인합니다.

 const str2 = 'Hello world!'
 console.log(str.includes('Hello', 0)) //true
// 주어진 인덱스부터 필요한 문자가 있는지

.indexof()

//  .indexof()
// 대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스(숫자)를 반환한다.
// 일치하는 문자가 없으면 '-1'을 반환한다.

const str3 = 'Hello world'
//            012345678901


console.log(str3.indexOf('world')) //6 : 6번째 인덱스부터 존재해~ 
console.log(str3.indexOf('HEROPY')) //-1

if(str.indexOf('HEROPY') === -1 ) {
    console.log('HEROPY가 없습니다.')
}

if (!str.includes('HEROPY')) {
    console.log('HEROPY가 없습니다')
}

.padEnd()

const str = '1234567' // 대상 문자의 길이는 7 

console.log(str.padEnd(10, '0')) // 지정문자의 길이 10 // 출력 : 1234567000
console.log(str) // 원본은 훼손되지 않는다
 // 만약 대산 문자가 지정된 길이보다 크다면 아무런 변화 X

.padStart()

// .padStart()
// 대상 문자의 길이(length)가 지정된 길이보다 작으면, 주어진 문자를 지정된 길이까지 앞에 붙여 새로운 문자를 반환

const str  = '1234567'
console.log(str.padStart(10,'0'))
console.log(str)

02.문자2

.replace()

// .replace() : 대상 문자에서 패턴(문자, 정규식)과 일치하는 부분을 교체한 새로운 문자를 반환한다.
// 두 번째 인수 인덱스 번호 직전까지 추출하고, 두 번째 인수를 생략하면 대상 문자의 끝까지 추출한다. 

 const str = 'Hello, Hello?!'

 console.log(str.replace('Hello', 'Hi')) // 제일먼저 찾은 단어만.
 console.log(str.replace(/Hello/g, 'Hi')) // Hello라는 단어를 모두 바꿈
 console.log(str) // 원본은 그대로.

.slice()

 // .slice() : 대상 문자의 일부를 추출해 새로운 문자를 반환. 

 const str2 = 'Hello world!'
 
 console.log(str2.slice(0, 5)) // Hello
 console.log(str.slice(6, -1)) // world
 console.log(str.slice(6)) // 6번 인덱스부터 끝까지
 console.log(str) // 원본 데이터는 그대로

.split()

// .split()
// 대상 문자를 주어진 구분자로 나눠 배열로 반환합니다.

const str = 'Apple / Banana / Cherry'

console.log(str.split(' / ')) // 'Apple', 'Banana' 'Cherry'
console.log(str.split('')) // 빈 문자는 모든 문자가 전부 분리되어 배열로 만들어짐.

.toLowerCase

// .toLowerCase()
// 대상 문자를 영어 소문자로 변환해 새로운 문자로 반환한다.
const str2 = 'Apple, Banana, Cherry'
HTMLFormControlsCollection.log(str2.toLocaleLowerCase()) 
console.log(str2)

.toUpperCase()

// .toUpperCase()
// 대상 문자를 영어 대문자로 변환해 새로운 문자로 반환한다.
const str = 'Apple, Banana, Cherry'
HTMLFormControlsCollection.log(str.toUpperCase()) 
console.log(str)

코드를 입력하세요

.trim()


// .trim()
// 대상 문자의 앞뒤 공백 문자(space, tab 등)를 제거한 새로운 문자를 반환한다

const str = '   HEROPY!   '
console.log(str.trim()) // 'HEROPY!'
console.log(str) // '   HEROPY!   '
// 앞뒤공백만 제거하기 때문에 사이사이 공백은 제거하지 않는다.

03.숫자

.toFixed()

// .toFixed()
//  숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자로 반환

const num = 3.1415926535
console.log(num.toFixed(2)) // 소수점 2자리 수까지 해당하는 내용을 자르고, 그 이후는 다 자른다
// 3.14 (반환된 결과는 숫자가 아닌 문자)
console.log(parseFloat(num.toFixed(2))) // 결과는 숫자

.foLocaleString()

// toLocaleString()
// 숫자를 현지 언어 형식의 문자로 반환

const num = 1000000

console.log(num.toLocaleString()) // 문자데이터 
console.log(`${num.toLocaleString()}원`)

Number.isInteger()

// 별도의 숫자 데이터에서 사용하는 것이 아닌 클래스에서 바로 사용하는 메소드(정적메소드)
// 제공되는 숫자가 정수인지 확인

const num = 123
const pi = 3.14

console.log(Number.isInteger(num)) //true
console.log(Number.isInteger(pi))  //false

Number.isNaN()

// 주어진 값이 'NaN'인지 확인

const num1 = NaN
const num2 = 123
const str = 'Hello world'
const nul = null

console.log(Number.isNaN(num1)) //true
console.log(Number.isNaN(num2))  //false
console.log(Number.isNaN(str)) //false
console.log(Number.isNaN(nul)) //false

Number.parseInt() 또는 parseInt()

// 주어진 값(숫자, 문자)을 파싱(분석)해 특정 진수(radix)의 정수로 반환

const str = '3.1415926535'
const num = 3.14159236535


console.log(Number.parseInt(str, 10))
console.log(Number.parseInt(num, 10))

Number.parseFloat() 또는 parseFloat()

진수 명시 X

// 주어진 값(숫자, 문자)을 파싱해 부동소수점 실수로 반환(숫자)합니다.

// 주어진 값(숫자, 문자)을 파싱(분석)해 특정 진수(radix)의 정수로 반환

const str = '3.1415926535'
const num = 3.14159236535


console.log(Number.parseFloat(str))
console.log(Number.parseFloat(num))

04. 수학 Math

Math.abs()

// 주어진 숫자의 절댓값을 반환
 
console.log(Math.abs(2))   //2
console.log(MAth.abs(-2))  //2

Math.ceil() / Math.floor()

// 주어진 숫자를 올림해 정수를 반환

console.log(Math.ceil(3.1415926535))  //4

// 주어진 숫자를 내림해 정수를 반환

console.lo(Math.ceil(3.1415926535))   //3

Math.max() / Math.min()

// 주어진 숫자 중 가장 큰 숫자를 반환

console.log(Math.max(1,22,38,192))  //192


// 주어진 숫자 중 가장 작은 숫자 반환

console.log(Math.min(1,22,38,192))  //1
console.log(Math.max(1,22,-10, 38,192))  // -10

Math.pow()

// 주어진 숫자의 거듭제곱한 값을 반환

console.log(Math.pow(4,2)) //16
console.log(Math.pow(7,2))   // 49
console.log(Math.pow(10,3)) //1000

Math.random()

// 숫자 0 이상, 1 미만의 난수를 반환(랜덤)

console.log(Math.random()) // 랜덤으로 아무 숫자

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

console.log(random())
console.log(random(11,20))
console.log(random(101,999))

Math.round()

// 주어진 숫자를 반올림해 정수를 반환

const num1 = 3.141
const num2 = 3.768

console.log(Math.round(num1)) // 3
console.log(Math.round(num2))  // 4

05. 날짜

const date = new Date() 
console.log(date)
// 타임 스탬프 - 'Wed Sep 28 2022 10:45:41 GMT+0900 (한국 표준시)'

const d1 = new Date(2022, 11, 16, 12, 57, 30)
console.log(d1)

const d2 = new Date('Wed Sep 28 2022 10:45:41 GMT+0900 (한국 표준시)')
console.log(d2)
console.log(d2.getFullYear()) // 출력 : 2022 -> 인스턴스에 붙여서 사용하는 메소드이므로 프로토타입 메소드

.getFullYear() 와 .setFullYear()

const date = new Date() 
console.log(date)
// 타임 스탬프 - 'Wed Sep 28 2022 10:45:41 GMT+0900 (한국 표준시)'

const d1 = new Date(2022, 11, 16, 12, 57, 30)
console.log(d1)

const d2 = new Date('Wed Sep 28 2022 10:45:41 GMT+0900 (한국 표준시)')
console.log(d2)
console.log(d2.getFullYear()) // 출력 : 2022 -> 인스턴스에 붙여서 사용하는 메소드이므로 프로토타입 메소드

.getMonth()와 .setMonth()

// 날짜 인스턴드세어 '월'을 반환하거나 지정
// 0부터 시작(Zero-base numbering)을 합니다.

const date = new Date()
console.log(date.getMonth()) // 8
console.lot(date)

date.setMonth(0)
console.log(date.getMonth()) // 0
console.log(date)

.getDate()와 .setDate()

zero-base numbering (X)

// 날짜 인스턴스의 '일'을 반환하거나 지정

const date = new Date()
console.log(date.getDate()) //28
console.log(date)

date.setDate(11)
console.log(date.getDate()) //11
console.log(data)

.getHours()와 .setHours()

// 날짜 인스턴스의 '시간'을 반환하거나 지정

const date = new Date()

console.log(date.getHours()) // 15 (오후3시)
console.log(date)

date.setHours(7) 
console.log(date.getHours()) // 7
console.log(data)

.getMinutes()와 .setMinutes()

// 날짜 인스턴스의 '분'을 반환하거나 지정

const date = new Date()

console.log(date.getMinutes()) // 48
console.log(date)

date.setMinutes(2) 
console.log(date.getMinutes()) // 2
console.log(data)

.getSeconds()와 .setSeconds()

// 날짜 인스턴스의 '초'를 반환하거나 지정

const date = new Date()

console.log(date.getSeconds()) // 38
console.log(date)

date.setSeconds(57) 
console.log(date.getSeconds()) // 57
console.log(data)

.getDay()

0~6까지의 숫자 데이터 반환
0: 일요일 , 6:토요일

// 날짜 인스턴스의 '요일'을 반환 (지정 . set은 안된다)
// 날짜 인스턴스의 '초'를 반환하거나 지정

const date = new Date()
const day = date.getDay()

console.log(day) //3  
console.log(getDayKo(day)) // 수요일


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 '토요일'
    }
}

.getTime()와 .setTime()

// '1970-01-01 00:00:00'(유닉스타임)부터 경과한,
// 날짜 인스턴스의 '밀리초(ms)'로 반환하거나 지정

const date = new Date()

console.log(date.getTime())
console.log(date)

date.setTime(170000000000)
console.log(date.getTime())
console.log(date)

예제

// '1970-01-01 00:00:00'(유닉스타임)부터 경과한,
// 날짜 인스턴스의 '밀리초(ms)'로 반환하거나 지정

Date.prototype.isAfter = function (date) {
    const a = this.getTime()
    const v = date.getTime()
    console.log(a)
    console.log(b)
    return a > b
}

const d1 = new Date('Sat Jan 01 2022 00:00:00 GMT+0900 (한국 표준시)')
const d2 = new Date('Sun Jan 01 2023 00:00:00 GMT+0900 (한국 표준시)')

console.log(d1.isAfter(d2))  //false
console.log(d2.isAfter(d1))  //true

Date.now()

getTime()은 해당하는 특정한 Date 인스턴스에서 ms을 추출한다면,
Date.now()는, 단순하게 이 함수가 호출 될 때의 ms

// '1970-01-01 00:00:00'(유닉스타임)부터 경과한, 
// 메소드가 호출될 때의 '밀리초(ms)'로 반환 

const time = new Date().getTime()
console.log(Date.now())
console.log(time)

setTimeout(() => {
    console.log(Date.now())
    console.log(time)
}, 1000)

jinjoo-jung

개인 개발 공부, 정리용 🔗

이전 포스트

[JavaScript] Ch04. 함수

다음 포스트

[JavaScript] Ch06. 표준 내장 객체

JavaScript

01. 문자1

.length

.includes

.indexof()

.padEnd()

.padStart()

02.문자2

.replace()

.slice()

.split()

.toLowerCase

.toUpperCase()

.trim()

03.숫자

.toFixed()

.foLocaleString()

Number.isInteger()

Number.isNaN()

Number.parseInt() 또는 parseInt()

Number.parseFloat() 또는 parseFloat()

04. 수학 Math

Math.abs()

Math.ceil() / Math.floor()

Math.max() / Math.min()

Math.pow()

Math.random()

Math.round()

05. 날짜

.getFullYear() 와 .setFullYear()

.getMonth()와 .setMonth()

.getDate()와 .setDate()

.getHours()와 .setHours()

.getMinutes()와 .setMinutes()

.getSeconds()와 .setSeconds()

.getDay()

.getTime()와 .setTime()

Date.now()

[JavaScript] Ch04. 함수

[JavaScript] Ch06. 표준 내장 객체(2)

0개의 댓글