Array

김민재·2021년 7월 16일
0

Gotcha JavaScript!

목록 보기
17/45


바구니를 이용해 비슷한 물건을 담아놓듯이 프로그래밍 언어에서 비슷한 종류의 데이터를 묶어서 한 데다가 보관해놓는 것을 자료구조라고한다.
자료구조는 어떤 방식으로 어떤 형식으로 데이터를 담느냐에따라서 다양한 타입들로 나눠진다.

오브젝트는 여기서 토끼와 당근에 속하는데 이러한 오브젝트는 각각의 특징을 가진다.
오브젝트는 서로 연관된 특징과 행동들을 묶어놓는 것을 말한다. 이러한 토끼와 당근들 처럼 비슷한 타입의 오브젝트들을 묶어놓는 것을 자료구조라고 한다.

자바스크립트는 타입이 동적으로 정의되기 때문에 한 바구니 안에 다양한 데이터를 담을 수 는있지만 좋지않다.

나중에 꼭 더 공부해야하는 부분은 자료구조와 알고리즘인데 물건들을 한 데 담은 자료구조중에서도 array, map, set, list 중에서도 single linked list, double linked list냐 이러한 아이들 중에서도 새로운 데이터를 자료구조에 삽입할 때 얼마나 효과적으로 삽입할 수 있는지 삭제 할 때 검색할때 정렬할때도 어떤 알고리즘을 써서 정렬할 수 있는지에 대한 효율성을 같이 공부해야한다.

  1. array 배열

    배열은 칸칸이 촘촘하게 모여있는 자료구조를 말하는데 핵심은 각 칸에는 인덱스가 지정되어있다. 그리고 인덱스는 0부터 시작한다. 텅 텅 비어진 배열이 있고 배열의 사이즈는 5개이며 텅텅 비어진 박스 5개는 서로 모여있으며 인덱스 번호가 매겨져있다.

당근과 토끼를 배열을 이용해서 자료들을 보관할 수 있는데 중요한건 한 배열안에 동일한 타입의 데이터를 넣는 것이 중요하다

배열은 인덱스로 접근이 가능하기 때문에 인덱스로 접근하여 삽입과 삭제가 편하다.

  1. 선언
    배열을 선언할 수 있는 방법은 new 라는 키워드를 이용해서 오브젝트를 만드는 것처럼 배열을 만들거나
    두번째는 대괄호 를 이용해서 대괄호 안에 데이터를 넣어서 배열을 만들 수가 있다

  2. Index position
    배열에서 대괄호 를 이용해서 데이터를 접근할 수가 있다. 배열은 숫자 인덱스 대괄호안에 전달하게 되면 그 인덱스에 해당하는 밸류를 받을 수 있다.
    보통 배열의 첫 번째 아이템을 찾을 때는 0을, 배열에 제일 마지막에 있는 아이템을 찾을 때는 배열에 length에 -1을 해서 마지막에 데이터를 접근할 수가 있다

  3. Looping over an array
    배열을 돌면서 출력하기 위해서는 여러 방법이 존재한다.
    -for문
    for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]);}

-for of문
for (let i of arr) { console.log(fruit);}

참고
for ...in // 객체 순환
for ...of // 배열 값 순환

-forEach 인자로 callback 함수를 받는다. callback 함수는 인자를 세개를 받는데 value를 받을 수 있으며, 두번째로 index 마지막으로는 array자체를 받을 수 도 있다.
arr.forEach(function(arr, index, array){
console.log(arr, index, array)
});

이러한 callback함수처럼 이름이 없는 annonymous함수는 arrow 함수로 표현을 바꿀 수 있다,
arr.forEach((item) => console.log(item));
forEach 배열 안에 들어 있는 value들마다 내가 전달한 콜백 함수를 출력할 수 있다.

  1. Addtion, deletion, copy
    -push: add an item to the end
    아이템, 어떤 밸류를 배열에 제일 뒤 에다가 놓고 싶을 땐 push, api를 사용해 추가할 item을 push안에 넣어준다.
    -pop: remove an item from the end
    배열에서 제일 뒤에서 부터 아이템을 지우고 싶을 땐 pop(), api을 사용하면 된다.
    -unshift: add an item to the benigging
    아이템, 밸류를 맨 앞에다가 새로 넣고싶을 땐 unshift를 , api를 사용해 추가할 item을 unshift 안에 넣어준다.
    -shift: remove an item from the benigging
    아이템, 밸류를 맨 앞에서 빼고 땐 shift를 shift()를, api를 사용한다.

중요한건 shift, unshift는 pop, push에 비해서 많이 느린데 뒤에 있는 아이템을 넣고 뺄땐 배열 메모리에 빈 공간에 데이터를 넣고 지우기때문에 기존에 들어있던 데이터들은 움직이지 않아도 되어서 한 공간에 인덱스를 이용해서 넣고 빼고가된다.
하지만 앞에서 데이터를 넣게 되면 앞 데이터의 첫 메모리 공간을 기준으로 두번째 데이터를 세번째로 옮겨와서 넣고 첫 번째 메모리 공간에 위치한 데이터를 두번째 메모리 공간에 옮겨 놓아서 텅텅 빈데이터로 만든 다음에 새로운 데이터를 집어넣는다. 반대로 데이터를 삭제할 때는 첫 번째 있는 아이템을 지우고 두 번째 있는 아이템을 앞으로 땡겨 오고 또 그 다음에 있는 걸 땡기는 일들을 반복해서 해줘야하기때문에 보다 복잡하다.
따라서! 가능하면 shift unshift를 사용하기 보다는 pop, push를 사용하는게 더 좋다.

note!! shift, unshift are slower than pop, push

-splice: remove an item by index position
아이템을 지정된 포지션에서 지우기 위해서는 splice api를 이용한다. splice()는 원하는 첫번째 인자로 원하는 인덱스만 지정하고 몇 개를 지울건지를 정하는 두 번째 인자를 비우면 우리가 지정한 인덱스 부터 모든 데이터를 다 지워버린다.
따라서 원하는 갯수만 지우고 싶을 땐 시작하는 인덱스와 함께 몇 개를 지우고 싶은 지를 두 번째 인자에 전달해 줘야한다.
또한 splice 한 다음 세번 째 인자로 원하는 데이터를 더 추가할 수도 있다.

-combine two arrays
두가지 배열을 묶어서 만들 기 위해서는 concat을 활용해 합치려는 배열을 넘겨주고 이를 새로운 배열에 받아오면 된다.
const newArr = arr.concat(arr2);

  1. Searching
    -IndexOf

검색할 수 있는 api 로 배열 안에 어떤 값이 몇 번째 인덱스 있는지 알고 싶을 때 유용하게 쓸 수 있다. indexOf , api를 사용해 몇번째 있는지 궁금한 아이템을 넣어주면 해당 아이템의 인덱스값을 리턴한다. 인덱스 같은 경우도 배열안에 없는 값을 출력하면 -1이 출력된다.

-includes
배열에 해당 아이템이 있는지 없는지를 includes()를 사용하면 true 혹은 false로 리턴해준다.

-lastIndexOf
만약 똑같이 item이 배열에 들어가있다 가정한뒤 indexOf로 해당 아이템을 넣으면 제일 첫 번째로 해당하는 값을 만나면 그 값이 들어있는 인덱스를 리턴하지만
반대로 lastIndexOf는 제일 마지막에 들어있는 값의 인덱스를 출력하게 된다,

배열 정렬하는 방법 sort , every sum 같은 부분 읽어보고 오기

profile
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.

0개의 댓글