자바스크립트 - JS 에서의 배열

 

자바스크립트 에서의 배열

자바스크립트 에서의 배열은 다른 언어에서 처럼 명확한 자료형으로서의 배열이 아니라, 배열이라는 자료형을 흉내낸 객체이다.

 

한번 확인해보자.

const numarr = [1,2,3,4];
console.log(typeof numarr);

결과 : object

-> 자바스크립트에서의 배열은 자료형이 아니라 객체에 불과하다.

 

배열의 길이

배열의 길이를 알아낼 때는 .length 함수를 사용할 수 있다.

const numarr = [1,2,3,4];
console.log(numarr.length)

결과 : 4

 

그런데 여기서 문제, 자바스크립트 에서는 배열의 길이와 배열에 있는 요소의 갯수(개발자가 직접 초기화해준 요소들) 가 같은 말일까? 다른 말일까?

아래의 코드를 보자.

const arr = [];
arr[2] = 3; // 0,1 번 인덱스에는 아무것도 들어가 있지 않다.(요소 갯수는 1개만 존재한다.)
console.log(arr.length)

결과 : 3

 

선언해준 arr 배열에서 0,1 번 인덱스는 제외하고 2번 인덱스만 초기화 해줬음에도 불구하고 배열의 길이로 3 이라는 결과를 출력함을 알 수 있다.

이렇게 되는 이유는 초기화 해주지 않은 인덱스도 배열에 포함이 되기 때문이다.

초기화 해주지 않은 인덱스는 다음과 같은 형태로 출력되게 된다.

const arr = [];
arr[2] = 3;
console.log(arr.length)
console.log(arr);

 

초기화 되지 않은 요소들은 <n empty items> 라는 형태로 출력되게 된다. 여기서 n 은 초기화 되지 않은 요소들의 연속된 갯수를 말한다.

* 정리 : 자바스크립트 에서의 배열은 사용자가 직접 초기화해준 요소의 갯수와 배열의 길이가 다를 수 있고, 초기화 해주지 않은 요소는 empty 라는 요소로 채워진다.

 

 

배열에 요소 추가

이번엔 배열에 요소를 추가해보자.

배열의 요소를 추가하는데는 다음과 같은 두 가지 방식이 있다.

 

1. 배열을 직접 건드리는 방식

push 라는 함수를 이용해서 .push(추가요소) 와 같은 식으로 작성하면 배열을 직접 건드리면서 요소를 추가하는 것이 가능하다.

const numarr = [1,2,3,4];
numarr.push(5, 6);
console.log(numarr)

결과 : [ 1, 2, 3, 4, 5, 6 ]

 

중요한 것은 배열에 요소를 추가하는것 자체가 아니라, 배열에 요소를 추가할 때 배열을 직접 건드린다는 점이다.

그렇기 때문에 push 함수를 통해 배열에 값을 추가한 경우, 해당 사항이 그대로 적용되어, 이 다음 부터는 push 함수로 인해 추가된 배열을 그대로 활용하게 된다.

 

2. 배열을 직접 건드리지 않는 방식

concat 이라는 함수를 이용해서 .concat(추가요소) 와 같은 식으로 작성하면 배열을 직접 건드리지 않으면서 배열에 요소를 추가하는 것이 가능하다.

numarr.concat(7,8);
console.log(numarr);

결과 : [ 1, 2, 3, 4, 5, 6 ]

 

concat 함수를 이용해 분명히 배열에 요소를 추가해 줬음에도 불구하고, 배열을 출력해 봤을 땐 concat 함수를 통해 배열에 추가한 요소들이 배열에 적용되지 않았음을 확인할 수 있다.

그럼 만약 concat 함수를 통해 변경사항이 적용된 배열을 활용하고 싶으면 어떻게 해야할까?

아래와 같이 변수를 통해 새로운 배열을 만들어서 요소 추가가 적용된 배열을 활용할 수 있다.

const result = numarr.concat(7,8);
console.log(result);

결과 :

[
  1, 2, 3, 4,
  5, 6, 7, 8
]

 

여기서 중요한 점은 concat 함수는 기존 배열에 값을 추가시킨 다른 배열을 반환시켜 줄 수 있는 함수이지만, push 함수처럼 기존의 배열을 변화시키는 함수가 아니라는 것이다.

 

 

배열에서 요소 빼기

push 함수가 배열을 직접 건드리면서 배열에 값을 추가해주는 함수라면, pop 함수는 배열을 직접 건드리면서 배열의 요소를 제거하는 함수이다.

numarr.pop(); // 배열의 가장 마지막에 있는 요소를 제거하는 메소드
console.log(numarr);

결과 : [ 1, 2, 3, 4, 5 ]

 

pop 함수는 배열의 가장 마지막 요소를 제거하는 함수이다. push, pop 이라는 키워드를 보면 알 수 있듯이, 스택 자료구조와 동일한 형태로 동작하는 것을 확인할 수 있다.

 

 

배열 속 요소 순회하기

아래와 같은 배열이 있다고 가정하자.

const namearr = ["민철", "영수", "영희", "민수"];

위와 같은 배열을 순회하는데 있어, 지금까지 배운 바로는 아래와 같이 코드를 작성해 줄 수 있다.

for(let i = 0; i < namearr.length; i++){
    console.log(namearr[i]);
}

결과:

민철
영수
영희
민수

 

그런데 앞으로 코딩을 하는데 있어 배열을 순회할 일이 많은데, 그럴때마다 이렇게 for 문을 작성해주는 건 굉장히 비효율적 이라고 볼 수 있다.

그렇기 때문에 forEach 를 활용하여 좀 더 간편하게 배열을 순회해 보도록 하자.

 

1. 배열을 순회하는 첫번째 방법 : forEach

namearr.forEach(function(name){
    console.log(name)
})

결과:

민철
영수
영희
민수

 

forEach 내부에 실행시킬 함수를 작성해준다. 여기서 name 에는 배열의 각 요소들이 순차적으로 들어가게 된다.

 

그런데 이 조차도 작성하기 귀찮다는 생각이 들 수 있다.

그렇다면 위의 함수를 화살표 함수를 통해 좀 더 간결하게 만들어주자.

namearr.forEach(name => console.log(name))

 

2. 배열을 순회하는 두번째 방법 : map

map 은 프레임워크에서 정말 많이 사용하는 함수이니 꼭 기억해 두도록 하자.

const oddarr = [1,3,5,7,9];
const newarr = oddarr.map(num => num*2);
console.log(newarr);
console.log(oddarr);

결과 :

[ 2, 6, 10, 14, 18 ]
[ 1, 3, 5, 7, 9 ]

 

map 과 forEach 의 결정적인 차이점은, forEach 의 경우 배열을 순회하면서 새로운 배열을 리턴해주지 않는데 반해, map 의 경우는 새로운 배열을 리턴해준다는 점이다.

위의 코드에서 newarr 배열에 oddarr 의 각 요소가 * 2 연산이 수행되어 새로운 배열이 반환 되었음을 확인할 수 있다.

 

 

배열의 필터링

원하는 요소만 조건에 맞춰서 뽑아올 수 있는 함수에 대해서 알아보자.

.filter() 함수를 활용하면 원하는 조건에 맞춰서 배열의 요소를 뽑아올 수 있다.(자바의 stream().filter() 와 동일한 개념)

const filterarr = oddarr.filter(x => x > 4);
console.log(filterarr)

결과 : [ 5, 7, 9 ]

 

위의 코드를 보면 oddarr 배열의 요소들 중, filter 함수 내부에 작성한 조건문을 만족하는 요소들만 골라서 filterarr 라는 새로운 배열을 만들었음을 확인할 수 있다.

 

그렇다면 한번 생각해보자.

웹 프로젝트를 개발 중일때, filter 함수를 사용한다면 주로 어떤 용도로 이 함수를 사용하게 될까?

주로, 굉장히 많은 정보의 덩어리 들이 있을 때, 내가 원하는 것들로 정렬하거나 검색할 때 많이 활용하게 된다.

 

다음과 같이 객체로 이루어진 배열이 있다고 가정해보자.

const postList = [
    {"date" : "yesterday", "id" : 1},
    {"date" : "yesterday", "id" : 2},
    {"date" : "today", "id" : 3}
]

 

만약 위의 배열에서 어제 작성된 글만 뽑아내고 싶다면 filter 함수를 사용할 수 있다.

const yesterdayPost = postList.filter(post => post.date === "yesterday");
console.log(yesterdayPost);

결과 : [ { date: 'yesterday', id: 1 }, { date: 'yesterday', id: 2 } ]

 

이와 같은 방식으로 객체의 배열 또한 조건에 맞춰 원하는 객체를 뽑아내 줄 수 있다.

 

 

 

참고 : https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6

프레임워크를 위한 JavaScript ES6 - 구름EDU