Date

new Date()를 통해 반환되는 인스턴스를 '타임스탬프'(Timestamp)라고 합니다.

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

console.log(typeof date) // 'object'
console.log(typeof 'Wed Sep 28 2022 10:45:41 GMT+0900 (한국 표준시)') // 'string'
const d1 = new Date(2022, 11, 16, 12, 57, 30)
console.log(d1) // 'Fri Dec 16 2022 12:57:30 GMT+0900 (한국 표준시)'

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

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

const date = new Date()

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

date.setFullYear(2023)
console.log(date.getFullYear()) // 2023
console.log(date) // 'Thu Sep 28 2023 14:23:23 GMT+0900 (한국 표준시)'

.getMonth()와 .setMonth()
날짜 인스턴스의 '월'을 반환하거나 지정합니다.
0부터 시작(Zero-based numbering)합니다.

const date = new Date()

console.log(date.getMonth()) // 8
console.log(date) // 'Wed Sep 28 2022 15:26:49 GMT+0900 (한국 표준시)'

date.setMonth(0)
console.log(date.getMonth()) // 0
console.log(date) // 'Fri Jan 28 2022 14:26:33 GMT+0900 (한국 표준시)'

.getDate()와 .setDate()
날짜 인스턴스의 '일'을 반환하거나 지정합니다.

const date = new Date()

console.log(date.getDate()) // 28
console.log(date) // 'Wed Sep 28 2022 15:35:14 GMT+0900 (한국 표준시)'

date.setDate(11)
console.log(date.getDate()) // 11
console.log(date) // 'Mon Sep 11 2022 12:03:40 GMT+0900 (한국 표준시)'

.getHours()와 .setHours()
날짜 인스턴스의 '시간'을 반환하거나 지정합니다.

const date = new Date()

console.log(date.getHours()) // 14
console.log(date) // 'Wed Dec 21 2022 14:23:51 GMT+0900 (한국 표준시)'

date.setHours(7)
console.log(date.getHours()) // 7
console.log(date) // 'Wed Dec 21 2022 07:23:51 GMT+0900 (한국 표준시)'

.getMinutes()와 .setMinutes()
날짜 인스턴스의 '분'을 반환하거나 지정합니다.

const date = new Date()

console.log(date.getMinutes()) // 47
console.log(date) // 'Wed Sep 28 2022 15:47:33 GMT+0900 (한국 표준시)'

date.setMinutes(2)
console.log(date.getMinutes()) // 2
console.log(date) // 'Wed Sep 28 2022 15:02:33 GMT+0900 (한국 표준시)'

.getSeconds()와 .setSeconds()
날짜 인스턴스의 '초'를 반환하거나 지정합니다.

const date = new Date()

console.log(date.getSeconds()) // 13
console.log(date) // 'Wed Sep 28 2022 15:50:13 GMT+0900 (한국 표준시)'

date.setSeconds(57)
console.log(date.getSeconds()) // 57
console.log(date) // 'Wed Sep 28 2022 15:50:57 GMT+0900 (한국 표준시)'

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

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()
유닉스 타임(UNIX Time)으로부터 날짜 인스턴스의 경과한 시간을 '밀리초(ms)'로 반환하거나 지정합니다.
유닉스 타임이란 1970.01.01 00:00:00 시간을 의미합니다.

const date = new Date()

console.log(date.getTime()) // 1664343325817
console.log(date) // 'Wed Sep 28 2022 15:58:05 GMT+0900 (한국 표준시)'

date.setTime(1700000000000)
console.log(date.getTime()) // 1700000000000
console.log(date) // 'Wed Nov 15 2023 07:13:20 GMT+0900 (한국 표준시)'
Date.prototype.isAfter = function (date) {
  const a = this.getTime()
  const b = date.getTime()
  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

.toUTCString()
날짜 인스턴스의 협정 세계시(UTC)를 반환합니다.
협정 세계시(UTC) 혹은 그리니치 평균시(GMT)는 영국 런던 기점의 기준시입니다.
한국은 UTC 기준보다 9시간 빠릅니다.

console.log(new Date())
// Tue Oct 25 2022 16:29:54 GMT+0900 (한국 표준시)

console.log(new Date().toUTCString())
// Tue, 25 Oct 2022 07:29:54 GMT

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

console.log(new Date())
// Tue Oct 25 2022 16:29:54 GMT+0900 (한국 표준시)

console.log(new Date().toISOString())
// 2022-10-25T07:29:54.000Z
Date.now()
유닉스 타임(UNIX Time)으로부터 메소드가 호출될 때의 경과한 시간을 '밀리초(ms)'로 반환합니다.

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

setTimeout(() => {
  console.log(Date.now()) // 1664349598861
  console.log(time) // 1664349597861
}, 1000)
// 현재 시간을 기준, 서로 같음!
new Date().getTime()
Date.now()

// getTime 메소드는 특정 날짜(시간)의 경과 시간을 확인 가능!
new Date('Sat Jan 01 2022 00:00:00 GMT+0900 (한국 표준시)').getTime()
Date.now()
Array

.length
배열의 길이(숫자)를 반환합니다.

const arr = ['A', 'B', 'C']

console.log(arr.length) // 3
.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 arr1 = ['A', 'B', 'C']
const arr2 = ['D', 'E', 'F']
const arr3 = arr1.concat(arr2)
// const arr3 = [...arr1, ...arr2]

console.log(arr1) // ['A', 'B', 'C']
console.log(arr2) // ['D', 'E', 'F']
console.log(arr3) // ['A', 'B', 'C', 'D', 'E', 'F']

.every()
대상 배열의 모든 요소가 콜백 테스트를 통과(참(Truthy)을 반환)하는지 확인합니다.
최초로 테스트가 실패하면, 이후 콜백은 실행되지 않고 false를 반환합니다.

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

console.log(isValid) // true
const arr = [1, 2, 3, 4]
const isValid = arr.every(item => {
  console.log(item)
  return item < 3
})

// 1
// 2
console.log(isValid) // false

.filter()
대상 배열에서 콜백 테스트를 통과하는 모든 요소로 새로운 배열을 만들어 반환합니다.
만약 모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환합니다.

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

console.log(filteredNumbers) // [1, 20, 7, 9, 0]
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]
const adults = users.filter(user => user.age >= 19)
console.log(adults) // [ Neo객체, Amy객체 ]

.find()
대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환합니다.
최초로 테스트가 통과하면, 이후 콜백은 실행되지 않습니다.
모든 테스트가 실패하면, undefined를 반환합니다.

const arr = [5, 8, 130, 12, 44]
const foundItem = arr.find(item => item > 10)

console.log(foundItem) // 130
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]
const foundUser = users.find(user => user.name === 'Amy')

console.log(foundUser) // { name: 'Amy', age: 22 }

.findIndex()
대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환합니다.
최초로 테스트가 통과하면, 이후 콜백은 실행되지 않습니다.
모든 테스트가 실패하면, -1을 반환합니다.

const arr = [5, 8, 130, 12, 44]
//           0  1  2    3   4

const index = arr.findIndex(item => item > 10)

console.log(index) // 2

.flat()
대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어붙인 새로운 배열을 반환합니다.
깊이의 기본값은 1입니다.

const arr = [1, 2, [3, 4]]

console.log(arr.flat()) // [1, 2, 3, 4]
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]
const arr = [1, 2, [3, 4, [5, 6, [7, 8]]]]

console.log(arr.flat()) // [1, 2, 3, 4, [5, 6, [7, 8]]]
console.log(arr.flat(2)) // [1, 2, 3, 4, 5, 6, [7, 8]]
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8]

.forEach()
대상 배열의 길이만큼 주어진 콜백을 실행합니다.

const arr = ['A', 'B', 'C']

arr.forEach(item => console.log(item))

for (let i = 0; i < arr.length; i += 1) {
  console.log(arr[i])
}

// 'A'
// 'B'
// 'C'

.forEach()는 중간에 반복을 멈출 수 없습니다.
반복을 멈출 수 있어야 한다면, for 반복문을 사용해야 합니다.

const arr = ['A', 'B', 'C']

for (let i = 0; i < arr.length; i += 1) {
  if (i > 1) {
    break
  }
  console.log(arr[i])
}
// 'A'
// 'B'

.includes()
대상 배열이 특정 요소를 포함하고 있는지 확인합니다.

const arr = [1, 2, 3]

console.log(arr.includes(2)) // true
const fruits = ['Apple', 'Banana', 'Cherry']

console.log(fruits.includes('Apple')) // true
console.log(fruits.includes('cherry')) // false
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]
console.log(users.includes({ name: 'Neo', age: 85 })) // false

const neo = users[0]
console.log(users.includes(neo)) // true

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

const fruits = ['Apple', 'Banana', 'Cherry']

console.log(fruits.join()) // 'Apple,Banana,Cherry'
console.log(fruits.join(', ')) // 'Apple, Banana, Cherry'
console.log(fruits.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]
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]
const newUsers = users.map(user => ({
  ...user,
  isValid: true,
  email: null
}))
const userNames = users.map(user => user.name)

console.log(newUsers) // [{ name: 'Neo', age: 85, isValid: true, email: null }, ...]
console.log(userNames) // ['Neo', 'Amy', 'Lewis']

.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']

fruits.push('Mango', 'Strawberry')
console.log(fruits)
// ['Apple', 'Banana', 'Cherry', 'Orange', 'Mango', 'Strawberry']

.reduce()
대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환합니다.
각 콜백의 반환 값은 다음 콜백으로 전달됩니다.

const numbers = [1, 2, 3]

// const result = numbers.reduce((acc, cur) => acc + cur, 0)
const result = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 0)

console.log(result) // 6
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]

// 총 나이 계산
const totalAge = users.reduce((acc, cur) => acc + cur.age, 0)
console.log(totalAge) // 118
console.log(`평균 나이: ${(totalAge / users.length).toFixed(1)}세`) // '평균 나이: 39.3세'

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

.reverse()
대상 배열의 순서를 반전합니다.
대상 배열 원본이 변경됩니다.

const arr = ['A', 'B', 'C']
const reversed = arr.reverse()

console.log(reversed) // ['C', 'B', 'A']
console.log(arr) // ['C', 'B', 'A']
const str = 'Hello~'
const reversedStr = str.split('').reverse().join('')

console.log(reversedStr) // '~olleH'
console.log(str) // 'Hello~'

.shift()
대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
대상 배열 원본이 변경됩니다.

const arr = ['A', 'B', 'C']

console.log(arr.shift()) // 'A'
console.log(arr) // ['B', 'C']

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

const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']

console.log(arr.slice(0, 3)) // ['A', 'B', 'C']
console.log(arr.slice(4, -1)) // ['E', 'F']
console.log(arr.slice(4)) // ['E', 'F', 'G'] 
console.log(arr) // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

.some()
대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인합니다.

const arr = [1, 2, 3, 4]
const isValid = arr.some(item => item > 3)

console.log(isValid) // true

.sort()
대상 배열을 콜백의 반환 값에 따라 정렬합니다.
콜백을 제공하지 않으면, 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬합니다.
대상 배열 원본이 변경됩니다.

콜백의 반환 값:

음수: a를 낮은 순서로 정렬
0: 순서 변경 없음
양수: b를 낮은 순서로 정렬

const numbers = [4, 17, 2, 103, 3, 1, 0]

numbers.sort()
console.log(numbers) // [0, 1, 103, 17, 2, 3, 4]

numbers.sort((a, b) => a - b)
console.log(numbers) // [0, 1, 2, 3, 4, 17, 103]

numbers.sort((a, b) => b - a)
console.log(numbers) // [103, 17, 4, 3, 2, 1, 0]
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]

users.sort((a, b) => a.age - b.age)
console.log(users) // [ Lewis객체, Amy객체, Neo객체 ]

// users.sort((a, b) => b.age - a.age)
// console.log(users) // [ Neo객체, Amy객체, Lewis객체 ]

.splice()
대상 배열에 요소를 추가하거나 삭제하거나 교체합니다.
대상 배열 원본이 변경됩니다.

요소 추가

const arr = ['A', 'B', 'C']
arr.splice(2, 0, 'X')

console.log(arr) // ['A', 'B', 'X', 'C']

요소 삭제

const arr = ['A', 'B', 'C']
arr.splice(1, 1)

console.log(arr) // ['A', 'C']

요소 교체

const arr = ['A', 'B', 'C']
arr.splice(1, 1, 'X')

console.log(arr) // ['A', 'X', 'C']

요소 추가 및 삭제

const arr = ['A', 'B', 'C']
arr.splice(0, 0, 'X', 'Y', 'Z')

console.log(arr) // ['X', 'Y', 'Z', 'A', 'B', '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)) // Error!
Array.from(arraylike).forEach(item => console.log(item))
// 'A'
// 'B'
// 'C'

Array.isArray()
배열 데이터인지 확인합니다.

const array = ['A', 'B', 'C']
const arraylike = {
  0: 'A',
  1: 'B',
  2: 'C',
  length: 3
}

console.log(Array.isArray(array)) // true
console.log(Array.isArray(arraylike)) // false