JS 배열

배열의 특성

• JS의 배열은 객체이며, 인덱스와 값(index: value)을 연결하는 일종의 딕셔너리 형태임
• 예시처럼 배열을 만들 수 있음
• 인덱스는 0부터 시작함을 알면됨

// 리터럴로
const arr = [1, 2, 3];

const arr2 = new Array([1, 2, 3]);

// 인덱스로 접근해서 값 확인
arr[0];
arr[1];
arr[2];

// 값 추가는 직접 인덱스에 접근하거나 메소드 사용
arr[3] = 4;
arr.push(5);

// 갑자기 인덱스를 건너뛰게 된다면 중간의 값이 비어버리게 추가됨
// 빈 공간은 알아서 채워지는 것이 아님(undefined가 됨), 빈공간이 생길 수 있음
arr[9] = 10;

// 아예 없는 것을 쓰면? 인덱스가 아니더라도 그냥 값이 추가됨
arr.prop = [6, 7];

• 이는 JS도 객체이기 떄문에 속성을 가질 수 있기에 arr.prop도 가능한 것임, 객체의 속성 일부분으로 간주되는 것

length

• 배열의 length는 길이가 아닌 배열이 가진 가장 높은 인덱스를 추적함
• 아래 예시처럼 빈 값을 인덱스를 넘어서 넣어도 길이가 4가 아닌 10이 나옴(가장 높은 인덱스를 추적하기에)

const arr = [1, 2, 3];

arr[9] = undefined;

arr.length // 10

• length는 배열 요소 하나하나를 가지고 있는 그 총합의 길이라고 생각했지만 그게 아님
• 길이를 강제로 조작해도 바뀜(그만큼 빈 공간이 생겨버림)

arr.length = 20;

arr.length // 20

// 이러면 아예 배열이 날아감(배열은 불변이 아닌 참조값이라 가능함)
arr.length = 0;

arr 

• 이는 객체로 인식하기 때문에 초래하는 결과들임
• 그래서 length를 다룰 땐 주의해야함, 원본 배열이 망가질 수 있음

배열 순회

• 배열의 접근에 있어서 이에 대해서 반복문을 써서 순회를 할 수 있음(인덱스를 자동화해서 순회 가능, 루프를 돔)

const arr = [1, 2, 3];

// for & while을 활용해서 배열의 요소를 하나씩 다 접근할 수 있음
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

while (j < arr.length) {
  console.log(arr[j]);

  j = j + 1;
}


// 객체 반복할 때 사용, 하지만 권장하는 방식은 아님
for (const value of arr) {
  console.log(value);
}

for (const index in arr) {
  console.log(value);
}

• 초기화를 하고 참이될 조건식을 실행하고 계속 평가하면서 값이 바뀌면서 조건을 도달할떄까지 반복을 함(그 과정이 반복됨)
• 참고자료

배열 다루기

• 앞서 끝 부분의 아이템을 넣거나, 순회해서 배열을 출력하거나, 길이를 재는 등 했음
• 이외에도 예시처럼 다양하게 배열을 다뤄서 처리해볼 수 있음

const squidMembers = ['기훈', '상우', '일남', '준호', '새벽', '알리'];

// 배열의 끝에 요소 추가
squidMemebers.push('덕수');

// 배열의 앞에 요소 추가
squidMembers.unshift('미녀');

// 배열에 해당하는 값이 있는지 확인(없으면 -1을 리턴하고 값이 있으면 해당 인덱스 값을 리턴함)
// 배열에서 요소의 인덱스 찾기
squidMembers.indexOf('Kevin'); // -1
squidMembers.indexOf('상우'); // 2
// 배열의 인덱스를 끝부분부터 시작해서 검색함
squidMembers.lastIndexOf('상우'); // 2

// 배열에서 요소 포함 여부 확인
squidMembers.includes('상우'); // true
squidMembers.includes('kevin'); // false

// 배열의 앞 요소 지우기
squidMembers.shift('미녀'); // unshift 반대

// 배열의 끝 요소 지우기
squidMembers.pop('덕수'); // push 반대

// 배열의 특정 인덱스 요소 지우기(하지만 원본 배열이 손상이 됨)
squidMembers.splice(2, 1); // 2번째부터 1개 지워짐
squidMembers.splice(2, 3); // 2번쨰부터 3개 지워짐

유사 배열 객체

• Array Like Object라고 함
• arguments 객체가 그 중 하나임, 중괄호로 그 안에 배열과 같은 객체처럼 가지고 있음
• 하지만 배열처럼 생겼지만 배열 메소드를 사용할 수 없음
• Node List도 비슷함, HTML Elements 하나하나가 노드로 그 Node List들은 배열과 유사하게 생김
• 배열과 유사하나 push, reduce, pop 등을 쓸 수 없음

// arguments 객체
function func() {
  console.log(arguments);
  console.log([1,2].__proto__)
}

func(1,2,3,4,5,6)

// Node List
const nodeList = document.querySelectorAll('li')

• typeof로 해도 알 수 없음, 그래서 이럴 땐 Array.isArray 메소드로 확인할 수 있음, 이 땐 유사 배열 객체도 걸러냄
• 즉, 앞서 말한 arguments, nodelist등을 걸러낼 수 있음
• 만약, 그런데 이런 유사 배열 객체에 배열과 같은 기능을 쓰고 싶다면? Array.from 메소드를 통해서 변환해서 배열의 메소드를 쓸 수 있음

Array.isArray(nodeList);

// 배열 메소드 사용 가능
const covertNodeList = Array.from(nodeList);
convertNodeList.push('oh!');

• 그래서 위의 2가지 메소드를 잘 쓰면 좋음(단, 호환성 체크는 해야함)
• 배열을 특이하게 취급하기에 왜 바꿔야 하는지 그리고 이런 유사 배열 객체와 비교해서 생각하면 좋음