[JS] 배열(array) 메서드

Javascript

[JS] 배열(array) 메서드

나디아 Nadia 2024. 6. 17. 10:27

배열 검사
배열로 변환
배열 복사
배열 요소 추가
배열 요소 제거
배열 탐색
배열 변형
배열 요소 순회

📌 배열 검사

Array.isArray()

: 값이 배열(array)인지 확인

배열과 arguments(유사 배열 객체)를 구분할 수 있다.

function example() {
  console.log(Array.isArray(arguments)); // false
}
example(1, 2, 3);

true를 반환하는 값들

Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array("a", "b", "c", "d"));
Array.isArray(new Array(3));
Array.isArray(Array.prototype);

예제

function processData(data) {
  if (Array.isArray(data)) {
    data.forEach(item => {
      console.log(item);
    });
    
  } else {
    console.log('The provided data is not an array.');
  }
}

processData([1, 2, 3]); // 배열이므로 출력됨
processData({ a: 1, b: 2 }); // 배열이 아니므로 'The provided data is not an array.' 출력됨

📌 배열로 변환

Array.from()

: arguments(유사 배열 객체), 반복 가능한(iterable) 객체를 배열로 변환

순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성

문자열 ➡ 배열 변환

const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

유사 배열 객체 ➡ 배열 변환

function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]

Set ➡ 배열 변환

const set = new Set([1, 2, 3, 4]);
const arr = Array.from(set);
console.log(arr); // [1, 2, 3, 4]

📌 배열 복사

구조 분해 할당

let copiedArray1 = [...friends];

slice() 사용

let copiedArray2 = friends.slice();

Array.from(대상)

: 유사 배열 ➡ 배열, 배열 ➡ 배열로 만들어준다.

let copiedArray3 = Array.from(friends);

📌 배열 요소 추가

push()

: 끝 부분에 요소 추가

let arr = ['a', 'b', 'c'];

arr.push('d'); // 배열의 끝에 요소를 추가
// arr = ['a', 'b', 'c', 'd']

unshift()

: 시작 부분에 요소 추가

let arr = ['a', 'b', 'c'];

arr.unshift('d'); // 배열의 앞쪽에 요소를 추가
// arr = ['d', 'a', 'b', 'c']

splice(위치, 0, 추가할 값)

: 원하는 위치에 하나 이상의 요소를 추가

let arr = ['a', 'b', 'c'];

arr.splice(2, 0, 'd'); // index 2 ('c')의 위치에 요소를 추가
// arr = ['a', 'b', 'd', 'c']

arr.splice(4, 0, 'e', 'f'); // index 4의 위치에 2개의 요소를 추가
// arr = ['a', 'b', 'd', 'c', 'e', 'f']

toSpliced()

splice() 메서드와 유사
원본 배열을 변경하지 않고 새로운 배열을 반환

const toSpliced = people.toSpliced(0, 2)

concat()

: 두 개의 서로 다른 배열을 이어 붙여서 새로운 배열로 반환

let arr6 = [1, 2];
let arr7 = [3, 4];

let concatedArr = arr6.concat(arr7);
console.log(concatedArr);
// [1, 2, 3, 4]

📌 배열 요소 제거

pop()

: 마지막 요소 제거

let arr = ['a', 'b', 'c', 'e', 'f'];

arr.pop(); // 배열의 마지막 요소를 제거
// arr = ['a', 'b', 'c', 'e']

let popped = arr.pop(); // 제거한 요소를 반환 받을 수 있음
// popped = 'e'

shift()

: 처음 요소 제거

let arr = ['a', 'b', 'c', 'e', 'f'];

arr.shift(); // 배열의 첫번째 요소를 제거
// arr = ['b', 'c', 'e', 'f']

let shifted = arr.shift(); // 제거한 요소를 반환 받을 수 있음
// shifted = 'b'

splice(제거 위치, 제거 개수[, 추가할 값] )

: 원하는 위치에서 하나 이상의 요소를 제거 (+ 해당 위치에 새로운 요소를 추가)

let arr = ['a', 'b', 'c', 'e', 'f'];

arr.splice(2, 1); // index 2부터 1개의 요소('c')를 제거
// arr = ['a', 'b', 'e', 'f']

arr.splice(1, 2); // index 1부터 2개의 요소('b', 'e')를 제거
// arr = ['a', 'f']

removed = arr.splice(1, 1); // 제거한 요소를 반환 받을 수 있음
// removed = 'f'

📌 배열 탐색

includes()

: 배열에 특정 요소가 있는지 확인

boolean형

let arr2 = [1, 2, 3];

let isInclude = arr2.includes(2);
// true
let isInclude = arr2.includes(10);
// false

indexOf()

: 특정 요소의 인덱스(위치)를 반환

객체 타입의 값이 저장된 배열에서는 정확한 위치를 찾을 수 없음
👉 indexOf는 얕은 복사이기 때문
👉 그래서 findIndex 메서드 사용
찾으려는 값이 여러 개 존재할 경우, 제일 처음 값의 인덱스 반환
값이 존재하지 않다면, -1 반환

let arr3 = [1, 2, 3];
let index = arr3.indexOf(2); 
// 1

findIndex()

: 콜백 함수를 만족하는 특정 요소의 인덱스(위치) 반환

콜백 함수는 true인 요소의 인덱스를 반환
깊은 복사
👉 복잡한 객체 타입의 값을 찾을 때 유용!

let arr4 = [1, 2, 3];

// 배열 arr4를 순회하면서 가장 처음 if문을 만족시키는 값의 인덱스를 반환
const findedIndex = arr4.findIndex((item) => {
   if (item === 2) {
return true;
   }
});

// 축약 버전
const findedIndex = arr4.findIndex((item) => item === 2);

console.log(findedIndex);  // 1

find()

: 콜백함수를 만족하는 요소를 반환

let arr5 = [
  { name: "이정환" },
  { name: "홍길동" },
];

const finded = arr5.find(
  (item) => item.name === "이정환"
);

console.log(finded);
// name: "이정환"

📌 배열 변형

reduce()

: 콜백 함수의 실행 값을 누적하여 하나의 결과값을 반환

배열.reduce(function(acc, cur) {
...
}, 초기값)

인자값

누적값 (acc)

현재 값 (cur)

현재 인덱스 (idx)

값을 꼭 반환해줘야 한다.
- 반환 안하면 undefined
숫자/문자/배열/객체 등을 반환할 수 있다⭕
누적 변수(total 등)를 따로 선언하지 않아도 된다.
초기값을 설정하면 acc로 들어간다.
- 초기값을 설정하지 않으면 배열의 첫 번째 아이템이 acc로 들어간다.
acc + cur의 값이 다시 acc로 들어간다. (누적)

[1000, 3000, 2500].reduce(function(acc, cur) {
   return acc + cur
}, 0)

예시

let calculateTotal = function () {

  const result = arr.reduce(function(arr, cur){
    return arr + cur
  }, 0);

  return result;
};

const result = calculateTotal(1000, 5000, 2500, 4000, 2300);

예시 2

const people = [
  {
    nickName:'tiger',
    age:40
  },
  {
    nickName:'beom',
    age:45
  },
  {
    nickName: 'seon',
    age:20
  }
]


const template = people.reduce(function(htmlCode,cur){
  return htmlCode + `<div>${cur.nickName} : ${cur.age}</div>`
},'')

console.log(template);

// 출력 결과
<div>tiger : 40</div><div>beom : 45</div><div>seon : 20</div>

map()

: 배열의 모든 요소를 순회하면서 각각 콜백함수를 실행하고, 그 결과값들을 모아서 새로운 배열로 반환

배열.map(콜백 함수(item, index) {
...
})

현재 요소, 인덱스, 원본 배열을 인자로 전달 받는다.
값을 반환해야 한다.
오직 배열로만 반환한다.
원본 보존 (원본 배열을 훼손하지 않는다.❌)
forEach와 비슷함

const arr = [10, 100, 1000];

const mapValue = arr.map(function (item, index) {
  return item * 2
})


console.log(mapValue);

// 출력 결과
(3) [20, 200, 2000]

예시

// - html 만들기
const cardTag = people.map(({ name, age, job, imgSrc, imgAlt }) => {

  let template = /* html */`
    <li class="userCard">
      <div class="imageField">
        <img src="${imgSrc}" alt="${imgAlt}" />
      </div>
      <ul class="contents">
        <li> <span class="strong">이름</span> : ${name}</li>
        <li> <span class="strong">나이</span> : ${age}</li>
        <li> <span class="strong">직업</span> : ${job}</li>
      </ul>
    </li>
  `
  return template;
})

const ul = document.querySelector('ul');

cardTag.forEach(tag => ul.insertAdjacentHTML('beforeend', tag))
// 넣을 태그.insertAdjacentHTML('위치', 넣을 요소)

filter()

: 조건에 부합하는 모든 대상을 배열로 반환

현재 요소, 인덱스, 원본 배열을 인자로 전달 받는다.
find()와 다른 점
1. 복수 대상을 반환한다.
2. 배열을 반환한다.

const people = [
  {
    id: 0,
    name: '안녕1',
    age: 25,
    job: '목사',
    imgSrc: 'https://randomuser.me/api/portraits/thumb/men/50.jpg',
    imgAlt: '대체 텍스트입니다.'
  },
  {
    id: 1,
    name: '안녕2',
    age: 51,
    job: '사장님',
    imgSrc: 'https://randomuser.me/api/portraits/thumb/men/65.jpg',
    imgAlt: '대체 텍스트입니다.'
  }
]


const filter = people.filter((itme) => {
  return itme.age > 20
})

console.log('filter', ...filter) // 구조분해(...)로 각자 배열로 반환

split()

: 문자열에서 ()를 기준으로 쪼갠 후 배열로 반환

const frontEndDev = 'HTML CSS SVG JavaScript jQuery React Redux'.split(' ');

let i = 0;
let l = frontEndDev.length;

while(i < l) {
  console.log(frontEndDev[i]);
  i += 1;
}

/*
HTML
CSS
SVG
JavaScript
jQuery
React
Redux
*/

sort()

: (원본) 배열을 사전 순으로 정렬

let arr = [10, 3, 5];

// 오름차순 정렬
arr.sort((a, b) => {
  if (a > b) { // a가 b 앞에 와라
    return -1;
    
  } else if (a < b) { // b가 a 앞에 와라 
    return 1;
    
  } else { // 두 값의 자리를 바꾸지 마라 => 값이 동일
    return 0;
  }
});

toSorted()

: 배열을 정렬하여 새로운 배열(복사본)로 반환

sort() 메서드와 유사
원본 배열을 변경하지 않고 새로운 배열을 반환

let arr5 = ["c", "a", "b"];

const sorted = arr5.toSorted();
// ["a", "b", "c"]

join()

: 배열의 모든 요소를 하나의 문자열로 합쳐서 반환

split(): 문자 ➡ 배열
join(): 배열 ➡ 문자

const str = '유 정 현 재';

const arrayToString = stringToArray.join('-'); // '-'가 문자 구분자
console.log('arrayToString', arrayToString);
// 유-정-현-재

reverse()

: 배열의 순서를 뒤집어서 반환

const array = [1, 2, 3, 4, 5];
const copyArray = [...array].reverse();

console.log(copyArray); // [5, 4, 3, 2, 1]
console.log(array);     // [1, 2, 3, 4, 5] - 원본 배열은 변경되지 않음

toReversed()

reverse() 메서드와 유사
원본 배열을 변경하지 않고 새로운 배열을 반환

const toReversed = people.toReversed();

📌 배열 요소 순회

for문

인덱스 저장 O

let friends = '한,재,정,유,윤,민,재,신'.split(',');

for (let i = 0; i < friends.length; i++) {
  console.log(friends[i]);
}
/*
한
재
정
유
윤
민
재
신
*/

for...of문

: iterator한 요소들을 순환하는데 사용

iterator 요소로 만들어서 순환 👉 [Symbol.iterator]

인덱스 저장 X

let friends = '한,재,정,유,윤,민,재,신'.split(',');

const iter = friends[Symbol.iterator]() // iterator한 배열 객체가 생성됨

for (const name of iter) {
  console.log(name);
}
/*
한
재
정
유
윤
민
재
신
*/

forEach문

const people = [
  {
    id: 0,
    name: '안녕1',
    age: 25,
    job: '목사'
  },
  {
    id: 1,
    name: '안녕2',
    age: 51,
    job: '사장님'
  }
]

people.forEach(user => {
  console.log(user.job); 
});
/*
목사
사장님
*/

배열인지 체크하는 함수

function isArray(data) {
  return Object.prototype.toString.call([]).slice(8, -1).toLowerCase() === 'array'
  /* 1. Object.prototype.toString.call([])을 하면 [object Array] 문자열이 나옴
     2. .slice(8, -1)로 'Array' 부분만 잘라서 검사함 */
}

null인지 확인하는 함수

function isNull(data) {
  return Object.prototype.toString.call(null).slice(8, -1).toLowerCase() === 'null'
}

자료형 체크하는 함수를 따로 빼서 만들기

function typeOf(data) {
  return Object.prototype.toString.call(null).slice(8, -1).toLowerCase()
}


// -------------arrow function-------------
const typeOf2 = (data) => Object.prototype.toString.call(null).slice(8, -1).toLowerCase()

const isArray2 = (data) => typeOf(data) === 'array'
const isNull2 = (data) => typeOf(data) === 'null'
const isNumber2 = (data) => typeOf(data) === 'number'

배열

ko.javascript.info

배열과 메서드

ko.javascript.info

Array.from() - JavaScript | MDN

Array.from() 정적 메서드는 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성합니다.

developer.mozilla.org

Array.isArray() - JavaScript | MDN

Array.isArray() 정적 메서드는 전달된 값이 Array인지 판단합니다.

developer.mozilla.org

현재글[JS] 배열(array) 메서드

나디아 성장 일기

비전공자 개발 일기

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

나디아 성장 일기