제 5장 - 자바스크립트 배열

1. 배열 : 배열은 가장 근간이 되는 자료 구조 중 하나이다. 배열의 중요한 특징은 순서를 가진다는 것이다.

  어떤 자료 구조를 사용하든 개발자들은 4가지 기본 연산(접근, 삽입, 삭제, 검색)과 관련해 시간 복잡도와 공간 복잡도에 관심을 갖는다.

 

  1 - 1) 삽입 : .push() 메소드를 통해 새로운 항목을 배열 끝에 추가할 수 있다.

                    .unshift() 메소드를 통해 새로운 항목을 배열의 맨 앞에 추가할 수 있다.

  1 - 2) 삭제 : .pop() 메소드를 통해 마지막 항목을 배열에서 삭제할 수 있다.

                    .shift() 메소드를 통해 첫 번째 항목을 배열에서 삭제할 수 있다.

  1 - 3) 접근 : 배열은 인덱스 번호를 통해 해당하는 데이터에 접근할 수 있다.

  

let arr = [1, 2, 3, 4];
 
//1.맨 앞 추가 
arr.unshift(0);
console.log(arr); //[0, 1, 2, 3, 4]
 
//2.맨 앞 삭제
arr.shift();
console.log(arr); //[1, 2, 3, 4]
 
//3.맨 뒤 삽입
arr.push(5);
console.log(arr); //[1, 2, 3, 4, 5]
 
//4.맨 뒤 삭제
arr.pop();
console.log(arr); //[1, 2, 3, 4]
 
//5.조회
console.log(arr[0]); // 1
console.log(arr[1]); // 2
 

 

2. 반복 : 배열의 반복을 다루는 것은 꽤 중요하다. 배열이라는 자료구조상 데이터의 갯수가 많을 것이기 때문이다.

  2 - 1) for문을 이용한 반복

  2 - 2) 내장함수 forEach() : 위의 for문과는 다르게 반복 바깥으로 빠져나오거나 배열 내 특정 항목들을 건너뛸 수 없다!

 

let arr = [1, 2, 3, 4, 5];
let sum1 = 0;
let sum2 = 0;
 
for (let i = 0; i < arr.length; i++) {
  sum1 += arr[i];
}
console.log(sum1); //15
 
arr.forEach((a) => (sum2 += a));
//a는 각 요소를 의미함 즉 차례대로 1 2 3 4 5를 의미한다.
console.log(sum2); //15

let arr = [1, 2, 3, 4, 5];
let slicedArr1 = arr.slice(0, 2);
let slicedArr2 = arr.slice(3);
let slicedArr3 = arr.slice(3, 4);
 
console.log(slicedArr1); // [1, 2] 0번 인덱스부터 2번 인덱스 전까지
console.log(slicedArr2); // [4, 5] 3번 인덱스부터 끝까지
console.log(slicedArr3); // [4] 3번 인덱스부터 4번 인덱스 전까지
 

 

만약 매개변수로 아무것도 전달하지 않으면 해당 배열의 복사본을 반환한다!

하지만 복사본은 기존의 배열과 메모리 주소가 다르기 때문에 '===' 통해 비교하면 false가 나온다!

 

  3 - 2) .concat() : 컨캣은 신규 항목을 기존 배열의 맨 뒤에 추가하고 해당 배열을 반환한다!

 

let arr = [1, 2, 3, 4, 5];
console.log(arr.concat([6, 7])) // [1, 2, 3, 4, 5, 6, 7]
console.log(arr) // [1, 2, 3, 4, 5]
// concat은 slice와 마찬가지로 기존 배열에 영향을 끼치지 않는다

 

  3 - 3) .length : length 속성은 배열의 크기를 반환한다. 해당 속성을 더 작은 크기로 변경하면 배열에서 항목들이 제거된다

 

let arr = [1, 2, 3, 4, 5];
console.log(arr.concat([6, 7]).length) // 7
console.log(arr.length) // 5
 
arr.length = 4;
console.log(arr) // [1, 2, 3, 4] 뒤에서 부터 제거됨!

 

4. 자바스크립트 함수형 배열 메소드 : 자주 쓰이는 배열의 함수형 메소드는 대표적으로 map, fliter, reduce가 있다.

  4 - 1) map : map 함수는 매개변수로 전달된 함수 변환을 배열의 모든 각각의 항목에 적용한 다음 변환이 적용된 항목들을

  포함하는 신규 배열을 반환한다.

 

  4 - 2) filter : filter 함수는 배열 내 항목들 중 함수의 매개변수로 전달된 조건을 충족시키는 항목들로만 구성된 배열을 반환한다.

 

  4 - 3) reduce : reduce 함수는 매개변수로 전달된 변환 함수를 사용해 배열의 모든 항목을 하나의 값으로 결합해 반환한다.

  reduce 함수는 initialValue를 두 번째 인자를 받을 수 있다.

 

  사실 map, filter, reduce는 매개변수로 함수를 받는다는 점에서 다른 메소드들에 비해 난이도가 조금 높다. 따라서 익숙해지려면

  충분한 연습이 필요하다!! 해당 메소드에 대한 쉬운 예시로 먼저 감을 익혀보자!

 

// 1. map
let arr = [1, 2, 3, 4, 5];
let mapArr = arr.map((elem) => {
  return elem * 10;
}); // arr의 각각의 요소를 10배로 만들어 새로운 배열로 반환하자!
console.log(mapArr); // [10, 20, 30, 40, 50]
 
// 2. filter
let filteredArr = arr.filter((elem) => elem >= 3);
// arr의 요소가 3이상인 조건을 만족하는 요소만 새로운 배열로 반환하자!
console.log(filteredArr); // [3, 4, 5]
 
// 3. reduce
let reduceArr = arr.reduce((prev, curr) => {
  return prev + curr;
}, 0);
// 1. prev는 reduce 함수의 두 번째 매개변수인 초기값 0을 갖는다
// 2. curr는 reduce 함수의 첫 번째 요소인 1이다
// 3. 새로운 prev 값은 prev + curr이 된다
// 왜냐하면 반환하는 값을 prev + curr이기 때문이다
// 4. 즉 새로운 prev 값은 0 + 1 = 1이 된다
// 5. 그 다음 curr 값은 두 번째 요소인 2이다
// 6. 또다시 새로운 prev 값은 1 + 2 = 3이 된다.
// 7. 이런식으로 함수의 끝 요소까지 반복한다면 prev의 최종 값은 15가 된다
console.log(reduceArr); // 15
 

 

  5. 요약 : 배열은 자주 쓰이는 자료구조이므로 배열에 대한 이해와 배열을 처리할 때 자주 쓰이는 메소드에 대해선

  충분히 익숙해지도록 하자! 블로그에 정리한 메소드 외에도 쓸 수 있는 메소드는 많다. 추가적인 메소드는 MDN을 통해

  필요할 때마다 찾아서 쓸 수 있도록 하자

 

*출처 : 자바스크립트로 하는 자료구조와 알고리즘, 지은이 : 배세민 엔지니어