위코드 사전 스터디를 듣고 쓰는 글입니다.
수업 내용을 참고/인용하여 작성했습니다.

Array란?

배열입니다.
지난번 참조형 데이터 타입에서 한번 본 친구입니다.

let sample = [data1, 데이터2, true, 0.5];

자바스크립트 배열은 여러 변수의 집합이며, 데이터를 대량으로 연산할 때 도움이 됩니다.
만약 1부터 100개까지 변수를 만들어서 이 변수들을 전부 더해야 한다는 문제가 주어지면 어떻게 될까요?
심지어 이 값들이 숫자와 문자와 불린 값들이 전부 섞여있다면?

let variable1 = '1';
let variable2 = '변수 2';
let variable3 =  false;
.
.
.

3개만 썼는데도 벌써 힘들어요!
이것을 배열로 바꿔서 쓰면, 적어도 let 선언을 한번만 해준다는 점에서 굉장히 시간을 단축할 수 있게 됩니다.

let variable = [1, '변수 2', false];

어쨌든 배열을 사용할때의 장점은 나중에 본격적으로 코드를 짤 때 빛을 발할 것 같네요.아직은 체감이 되지 않습니다.

배열 엘리먼트에 접근하기

배열 대괄호에 들어있는 저 데이터들을 요소,element라고 합니다.
데이터들을 일렬로 세워둔 건 좋은데, 이제 저 친구들을 불러서 어떻게든 써먹어야겠죠?
일단 배열을 새로 만들어볼게요.

let zoo = ['호랑이','기린','코뿔소','토끼']

동물원에 놀러와서 토끼를 먼저 보기로 했습니다.
한가지 특이한 점이 있다면, 자바스크립트에서는 순서를 index라고 하는데, 이 index는 0번부터 시작한다는 겁니다.

let zoo = ['호랑이','기린','코뿔소','토끼']
//순서대로 0,1,2,3번 인덱스를 가지고 있음

여기서 토끼를 불러와본다면,

console.log(zoo[3]);
let rabbit = zoo[3];

이 되겠네요. 물론 아랫줄처럼 변수에도 담을 수 있습니다.

배열 엘리먼트 수정하기

동물원에서 코뿔소 대신 사막여우를 대신 들여오기로 하였어요.
코뿔소는 인덱스 2번이니까, 2번 엘리먼트를 수정합니다.

zoo[2] = '사막여우';

간단히 수정이 완료되었습니다.

배열 엘리먼트 추가하기

여기서 동물 하나를 더 들여올 수 있을까요?물론 됩니다.
엘리먼트를 추가하는 메소드는 unshift와.push 인데, push를 이용하면 배열 맨 마지막에 엘리먼트를 추가할 수 있습니다.

zoo.push('펭귄');
console.log(zoo);
//Array(5) [ "호랑이", "기린", "사막여우", "토끼" ,"펭귄"]

5번째 동물,인덱스 번호로는 4번인 펭귄이 새로 들어온 모습을 확인했습니다.

배열 엘리먼트 삭제하기

어느날 동물원에서 이벤트를 위해 토끼를 잠시 다른 곳으로 옮겨야 하는 일이 생겼습니다.
삭제에는 보다 많은 메소드가 있습니다.

pop();//항상 맨 마지막 index에 있는 엘리먼트 삭제

shift();//항상 맨 첫번째(0번 index)에 있는 엘리먼트 삭제

splice(start[, deleteCount[, item1[, item2[, ...]]]]
//n번째 index부터 n번째 index까지 영역을 지정하여 삭제

여기서 토끼가 그대로 마지막 번호의 동물이었다면 pop을 이용해 자리를 비우면 되었겠지만 안되네요! 그래서 splice메소드를 이용해 보기로 합니다.

start 지점에는 배열의 변경을 시작할 인덱스 번호를 지정해줍니다.
deleteCount 지점에는 배열에서 제거할 요소의 수를 지정해줍니다. 0 이하의 수를 지정하면 어떤 요소도 제거되지 않습니다.

zoo.splice(-2,1)//음수로 시작을 지정하는 법.배열의 끝에서부터 2번째인 토끼를 선택해 삭제
zoo.splice(3,1)//양수로 시작을 지정하는 법 배열의 처음에서부터 3번째인 토끼를 선택해 삭제

console.log(zoo);//Array(4) [ "호랑이", "기린", "코뿔소", "펭귄" ] 토끼 자리가 삭제되었어요..


//배열의 길이보다 큰 수일 때에는
zoo.splice(8)
zoo.splice(7,3)
//아무것도 삭제되지 않습니다.

그리고 이벤트가 끝나 동물원에 돌아온 토끼가, 자신의 자리가 없어진 것을 보자 낙심합니다.

토끼에게 사과하고 다시 자리를 만들어줘야겠네요. 이번에도 splice메소드를 이용합니다.

zoo.splice(3,0,'토끼')//처음에서부터 3번째 자리에, 0을 넣어 아무것도 삭제하지 않고 '토끼'라는 데이터를 추가

이런 방식으로 item 자리에 데이터를 넣으면, 굳이push 메소드를 쓰지 않고도 데이터를 추가할 수 있습니다.

참고 사이트 : https://im-developer.tistory.com/103

다차원 배열

배열 안에 또 다른 배열이 있는 경우입니다.
동물원에서 호랑이가 새끼를 낳았다고 해 볼까요?

let zoo = [["호랑이1","호랑이2","호랑이3"],"기린", "코뿔소", "토끼", "펭귄" ]
zoo[0] = Array(3) [ "호랑이1", "호랑이2", "호랑이3" ]

여기서 호랑이3 이라는 요소에 접근할 때는

zoo[0][2]//0번째 index 엘리먼트에서 2번째 index 엘리먼트

이렇게 접근할 수 있습니다.

마무리

배열의 기본만 하려 했는데 양이 너무 많아진 느낌이네요..
배열에서 사용할 수 있는 slice 메소드는 나중에 적도록 하겠습니다.