배열 메서드 (1)

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

코어 자바스크립트의 배열 메서드들에 대해서 간단하게 살펴보았습니다.
정리 양이 다른 장들에 비해 제법 있는 편이라 (1), (2)편으로 나눠 작성하였습니다.

---

본문

배열 메서드 1 (Array Methods 1)

배열의 기본 메서드 - push(), pop(), unshift(), shift()

push()나 pop()를 통해 배열 맨 뒤에 요소를 삽입하거나 삭제할 수 있습니다.

let list = [1,2,3,4,5]

list.pop()
list.push(6)

console.log(list) // 1,2,3,4,6

 

unshift()나 shift()를 통해 배열 앞에 요소를 삽입하거나 삭제할 수 있습니다.

let list = [1,2,3,4,5]

list.shift()
list.unshift(0)

console.log(list) // 0,2,3,4,5

 

배열 제거 메서드 - splice()

splice()를 통해 첫 번째 인수부터 두 번째 인수만큼의 값을 삭제할 수 있습니다.

let list = [1,2,3,4,5]

list.splice(2,2) // 2번째 인덱스부터 2개 삭제

console.log(list) // 1,2,5

splice()의 세 번째 인수 부터는 지운 자리에 값을 추가하는 용도로 사용합니다.

let list = [1,2,3,4,5]

list.splice(2,2,100,200,300)

console.log(list) // 1,2,100,200,300,5

 

splice()의 두 번째 인수에 0이나 음수를 전달하면 지우지 않은 채로 요소들이 추가됩니다.

let list = [1,2,3,4,5]

list.splice(2,0,100,200,300)

console.log(list) // 1,2,3,4,100,200,300,5

 

splice()는 제거된 요소들을 반환합니다.

let list = [1,2,3,4,5]

let newList = list.splice(2,2,100,200,300)

console.log(list) // 1,2,100,200,300,5
console.log(newList) // 3,4

 

배열 반환 메서드 - slice()

slice()는 첫 번째 인수부터 두 번째 인수 직전까지 값을 반환합니다.

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3)) // [2,3]

 

slice()는 splice()와 다르게 값을 제거하지 않고, 반환만 합니다.

let arr = [1,2,3,4,5]
console.log(arr.slice(1,3)) // [2,3]
console.log(arr) // [1,2,3,4,5]

 

만약 slice()에서 인수를 사용하지 않는 경우 배열 전체가 복사됩니다.

let arr = [1,2,3,4,5]
let arr2 = arr.slice()
console.log(arr2) // [1,2,3,4,5]

 

배열 병합 메서드 - concat()

concat()은 배열과 배열을 병합하는 경우에 사용합니다. 인수로 들어온 수를 하나의 배열로 병합합니다.

let arr = [1,2,3,4,5]
console.log(arr.concat([6,7],8,9)) // [1,2,3,4,5,6,7,8,9]

 

배열 반복문 - forEach()

forEach()은 리스트에 들어있는 요소별로 순회하는 경우 유용하게 사용됩니다.

• 1번째 인수 : users 리스트를 순회하는 개별적 요소
• 2번째 인수 : 1번째 인수에 대한 index 값

let users = ['mike', 'tom'];
users.forEach((name, index) => {
  console.log(`Hi, No${index+1}. ${name}`)
});

 

요소의 인덱스 찾기 - indexOf() / lastIndexOf()

indexOf()는 찾고 있는 요소의 인덱스를 반환합니다.

• 1번째 인수 : 찾는 요소
• 2번째 인수 : 어디서부터 찾을 건지 정하는 값

let nums = [1,2,3,4,5,6,7,3]

console.log(nums.indexOf(3)) // 2
console.log(nums.indexOf(3, 3)) // 7, 3을 3번째 인덱스부터 찾기 시작합니다.

 

lastIndexOf()는 배열의 맨 마지막부터 요소를 찾습니다.

• 1번째 요소 : 찾는 요소

let nums = [1,2,3,4,5,6,7,3]

console.log(nums.lastIndexOf(3)) // 배열의 뒷 부분을 기점으로 요소 3을 찾습니다.

 

요소의 존재 확인 - includes()

includes()는 요소가 배열 안에 포함되어 있는 지 존재 여부를 확인합니다.

• 1번째 요소 : 찾는 요소

let nums = [1,2,3,4,5,6,7,3]

console.log(nums.includes(3)) // true
console.log(nums.includes(8)) // true

 

객체 배열 요소 반환 - find() / findIndex()

find()는 함수의 결과가 true가 될 때까지 배열을 순회하며 요소를 전달하여 함수를 실행합니다.

true가 되는 경우 해당 요소를 반환합니다. 만약에 포함되어 있지 않은 경우 undefined를 반환합니다.

• 1번째 요소 : 찾는 요소

let arr = [1,2,3,4,5];

const result = arr.find((item)=>{
  return item % 2 === 0;
});

console.log(result)

 

find()는 객체 배열에서 더 유용하게 사용됩니다.

let userList = [
  { name: "mike", age: 10 },
  { name: "jane", age: 21 },
  { name: "tom", age: 15 },
];

const result = userList.find((user)=>{
  if(user.age > 19) { // 19 살이 넘는 경우 true를 반환합니다.
    return true;
  }
  return false;
}); // true를 만나는 순간 발견된 요소를 반환합니다.

console.log(result); // jane 객체 정보가 출력됩니다.

 

find()와 findIndex()는 요소를 반환하냐 요소의 인덱스를 반환하냐 정도의 차이만을 가지고 있습니다.

let userList = [
  { name: "mike", age: 10 },
  { name: "jane", age: 21 },
  { name: "tom", age: 15 },
];

const result = userList.findIndex((user)=>{
  if(user.age > 19) {
    return true;
  }
  return false;
});

console.log(result); // jane의 인덱스인 1이 출력됩니다.

 

조건 만족 요소 반환 - filter()

filter()는 조건에 만족하는 모든 요소를 배열로 반환하는 함수입니다.

find() 함수의 경우 모든 요소를 순회하지 않고, true를 만날 때까지만 순회합니다.

find()와 달리 조건을 만족하는 요소가 없더라도 undefined가 아니라 빈 배열을 반환합니다.

const arr = [1,2,3,4,5];
const result = arr.filter((item)=>{
  return item % 2 === 0;
});

console.log(result); // [2,4]

 

배열 역순 반환 - reverse()

reverse()는 배열의 요소를 반대로 뒤집어서 반환하는 함수입니다.

const arr = [1,2,3,4,5];
console.log(arr.reverse());

 

요소별 함수 실행 및 배열 반환 - map()

map()는 매개 변수를 전달받아 함수 로직을 수행하고 새로운 배열을 반환하는 함수입니다.

let userList = [
  {name:"mike", age: 21},
  {name:"jane", age: 11},
  {name:"tom", age: 31},
];

let newUserList = userList.map((user,index)=> {
  return Object.assign({}, user, {
    isAdult: user.age > 19,
  });
});

console.log(newUserList); // 객체(요소)별로 isAdult 속성이 추가됩니다.

 

모든 요소 문장 병합 - join()

join()을 이용하면 요소를 하나의 문장으로 병합할 수 있습니다.

• 첫 번째 요소 : 구분 기준

let arr = ["bao","bab"];
let resultArr = arr.join(" ");
console.log(resultArr) // "bao bab"

 

split()을 이용하면 요소를 여러 개의 요소로 나눌 수 있습니다.

• 첫 번째 요소 : 배열로 나누는 기준

let arr = "bao bab"
let resultArr = arr.split(" ");
console.log(resultArr) // ["bao", "bab"]

 

배열 판별 - Array.isArray()

typeof를 통해 타입 조회 시 객체와 배열은 모두 Object로 출력됩니다.

let arr = [1,2,3,4,5]
let user = {
  name: "user",
  age: 21
};

console.log(typeof(user))
console.log(typeof(arr))

 

이러한 특성 때문에 객체와 배열 중 어떤 것이 진짜 배열인지 확인하기 어렵습니다.

이때, Array.isArray()를 이용하여 배열인지 객체인지 알 수 있습니다.

let arr = [1,2,3,4,5]
let user = {
  name: "user",
  age: 21
};

console.log(Array.isArray(arr)) // true
console.log(Array.isArray(user)) // false

---

Reference

• 자바스크립트 중급 강좌 #7 - 배열 메소드1(Array methods)