[javascript] 유용한 배열 메소드 (array method) 총정리

안녕하세요 ! 오늘은 자바스크립트에서 유용한 배열 메소드들을 정리해 보겠습니다.
 
기본적으로 꼭 알고 있어야 하는 배열 메소드 4개부터 짚고 넘어가겠습니다.

---

• arr.push() - 배열의 맨 뒤에 요소 추가 
• arr.pop() - 배열의 맨 뒤에 요소 삭제
• arr.unshift() - 배열의 맨 앞에 요소 추가
• arr.shift() - 배열의 맨 앞에 요소 삭제

 
요소를 삭제하는 메소드 pop()과 shift()의 경우 한 번에 하나의 요소만 삭제할 수 있지만, 요소를 추가하는 메소드 push()와 unshift()의 경우 아래의 코드를 보시면 알 수 있듯이 여러 개의 요소를 한 번에 추가할 수 있습니다. 

unshift()와 push() 연습코드

 
 

---

                                   
             지금부터 본격적으로 다양한 배열 메소드들을

하나하나 만나보는 시간을 갖겠습니다 ! ✔️🚨
 

---

 
1-1. arr.splice( n , m )
:  배열 인덱스 n부터 m개의 요소를 지움.
 
1-2.뒤에 매개변수 하나(혹은 그 이상)가 더 추가된 형태의 splice()함수
     arr.splice( n, m, x, y )
: 배열 인덱스 n부터 m개의 요소를 지움 → 그 자리에  추가된 변수 x, y를 집어넣음

arr.splice(n, m, x, y)

 
arr.splice(1,0,"대한민국","학생")
→ index 1("미성")부터 0개의 요소를 지운 후 그 자리에 "대한민국"과 "학생" 집어넣으라는 뜻
 
출력값 : "나는 대한민국 학생 입니다"

---

 
 
2. arr. slice(n, m)
: 배열 인덱스 n부터 m-1까지 반환해주는 함수
 
 

---

 
 
3. arr.concat([a,b,c], d, e, [f,g] ,.... )
: 괄호 속 모든 요소를 합쳐서 새 배열을 반환해주는 함수

arr. concat()

 
* concat() 함수를 쓰지 않으면서도  다양한 개별 배열과 요소를 모두 묶어 하나의 배열로 만들 수 있을까?
→ YES
앞서 배운 전개구문( spread syntax )를 사용하면 보다 쉽게 코드를 짤 수 있음.
(* 전개구문의 중요성* )

🌟🌟🌟
📍 전개구문 포스팅 보러가기
https://with-mimi.tistory.com/entry/javascript-%EC%A0%84%EA%B0%9C%EA%B5%AC%EB%AC%B8spread-syntax-%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98
🌟🌟🌟
 

concat()함수를 대신하여 전개구문 활용한 예시코드

 
 

---

 
 
4. arr.forEach((name,index)=>{})
 
: 배열을 순회하며 요소별로 주어진 함수를 실행시킬 수 있다. 일반적으로 배열 요소의 값, 배열 요소의 인덱스 이렇게 두 개의 매개변수를 갖는다.

배열을 순회하는 forEach()

 
 

---

 
 
5. arr.indexOf(n) / arr.lastindexOf(n)
( 앞에서부터 세기 / 뒤에서부터 세기 )
 
: 배열에서 요소 n의 index를 출력해주는 함수.
  매개변수를 하나 더 추가하여 시작 인덱스를 지정할 수도 있다.
 ( arr.indexOf(n, m) : m 요소부터 세기 시작했을 때 요소 n의 index값 반환 )
 

(누락되어버린..! )두번째 함수의 출력값은  7

 

---

 
 
6. arr.includes(n)
: 요소 n이 배열에 있는지 없는지 판별하여 True / False를 가려주는 함수.
 
let arr = [1,2,3,4,5,1,2,3];
console.log(arr.includes(7));  //false
 
 

---

 
 
7. arr.find(함수) / arr.findIndex(함수)
 
: 배열의 요소를 하나하나 순회하다가 함수에 성립하는 요소를 찾음과 동시에 즉시 함수를 종료함.
arr.find()의 경우 성립하는 요소 자체를 반환해주고, arr.findIndex()의 경우 성립하는 요소의 index를 반환함.

arr.find() 함수 연습코드 1

  
위 코드의 경우 짝수인 요소가 나타남과 동시에 종료되며 그 요소를 반환하기 때문에 2가 출력될 것이다.
위 코드에서 "find"를 "findIndex"로 바꾸면 출력값이 index로 반환되므로 2의 index인 1이 출력될 것이다.
 

arr.find() 함수 예시코드 2

 
 위 코드에서는 find 함수가 배열 list의 요소(여기서는 객체)를 하나하나 순회하며 age속성이 19 미만인 요소를 찾아내고 있다. 유일하게 미성년자인 세 번째 객체가 바로 조건에 성립하는 요소이므로, result를 출력하면 출력값은 세 번째 객체가 나온다. (true나 false가 출력되는 것이 아님 주의. find 함수는 항상 요소를 반환해준다. )
 
여기서도 마찬가지로 find를 findIndex로 바꾼다면 출력값은 세 번째 객체의 index인 2가 출력될 것이다.
 
 

---

 
 
 
8. arr.filter(함수)
 
: 함수에 성립하는 요소들을 모두 수집하여 배열로 반환해 준다. 단어 그대로 filtering을 한다고 보면 된다.바로 앞에서 살펴봤던 함수 find의 경우 성립하는 요소 하나를 찾는 즉시 종료하고 그 요소 하나만을 반환하였다. 그러나 filter의 경우 만족하는 모든 요소들을 다 모은 후에 종료되며 이들을 모아 배열로 반환한다는 차이점이 있다.
 
 

filter()함수 연습코드

 
앞서 봤던 find 함수의 첫 번째 연습코드에서 단어 "find"를 "filter"라고만 바꾼 코드이다.
filter 함수의 경우 짝수라는 조건에 성립하는 모든 요소를 찾고 이들을 모아 배열로 반환하기 때문에,
출력값은 [2, 4]가 된다.
 
 

---

 
 
 
9. arr.map(함수)
 
: map() 함수는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과들을 모두 모은 새로운 배열을 반환함.
 

map() 함수 연습코드

 

---

유용한 객체 메소드 포스팅 보러가기

https://with-mimi.tistory.com/entry/javascript-%EC%9C%A0%EC%9A%A9%ED%95%9C-%EA%B0%9D%EC%B2%B4-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%88%AB%EC%9E%90-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%B4%9D%EC%A0%95%EB%A6%AC

[javascript] 유용한 객체 메소드 / 숫자 메소드 총정리

---

 

객체 메소드를 아신다는 가정 하에 설명을 이어가자면, 위 코드에서의 map함수는 배열의 요소인 객체들을 하나하나를 순회하며 , 해당 객체의 age속성이 19보다 클 경우 "isAdult"의 속성값을 True/ 아닐 경우 False로 지정하며 "isAdult"속성을 기존 객체의 형태에 추가하는 기능을 취해주고 있습니다. 
 
newlist를 콘솔에 찍어보면 출력값은 isAdult 속성이 추가된 객체들이 나오게 되겠죠?

---

 
 
 
10. arr.reduce()
형태 : arr.reduce( ( 누적 계산값, 현재값 ) => { return 누적계산값 } , 초깃값 )
( 초깃값은 꼭 기재하지 않아도 됨. )
 
형태만 보고는 잘 와닿지 않으므로 코드와 함께 설명드리겠습니다.
 

reduce() 함수 연습코드 1

 
 
이 코드에서 prev은 누적 계산값을, cur은 현재값 즉 현재 배열 요소값을 의미합니다. 초깃값 0에서부터 시작하여 요소값을 계속 더해나가고, 이 결괏값은 계속해서 누적 계산값인 prev에 업데이트 됩니다. 배열 순회가 끝나면, 출력값은 각 요소를 모두 더한 값인 15가 됩니다.
 
아래의 코드는 맨 앞에서 말씀드린 push()함수와 함께 작성된 reduce()함수 연습코드 입니다.
조금 헷갈리실 수 있으니 차근차근 읽어주세요 ! 

reduce() 함수의 연습코드 2

 
 
reduce 함수의 세 번째 매개변수인 초깃값을 빈 배열로 지정하였고, 현재 객체의 age속성이 19보다 작을 때마다 push 함수를 이용해서  prev 배열에 name속성을 넣어줍니다. 그럼 최종적으로 반환되는 배열의 형태는, 미성년자인 모든 객체들의 이름 요소들이 담긴 모습이겠죠. 따라서 console.log(list)의 출력값은 최종 prev 배열의 모습이 됩니다.
 

---

 
 
11. arr.split()
 
: 문자열을 나누어 배열로 전환하고 싶을 때 사용하는 함수입니다. 괄호 안에 든 것을 기준으로 하여 문자열을 나누게 됩니다. 이를테면 arr.split(" ")일 경우 공백을 기준으로 문자열을 나눕니다.  
 
 

---

 
 
12. arr.join()
 
: split 함수와 반대로 배열을 문자열로 전환하고 싶을 때 사용하는 함수입니다. 문자열로 전환되었을 때 각 배열의 요소들 사이에 그들을 구분해줄 기호가 필요하다면 이를 괄호에 넣으시면 됩니다. 아무래도 띄워쓰기 하나 없이 무작정 배열 요소들을 쭉 나열하기만 한 문자열을 얻고 싶을 일은 희박할테니까요.
 

join()함수의 연습코드

  
 

---

 
 
 
 

---

지금까지 javascript에서 배열의 유용한 메소드들을 살펴보았습니다.
물론 여기서 다룬 메소드들이 배열 메소드의 전부는 아닙니다. 또 다른 메소드들은
틈틈이 이 포스팅에 추가해 두도록 하겠습니다.
읽어주셔서 감사합니다.
오늘도 행복한 하루 되시길 바랍니다 !

---