Javascript _배열

1. 배열

자바스크립트의 모든 값은 배열의 요소가 될 수 있다. (원시값, 객체, 함수, 배열 등)
배열의 요소들은 자신의 위치를 나타내는 정수인 인덱스를 갖는다.
인덱스는 배열의 요소에 접근할 때 사용한다.
대부분의 프로그래밍 언어에서 인덱스는 0부터 시작한다.

const fruits = ['사과', '오렌지', '배', '딸기'];
  console.log(fruits[0]);  //인덱스 0부터 시작
  console.log(fruits[1]);
  console.log(fruits[2]);
  console.log(fruits[3]);

  사과
  오렌지
  배
  딸기

배열안에 배열을 넣는 것도 가능하다. (이차원 배열)
배열의 요소는 중복도 가능하고, 빈값도 가능하다.

const arrayOfArray = [[1, 2, 3], [4, 5]];
arrayOfArray[0]; // [1, 2, 3]
const a = 10;
const b = 20;

const variableArray = [a, b, 30];
variableArray[1]; // 20 (b의 값)

---

2. 배열의 length 프로퍼티

배열의 요수 개수, 즉 배열의 길이를 나타낼때 배열명 뒤에 .length 프로퍼티를 사용한다.

  const everything = ['사과', 1, undefined, true, '배열', null];
  console.log(everything.length);

배열의 요소 개수-1 은 마지막 요소의 인덱스가 된다.

const findLastElement = ['a', 'b', 'c', 'd', 'e'];
  console.log(findLastElement[findLastElement.length - 1]);

  e

---

3. 배열 퀴즈

다음 배열에서 ‘라’를 모두 제거하세요. indexOf와 splice를 사용하세요.
const arr = ['가', '라', '다', '라', '마', '라'];

(힌트: 반복문을 사용하면 모두 제거할 수 있습니다.)

아직 반복문이 익숙하지 못한 나에게는 어려웠다...
.indexOf -> 배열에서 요소의 인덱스를 앞순서대로 찾는다.
.splice -> 배열의 첫번째나 마지막 요소가 아닌 중간에 위치한 요소를 제거한다.
( 배열명.splice(시작 인덱스, 제거할 요소의 개수);)
두 기능을 사용하여 문제를 해결한다.
먼저 순서대로 풀어보자면

arr.indexOf('라'); // '라' 요소를 찾는다.
>1 // '라' 요소 인덱스

arr.splice(1,1); // 인덱스1에 위치한 요소 1개만 제거
>["라"] //

arr
>["가", "다", "라", "마", "라"] //첫번째 '라' 제거

-------------------------------------------------------------
  
arr.indexOf('라'); // '라' 요소를 찾는다.
>2 // '라' 요소 인덱스

arr.splice(2,1); // 인덱스2에 위치한 요소 1개만 제거
>["라"] //

arr
>["가", "다", "마", "라"] //두번째 '라' 제거

-------------------------------------------------------------
  
arr.indexOf('라'); // '라' 요소를 찾는다.
>2 // '라' 요소 인덱스

arr.splice(3,1); // 인덱스2에 위치한 요소 1개만 제거
>["라"] //

arr
>["가", "다", "마"] //마지막 '라' 제거

이걸 반복문으로 표현해주면 된다.

const arr = ['가', '라', '다', '라', '마', '라'];

while(arr.indexOf('라') > -1 ){ //'라'요소가 존재하는 경우 실행
  arr.splice(arr.indexOf('라'),1) //'라'요소 인덱스에 위치한 요소 1개만 제거
} 

console.log(arr)
["가", "다", "마"] //'라' 요소가 제거되었다.

여기서 arr.indexOf('라') 은 중복되므로 이 값을 변수로 선언해주면 아래와 같이 더 깔끔한 코드를 작성할 수 있다.

let index = arr.indexOf('라');

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

/*
arr.splice(index, 1); 에서 index는 1을 유지하여 '라'요소 외의 다른 요소를 삭제하며 무한반복문이 된다.
index = arr.indexOf('라'); 를 추가하여 index를 다시 선언해주어야 한다. 
*/

---

++) 반복문에서 arr.indexOf(1) 값이 false 일때

const arr = [1, 2, 3, 4, 5];

if (arr.indexOf(1)) { //1요소의 인덱스가 0이므로 false
    console.log('1 찾음');
} else {
    console.log('1 못찾음'); // false 값이 반환되게 됨
}

// 1 못찾음

조건문에 arr.indexOf(1) > -1 을 사용하여 1요소의 존재여부를 가려주면 문제가 발생하지 않는다.
(.indexOf 를 쓸때는 거의 > -1 을 함께 사용하여 주는 경우가 많다.)

const arr = [1, 2, 3, 4, 5];

if (arr.indexOf(1) > -1) { //1요소의 인덱스가 0이므로 false
    console.log('1 찾음');
} else {
    console.log('1 못찾음'); // false 값이 반환되게 됨
}

//  1 찾음

---

출처 - 이 포스트는 제로초님의 youtube - ES2021 자바스크립트 강좌 와
이웅모님의 저서 <모던 자바스크립트 Deep Dive>를 참고하여 작성하였습니다.