[JavaScript] 배열 메소드 💡

😎 자바스크립트 중급 정리 #2

너무너무 자주 사용되고 유용한 배열 메소드들을 배웠다.🙀

7. 배열 메소드 1

7.1 arr.splice(n,m)

arr.splice(n,m) : 인덱스 n부터 m개의 요소를 삭제

• arr.splice(n,m,x) : 삭제하고 뒤에 x를 추가

str = [1,2,3,4,5];
a = str.splice(3,2,9,10); // 인덱스 3부터 2개의 요소를 삭제하고, 뒤에 9,10을 추가
console.log(str); //[1,2,3,9,10]
console.log(a); //[4,5]

삭제된 값은 배열로 반환되는 것을 확인하자.

7.2 arr.slice(n,m)

arr.slice(n,m) : n부터 m까지 반환

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

arr.slice(n,m)은 인덱스 n부터 m까지의 요소를 반환하는 메소드이다. 여기서 인덱스 m은 포함되지 않는다는 것을 확인하자.
코드에서 arr.slice()처럼 빈괄호면 배열이 그대로 복사되는 것을 확인할 수 있다.

7.3 arr.concat(arr2,arr3,...)

arr.concat(arr2,arr3,...) : 합쳐서 새배열을 반환

a = [1,2,3];
b = [4,5];
c = [6,7];
console.log(a.concat(b,c)) //[1,2,3,4,5,6,7]

배열 a에 배열b, 배열c를 합쳐진 새배열이 출력된 것을 확인할 수 있다.

7.4 arr.forEach((item, index, arr)=>{fn})

arr.forEach((item, index, arr)=>{fn}) : 배열을 순회가능, 함수를 인수로 받는다.

arr = [1,2,3,4,5];
arr.forEach((item)=>{
  console.log(item); 
}) // 1 2 3 4 5

arr안의 요소들을 item으로 받아서, 순서대로 한번씩 출력되는 것을 확인할 수 있다.

7.5 arr.indexof()

arr.indexof() : 해당 요소가 있으면 인덱스를 반환, 없으면 -1 반환

arr = [1,5,6];
let max = Math.max(...arr); //6
console.log(arr.indexOf(max)) //2
if(arr.indexOf(1) > -1){
  console.log(`1이 있습니다.`); } //"1이 있습니다."
else { console.log(`1이 없습니다.`);}

위의 코드에서 해당 요소가 배열에 들어있는지 확인할 때는, arr.indexOf(1) > -1와 같이 반환된 인덱스 값이 -1보다 큰지 확인해야 한다.
인덱스 0도 존재하기에 항상 -1로 확인하자!

7.6 arr.find(fn)

const arr=[0,1,2,3,4,5,6];

const result = arr.find((item)=>{
  return item>3;
})
console.log(result); //4

홀수/짝수 찾기, 성인만 찾기처럼 복잡한 작업이 필요할 때 함수를 통해 필요한 요소를 찾는다. 위의 경우에서는 3보다 큰 item을 찾을때, 딱 하나의 true가 나오면 그 뒤의 요소는 탐색하지 않는다. 출력이 4만 나온것을 확인할 수 있다.

7.7 arr.filter(fn)

arr.filter(fn) : 함수에 만족하는 모든 요소를 배열로 출력

find()와 다르게 true인 모든 요소들을 배열로 출력해준다.

const arr=[0,1,2,3,4,5,6];

const result = arr.filter((item)=>{
  return item>3;
})
console.log(result); //// [object Array] (3) [4,5,6]

7.8 arr.reverse()

arr.reverse() : 배열을 역순으로 재정렬, 최신순으로 정렬할 때 사용

arr = ['Mike','Jane',"Tom"];
arr = arr.reverse();
console.log(arr);//["Tom","Jane","Mike"]

7.9 arr.includes()

arr.includes() : 있으면 true, 없으면 flase 반환

arr = ["지훈","민수","혜연"];
if(arr.includes("민수")){
console.log(arr.reverse()) // ["혜연","민수","지훈"]
}

가장 간단하게 배열에 찾는 요소가 들어있는지 확인할 수 있다. 단, true/false 값이 반환된다는 점을 확인하자.

7.10 arr.map(fn)

arr.map(fn) : 함수를 받아 특정 기능을 시행하고, 새로 만든 배열을 반환

const arr=[0,1,2,3,4,5,6];
let i=0;
newarr=[];
arr.map((item)=>{
  if(item%2==0){
    console.log(`${item}은 짝수입니다.`);
    newarr[i]=item;
    i++;
  }
})
console.log(newarr); //[object Array] (4) [0,2,4,6]

map을 통해 배열에서 짝수인 요소들만 모은 새 배열을 만들었다.

const userList=[
  {name:"Mike", age : 20},
  {name:"Alice", age : 19},
  {name:"Jane", age: 33}
];
const result = userList.map((user, index)=>{
  return Object.assign({ }, user, {
    id : index + 1,
    isAdult : user.age>19
  });
});
console.log(result[0]); //{  "name": "Mike",  "age": 20 "id": 1,"isAdult": true}

7.11 arr.join()

arr.join() : 배열 요소들을 합쳐서 문자로 출력

array = [7, 77, 17]
let str1 = array.join(); //"7,77,17"
let str = array.join(''); //"77717"
console.log(str.split("")) //["7","7","7","1","7"]

배열 arr를 join()으로 합쳐 문자열로 만들고, 이를 split()로 나눠서 다시 배열로 출력한 결과물을 확인할 수 있다. 자주 사용되니 어떻게 작동하는지 잘 이해해두자.

7.12 arr.split()

arr.split() : 문자열을 지정한 문자기준으로 나눠서 배열로 반환

[프로그래머스] '7의 문제'에 사용한 join(), split() !!

array = [7, 77, 17]
let str = array.join('').split(""); //["7","7","7","1","7"]
console.log(str.filter((item)=>{return item=='7';})) //["7","7","7","7"]

배열을 join()으로 합쳐 문자열로 만들고, 이를 split()로 하나씩 나눠서 다시 배열로 만들었다. 그 배열에서 filter()를 통해 문자가 '7'인 요소만들 출력하도록 작성한 코드이다. 처음 배열과 변환된 배열의 차이점으로 join()과 split()의 사용법을 이해할 수 있다.😲

7.13 Array.isArray()

배열을 typeof로 검사하면 객체로 나오고, 객체도 객체로 구분된다. 따라서 isArray()로 배열인지 구분할 수 있다.

8. 배열 메소드2

8.1 arr.sort(fn)

arr.sort(fn) : 배열을 정렬하는 메소드

배열요소를 모두 문자로 인식해서 정렬한다는 것을 알아야한다.
문자열을 정렬하고 싶다면, split()로 나눠 문자열을 배열로 만들어주고 이를 sort()로 정렬하고, 다시 join()을 통해 문자열로 만들어주면 된다.

let answer = 'aecbed';
answer = answer.split('').sort().join('');
console.log(answer); // "abcdee"

8.2 arr.reduce(fn)

arr.reduce((누적 계산값, 현재값)=>{return 계산값},초기값);
기존에는 아래와 같이 모든 배열 요소를 한번씩 돌면서 더해서 합을 구했었다.

const arr=[1,2,3,4,5];//배열의 수 모두 더하기

let result = 0;
arr.forEach((num) => {
  return result+=num;
})
console.log(result);

reduce를 사용해 더 쉽게 합을 구할 수 있다.

const arr=[1,2,3,4,5];//배열의 수 모두 더하기

let result = arr.reduce((prev, cur)=>{
  return prev += cur;
  },0)

console.log(result);

아래코드는 유저리스트중 성인인 사람의 이름을 배열에 넣어 반환하는 코드이다.

let userList = [
  {name:"Mike", age:30},
  {name:"Alice", age:10},
  {name:"Jane", age:20},
  {name:"Harry", age:42},  
  {name:"Sue", age:60},
]

let result = userList.reduce((prev,cur)=>{
  if(cur.age > 19){
    prev.push(cur.name);
  }
  return prev;
},[])
console.log(result)

배열로 출력하기에push 사용해서 요소 집어넣는 점을 기억하자!!

유투버 코딩앙마님 자바스크립트 중급강좌를 보고 정리한 내용입니다.
코딩앙마-자바스크립트 중급 강좌