[Javascript] 표준 내장 객체 - String, Number, Math, Date, 배열, 객체, JSON

 

문자

String mdn을 참고하자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

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

 

.includes()
 대상 문자에 주어진 문자가 포함되어 있는지(불리안) 확인힌다.
 대소문자 구분, 두번째 인수는 주어진 인덱스 번호부터 찾기

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

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

const str = '1234567'
console.log(str.padEnd(10, '0'))
// 1234567000

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

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

.replace()
대상 문자에서 패턴(문자, 정규식)과 일치하는 부분을 교체한 새로운 문자를 반환한다.

.slice()
대상 문자의 일부를 추출해 새로운 문자를 반환한다.
두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 문자의 끝까지 추출한다.

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

const str = 'Apple, Banana, Cherry'
console.log(str.split(', '))

 

띄어쓰기 주의!

.toLowerCase()
대상 문자를 여엉 소문자로 변환해 새로운 문자로 반환한다.

.toUpperCase()
대상 문자를 영어 대문자로 변환해 새로운 문자로 반환한다.

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

 

---

숫자

Number mdn을 참고하자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number

Number - JavaScript | MDN

 

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

const num = 3.141592
console.log(num.toFixed(2))  // 문자 데이터 3.14
console.log(parseFloat(num.toFixed(2))) // 숫자 데이터 3.14

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

const num = 1000000
console.log(num.toLocaleString())
console.log(`${num.toLocaleString()}원`)

.Number.isInteger() -> 정적 메소드  class 에서 사용
숫자가 정수(integer)인지 확인한다.

const num = 123
console.log(Number.isInteger(num))

.Number.isNaN()
주어진 값이 NaN 인지 확인하는 정적 메소드

const num = NaN
console.log(Number.isNaN(num))

Number.parseInt() 또는 parseInt()
하나의 전역 함수로도 사용 가능
주어진 값(숫자, 문자)을 파싱해 특정 진수(radix)의 정수로 반환한다.

const str = '3.141592'
console.log(Number.parseInt(str, 10)) // 3 (10진수니까 10)

Number.parseFloat() 또는 parseFloat()
주어진 값(숫자, 문자)을 파싱해 부동소수점 실수로 반환(숫자)한다.

const str = '3.141592'
console.log(Number.parseFloat(str))

---

수학

Math mdn을 보자.

수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다.

함수 객체가 아님!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

 

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

Math.cell()
주어진 숫자를 올림해 정수를 반환한다.

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

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

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

Math.pow()
주어진 숫자의 거듭제곱한 값을 반환한다.

Math.random()
숫자 0 이상, 1 미만의 난수를 반환한다.
// 특정 범위의 랜덤 정수를 얻는 함수

function random(min = 0, max = 10) {
  return Math.floor(Math.random() * (max - min)) + min
}
console.log(random())

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

---

날짜

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

const d1 = new(2023, 11, 16, 12, 34, 20)

 

month는 제로베이스드 넘버링 11은 12월

 

 

.getFullYear()와 .setFullYear()
날짜 인스턴스의 연도를 반환하거나 지정한다.

const date = new Date()
console.log(date.getFullYear())  //2023
date.setFullYear(2024)
console.log(date.getFullYear())  //2024

 

.getMonth()와 .setMonth()
날자 인스턴스의 월을 반환하거나 저장한다.
0부터 시작(Zero-based numbering)한다.

const date = new Date()
console.log(date.getMonth())  // July
date.setMonth(0)
console.log(date.getMonth())  // Jan 0은 1월이니까

 

.getDate()와 .setDate()
날자 인스턴스의 일을 반환하거나 저장한다.

 

.getHours()와 .setHours()
날짜 인스턴스의 시간을 반환하거나 저장한다.

 

.getMinutes()와 .setMinutes()
날짜 인스턴스의 시간을 반환하거나 저장한다.

 

.getSeconds()와 .setSeconds()
날짜 인스턴스의 시간을 반환하거나 저장한다.

 

.getDay()
날짜 인스턴스의 요일을 반환한다.

const date = 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)로 반환하거나 지정한다.

const date = new Date()
console.log(date.getTime())

 

Date.now()
유닉스 타임으로부터 경과한
메소드가 호출될 때의 밀리초로 반환한다.

const time = new Date().getTime()//여기서 호출됨
console.log(Date.now())
console.log(time)

setTimeout(() => {
  console.log(Date.now())
  console.log(time) // 호출될 때 ! 고정된 숫자 값
}, 1000)

 

 

---

배열

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

 

.length

배열의 길이(숫자)를 반환한다.

 

 

.at

대상 배열을 인덱싱한다. 음수 값을 사용하면 뒤에서부터 인덱싱한다.

const arr = ['a', 'b', 'c']
console.log(arr.at(0))  // a
console.log(arr.at(-1)  // c

 

 

.concat()

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

const arr1 = ['a', 'b', 'c']
const arr2 = ['d', 'e', 'f']
const arr3 = arr1.concat(arr2) // ['a', 'b', 'c', 'd', 'e', 'f']
// const arr3 = [...arr1, ...arr2] 도 가능하다.

원본 배열은 수정되지 않는다.

 

 

.every()

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

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

 

 

.filter()

주어진 콜백 테스트를 통과(참 반환)하는 모든 요소를 새로운 배열로 반환한다.

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

const users = [
  { name: 'neo', age: 22 },
  { name: 'amy', age: 25 },
  { name: 'lewis', age: 11 }
]
const adults = users.filter(user => {
  return user.age >= 19
})
console.log(adults)

 

 

.find()

대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환한다.

const arr = [5, 7, 130, 22, 44]
const foundItem = arr.find(item => item > 10)
console.log(foundItem) // 130

const user = [
  { name: 'neo', age: 22 },
  { name: 'amy', age: 25 },
  { name: 'lewis', age: 11 }
]
const foundUser = user.find(user => user.name === 'amy')
console.log(foundUser)

 

 

.findIndex()

대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환한다.

const arr = [5, 7, 130, 22, 44]
const foundItem = arr.findIndex(item => item > 10)
console.log(foundItem) // 2

 

 

.flat()

대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어붙인 새로운 배열을 생성한다.

깊이의 기본값은 1이다.

const arr = [1, 2, [3, 4, [5, 6]]
console.log(arr.flat()) //[1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2)) //[1, 2, 3, 4, 5, 6]
//arr.flat(Infinity) <- 사용이 편리하다.

 

 

.forEach()

대상 배열의 길이만큼 주어진 콜백을 실행한다.

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

arr.forEach(item => console.log(item))
// 콜백은 모든 item 실행해야 종료

for(let i = 0; i < arr.length; i += 1) {
  console.log(arr[i])
}
// for문은 원할 때 조건 지정 후 break 가능

 

 

.includes()

대상 배열이 특정 요소를 포함하고 있는지 확인한다.

const arr = [1, 2, 3]
console.log(arr.includes(2))
// 대소문자 구분

JS는 데이터를 원시형과 참조형으로 구분한다.

참조형 : 객체, 배열, 함수 데이터 -> 생긴 것이 같더라도 다른 데이터일 수 있다.

포인터 개념 생각하면 된다. (메모리 주소 비교)

 

 

.join()

대상 배열의 모든 요소를 구분자로 연결한 문자를 반환한다.

const arr = ['apple', 'banana', 'cherry']
console.log(arr.join(, ))  // apple, banana, cherry

 

 

.map()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4]
const newNumbers = numbers.map(item => item * 2)
console.log(newNumbers) // [2, 4, 6, 8]
(원본 배열에는 영향 X)

const users = [
  {name:'aa', age: 22},
  {name:'bb', age: 33},
  {name:'cc', age: 44}
]
const newUsers = users.map(user => {
  return {
    ...user,
    isValid: true,
    email: null
  }
})
console.log(newUsers)

 

 

.pop()

대상 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

대상 배열 원본이 변경된다.

const fruits = ['apple', 'banana', 'cherry']
console.log(fruits.pop())  // cherry
console.log(fruits)  // ['apple', 'banana']

 

 

.push()

대상 배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

대상 배열 원본이 변경된다.

const fruits = ['apple', 'banana', 'cherry']
const newLength = fruits.push('orange')
console.log(newLength) // 4
console.log(fruits)  // ['apple', 'banana', 'cherry', 'orange']

 

 

.reduce()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환한다.

각 콜백의 반환 값은 다음 콜백으로 전달된다.

const numbers = [1, 2, 3]
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 0)  // 초깃값 0 -> acc..(누적 값)로 들어감, 배열의 1번째 item은 cur..로 들어감
console.log(sum)  // 6

const users = [
  {name:'aa', age: 22},
  {name:'bb', age: 33},
  {name:'cc', age: 44}
]

//총 나이 계산
const totalAge = users.reduce((acc, cur) => {
  return acc + cur.age
}, 0)
console.log(totalAge)  // 99

// 모든 이름 추출
const nameArray = users.reduce((acc, cur) => {
  acc.push(cur.name)
  return acc
}, [])
const names = nameArray.join(', ')
console.log(names)  // aa, bb, cc

 

 

.reverse()

대상 배열의 순서를 반전한다.

대상 배열 원본이 변경된다.

const arr = ['a', 'b', 'c']
const reversed = arr.reverse()
console.log(reversed)  // ['c', 'b', 'a']
console.log(arr)  // ['c', 'b', 'a']

 

 

.shift()

대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.

대상 배열 원본이 변경된다.

const arr = ['a', 'b', 'c']
console.log(arr.shift())  // ['b', 'c']
console.log(arr)

 

 

.slice()

대상 배열의 일부를 추출해 새로운 배열을 반환한다.

두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출한다.

const arr = ['a', 'b', 'c', 'd', 'e']
console.log(arr.slice(0, 3))  // ['a', 'b', 'c']
console.log(arr.slice(2, -1))  // ['c', 'd']

 

 

.some()

대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인한다. (1개 이상 통과시 true)

const arr = [1, 2, 3, 4]
const isVaild = arr.some(item => item > 3)
console.log(isVaild)  // true

 

 

.sort()

대상 배열을 콜백의 반환 값(음수, 양수, 0)에 따라 정렬한다.

콜백을 제공하지 않으면, 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬한다.

대상 배열 원본이 변경된다.

const numbers = [4, 6, 15, 3, 76, 1, 0]
numbers.sort()
console.log(numbers)  // [0, 1, 15, 3, 4, 6, 76]
numbers.sort((a,b) => a - b)
console.log(numbers)  // [0, 1, 3, 4, 6, 15, 76]
numbers.sort((a,b) => b - a)
console.log(numbers)  // [76, 15, 6, 4, 3, 1, 0]

 

 

.splice()

대상 배열에 요소를 추가하거나 삭제하거나 교체한다.

대상 배열 원본이 변경된다.

const arr = ['a', 'b', 'c']
arr.splice(2, 0, 'x')  // (몇 번째 인수부터, 몇 개 삭제할건지, 추가할 값...)
console.log(arr)  // ['a', 'b', 'x', 'c']

 

 

.unshift()

새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환한다.

대상 배열 원본이 변경된다.

const arr = ['a', 'b', 'c']
console.log(arr.unshift('x'))  // 4
console.log(arr)  // ['x', 'a', 'b', 'c']

 

 

Array.from() // 정적 메소드

유사 배열(Array-like)을 실제 배열로 반환한다.

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3  // 길이 속성 제공
}
console.log(arrayLike.constructor === Array) // false
console.log(arrayLike.constructor === Object) // true

//arrayLike.forEach(item => console.log(item)) <- 이건 에러 뜸
Array.from(arrayLike).forEach(item => console.log(item))

 

 

Array.isArray()

배열 데이터인지 확인한다.

const array = [1, 2, 3]
const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}
console.log(Array.isArray(array))  // true
console.log(Array.isArray(arrayLike))  // false

 

---

객체

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

Object - JavaScript | MDN

 

 

Object.assign()

하나 이상의 출처(Source) 객체로부터 대상(Target) 객체로 속성을 복사하고 대상 객체를 반환한다.

const target = { a: 1, b: 2 }
const source1 = { b: 3, c: 4 }
const source2 = { c: 5, d: 6 }
const result = Object.assign(target, source1, source2)
console.log(target)  // { a: 1, b: 3, c: 5, d: 6 }
console.log(result)  // { a: 1, b: 3, c: 5, d: 6 }

원본을 수정하고 싶지 않으면 target 자리에 {}을 넣어주거나 전개 연산자를 사용하면 된다.

 

 

Object.entries()

주어진 객체의 각 속성과 값으로 하나의 배열을 만들어 요소로 추가한 2차원 배열을 반환한다.

const user = {
  name: 'yuna',
  age: 22,
  isVaild: true,
  email: 'seacrab808@naver.com'
}
console.log(Object.entries(user))

for (const[key, value] of Object.entries(user)) {
  console.log(key, value)
}

 

 

 

Object.keys()

주어진 객체의 속성 이름을 나열한 배열을 반환한다.

 

Object.values()

주어진 객체의 속성 값을 나열한 배열을 반환한다.

const user = {
  name: 'yuna',
  age: 22,
  isVaild: true,
  email: 'seacrab808@naver.com'
}
console.log(Object.keys(user)) // ['name', 'age', 'isVaild', 'email']
console.log(Object.values(user))  // ['yuna', 22, true, 'seacrab808@naver.com']

 

---