Array

Array

배열은 연관된 데이터를 하나의 틀에서 관리하기 위한 자료구조이다.
변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.

배열 생성방법

1) Array() 생성자 함수로 배열을 생성하는 방법

const arr1 = new Array();

2) 배열을 리터럴 대괄호를 사용하여 만드는 방법

const arr2 = [1, 2];

하지만 배열 리터럴을 사용하는 것이 훨씬 코드가 간결하고 직관적이며 속도면에서도 좋다.

배열을 특정 요소에 접근하는 방법

배열 안의 요소들은 고유한 인덱스 값을 가지게 된다.
인덱스란 배열에 저장한 요소에 쉽게 접근하기 위해서 사용되는 값이다.
인덱스는 0번째 부터 시작하고, 우리가 지정한 배열 변수에 인덱스를 붙이면 지정된 인덱스의 요소를 접근할 수 있다.

const fruits = ['🍎', '🍌'];
console.log(fruits);
console.log(fruits[0]);		// 🍎
console.log(fruits[1]);		// 🍌
console.log(fruits[2]);     //undefined

배열이 길이를 얻는 방법

length: 배열이 내장 프로퍼티를 활용하여 쉽게 얻을 수 있다.

fruits.length;		//2

배열에 요소를 추가, 수정, 삭제

push(): 아이템을 배열의 제일 뒤에 추가

fruits.push('🍓', '🍅');	//'🍎', '🍌', '🍓', '🍅'
console.log(fruits);

pop(): 아이템을 배열의 제일 뒤에서부터 삭제

fruits.pop();
fruits.pop();
console.log(fruits);	//'🍎', '🍌',

unshift(): 아이템을 배열 앞에서부터 추가

fruits.unshift('🍓', '🍅');	
console.log(fruits);	//'🍓', '🍅','🍎', '🍌'

unshift(): 아이템을 배열 앞에서부터 삭제

fruits.unshift();	
fruits.unshift();	
console.log(fruits);	//'🍎', '🍌'

주의! shift와 unshift는 pop과 push보다 매우 느림

splice(): 특정 인덱스의 요소를 삭제

splice 메서드의 매개변수는 start와 deleteCount로 구성되어있다.
start는 배열의 변경을 시작할 인덱스이다. 배열이 길이보다 큰 값이라면 실제 시작 인덱스는 배열이 길이로 설정된다.
음수인 경우 배열이 끝에서부터 요소를 세어나간다. (원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 arr.length-n번째 인덱스와 동일)
값의 절대값이 배열의 길이보다 큰 경우 0으로 설정된다.
deleteCount는 배열에서 제거할 요소의 수이다. deleteCount를 생략하거나 값이 array.length-start 보다 크면 start부터의
모든 요소를 제거해야한다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않는다.

fruits.push('🍒', '🥑'); //'🍎', '🍌','🍒', '🥑'
fruits.splice(1, 2);
console.log(fruits);	//'🍎','🥑'
//fruits.splice(1, 2); return 값은 '🍌','🍒'

slice(): 배열의 일부분을 선택하여 새로운 배열 생성

array.slice( start, end )
배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 생성한다.

fruits.push('🍒', '🍌'); //'🍎','🥑','🍒', '🍌'
const newFruits = fruits.slice(1, 2);
console.log(newFruits);	//'🥑','🍒'

두 가지의 배열을 합치기

const fruits2 = ['🥭', '🍎'];
const concatFruits = newFruits.concat(fruits2);
console.log(concatFruits); //'🥑','🍒','🥭', '🍎'

배열 Loop

for loop

for(let i = 0; i < fruits.length; i++) {
    console.log(`fruits ${i}: ${fruits[i]}`);
}

for of

for(let fruit of fruits) {
    console.log(fruit);
}

forEach()

fruits.forEach((item, index) => console.log(`item ${index}: ${item}`));

그 외에 자주 사용하는 메서드

indexof() : 값으로 인덱스를 찾는 방법, 값이 없으면 -1 반환

console.log(fruits.indexOf('🍒')); // return 1

lastIndexOf() : 배열 뒤에서부터 값으로 인덱스를 찾는 방법, 값이 없으면 -1 반환

console.log(fruits.lastIndexOf('🥭')); // return 2

find(callback[, thisArg]) : 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환한다. 해당되는 요소가 없다면 undefined 반환

const findNum = numArray.find(num => num > 20);
console.log(findNum);

reverse() : 배열 반전시키기

fruits.reverse();
console.log(fruits);	//'🍎','🥭','🍒','🥑'

sort() : 배열 정렬시키기

const numArray = [1, 23, 100, 434, 4];
numArray.sort((a, b) => a - b);

join() : 배열의 모든 요소를 문자열로 합치기

join 매개변수에 아무것도 전달하지 않을 경우 기본값으로 콤마를 기준으로 배열의 요소를 합친다.
매개변수가 존재할 경우 매개변수의 값을 기준으로 배열이 요소를 합친다.

const joinArray = numArray.join();
console.log(joinArray);	//"1,4,23,100,434"

const joinArray2 = numArray.join('+');
console.log(joinArray2);	//1+4+23+100+434

map(callback(currentValue[,index[,array]])[,thisArg])

배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열을 반환한다.

const mapNum = numArray.map(num => num * 2);
console.log(mapNum);		//[2, 8, 46, 200, 868]

filter(callback(element[,index[,array]])[,thisArg]);

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const filterNum = numArray.filter(num => num > 20);
console.log(filterNum);		//[23, 100, 434]

reduce();

순회하면서 값을 축적 시킬때 많이 사용한다. reduce 메서드의 콜백함수는 4개의 매개변수를 가진다.
축적값(accumulator,acc), 현재값(curr), 현재 인덱스(index), 원본 배열(arr)
reduce 메서드의 반환 값은 축적값(acc)에 할당되고, 축적값(acc)는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.
reduce 메서드의 2번째 매개변수는 초기값을 설정할 수 있는 initialValue을 가진다. 되도록 초기값을 설정하는게 좋다.

const reducerNum = numArray.reduce((pre, value) => pre + value);
console.log(reducerNum);		//return 562