[JavaScript] 배열과 배열 내장함수 정리

배열

Javascript에서 배열은 다른 언어에서의 배열과 크게 다르지 않은 것 같다. 하지만 객체로 배열을 선언하는 것은 생소할 수 있으니 그에 대해 간단하게 알아봤다.

 

 

위와 같이 객체를 배열 안에 리스트처럼 넣을 수 있고 이 객체가 콘솔 창에 어떻게 나오는지 출력을 해본다.

 

 

배열 값을 조회할 때는 다른 언어의 배열과 같이 인덱스로 조회하면 된다. 위의 예에서 arr[0], arr[1]와 같이 조회하면 해당 객체를 얻을 수 있다. 

 

 

 

배열의 크기를 알아내고 싶을 땐 arr.length와 같이 length을 붙여 작성하면 된다.

 

---

배열 내장함수

• push
• forEach
• filter
• concat
• map
• find, findIndex
• shift, unshift, pop

push

배열에 새 항목을 추가할 때 사용한다. 영화 매드맥스를 arr배열에 추가 시켜 보자.

 

push

console

---

forEach

forEach는 배열의 각 항목들을 하나씩 접근할 때 for문 보다 좀 더 편리하게 코드를 작성할 수 있게 해준다.

 

movies

 

이처럼 movies라는 영화 제목을 담은 배열이 있고, movies 안에 있는 영화 제목들을 전부 콘솔 창에 출력하고 싶을 때 for문을 사용하여 다음과 같이 작성할 수 있다. 

 

for

 

이것을 내장함수 forEach를 사용하여 작성하면 훨씬 더 간단하게 코드를 작성할 수 있다. 

 

forEach

 

forEach 안에 파라미터로 주어진 movie는 movies 배열의 각 원소들을 가르키게 되고 movie를 출력하면 배열의 각 원소들을 출력하는 것과 같은 결과를 얻게 된다.

 

---

filter

filter는 함수 이름처럼 필터링한다고 생각하면 된다. 즉, 배열의 각 항목 중 필터링을 거쳐 자신이 원하는 항목들만 추출하여 새로운 배열을 생성할 때 사용한다.

 

 

위와 같이 movies 배열에서 감독이 Damien Chazelle인 영화만 골라서 damienMovie라는 새로운 배열에 담아 콘솔 창에 출력했다. 

 

---

concat

concat은 배열 들을 하나로 합칠 때 사용한다. 

 

 

---

map

map은 배열의 각 원소들을 원하는 값으로 변환하고 싶을때 사용하고 결과값으로 새로운 배열을 생성한다. 예를 들어, 위의 예에서 movies 배열의 각 영화들에 문자열 wow를 붙여 새로운 wowMovies 배열을 생성 해보자.

 

map

 

console

 

위와 같이 간단하게 코드를 작성할 수 있다.

 

forEach

 

forEach로도 작성할 수 있으니 쓰기 편한 함수를 사용하면 될 것 같다. 

---

find, findIndex

find와 findIndex는 배열 안에서 자신이 접근하고자 하는 원소를 찾을 때 사용한다. 차이점으로는 find는 그 항목(객체, 배열, 숫자, 문자열)을 그대로 반환한다. 반면에 findIndex는 함수 이름대로 index 값을 반환한다. 

 

find findIndex

 

위와 같이 find는 id가 2인 항목을 그대로 반환한다. 따라서 Whiplash 객체가 콘솔 창에 출력이 되었다. 반면에 findIndex는 감독이 크리스토퍼 놀란인 객체를 찾아 해당 객체의 배열에서의 인덱스 값(3)을 반환한다.

 

indexOf

indexOf는 findIndex와는 좀 다른게, 만약 배열안에 있는 값이 숫자나 문자열, 불리안이면 괜찮지만 위와 같이 객체나 배열일 경우 indexOf함수로는 인덱스 조회가 불가능하다. 

 

indexOf

---

shift, unshift, pop

shift는 배열의 첫 번째 원소를 제거하고 unshift는 배열의 첫 번째에 원소를 추가해준다. pop은 배열의 가장 마지막 원소를 제거 한다. 

 

shift

 

위와 같이 첫 번째 항목을 제거하는 것을 볼 수 있다. 파이썬의 리스트에서 pop(0)과 같은 역할을 한다.

 

unshift

 

unshift는 첫 번째 인덱스로 항목을 추가한다.

 

 

pop은 가장 뒤에 있는 항목을 제거한다.

 

---

 

 

배열 내장함수 정리(2)

https://gingerkang.tistory.com/58

[JavaScript] 배열 내장함수 정리