15일차 (배열)

우리가 여태까지는 한 개 혹은 소량의 데이터를 가지고만 실습을 진행했었다. 이는 원시타입을 이용해서 처리가 가능했다. 하지만 대량의 데이터에서는 어떨까? 우리는 대량의 데이터를 다루기 위해 배열과 객체를 사용한다. 이를 보관하고 관리하는데 유용하기 때문이다. 이번에는 이와 같은 참조 타입 데이터에 대해서 배웠다. 그리고 참조 타입 데이터는 원시타입(숫자, 문자열, boolean, undefined 등) 데이터와는 다른 성격을 가지고 있으므로 주의해서 학습했다.
오늘은 배열에 대해 배운 것들을 토대로 다시 정리 및 회고를 해보겠다.

배열

배열을 배우면서 google chrome 개발자모드로 배열을 선언을 해봤는데 타입을 섞어서 구성을 해도 javascirpt에서는 타입 오류가 나지 않았다. 그래도 이는 좋지 않은 방법이니 이렇게 해도 오류가 안난다 정도로만 넘어가는게 좋을 것 같다.

배열 기초

• 배열은 순서가 있는 값이다. 그리고 이 값을 element라고 한다.

  • 순서는 Index(인덱스)라고 하며, 1이 아닌 0부터 번호를 매긴다.

• 값은 인덱스를 통해 접근한다.

  let numArr = [1, 20 , 300, 4000];
  numArr[2]     // 300
  numArr[2] = 333;   //  numArr = [1, 20 , 333, 4000];

• length를 이용해 배열의 길이를 알 수 있다. 위를 예시로 하면 numArr.length는 4의 값을 갖는다.

• console.table을 통해 콘솔 창에서 테이블 형태로 배열의 요소들을 확인할 수 있다. 이와 같이 콘솔창에서 테이블 확인이 가능하다.

배열 기초 메소드

• 배열인지 아닌지 확인하기

  • typeof(배열)을 하면 이는 object라는 값을 반환한다.
  • Array.isArray(obj)의 형태로 쓰게되면, 배열인지 아닌지 true or false로 값을 반환한다.

• 배열 요소 추가 및 삭제

  • 추가
    • push : arr.push(element)를 하면 arr의 맨 끝에 추가된다.
    • unshift : arr.unshift(element)를 하면 arr의 맨 앞에 추가된다.
  • 삭제
    • pop : arr.pop()을 하면 arr의 맨 끝이 삭제된다.
    • shift : arr.shift()를 하면 arr의 맨 앞이 삭제된다.

• 배열 요소 포함 여부 확인하기

  • indexOf : 값이 존재하는(처음 나오는 부분)의 첫 인덱스를 반환한다. 존재하지 않는다면 -1을 반환하며, 대소문자를 구분한다.
  • includes : 해당 요소가 존재하는지(존재여부)만 true or false로 반환한다. 하지만 includes는 호환성의 문제가 있다. IE에서는 호환이 되지 않는다.

• 배열의 복사와 특정 부분삭제도 가능하다

  • slice와 splice가 존재하는데 이는 문자열에서도 배웠던 것이다. 아래 링크를 참조했다.
    배열복사와 특정 부분 삭제

• 배열의 합치기 또한 가능하다 이는 방법이 세가지있으며 아래 링크를 참조했다

  • concat(arr1, arr2), ... spread operator (전개 연산자) , push() 함수와 spread operator
  • javascript 배열 합치기 3가지 방법

실습 URL

github 실습 자바스크립트 파일
실습은 페어 프로그래밍으로 진행됐으며, 문제에 대해 파악하고 풀어보는 시간을 가졌다. 학습 시간에 배웠던 것 말고도 페어를 통해서 reduce와 filter를 알게 됐는데 꽤 좋은 메소드인 것 같다. 조금 더 공부해보고 더 유연하게 잘 쓸 수 있으면 좋겠다.

마치며

오늘은 javascript 배열에 대해서 학습하고 실습을 해봤다. 느끼기로는 원시 타입에서 배웠던 문자열에서 쓰는 메소드를 비슷하게 사용하는 것 같다. 그래서 조금은 친숙하게 다룰 수 있지 않았나 싶다. 그리고 오늘 페어 프로그래밍을 하면서 reduce라던가 filter에 대해서 조금 알게 됐는데 꽤 쓸만하고 더 유연하게 쓴다면 간략하고 보기좋게 처리할 수 있을 것 같다. 또 이번에는 github 잔디도 좀 심을겸 실습을 한 것을 파일을 만들고 github에 올리는 과정도 같이 해봤는데 지금은 아직 정리가 잘 안되는 것 같다. 조금 더 겪어보면서 더 보기좋게 관리하는 방법을 찾아야겠다.
아직 갈 길이 멀다. 힘내자!!

Reference

• 코드스테이츠(CodeStates) 강의자료