JavaScript - Array (배열)

Array란..?

배열이란 자바스크립트 안에 저장된 데이터의 리스트이다.
배열은 대괄호[]를 사용한다.

배열 안의 각각의 데이터들은 인덱스, 즉 고유한 숫자를 배정받는데 0부터 시작한다.
우리가 만약 배열 안의 하나의 데이터에 접근하고 싶다면 myArray[0]과 같이 원하는 인덱스를 대괄호 안에 집어 넣어 찾을 수 있다.
myArray[0] = 'new string'; 처럼 배열 안의 데이터를 변경할 수도 있다.

rooping하는 법

<script>
  const fruits = {'🍅', '🍌'};
  for(fruit of fruits) {
  	console.log(fruit)
  }// 🍅 / 🍌
</script>

배열의 built-in property와 method

• .length() : 배열의 길이를 반환한다.
• .push() : 배열 끝에 하나 이상의 요소를 추가하고 배열의 길이를 반환한다.
• .pop() : 배열에서 마지막 요소를 제거하고 제거한 값을 반환한다.
• .shift() : 배열의 첫번째 요소를 제거하고 제거한 값을 반환한다.
• .unshift() : 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.
💡shift와 unshift는 push와 pop보다 훨씬 느리다. 배열의 길이가 길면 길수록 더 느려진다.
• .slice(start, end) : 배열의 start부터 end까지에 대한 "복사본"을 반환한다. (배열의 내용 변경하지 않음.)
• .splice(start, delete, item): 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다. (start: 배열의 index 시작점, delete: 삭제할 요소의 갯수, item: 추가하고 싶은 요소)
• .join(): 배열의 모든 요소를 연결해 하나의 문자열로 만든다.
• .concat(): 호출하는 배열에 괄호 안에 있는 배열을 합쳐준다.

Iterator

• .map(): 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
• .forEach(): 주어진 함수를 배열 요소 각각에 대해 실행한다. 새로운 배열은 반환하지 않는다.
• .filter(): 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
• .find(): 주어진 함수의 테스트를 통과하는 첫번째 요소를 반환한다.
• .findIndex(): 주어진 함수의 테스트를 통과하는 첫번째 요소의 인덱스를 반환한다.
• .indexOf(): 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.
• .lastIndexOf(): 주어진 값과 일치하는 부분을 fromIndex로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환한다. 일치하는 부분을 찾을 수 없으면 -1을 반환한다.
• .reduce(): 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 콜백함수를 한 번씩 실행한다.
• .includes(): 배열이 특정 요소를 가지고 있는지 확인한다.

<script>
<!--Array.map()-->
const arr = [1, 2, 3];
const squares = arr.map(num => num * num);
console.log(squares); // [1, 4, 9]
<!--forEach()-->
arr.forEach(num => {
  squares.push(num * num);
});
console.log(squares); // [1, 4, 9, 1, 4, 9]
<!--filter()-->
const newArr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const overSix = newArr.filter(word => word.length > 6);
console.log(overSix); // ["exuberant", "destruction", "present"]
<!--reduce()-->
const myArr = [4, 5, 6];
const doReduce 
= myArr.reduce((accumulator, currentValue) => {
	console.log(`accumulator: ${accumulator}`)
    console.log(`currentValue: ${currentValue}`)
	return accmulator + currentValue
});
console.log(doReduce);
// accumulator: 4
// currentValue: 5
// accumulator: 9
// currentValue: 6
// 15
</script>

몇몇 메소드는 배열의 값을 변경 할 수 있지만 몇몇은 그렇지 않다. 레퍼런스를 참조할 것.

배열 선언은 let, const 둘다 가능하다.
선언된 변수의 값을 let은 변경 가능, const는 변경 불가한 것을 제외하고는 우항의 배열의 값은 변경 가능하다는 공통점이 있다.
배열은 함수의 바깥에서도 변경이 유지된다.
배열은 다른 배열 안에 속할 수 있다.
배열 안에 있는 배열을 호출하고 싶다면 대괄호를 이용하면 된다.

<script>
let myArray = [[1, 2], [3, 4], [5, 6]]
console.log(myArray[1][0])
//3
</script>