[드림코딩]자바스크립트 기초 정리 ⑥ 배열의 개념과 배열 APIs

Object 오브젝트와 자료구조 ?

 

오브젝트는 여기서 토끼와 당근을 말한다.

토끼에는 귀 두개 라는 property와 뛴다, 먹는다 라는 method가 존재한다.

당근에는 주황색과 비타민이라는 property만 존재하고 행동을 하는 method는 없다

이렇게 서로 연관된 특징, 행동을 묶어놓는 것을 object 오브젝트라 한다.

 

 

여기서 토끼와 당근같은 비슷한 오브젝트를 묶는 것을 자료구조라 한다.

이렇게 비슷한 종류의 데이터를 한 곳에 모아놓는데 자바스크립트는 동적타입언어라

여러종류의 데이터를 한 곳에 같이 담는 것이 가능하다. (ex. 되도록 하지말기)

 

Array declaration

 

Array를 만들 때,

arr1 보다 arr2가 더 흔하게 쓰이는 방법이다. (대괄호에 배열 넣어주기)

총 길이는 2로 0번째 인덱스에는 숫자 1, 1번째 인덱스에는 숫자 2가 들어있다.

배열은 인덱스 기준으로 저장이 되기 때문에 인덱스를 활용해서

어떻게 데이터를 검색하고 삽입하는지 정확하게 아는 것이 중요하다.

 

Index position

인덱스를 통해 어떻게 배열에 접근할 수 있을까?

 

 

첫 번째 사과에 접근하려면 배열에서 대괄호를 이용해 접근가능하다. ( 오브젝트와 비슷한 모양 ex. ['key'] )

배열은 숫자, 인덱스를 입력해야 그에 해당하는 벨류를 받아올 수 있다 ex. [1]

배열에 없는 숫자를 넣으면 언디파인드가 뜨고

보통 배열의 첫 번째 아이템 찾을때는 0을 사용하고 마지막 아이템은 배열.length-1 을 해준다

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

 

Looping over an array

배열 안에 들어있는 전체적인 데이터를 빙글빙글 돌면서 출력하는 것

 

 

c. fruits의 forEach라는 API를 이용해서 출력한다

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

 

커맨드키 누르고 API (forEach) 클릭하면 이게 선언 된 곳으로 이동한다

함수호출하거나 API쓸땐 직접 선언된 곳으로 와서 함수가 뭔지, 리턴이 뭐가 되는지 등등 직접 보고 쓰면서 배워야한다

 

 

forEach는 배열 안에 들어있는 값 마다 우리가 전달한 액션(콜백함수)를 실행하는데

벨류 하나하나 마다 호출해준다. thisArg뒤에 붙은 ?는 파라미터를 전달해도 되고 안해도 된다는 의미

 

 

forEach 에서 보통은 array를 받아오지 않고 여기선 index도 함께 생략한다

그리고 이름이 없는 function은 애로우함수를 사용이 가능하여 위와같이 사용한다.

그래서 forEach는 배열안에 들어있는 value들 마다 내가 전달한 함수를 출력한다.

(여기선 함수 안에 console.log 를 작성하여서 콘솔창에 fruit 배열에 있는 값이 하나씩 출력된다)

 

Addition, deletion, copy

배열에 데이터를 넣고, 빼고, 복사하는 방법

• push, pop
• unshift, shift
• splice
• concat

 

Push, Pop

Unshift, Shift

 

배열의 제일 끝에 데이터를 추가하는 건 push, 제거하는 건 pop을 사용한다.

 

 

배열의 앞에서부터 데이터를 추가, 제거는 unshift와 shift를 사용한다.

하지만 배열의 앞에서부터 데이터를 추가 및 제거하는 건 앞에서 설명했던 push, pop보다 속도가 느리다. 왜그럴까?

 

 

배열에 아이템이 있을 때, 뒤에서부터 추가 및 제거하는 것은 빈 공간에 데이터를 넣었다 뺐다 하여

기존의 (앞에 있는) 데이터들은 움직이지 않기 때문에 한 공간의 인덱스를 이용해 넣고 빼고가 가능하기 때문에

속도가 빠르다

 

반대로 앞에 있던 데이터를 제거하면 그 바로 뒤에 있던 데이터를 앞의 공간에 밀어서 채워주고,

그럼 그 비어진 공간에는 또 다시 뒤의 데이터를 밀어서 채워주고.. 를 반복하게 된다.

 

따라서 가능하면 pop, puch 를 사용하는 방법이 좋다.

 

Splice

 

splice 를 사용하면 아이템을 지정 된 포지션에서 제거하는 것도 가능하다.

만약 위처럼 원하는 인덱스만 지정하고 몇개를 지울 것인지 작성하지 않으면 우리가 지정한 인덱스부터 그 뒤의 데이터까지

모두 지워버린다. 그래서 콘솔창의 결괏값을 보면 1(바나나) 뒤의 모든 데이터(딸기, 복숭아, 레몬)까지 모두 지워져서

fruits를 다시 출력했을 땐 0번째 인덱스였던 사과만 남았다.

 

 

제거 뿐 아니라 데이터의 추가도 가능하다

원래 인덱스 1의 자리에 있던 딸기를 제거하고 그 자리에 사과와 수박을 추가했다.

 

Concat

 

만약 두 가지의 배열을 묶고 싶다면 concat을 사용한다.

fruits2라는 새로운 과일 배열을 만들어서 기존에 있던 fruits array에 concat을 붙이고

fruits2 배열을 인자로 받는다. 그리고 이걸 newFruits라는 새로운 변수로 받아온다

 

검사, 검색할 수 있는 API

 

indexOf는 값이 몇 번째에 있는지 알려준다. (만약 없는 값을 집어넣으면 -1로 출력)

includes는 값이 있는지 없는지를 true/false로 알려준다

 

 

만약 배열에 똑같은 사과 2개가 들어있다면?

indexOf는 가장 처음에 있는 사과 0이 나오고 lastIndexOf는 가장 마지막 순서를 나오게 한다