[221031] JS : 표준내장객체 2

 

 

1. 배열

• length : 배열의 길이(숫자)를 반환
• at : 대상 배열을 인덱싱. 음수 값을 사용하면 뒤에서부터 인덱싱 마지막 아이템을 조회할 때는 arr[arr.length-1] 을 쓰는데 at 메서드를 사용하면 arr.at(-1) 로 간단하게 사용 가능
• concat : 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환. 두개의 배열 데이터를 병합하는 용도. arr1.concat(arr2) 전개 연산자를 사용해도 똑같음 → […arr1, …arr2]
• every : 대상 배열의 모든 요소가 콜백 테스트를 통과(참을 반환)하는지 확인. arr.every(item => item < 5) → 배열의 모든 아이템들이 해당하는 콜백 함수를 통과하는지 확인, 통과하지 못하면 false 반환
• filter : 대상 배열에서 콜백 테스트를 통과하는 모든 요소로 새로운 배열을 만들어 반환. 만약 모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환.

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를 반환.
• findIndex : 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환. 최초로 테스트가 통과하면, 이후 콜백은 실행 안됨. 모든 테스트가 실패하면, -1을 반환.
• flat : 대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어붙인 새로운 배열을 반환. 깊이의 기본값은 1.

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 : 대상 배열의 길이만큼 주어진 콜백을 실행. for 반복문과 동일하지만 foreach 가 더 깔끔. 하지만 forEach는 중간에 반복을 멈출 수 없음.반복을 멈출 수 있어야 한다면, for 반복문을 사용.
• includes : 대상 배열이 특정 요소를 포함하고 있는지 확인. 원시형 데이터를 찾는 용도로 사용함. 참조형 데이터는 복사를 해서 사용하거나 find 메소드를 사용.

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 : 대상 배열의 모든 요소를 구분자로 연결한 문자를 반환.
• map : 대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환.

const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]

const newUsers = users.map(user => ({
  ...user,
  isValid: true,
  email: null
}))

console.log(newUsers)

 

• pop : 대상 배열에서 마지막 요소를 제거하고 그 요소를 반환. 대상 배열 원본이 변경.
• shift : 대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환. 대상 배열 원본이 변경.
• push : 대상 배열의 마지막에 하나 이상의 요소를 추가, 배열의 새로운 길이를 반환. 대상 배열 원본이 변경.

const fruits = ['Apple', 'Banana', 'Cherry']
const newLength = fruits.push('Orange')

console.log(newLength) // 4
console.log(fruits) // ['Apple', 'Banana', 'Cherry', 'Orange']

 

• unshift : 새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환. 대상 배열 원본이 변경.
• reduce : 대상 배열의 길이만큼 주어진 콜백을 실행, 마지막에 호출되는 콜백의 반환 값을 반환. 각 콜백의 반환 값은 다음 콜백으로 전달. 반환값이 accumulator 로 전달된다는 말. 아이템의 개수만큼 실행.

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

→ 누적값 + 반복값 => 0+1 ~> 1+2 ~> 2+3 ~> 3+3 = 6

 

 

// 모든 이름 추출

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

→ 초기값이 배열로 되어있는 누적값에 name 이라는 데이터를 넣어서 누적값을 반환하고 문자열로 만들어줌

 

• reverse : 대상 배열의 순서를 반전. 대상 배열 원본이 변경.
• slice : 대상 배열의 일부를 추출해 새로운 배열을 반환. 두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출.
• some : 대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인. every 메서드는 모두 통과하는지 확인하는데 some 메서드는 하나라도 통과하는지 확인.
• 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]