JavaScript⑤

배열

여러 개의 값을 순차적으로 나열한 자료구조
(사용빈도가 매우 높은 가장 기본적인 자료구조)

배열의 예시(리터럴)

const array = ['apple', 'banana', 'cherry']

배열이 가지고 있는 값을 요소(element)라고 부르며, 자바스크립트의 모든 값은 배열의 요소가 될 수 있다.

배열의 요소는 배열에서 자신의 위치를 나타내는 0이상의 정수인 인덱스를 갖는다.
인덱스는 배열의 요소에 접근할때 사용한다. zero-base

array[0]	//'apple'
array[1]	//'banana'
array[2]	//'cherry'

배열의 요소는 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.

array.length	// 3

배열은 인덱스와 length 프로퍼티를 갖기 때문에 for문을 통해 순차적으로 요소에 접근할 수 있다.

//배열의 순회
for (let i = 0; i < array.length; i++) {
	console.log(array[i]);		// 'apple', 'banana', 'cherry'
}

console.log(typeof array);		//object

배열은 객체 타입~!

배열은 배열 리터럴, Array 생성자 함수, Array.of, Array.from 메소드를 통하여 생성할 수 있다.
배열의 생성자 함수는 Array이며, 배열의 프로토타입 객체는 Array.prototype이다. Array.prototype은 배열을 위한 빌트인 메소드를 제공한다.

배열의 장점

처음부터 순차적으로 요소에 접근할 수도 있고, 마지막부터 역순으로 요소에 접근할 수도 있으며, 특정 위치부터 순차적으로 요소에 접근할 수 도있다.
이는 배열이 인덱스, 즉 값의 순서와 length 프로퍼티를 갖기 때문에 가능한 것이다.

배열 메소드⭐

자바스크립트는 배열을 다룰 때 유용한 다양한 빌트인 메소드를 제공한다.
Array 생성자 함수는 정적 메소드를 제공하며,
배열 객체의 프로토타입은 Array.prototype은 프로토 타입 메소드를 제공한다.

배열 메소드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요

원본배열을 직접 변경하는 메소드 / 새로운 배열 생성하여 반환하는 메소드

1. Array.isArray : 전달된 인수가 배열이면 true, 배열이 아니면 false 반환

Array.isArray([]);	//true
Array.isArray('Array');	  //false

2. Array.prototype.indexOf : 원본배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환

const arr = [1, 2, 2, 4];

//배열 arr에서 요소 2를 검색하여 첫번쩨로 검색된 요소의 인덱스를 반환
arr.indexOf(2);		// 1

• 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러개 있다면 첫 번째로 검색된 요소의 인덱스를 반환
• 원본배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환

idexOf 메소드는 배열에 특정 요소가 존재하는 확인할때 유용하다

const foods = ['apple', 'banana'];

//foods 배열에 'orange' 요소가 존재하는지 확인한다.
if (!foods.indexOf('orange') === -1) {
	//foods 배열에 'orange'요소가 존재하지 않으면 실행할 구문
    foods.push('orange'
}
console.log(foods);		//['apple', 'banana', 'orange']

2. Array.prototype.push
   push 메소드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소에 추가 (원본배열 직접 변경)

const arr = [1, 2]

//인수로 전달받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고 변경된 length 값을 반환
let result = arr.push(3, 4);
console.log(result.length);	//4

//push 메소드는 원본 배열을 직접 변경
console.log(arr);		// [1, 2, 3, 4]

마지막 요소로 추가할 요소가 하나뿐이라면 push 메소드를 사용하지 않아도 length 프로퍼티를 사용하여 배열의 마지막 요소를 직접 추가할 수 있다. -> push 보다 빠름