javascript 기초 - 배열에 관하여(추가, 수정, 조회 메서드)

강의 2-21 ~ 2-23 내용 중

객체

객체object는 자료형의 일종으로 다양한 값을 모아둔 또다른 값라고 합니다. 객체의 종류는 크게 배열array, 함수function가 있다고 합니다.

배열 Array

const fruits = ['사과', '오렌지', '배', '딸기'];
const arrayOfArray = [[1, 2, 3], [4, 5]];

javascript의 배열 특성 상 C++의 vector처럼 앞에 값을 넣을 수 있고 뒤에 값을 넣을 수 있습니다.

.length

.length를 이용하면 배열의 길이를 리턴합니다. arr[arr.length - 1]을 하게 되면 마지막 값을 찾을 수 있습니다.

배열의 값 추가/수정/삭제

const target = [1, 2, 3, 4, 5]
// 추가
target[5] = 6; // 1, 2, 3, 4, 5, 6
targer[target.length] = 7; // 1, 2, 3, 4, 5, 6, 7
target.push = 8; // 1, 2, 3, 4, 5, 6, 7, 8
// 맨 앞에 추가
target.unshift(0); //0, 1, 2, 3, 4, 5, 6, 7, 8
// 수정
target[0] = -1 // -1, 1, 2, 3, 4, 5, 6, 7, 8
// 삭제
target.pop();	// -1, 1, 2, 3, 4, 5, 6, 7
// 맨 앞에 값 삭제
target.shift();	// 1, 2, 3, 4, 5, 6, 7
// 원하는 인덱스의 값을 삭제
// .splice(시작 인덱스, 끝나는 인덱스) 그 지점까지의 값을 삭제
target.splice(2, 2) // 1, 2, 5, 6, 7
// 지워진 자리에 값의 추가가 가능
target.splice(2, 2, 'a', 'b') // 1, 2, a, b, 5, 6, 7
// 지우지 않고도 추가가 가능합니다. 시작인덱스를 지우지 말고 값을 추가.
target.splice(4, 0, 'c')	// 1, 2, a, b, c, 5, 6, 7

그런데 const는 상수인데 어떻게 바꿀 수 있냐? 라는 질문의 답은 객체 내부 요소를 바꾸는 것은 가능하다는 것입니다. 하지만, 객체 자체를 바꾸지는 못합니다(재할당이 불가능하다고 보셔도 좋습니다.)

const arr = [1, 2, 3]
arr[arr.length - 1] = null;

번외로, 이런식으로 삭제해도 되지 않냐 하지만, arr를 출력하게 되면 (3) 1 2 null이 출력 됩니다.

배열에서 값 찾기 .includes() / .indexOf() / .lastIndexOf()

const target = ['a', 'b', 'c'];
const result = target.includes('b'); // true를 할당
const result2 = target.lastIndexOf('c'); // 2을 할당
const result3 = target.indexOf('d') // 못 찾았으니 -1을 할당

.includes()는 값이 있는지 파악한 후 true와 false을 할당해주는 역할을 수행합니다. 이와는 다르게 .indexOf()와 .lastIndexOf()는 값을 찾은 후 인덱스의 값도 리턴해주는 역할을 수행합니다. 만약 못 찾았다면 -1을 리턴한다는 것도 중요한 특징이라고 생각합니다. 이 둘의 차이는 찾는 시작점입니다. .indexOf()의 경우 앞에서부터 찾기 시작하고 lastIndexOf()의 경우는 뒤에서 부터 찾기 시작합니다.

참고로, 중복이 있을 경우 모든 인덱스를 리턴하지 않고 먼저 찾은 인덱스를 리턴하므로 주의하시길 바랍니다.

메서드 응용

const arr = [1, 2, 3, 4, 3];
arr.indexOf(3); // 2
arr.splice(2, 1);
arr.indexOf(3); // 3
arr.splice(3, 1);
arr.indexOf(3); // -1

중복된 값을 삭제하는 과정에서 너무 보기 불친절한 코드가 되므로, 반복문을 사용해서 코드를 간소화해주면 좋습니다. 위에 5줄을 잡아먹었던 코드를 2줄로 간단하게 간소화 시킬 수 있습니다.

let index = arr.indexOf(3);
while(index > -1) {
  arr.splice(index, 1);
  index = arr.indexOf(3);
}