22.12.29 - 배열

1. 배열

배열은 여러개의 값을 순차적으로 나열한 자료구조를 뜻한다. 

 

1) 요소와 인덱스

const arr = ['year', 'month', 'day'];

- 요소(element) : 배열의 값. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 

- 인덱스(index) : 요소가 배열에서 자신의 위치를 나타내는 0 이상의 정수. 즉 배열의 순서. 

 

💡 console.table()

console.table() 사용시 배열 요소와 인덱스 값을 표 형태로 한눈에 볼 수 있다.

 

2) 배열 요소에 접근하기

arr[0]; // 'year'
arr[1]; // 'month'
arr[2]; // 'day'

배열 요소에 접근할때는 대괄호 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다. 

위 배열 arr에서 0번째 인덱스의 요소는 'year'이고, 1번째 인덱스의 요소는 'month', 2번째 인덱스의 요소는 'day'이다. 

 

🤔 만약 배열에 없는 인덱스를 선택한다면? 

arr[4]; // undefined

 

배열 내에 존재하지 않는 요소에 접근하면 undefined가 반환된다. 

 

3) 배열의 특징

- length를 사용해 배열의 길이를 알아낼 수 있다. 

- 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이므로 typeof 연산자 사용시에는 object로 출력된다. 

- 온점(.)을 이용해 관련된 속성과 명령(=메서드)를 실행할 수 있다. 

 

🤔 이 값이 배열인지 아닌지 알고싶을때

const something = [1,2,10,20];

// something이 배열인지 알고싶다면
Array.isArray(something); // true

Array.isArray() 메서드를 사용해 해당 값이 배열인지 아닌지 불리언 값으로 확인할 수 있다. 

 

4) 배열 메서드 

.push() : 배열의 끝에 하나 이상의 요소를 추가하고 변경된 배열의 새로운 길이를 반환한다. 

 

.pop() : 배열의 마지막 요소를 제거하고 제거된 요소를 반환한다. 

 

.shift() : 배열의 첫번째 요소를 제거하고 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변경한다. 

 

.unshift() : 배열의 가장 앞에 새로운 요소를 추가하고, 새로 변경된 길이를 반환한다. 

 

. indexOf() : 배열에서 지정된 요소를 찾을 수 있는 첫번째 인덱스를 반환하고, 만약 요소가 존재하지 않으면 -1을 반환한다. 

.includes() : 배열이 특정 요소를 포함하고 있는지 판별한다. 

.splice() : 배열의 기존 요소를 삭제, 또는 교체, 또는 새 요소를 추가하여 배열의 내용을 변경한다. 

 

.concat() : 인자로 주어진 배열이나 값을 기존 배열에 합쳐서 새 배열을 반환한다. 기존 배열을 변경하는 것이 아닌 값이 추가된 새로운 배열을 반환한다. 기존 배열에는 영향을 주지 않는다. 

 

.slice() : 어떤 배열의 시작부터 끝까지(또는 끝을 포함하지 않고)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다. 

 

✅ 원본 배열을 변경하는 메서드 / 원본 배열을 변경하지 않는 메서드 

Array.prototype 메소드는 원본 배열을 변경하는 메서드 / 원본 배열은 변경하지 않고 참조만 하는 메서드 / 원본 배열을 반복적으로 참조하는 메서드로 나뉜다. 

 

- 원본 배열을 변경하는 메서드 

.push() / .pop() / .shift() / .unshift() / .reverse() / .sort() / .splice() / .copyWithin() / .fill() 등

 

- 원본 배열은 변경하지 않고 참조만 하는 메서드 

.join() / .slice() / .concat() / .toString() / .toLocaleString() / .indexOf() / .lastIndexOf() 등

 

- 원본 배열을 반복적으로 참조하는 메서드 

.forEach() / .map() / .filter() / .every() / .some() / .reduce() / .reduceRight() / .entries() / .keys() / .values() / .find() / .findIndex() 등

 

 

📂 forEach / for ... in / for ... of 

- forEach 

오직 Array 객체에서만 사용가능한 메서드이다. 배열의 요소들을 반복하여 작업을 수행한다. 구문의 인자로 callback 함수를 등록할 수 있고 배열의 각 요소들이 반복될때 이 callback 함수가 호출된다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있다. 

- for ... in (객체 순환)

객체를 순환할때 사용한다. 객체의 key 값 또는 index를 가져와 사용할때 이용한다. 

 

 

- for ... of (배열 순환)

배열을 순환할때 사용한다. 배열의 값을 가져와 사용할때 이용한다. 

 

 

 

********************

오늘은 배열공부했음! console.table은 처음 알게 되었는데 유용하게 잘 쓸 수 있을것같다

배열은 앞으로도 많이 사용될테니까 계속 공부하면서 익혀두는게 좋겠지

배열 메서드들도 계속 연습해보면서 익혀야겠다 

for ... in과 for ... of는 아직 좀 헷갈리는데 객체에 대한 이해가 부족해서 그런거같다 

객체는 내일 공부하니까 내일 더 정리해서 이해해 봐야겠다