[JavaScript] 표준내장객체 - Array

표준내장객체 (standard built-in object) Array에 관한 것을 정리했다. 이는 일부일 뿐이니 자세한 내용은 mdn 문서를 참조하자.

 

// length, 배열의 길이를 반환

const arr = [1, 2, 3];
console.log(arr.length); // 3

// at(), 대상 배열을 인덱싱

console.log(arr[0]); // 1
console.log(arr.at(0)); // 1

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

// concat(), 대상 배열과 주어진 배열을 병합해 새로운 배열을 반환

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

console.log(arr1); // ['a', 'b', 'c']
console.log(arr2); // ['d', 'e', 'f']
console.log(arr3); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr4); // ['a', 'b', 'c', 'd', 'e', 'f']

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

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

console.log(isValid); // true

// filter(), 주어진 콜백 테스트를 통과하는 모든 요소를 새로운 배열로 반환, 모든 요소가 테스트를 통과하지 못하면 빈 배열을 반환

const numbers = [1, 20, 7, 9, 194, 0, 58];
const filteredNumber = numbers.filter(number => number < 30);
console.log(filteredNumber); // [1, 20, 7, 9, 0]

const users = [
  {name:'Kim', age : 26},
  {name: 'son', age : 30},
  {name: 'lee', age : 12}
]
const adults = users.filter(user => user.age >= 19);
console.log(adults); // [{name:'Kim', age : 26}, {name: 'son', age : 30}]

// find(), 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소를 반환, 없으면 undefined

const foundItem = numbers.find(item => item > 10);
console.log(foundItem); // 20

// findIndex(), 대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스 반환, 없으면 -1

const index = numbers.findIndex(item => item > 2000);
console.log(index); // 4

// flat(), 대상 배열의 모든 하위 배열을 지정한 깊이까지 이어붙인 새로운 배열을 생성. 깊이의 기본값은 1

const dmddo = [1,2,[3,4]];
console.log(dmddo.flat()); // [1,2,3,4]

// forEach(), 대상 배열의 길이만큼 주어진 콜백을 실행

arr.forEach(item => console.log(item)); // 1, 2, 3 (반복문) , 중도 중지 불가

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
} // 1, 2, 3 (반복문), break를 이용해서 중간에 중지시킬 수 있음

// includes(), 대상 배열이 특정 요소를 포함하고 있는지 확인

console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

//  const users = [
//   {name:'Kim', age : 26},
//   {name: 'son', age : 30},
//   {name: 'lee', age : 12}
// ]

console.log(users.includes({name:'Kim', age : 26})); // false, 생긴 건 같지만 참조형이기 때문에 두 개의 주소값이 다름. 따라서 거짓

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

// join(), 대상 배열의 모든 요소를 구분자로 연결한 문자를 반환

const fruits = ['Apple', 'Orange', 'Banana'];

console.log(fruits.join(',')); // Apple,Orange,Banana
console.log(fruits.join(', ')); // Apple, Orange, Banana
console.log(fruits.join('/')); // // Apple/Orange/Banana

// map(), 대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환
const number = [1,2,3,4];
const newNumber = number.map(item => item * 2);

console.log(newNumber); // [2,4,6,8];

// map은 반환 값을 모아 새로운 배열을 반환, filter는 조건에 맞는 반환값을 모아 새로운 배열을 반환

const newUsers = users.map(user => ({
  ...user,
  isValid: true,
  email: null
}));
console.log(newUsers);
// {name: 'Kim', age: 26, isValid: true, email: null}
// 1
// :
// {name: 'son', age: 30, isValid: true, email: null}
// 2
// :
// {name: 'lee', age: 12, isValid: true, email: null}

// pop(), 대상 배열에서 마지막 요소를 제거하고 그 요소를 반환, 대상 배열 원본이 변경
console.log(fruits.pop()); // Banana
console.log(fruits); // ['Apple', 'Orange'];

// push(), 대상 배열의 마지막에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환, 원본이 변경.

console.log(fruits.push('Banana')); // 3
console.log(fruits); // ['Apple', 'Orange', 'Banana'];

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

const sum = numbers.reduce((acc, cur) => {
  return acc + cur;
},0); // 0은 초기값

console.log(sum); // 289

// reverse(), 대상 배열의 순서를 반전. 대상 배열 원본이 변경

console.log(arr.reverse()); // [3,2,1]
console.log(arr); // [3,2,1]

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

console.log(arr.shift()); // 3
console.log(arr); // [2,1]

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

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

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

const isValid2 = arr.some(item => item > 3); // arr = [3, 2, 1]
console.log(isValid2); // false

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

numbers.sort(); // numbers = [1, 20, 7, 9, 194, 0, 58];
console.log(numbers); //  [0, 1, 194, 20, 58, 7, 9], 문자열로 바뀌기 때문에 실질적인 숫자의 크기와 상관없이 정렬됨
console.log(numbers.sort((a,b) => a-b)); // [0, 1, 7, 9, 20, 58, 194]
console.log(numbers.sort((a,b) => b-a)); // [194, 58, 20, 9, 7, 1, 0]

// splice(), 대상 배열에 요소를 추가하거나 삭제하거나 교체, 대상 배열 원본이 변경
// splice(인덱스, 삭제할 개수, 추가할 요소)

numbers.splice(2,0,5); // 추가
console.log(numbers); // [194, 58, 5, 20, 9, 7, 1, 0]

numbers.splice(1,1); // 1개 삭제
console.log(numbers); //  [194, 5, 20, 9, 7, 1, 0]

// unshift(), 새로운 요소를 대상 배열의 맨 앞에 추가하고 새로운 배열의 길이를 반환, 대상 배열 원본이 변경

// arr = [2,1]

console.log(numbers.unshift(...arr));// 9
console.log(numbers); // [2, 1, 194, 5, 20, 9, 7, 1, 0]

// Array.from(), 유사배열을 실제 배열로 반환합니다.

const arrayLike = {
  0:'A',
  1:'B',
  2:'C',
  length:3
}

console.log(arrayLike.constructor === Array); // false
console.log(arrayLike.constructor === Object); // true

Array.from(arrayLike).forEach(item => console.log(item)); // A B C

// Array.isArray(), 배열데이터인지 확인

const array = ['A', 'B', 'C'];
console.log(Array.isArray(array)); // true
console.log(Array.isArray(arrayLike)); // false

 

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

Array - JavaScript | MDN