JavaScript 마스터 - Ch06 표준 내장 객체

6장에서는 표준 내장 객체에 대해 배웠다.

 

Ch06 표준 내장 객체

문자 - .includes()

대상 문자에 주어진 문자가 포함되어있는지 확인

소괄호 안에 콤마(,)로 구분해 뒤에 숫자를 넣어주면 해당하는 인덱스부터 검사

console.log(str.includes('Hello'))  // true
console.log(str.includes('hello'))  // false - 대소문자 구별

// 0번째 지점부터 주어진 문자가 들어있는지 판단
console.log(str.includes('Hello', 0))  // true
console.log(str.includes('Hello', 1))  // false(e부터 검사하므로)

 

 

문자 - .indexOf()

대상 문자에서 주어진 문자와 일치하는 첫 번째 인덱스 반환

일치하는 문자가 없으면 -1 반환

const str = "Hello World!"

console.log(str.indexOf('World'))   // 6
console.log(str.indexOf('jioh'))    // -1

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

if(str.indexOf("jioh") === -1) {
    console.log("jioh가 없습니다!")
}

 

 

문자 - .padEnd(), .padStart()

대상 문자의 길이가 지정된 길이보다 작으면,

주어진 문자를 지정된 길이까지 끝(시작)에 붙여 새로운 문자 반환

// 총 길이가 10인 문자열을 만들건데 길이가 10이 안되면 '0'을 붙여서 길이 10을 만듦
const str2 = '1234567'
console.log(str2.padEnd(10, '0'))   // 1234567000

const str3 = '1234567891011'
console.log(str3.padEnd(10, '0'))   // 주어진 문자열이 길이가 10보다 크므로 변화 x

const str4 = '1234567'
console.log(str4.padStart(10, '0'))  // 0001234567

 

 

문자 - .replace()

대상 문자에서 패턴과 일치하는 부분을 교체한 새로운 문자 반환

정규표현식을 사용해 교체하고픈 부분 전체 교체 가능

const str = "Hello, Hello?!"

console.log(str.replace("Hello", "Hi"))    // Hi, Hello?!

// 정규표현식 사용 - g(global): Hello 전부 찾아서 다 Hi로 바꿔라
console.log(str.replace(/Hello/g, "Hi"))   // Hi, Hi?!

 

 

문자 - .slice()

대상 문자에서 패턴과 일치하는 부분을 교체한 새로운 문자 반환

두 번째 인수 직전까지 추출하고 두 번째 인수를 생략하면 대상 문자의 끝까지 추출

const str2 = "Hello world!"

console.log(str2.slice(0,5))    // Hello
console.log(str2.slice(6,-1))   // world
console.log(str2.slice(6))      // world!

 

 

문자 - .split()

대상 문자를 주어진 구분자로 나눠 배열로 반환

const str3 = 'Apple, Banana, Cherry'

console.log(str3.split(' '))    // [Apple, Banana, Cherry]
console.log(str3.split('').reverse().join(''))  //yrrehC, ananaB, elppA

 

 

문자 - .toLowerCase(), .toUpperCase()

대상 문자를 영어 소문자&대문자로 변환해 새로운 문자로 반환

console.log(str3.toLowerCase()) // apple, banana, cherry
console.log(str3.toUpperCase()) // APPLE, BANANA, CHERRY

 

 

문자 - .trim()

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

문자열 중간의 공백은 제거 x!

const str4 = "  Heropy!    "
console.log(str4.trim())    // Heropy!

const str5 = "  HE Ro Py!   "
console.log(str5.trim())    // He Ro Py! - 문자열 중간의 공백은 제거x

 

 

숫자 - .toFixed()

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

문자열을 숫자로 변환하고 싶으면 parseFloat() 사용

const num = 3.1415926535

console.log(num.toFixed(2))           		// 3.14 - 숫자가 아닌 문자열
console.log(typeof num.toFixed(2))    		// string

console.log(parseFloat(num.toFixed(2)))          // 3.14 - 숫자
console.log(typeof parseFloat(num.toFixed(2)))   // number

 

 

숫자 - .toLacaleString()

숫자를 현지 언어 형식의 문자로 변환

const num2 = 1000000

console.log(num2.toLocaleString())              // 1,000,000
console.log(`${num2.toLocaleString()}원`)        // 1,000,000원

 

 

숫자 - Number.isInteger()

숫자가 정수인지 확인

Number이라는 클래스 부분에 붙어있음 - 정적메소드(클래스에서 바로 사용하는 메소드)

const num3 = 123
const pi = 3.14

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

 

 

숫자 - Number.isNaN()

주어진 값이 난수인지 확인

const num4 = NaN
const num5 = 123
const str6 = "hello"
const nul = null

console.log(Number.isNaN(num4))     // true
console.log(Number.isNaN(num5))     // false
console.log(Number.isNaN(str6))     // false
console.log(Number.isNaN(nul))      // false

 

 

숫자 - Number.parseInt(), parseInt()

주어진 값을 파싱해 특정 진수(radix)의 정수로 변환

const str7 = '3.1415926535'
const num6 = 3.1419626535

console.log(Number.parseInt(str7, 10))  // 3(10진수로 만들어라)
console.log(parseInt(str7, 10))         // 3
console.log(Number.parseInt(num6, 10))  // 3

 

 

숫자 - Number.parseFloat(), parseFloat()

주어진 값을 파싱해 부동 소수점 실수로 변환

console.log(Number.parseFloat(str7))    // 3.1415926535
console.log(parseFloat(str7))           // 3.1415926535
console.log(Number.parseFloat(num6))    // 3.1415926535

 

 

수학 - Math.abs()

주어진 숫자의 절댓값 반환

console.log(Math.abs(2))    // 2
console.log(Math.abs(-2))   // 2

 

 

수학 - Math.ceil()

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

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

 

 

수학 - Math.floor()

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

console.log(Math.ceil(3.141414))    // 3

 

 

수학 - Math.round()

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

const num1 = 3.141
const num2 = 3.768

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

 

 

수학 - Math.random()

숫자 0 이상 1 미만의 난수 반환

console.log(Math.random())      // 0~1 사이의 숫자 중 랜덤 반환

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

console.log(random())           // 0~10 사이의 정수
console.log(random(11, 20))     // 11~20 사이의 정수
console.log(random(101, 999))   // 101~999 사이의 정수

 

 

날짜 - 타임스탬프

'월'을 표시할 때 제로베이스드 넘버링 사용
-> 1월: 0, 2월: 1, 3월: 2... 12월: 11

const date = new Date()
console.log(date)   // 현재 날짜 출력

const d1 = new Date(2022, 11, 16, 12, 57, 30)   // 11 - 12월(Dec)
console.log(d1)     // Fri Dec 16 2022 12:57:30

const d2 = new Date('Fri Dec 16 2022 12:57:30 GMT+0900 (한국 표준시)')
console.log(d2)

 

 

날짜 - .getFullYear(), .setFullYear()

날짜 인스턴스의 연도를 반환하거나 지정

console.log(d2.getFullYear())   // 2022

d2.setFullYear(2023)
console.log(d2.getFullYear())   // 2023 - 값 자체가 바뀜

 

 

날짜 - .getMonth(), .setMonth()

날짜 인스턴스의 월을 반환하거나 지정

0부터 시작(Zero-based numbering)

console.log(date.getMonth())    // 6 - 7월을 의미

date.setMonth(0)
console.log(date.getMonth())    // 0 - 1월을 의미

 

날짜 - .getDate(), .setDate()

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

console.log(date.getDate())     // 20

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

 

 

날짜 - .getHours(), .setHours()

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

console.log(date.getHours())

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

 

 

날짜 - .getMinutes(), .setMinutes()

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

 

 

날짜 - .getSeconds(), .setSeconds()

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

 

 

날짜 - .getDay()

날짜 인스턴스의 요일을 반환

값 얻는 것만 존재(지정 x)

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

console.log(day)
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)로 반환하거나 지정

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

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

 

// isAfter함수생성 - 프로토타입 속성에 붙어있는 메소드이므로 인스턴스에서 사용
Date.prototype.isAfter = function (date) {
    const a = this.getTime()
    const b = date.getTime()
    console.log(a)
    console.log(b)
    return a > b
}

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


console.log(d3.isAfter(d4)) // false
console.log(d4.isAfter(d3)) // true


// Date.now()
// 1970-01-01 00:00:00(유닉스타임)부터 경과한
// 메소드가 호출될 때의 밀리초를 반환
// time 변수를 만드는 시점은 아래 코드를 적을 때임 - 고정된 숫자이므로 어디에서 사용되든 같은 숫자값
// Date.now()는 계속 달라짐
const time = new Date().getTime()
console.log(Date.now())
console.log(time)

setTimeout(() => {
    console.log(Date.now())     // 1초뒤의 결과값이 나옴
    console.log(time)
}, 1000
)

 

 

배열 - .at()

대상 배열을 인덱싱

음수 값을 사용하면 뒤에서부터 인덱싱

배열의 마지막 아이템을 인덱싱할 때 간편

const arr = ['a', 'b', 'c']

console.log(arr[0])     // a
console.log(arr.at(0))  // a

console.log(arr[arr.length-1])  // c
console.log(arr.at(-1))         // c

 

 

배열 - .concat()

대상 배열과 주어진 배열을 병합해 새로운 배열 반환

const arr2 = ['a', 'b', 'c']
const arr3 = ['d', 'e', 'f']
const arr4 = arr2.concat(arr3)

console.log(arr2)   // a b c
console.log(arr3)   // d e f
console.log(arr4)   // a b c d e f

// 전개연산자 사용해서 다르게 구현 가능
// 전개연산자를 사용하면 괄호 없어짐
const arr5 = [...arr2, ...arr3]
console.log(arr5)   // a b c d e f

 

 

배열 - .every()

대상 배열의 모든 요소가 콜백 테스트에서 참을 반환하는지 확인

const arr6 = [1,2,3,4]
const isValid = arr6.every(item => item < 5)

console.log(isValid)    // true

const isValid2 = arr6.every(item => item < 4)
console.log(isValid2)   // false

 

 

배열 - .filter()

주어진 콜백 테스트를 통과(참 반환)하는 모든 요소(배열 안의 각각의 데이터 - item, element)를 새로운 배열로 반환

모든 요소가 테스트를 통과하지 못하면 빈 배열 반환

콜백: 함수에 인수로 사용되는 또 다른 함수(number => number < 30)

const numbers = [1,20,7,9,104,0,58]
const filteredNumbers = numbers.filter(number => number < 30)

console.log(filteredNumbers)    // [1, 20, 7, 0]

const filteredNumbers2 = numbers.filter(number => number < 0)

console.log(filteredNumbers2)    // [] - 빈 배열 반환