Array 배열

배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용

Object: 서로 연관된 특징과 행동들을 묶어 놓은 것 (ex. 사람, 자동차)
자료구조: 비슷한 타입의 Object들을 묶어 놓은 것

JavaScript는 dynamically typed language로 타입이 동적으로 정의가 됨

배열에는 어떤 타입의 자바스크립트 데이터도 담을 수 있으며, 자바스크립트는 명시적인 타입이 없는(untyped) 언어이므로 배열의 원소가 반드시 같은 타입일 필요는 없으나 이런 식의 프로그래밍은 지양

1. 배열 선언 및 인덱스를 이용한 데이터 접근

const array1 = new Array();
const array2 = [1, 2, 3, 4, 5];
console.log(array2[0]); // 배열의 첫번째 데이터 검색
console.log(array2[array2.length - 1]); // 배열의 마지막 데이터 검색
console.log(array2[5]); // undefined(아무것도 들어있지 않음)

※ 배열이 인덱스를 기준으로 데이터가 저장되기 때문에 인덱스로 데이터 검색, 삽입, 삭제가 어떻게 이루어지는지 파악하는 것이 중요!

2. 배열 루프(순환)를 이용한 값 출력

'arr'라는 배열이 있다는 가정 하에,

1) for

for (let i = 0; i < arr.length; i++) {
  cosole.log(arr[i]);
}

2) for of (배열 안의 데이터를 한번씩 순차적으로 할당하면서 블럭을 실행)

for(let item of arr) {
  console.log(arr[item]);  
}

3) forEach (배열 안에 들어있는 값마다 내가 전달한 콜백함수를 수행(출력)하는 API)

arr.forEach(function(item, index, array) {
  console.log(item); 
}) // array 인자는 잘 사용하지 않음

이름이 없는 함수 (annonymous function)는 화살표 함수 (arrow function) 사용 가능
한 줄만 있는 경우, 괄호와 세미콜론(;) 생략 가능

arr.forEach((item) => console.log(item));

3. 배열에 데이터 삽입, 삭제

'arr = [1, 2, 3];'라는 배열이 있다는 가정 하에,

1) push: 배열의 맨 뒤에 데이터 삽입
arr.push('😁');
console.log(arr); // [1, 2, 3, "😁"]

2) pop: 배열의 맨 뒤에 데이터 삭제
arr.pop();
console.log(arr); // [1, 2, 3]

3) unshift: 배열의 맨 앞에 데이터 삽입
arr.unshift('😢', '😂');
console.log(arr); // ["😢", "😂", 1, 2, 3]

4) shift: 배열의 맨 앞에 데이터 삭제
arr.shift();
console.log(arr); // ["😂", 1, 2, 3]
arr.shift();
console.log(arr); // [1, 2, 3]

※ push와 pop 보다 unshift와 shift는 속도가 매우 느림
배열의 뒤에서 데이터를 삽입, 삭제하는 경우 빈 공간에 작업하기 때문에 기존 데이터들은 움직일 필요 없음(☆맨 뒤에서 데이터 접근하는 것은 매우 빠름!)
배열의 앞에 데이터를 삽입, 삭제하는 경우에는 기존 데이터들이 옆으로 이동하는 움직임이 발생함으로써 전체 데이터가 움직이기 때문에 느림(배열의 길이가 길수록 더 느림)

---

배열 arr = [1, 2, 3, 4, 5]; 라고 가정 하에,
(아래의 경우 arr가 초기화 되었다는 전제로 예시 이해)

5) splice(; 두 끝을 꼬아서 잇다, 붙이다): 해당하는 인덱스부터 원하는 갯수만큼 데이터 삭제(원래 배열의 값이 변함)
splice(지우려고 하는 요소의 시작 인덱스, (지우려고 하는 요소 갯수)<-option)

arr.splice(1); // 첫번째 인자로 지정한 인덱스부터 모든 데이터 삭제
console.log(arr); // [1]
arr.splice(1, 1); // 인덱스 1의 위치에서 요소 1개만 삭제
console.log(arr); // [1, 3, 4, 5]

원하는 인덱스의 데이터를 삭제하고 그 자리에 새로운 데이터 삽입
arr.splice(1, 1, '😜', '😎');
console.log(arr); // [1, "😜", "😎", 3, 4, 5]

6) concat: 새 배열을 인자로 받아 두가지 배열을 결합한 새로운 배열을 리턴
const arr2 = ['👍', '🤞'];
const newArr = arr.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, "👍", "🤞"]

4. 데이터 검색

배열 hearts = ['🧡', '💛', '💚', '💙', '💜']; 라고 가정 하에,

1) indexOf: 배열의 특정 요소가 위치한 인덱스 출력
console.log(hearts.indexOf('💚')); // 2
console.log(hearts.indexOf('💔')); // -1 (배열 안에 해당하는 값이 없을 때는 -1 출력)

2) includes: 배열에 요소가 있는지 여부를 boolean(true, false) 값으로 리턴
console.log(hearts.includes('💛')); // true
console.log(hearts.includes('💔')); // false

3) lastIndexOf: 동일한 요소가 두 개 이상인 경우, 마지막 요소의 인덱스 출력 (프로젝트 할 때 유용)
console.log(hearts.indexOf('💙')); // 3 (가장 첫 번째 요소의 인덱스)
hearts.push('💙');
console.log(hearts); // ['🧡', '💛', '💚', '💙', '💜', '💙']
console.log(hearts.lastIndexOf('💙')); // 5 (가장 마지막 요소의 인덱스)