[JavaScript] 배열을 제대로 알아보자

1. 배열 선언

const array1 = new Array();
const array2 = new Array(1, 2, 3);
const array3 = [1, 2, 3];
console.log(array1); // []
console.log(array2); // (3) [1, 2, 3]
console.log(array3); // (3) [1, 2, 3]

2. 인덱스 위치

const books = ['부의 추월차선', '잡스의 기준', '레버리지'];

// 배열 출력
console.log(books); // (3) ["부의 추월차선", "잡스의 기준", "레버리지"]
// 배열의 길이 출력
console.log(books.length); // 3
// 배열의 해당 인덱스의 요소만 출력
console.log(books[1]); // 잡스의 기준
// 배열의 마지막 인덱스 요소 출력
console.log(books[books.length - 1]); // 레버리지

3. 배열의 반복문으로 값 출력하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지'];

// 1. for 반복문
for (let i = 0; i < books.length; i++) {
  console.log(books[i]);
}

// 2. for of 반복문
for (let book of books) {
  console.log(book);
}

// 부의 추월차선
// 잡스의 기준
// 레버리지

// 3. forEach 반복문
// forEach 함수는 값,인덱스 뿐만 아니라 배열도 불러올 수 있다.
books.forEach((element, index) => console.log(element, index)); 

// 부의 추월차선 0
// 잡스의 기준 1
// 레버리지 2

4. push() - 배열 맨끝 인덱스에 요소 더하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지'];

// 새로운 배열 복사
const newBooks = books.slice();
newBooks.push('초예측');
console.log(newBooks); // (4) ["부의 추월차선", "잡스의 기준", "레버리지", "초예측"]

5. pop() - 배열 맨끝 인덱스에 요소 삭제하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지'];

// 새로운 배열 복사
const newBooks = books.slice();
newBooks.pop();
newBooks.pop();
console.log(newBooks); // ["부의 추월차선"]

6. unshift() - 배열 맨앞 인덱스에 요소 더하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지'];

// 새로운 배열 복사
const newBooks = books.slice();
newBooks.unshift('언스크립티드', '머니');
console.log(newBooks); // (5) ["언스크립티드", "머니", "부의 추월차선", "잡스의 기준", "레버리지"]

7. shift() - 배열 맨앞 인덱스에 요소 삭제하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지'];

// 새로운 배열 복사
const newBooks = books.slice();
newBooks.shift();
console.log(newBooks); // (2) ["잡스의 기준", "레버리지"]

⭐️ unshift()와 shift()는 성능이 좋지 않다

unshift()와 shift() 메서드는 0번째 인덱스(맨앞)의 요소를 제거하고 연이은 나머지 값들의 위치를 한칸씩 앞으로 옮기고 제거된 값을 반환합니다. 요소를 제거하고 연이은 나머지 값들의 위치를 한칸씩 앞으로 옮기기 때문에 push()와 pop() 메서드에 비해 연산이 많고 느립니다. 

8. splice() - 인덱스 위치에 있는 요소 삭제하고 더하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지', '언스크립트'];

{
  const newBooks = books.slice();
  newBooks.splice(1, 1); // 인덱스 1부터 1개의 요소 제거
  console.log(newBooks); // (3) ["부의 추월차선", "레버리지", "언스크립트"]
}

{
  const newBooks = books.slice();
  newBooks.splice(1, 2); // 인덱스 1부터 2개의 요소 제거
  console.log(newBooks); // (2) ["부의 추월차선", "언스크립트"]
}

{
  const newBooks = books.slice();
  newBooks.splice(1); // 인덱스 1부터 나머지 요소 제거
  console.log(newBooks); // ["부의 추월차선"]
}

// 해당 인덱스 요소를 삭제하고 요소 추가하기
{
  const newBooks = books.slice();
  newBooks.splice(1, 2, '애플의 기준', '레버리지 개정판'); // 인덱스 1부터 2개의 요소 제거, 요소 추가
  console.log(newBooks); // (4) ["부의 추월차선", "애플의 기준", "레버리지 개정판", "언스크립트"]
}

9. concat() - 배열과 배열 또는 값을 결합시키고 새로운 배열을 반환하기

const books = ['부의 추월차선', '잡스의 기준', '레버리지', '언스크립트'];
const books2 = ['오리지널스', '클루지'];

{
  const newBooks = books.concat(books2);
  console.log(newBooks); // (6) ["부의 추월차선", "잡스의 기준", "레버리지", "언스크립트", "오리지널스", "클루지"]
}

{
  const newBooks = books2.concat(books);
  console.log(newBooks); // (6) ["오리지널스", "클루지", "부의 추월차선", "잡스의 기준", "레버리지", "언스크립트"]
}

10. 배열 안 요소의 인덱스 찾기

const books = ['부의 추월차선', '잡스의 기준', '레버리지', '언스크립트', '잡스의 기준'];

// 배열 안 요소의 인덱스 찾기
console.log(books.indexOf('잡스의 기준')); // 1
console.log(books.indexOf('애플의 기준')); // -1
// 배열 안에 요소가 있는지 검사
console.log(books.includes('부의 추월차선')); // true
console.log(books.includes('애플의 기준')); // false
// 배열 안에 해당하는 요소의 맨끝 인덱스를 반환
console.log(books.lastIndexOf('잡스의 기준')); // 4

참고

배열 제대로 알고 쓰자 - 드림코딩 by 엘리(유튜브)
Array - MDN