많은 데이터를 저장 할 수 있는 배열에 대해 알아보자

배열

배열(Array)은 다수의 데이터를 저장하는 객체이다.

배열의 생성

[ ] 또는 new Array()를 통해 생성한다

// [] 사용
const arr1 =[];
const arr2 = [1,2,3];

// new Array() 사용
const arr3 = new Array(); 
const arr4 = new Array(1,2,3); // 초기값 설정 가능
const arr5 = new Array(3); // 값이 하나고 숫자이면 숫자만큼의 길이를 가진 배열을 만든다.

console.log(arr5.length) // 값은 없지만 배열의 길이는 설정한 3이 된다.

---

배열의 특징

- 자바스크립트의 배열은 다양한 타입의 데이터를 가질 수 있다

const arr = [1, "one", true, null, undefined]; // 가능

- 자바스크립트의 배열은 동적배열이다
자바스크립트의 배열은 크기에 자유로운 동적배열이 기본이다.

let arr = [];
arr.push(1);
console.log(1); // 배열의 크기를 키우고 1을 넣었다.

- mutable
자바스크립트에서 string은 immutable이지만 array는 mutable이기 때문에 변경이 가능하다.

let str = "string";
str[0] = "x";
console.log(str); // "string"

let arr = ["string"];
arr[0] = "arr";
console.log(arr); // ["arr"];

---

Methods

배열은 다양한 메소드를 가지고 있으니 차근차근 알아보도록 하자

push

push(value)
배열의 끝에 값을 추가한다

let arr = [];
arr.push(1);
console.log(arr); // [1]

pop

pop()
배열의 끝에 값을 삭제하고 반환한다

let arr = [1,2,3];
console.log(arr.pop()); // 3
console.log(arr); // [1,2]

unshift

unshift(value)
배열의 맨 앞에 값을 추가한다

let arr = [1,2];
arr.unshift(3);
console.log(arr); // [3,1,2]

shift

shift()
배열의 맨 앞에 값을 삭제하고 반환한다

let arr = [1,2,3];
console.log(arr.shift()); // 1
console.log(arr); // [2,3]

slice

slice(begin, end)
begin부터 end-1까지 배열을 잘라 새 배열을 만들어 반환한다
기존 배열엔 변화를 주지 않는다

let arr = [1,2,3,4,5];
let newArr = arr.slice(1,3);
console.log(newArr); // [2,3] 

splice

splice(index, 제거 할 요소 수, 추가 될 요소)
배열의 특정 위치에 요소를 삽입하거나 삭제 할 때 사용된다

// 제거만
let arr = [1,2,3,4,5];
arr.splice(2, 1); // '2'번째 index부터 '1'개 제거
console.log(arr); // [1,2,4,5];
// 제거 후 추가
let arr = [1,2,3,4,5];
arr.splice(2, 1, 4); // '2'번째 index부터 '1'개 제거 후 '4'추가
console.log(arr); // [1,2,4,4,5]

concat

concat(array)
배열을 합쳐서 새로운 배열을 반환
기존 배열들은 변화 ❌

let arr1 = [1, 2];
let arr2 = [3, 4];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4]

every

every(function)
배열의 모든 요소가 판별 함수의 조건에 맞으면 true 아니면 false를 반환한다

let arr = [1, 2, 4, 6];

const checkEvenNumber = (e) => e % 2 === 0; // 짝수인지 판별

console.log(arr.every(checkEvenNumber)); // false
arr.shift(); // 1 삭제
console.log(arr.every(checkEvenNumber)); // true

some

some(function)
배열의 모든 요소 중 하나라도 판별 함수의 조건에 맞으면 true 아니면 false를 반환한다
개인적으로 every는 and, some은 or 연산과 같은 맥락으로 알고 있으면 좋을듯 하다

let arr = [1, 2, 4, 6];

const checkEvenNumber = (e) => e % 2 === 0;

console.log(arr.some(checkEvenNumber)); // true
arr.shift(); // 1 삭제
console.log(arr.some(checkEvenNumber)); // true

forEach

forEach(function)
배열의 각 요소에 함수를 호출한다

const arr = [1, 2, 3];
const add = (e) => console.log(e);
arr.forEach(add); // 1 2 3

map

map(function)
배열의 각 요소에 함수를 호출하고 결과를 합쳐 새로운 배열로 반환한다

const arr = [1, 2, 3];
const newArr = arr.map(e => e+1); // +1
console.log(newArr); // [2, 3, 4]

filter

filter(function)
배열의 각 요소에 함수 판별 함수를 호출하고 조건에 맞는 요소를 합쳐 새 배열로 반환한다
앞서 나온 every나 some은 참/거짓 판별만 필요할 때 사용하고 filter는 참/거짓 판별 후 값이 필요할 때 사용하자

const arr = [1, 2, 3, 4, 5];
const checkOddNumber = (e) => e % 2 === 1;
console.log(arr.filter(checkOddNumber)); // [1, 3, 5]

reduce

reduce(prev, cur, idx, arr)

배열 각 요소의 값을 왼쪽부터 차례대로 누산해 하나의 값으로 만들어 반환한다

• prev(previousValue) : 초기 값 또는 마지막 계산 결과 값
• cur(currentValue) : 현재 요소
• idx(currentIndex) : 현재 인덱스
• arr(array) : 사용되는 원본 배열

const arr = [1, 2, 3, 4];
const sum = arr.reduce((prev, cur, idx, arr) => prev + cur);
console.log(sum); // 10

reverse

배열 요소의 순서를 뒤집는다.

const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

sort

배열 요소들을 정렬한다.
정렬 순서는 0->9 / A->Z 등이 default이며 개인적으로 만들어서 사용도 가능하다

const names = [james, aya, dani];
const numbers = [2, 1, 4, 5, 3];

console.log(names.sort()); // ["dani", "james", "yann"]
console.log(numbers.sort()); // [1, 2, 3, 4, 5]

// 정렬 기준을 직접 만들어서 사용

const asc = (left, right) => left - right; // 오름차순
const desc = (left, right) => right - left; // 내림차순

console.log(numbers.sort(desc)); // [5, 4, 3, 2, 1]

toString

toString()
배열을 문자열로 변환한다

const arr = [1, 2, 3];
const str = arr.toString();
console.log(str) // "1,2,3";
console.log(typeof str) // string

join

join(string)
배열의 모든 요소를 연결해 하나의 문자열로 만든다
()안에 separator를 넣어 사용 할 수 있다

const arr = [1, 2, 3];

console.log(arr.join()); // "1,2,3" (toString()와 같다)
console.log(arr.join('')); // "123" 
console.log(arr.join(' or ')); // "1 or 2 or 3"

여기까지 간단히 배열이 어떤 것인지, 특징이 무엇인지 그리고 다양한 메소드를 알아보았다.
가장 기본인 데이터 구조임으로 익숙하게 사용 할 수 있도록 공부 하자.
끝..! 🌟