해당 벨로그는 드림코딩의 자바스크립트 기초 강의 (ES5+) 8강을 보고 작성한 글입니다.

8강은 배열에 대해서 배운다.

자료구조

오브젝트 vs 자료구조

토끼와 당근이 있다고 가정하자.

토끼끼리 한 바구니에, 당근끼리 한 바구니에 담았다.

비슷한 것들만 바구니에 따로 담아놓는 것처럼,

프로그래밍 언어도 비슷한 종류의 데이터들을 묶어서 한데다가 보관해놓는 것을 자료구조라고 한다.

자료구조는 어떤 방식으로 어떤 형식으로 데이터를 담느냐에 따라서 굉장히 다양한 타입들이 있다.

지난시간 비슷한 종류의 데이터끼리 묶어놓는 것을 오브젝트라고 배웠는데, 오브젝트와 자료구조의 차이는 무엇일까?

오브젝트 → 토끼 or 당근 중 하나가 될 수 있다.

토끼와 당근 오브젝트는 각각의 특징들이 존재한다.

토끼는 동물이고, 귀 2개 있는 프로퍼티, 함수(먹는다. 뛴다.)가 들어있을 수도 있다.

당근은 (주황색, 비타민C) 같은 프로퍼티만 있을 수 있다. 당근은 행동이 없어서 메소드가 없을 수 있다.

⇒ 오브젝트들은 서로 연관된 특징과 행동들을 묶어놓는 것을 말한다.

토끼끼리 묶고, 당근끼리 묶는 비슷한 타입끼리 바구니에 담아놓는 것을 자료구조라고 한다.

보통의 자료구조에는 동일한 타입의 오브젝트들만 담을 수 있다. (다른 언어들)

하지만 자바스크립트는 동적 타입 언어 라서, 한 바구니 안에 다양한 종류의 데이터를 담을 수 있다.

다양한 종류의 데이터를 담을 수는 있지만 이런 식의 프로그래밍을 하는 것을 권장하지 않는다.

자료구조와 알고리즘

나중에 꼭 공부해야 하는 부분이 자료구조와 알고리즘이다.

데이터를 한 데 담아놓은 자료구조 중에서도 새로운 데이터를 자료구조에 삽입할 때, 어떤 알고리즘을 사용해 효율적으로 삽입할지? 혹은

검색, 정렬할때 어떤 알고리즘을 써서 정렬/삭제할 수 있는지 효율성을 같이 공부해야 한다. → 인터뷰 등의 면접 시험에서도 종종 등장하는 개념이다.

어떤 자료구조를 선택하고 검색, 삽입, 정렬, 삭제 등의 속도를 고려해서 빅오라는 것을 고려해서 사용하는 것이 중요하다.

배열

배열은 칸칸이, 촘촘이 모여있는 자료구조를 말한다.

그리고 칸칸마다 모여있는 자료구조에 인덱스가 지정되어 있다.

인덱스는 0부터 시작된다.

비어진 박스가 5개 있고, 박스가 서로 모여있고, 박스의 인덱스 번호가 매겨져있다.

프로그래밍 언어에서 인덱스는 0부터 시작한다. 0번째부터 4번째 박스가 존재한다.

한 배열안에는 동일한 타입의 데이터를 넣는 것이 중요하다.

배열은 인덱스가 있어서 삽입/삭제 가 굉장히 쉽다.

Array Decalration (배열 선언)

2가지 방법이 있다. → 1. 객체처럼 배열 선언 2. 대괄호[]로 데이터 선언

배열이 인덱스를 기준으로 데이터가 저장된다.

인덱스를 활용해서 어떻게 데이터를 검색하고 삽입하고 삭제하는지 정확하게 아는 것이 중요하다.

Index position (인덱스 위치)

인덱스를 통해서 어떻게 배열에 접근할 수 있는가?

배열의 요소에 접근하려면 오브젝트의 오브젝트[’key’] 처럼 배열[인덱스] 로 요소에 접근할 수 있다.

배열 밖의 인덱스에 접근하면 undefined 를 출력한다.

배열의 첫번째 요소는 배열[0] 이고, 배열의 마지막 요소는 배열[배열.length-1] 로 접근할 수 있다.

배열은 0부터 시작하기 때문에, 총 길이의 -1 을 하면 제일 마지막 인덱스를 받아올 수 있기 때문이다.

Looping

루프를 돌면서 fruits 배열의 요소를 모두 출력해보자. → 1. for문 , 2. for..of , 3. forEach()

• for 문

• for..of

• forEach()

  

  forEach() 의 구조를 확인해보자 → forEach() 에 ctrl + 클릭을 하면 상단 이미지처럼 forEach() 의 내부 구조에 대한 코드들이 불러오기 된다.

  forEach() 는 콜백함수를 받아온다.

  forEach() 는 정해진 어떤 것을 수행하는 함수이다.

  loop를 돌면서 배열 안에 들어있는 요소마다 개발자가 전달한 액션(콜백함수)을 수행한다.

  
  

  ? → 물음표가 있으면 파라미터를 전달해도 되고, 전달하지 않아도 된다.

  
  우리가 전달한 콜백함수를 value 마다 호출해주고, 콜백함수에는 총 3가지 인자가 들어온다.
  
  첫번째는 value, 우리가 콜백함수를 호출하는 그 value, 배열 안에 있는 값 value 이다.
  
  두번째는 그 value 의 index 이며, 세번째는 그 값이 들어있는 전체적인 배열이 전달된다.
  
  사과와 바나나가 들어있어야 된다.
  
  사과와 사과가 들어있는 인덱스가 내 콜백함수로 들어오고, 그 다음에는 바나나와 바나나가 들어있는 인덱스 1이 이 콜백함수로 들어오게 된다.
  
  

  forEach() 에서는 보통 array 를 받아오지 않는다.

  anonymous 함수(이름이 없는 함수)는 arrow function 을 사용할 수 있다.

  ⇒ forEach 는 배열 안에 들어있는 value 들 마다 내가 전달한 함수(콜백함수)를 출력한다.
  

배열의 추가, 제거, 복사 (Add, delete, copy)

뒤에서부터

• 데이터 넣기 (Add) → push()

  

• 데이터 빼기 (Delete) → pop()

  

앞에서부터

• 데이터 넣기 → unshift

• 데이터 빼기 → shift

  

⇒ shift, unshift 는 pop, push 보다 훨씬 속도가 느리다.

뒤에 있는 데이터를 넣었다가 지우는 것은 기존에 있던 데이터들에서 움직이지 않아도 되어 한 공간의 인덱스에서 넣고 빼고를 할 수 있다. → 빠른 연산 가능

앞에서 데이터를 넣으려면, 기존의 데이터를 한칸씩 뒤로 이동시키기 위해 1칸 뒤에 요소들을 복사한다. 그래서 맨앞 칸을 비운 다음 데이터를 집어넣어야 하기 때문에 속도가 굉장히 오래 걸린다.

앞에서 데이터를 지우려면, 첫번째 데이터를 지우고, 두번째에 있던 데이터를 앞으로 데려오기 위해 복사한다. 한칸씩 앞으로 이동시킨다.

뒤에서 데이터를 생성/제거 하거나, 중간에서 데이터를 생성, 제거하는 것도 인덱스가 있어서 연산 속도가 굉장히 빠르다. 데이터 전체를 이동시키는 것은 속도를 저하시키기 때문에 지양해야 한다.

※ 가능한 한, pop 과 push 만 사용하자!

지정된 위치의 요소를 제거 → splice ( 시작인덱스번호, 지울요소개수(opt) )

? → optional. 즉 값을 지정해도 되고, 안해도 된다는 의미이다.

splice( idx ) → 지정 idx 부터, 이후의 모든 요소 제거됨

idx = 1 인 바나나 → splice(1,1). idx=1 부터 1개 제거로 인해 바나나가 삭제됨

splice(1, 1, ~) → (~) 부분에 데이터를 추가할 수 있다. 앞의 파라미터로 제거된 곳에 데이터가 추가된다.

그래서 splice(1,1) 로 인해 딸기가 제거되고, 그 자리에 초록사과와 수박이 추가된 것을 확인할 수 있다.

배열끼리 합치기 → 배열1.concat(배열2)

concat() 을 통해 7개의 과일이 들어있는 배열이 생성되었다.

배열 안에 있는 concat 라는 API 는 새로운 배열들(ConcatArray)을 받는다.

(concat 을 호출하는 배열) + (새로 전달된 items 라는 배열) ⇒ 2개의 배열을 합해서 ⇒ T[] 를 반환

Searching → indexOf(), includes(), lastIndexOf()

검색할 수 있는 API 에 대해서 배워보자.

• indexOf() → 배열안에 어떤 값이 몇번째 인덱스에 있는지 알고 싶을 때 유용하게 사용할 수 있다.

  

  해당 값이 배열안에 없다면 → (-1) 을 출력한다.

  

• includes() → 배열 안에 해당 값이 있는지 확인하고 싶을 때 사용하면 된다. (true, false 로 결과출력)

  

• (중복된 값이 존재할 경우)

  • indexOf() → (중복된 값이 존재할 경우) 값 중 가장 처음에 만나는 값의 인덱스를 반환한다.

    

  • lastIndexOf() → (중복된 값이 존재할 경우) 값 중 가장 마지막에 위치한 값의 인덱스를 반환한다.