배열에 대해서 / APIs 정리

첫번째로는 배열을 어떻게 만들 수 있는지 

배열을 선언하는 Array declaration에 대해서 알아보자

new라는 키워드를 이용해서 오브젝트를 만드는 것처럼 하는 거도 있고

대괄호를이용해서 할 수도 있다. 즉 인덱스를 이용해서 데이터를 검색하고 삽입 삭제하는 방법을 아는게 중요하다 

 

 

 

다음으로 인덱스를 통해서 어떻게 배열에 접근하는지에 대해서 알아보자.

fruit에 두가지의 문자열 데이터가 있고 사과그림과 바나나그림을 넣어서 작성해보면 아래와 같은데

fruits의 length는 2이고 배열은 숫자 인덱스를 전달하게되면(0~2) 인덱스에 해당하는 value들을 받아올 수 있다.

아래 그림에서 fruit[2]는 undefined가 나온다. 보통 배열의 첫번째 아이템을 찾을 때는 0을 많이 쓰고 배열의 마지막에 있는 아이템을 찾을 때는 fruits.length - 1을 해서 마지막에 데이터를 접근할 수 있다. 배열은 인덱스가 0부터 시작하기 때문이다.  

다음으로 배열안에 있는 데이터를 돌면서 출력하는 것을 해보면 Looping

 i를 0부터 시작해서 i가 fruits의 length 이전까지 돌면서 i를 계속 증가시켜주어 fruits의 인덱스를 받아서 돌아가면서 출력하게 되면 0~1까지 바나나가 출력되게 된다. 두번째 방법으로 for of를 사용하는 것인데 let이라는 fruit변수에 fruits안에 들어있는 이라고 표현을 하면 사과 바나나가 똑같이 나오게 된다.

더 간단한 방법은 forEach라는 방법이 있다.

fruits에 있는 forEach()라는 API를 이용해서 출력을 할 수 있는데 forEach는 바로 콜백함수를 받아온다. 함수를 호출하거나 API를 이용할 때는 무작정 쓰거나 문서에 있는 걸 쓰지말고 직접선언된 곳으로 가서 함수는 무엇이며 파라미터는 어떤 파라미터를 전달할 수 있는지 리턴되는 값은 어떤게 있는지 확인하면서 봐야한다. forEach는 어떠한 것을 수행하는 함수인데 배열안에 들어있는 값마다 전달한 콜백함수를 수행한다고 나와있다. 사용자가 전달한 함수를 value 하나하나마다 호출해준다.

 

두번째는 thisArg?라고 나와있는데 이것은 파라미터를 전달해도 되고 전달하지 않아도 된다는 것이다. 즉 전달한 콜백함수를 value마다 호출해주고 콜백함수에는 세가지 인자가 들어오는데 첫번째는 value(배열에 값), 그 배열의 인덱스도 들어오고 전체적인 배열 T도 받을 수 있다. 즉 사과와 사과 인덱스 0 들어오고 바나나와 바나나 인덱스 1이 차례로 들어온다. 아래와 같이 arrow function으로도 나타낼 수 있는데 function과 같이 이름이 없는 함수일 때 사용할 수 있다.

 

결론적으로 forEach는 배열안에 있는 value들마다 사용자가 전달한 함수를 전달한다.

 

네번째로는 배열에 데이터를 넣고 빼고 복사할 수 있는 방법이 있는데

어떠한 value를 제일 뒤에다가 넣고 싶으면 push가 있고

제일 뒤에꺼부터 빼는 것은 pop이 있다.

이렇게 해서 아래와 같이 push와 pop을 해보면 아래 콘솔창과 같이 나타나게 된다.

앞에서와 넣는거과 빼는것을 나타내는 것은 각각 unshift와 shift가 있다.

unshift를 이용해서 앞에서부터 데이터를 넣을 수가 있는데 아래 콘솔창과 같이 나타나게 된다.

또 shift를 이용해서 앞에서부터 데이터를 빼면 사과와 바나나만 나타나게 된다.

여기서 shift와 unshift는 pop과 push보다 더 느리다. 배열에 아이템들이 들어있을 때 뒤에서부터 빼고 넣는것은 넣었다가 지웠다가 하기 때문에 기존에 있던 데이터들은 움직이지 않아도 되서

한 공간에 인덱스를 이용해서 넣고 빼고를 할 수 있다.(push와 pop같은 경우)

 

반대로 앞에서부터 데이터를 넣게 될려면 두번째에 있던 데이터를세번쨰로 옮겨넣고 첫번째에 있는 데이터를 두번째 박스에 넣고 텅텅비게 만든다음에 새로운 데이터를 집어 넣는다.

 

반대로 데이터를 삭제할 때는 첫번째 데이터를 지우고 두번째 데이터를 앞으로 땡기고 세번째 아이템을 앞으로 땡겨오고 하는 일들을 계속해서 반복해줘야 한다.

그래서 배열의 길이가 길면 길수록 shitf하는 일들을 반복적으로 해야하기 때문에 가능하면 push와 pop을 사용하자.(즉 제일 뒤에서 데이터를 접근하는 것은 빠르고 중간에 데이터를 넣고 빼는거도 인덱스를 활용하기 때문에 빠르다)

 

아래그림과 같이 splice를 이용해보면 splice를 써서 지정된 위치에서 데이터를 삭제하고 넣을 수 있다.

splice(1)이라고 하면 1번째 인덱스 뒤에 있는 것들을 다 지우게 되고 splice(1, 1)이라고 하면 1번째 인덱스 하나만 지워지게 된다.

splice를 한 다음에 원하는 데이터를 추가할 수가 있는데 splice(1, 1, 사과, 수박)이렇게 하면 1번째 인덱스에 있는 것이 지워지고 그 자리에 사과와 수박이 들어가 있는 것을 볼 수 있다.

 

즉 splice는 지우고 나서 사용자가 원하는 데이터를 넣을 수도 있으니까 매우 유용하게 쓰인다.

한가지 더 보면 두가지의 배열을 묶어서도 만들 수가 있다.

fruits2와 같이 새로운 과일을 만들어서 기존에 있던 array에 concat를이용해서 fruits2라는 다른 배열을 붙이면

새로 묶여진 배열이 합해져서 리턴이 되고 아래콘솔과 같이 나타나게 된다.

concat이라는 API는 concat이라는 배열에다가 새로전달된 items라는 것들을 합해서 새로운 배열을 리턴한다고 나와있다.

다음으로는 Searching에 대해서 알아볼건데

배열안에 어떠한 값이 몇번째에 있는지 알고 싶을 때 쓰는 것이다.

만약에 사과가 몇번째 인덱스에 있는지 알고싶으면 indexOf라는 API를 사용하면 된다. 사과가 0번째 인덱스에 있다고 아래와 같이 알 수 있다. 수박은 2번째로 나오게 된다. 

다음으로 includes가 있는데 이것은 true 또는 false로 리턴하는 함수이다. 없는 값을 출력하게 되면 false로 나오게 된다.

indexOf도 없는 값을 출력하면 -1로 출력이 된다.

 

마지막으로 lastIndexOf를 보자

사과를 한개 더 넣어서 사과가 두개인 인덱스에서 indexOf를 쓰게되면 제일처음 사과의 인덱스인 0이 나오게 되고

lastIndexOf를 쓰게되면 제일 마지막 사과의 인덱스를 출력하게 된다. 

여기까지 자바스크립트의 기본적인 배열 APIs에 대해서 알아보았다. 배열을 어떻게 선언하는지 인덱스를 어떻게 접근하는지 for , forEach를 이용하여 순환하면서 값들을 출력하거나 원하는 액션들을 할 수 있는지 데이터를 제일 뒤에서 넣고 빼는거 등등을 배워보았다. 

 

참고: https://www.youtube.com/watch?v=yOdAVDuHUKQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8