[Javascript] - Array

Array (배열)

 

- 배열은 연속적인 메모리로 구성되고, 같은 크기의 배열 요소로 나눠지며, 각 요소는 정수 색인과 연결되어 빠른 접근이 가능합니다.

 

- 자바스크립트는 처음 배포 당시 배열을 포함시키지 못했습니다.

 

자바스크립트의 객체가 워낙 강력해서 배열이 빠졌다는 사실을 늦게 깨달았으며, 성능 문제만 무시한다면 객체는 배열이 할 수 있는 모든 것을 할 수 있습니다.

 

- 자바스크립트의 배열은 진짜 객체이나 다음의 측면에서 객체와 살짝 다릅니다.

 

• 배열은 length 속성을 갖고 있습니다. 배열의 length 는 배열이 담고 있는 요소의 개수가 아닌, 가장 큰 색인보다 1 큰 값을 나타냅니다. 예를 들어 배열에 요소가 네 개 있고 마지막 요소의 색인이 10 이라면 length 는 11 입니다.
• 배열은 Object.prototype 보다 더 많은 메서드들을 가지고 있는 Array.prototype 을 상속합니다.
• 배열은 객체 리터럴이 아닌 배열 리터럴을 사용해 만들어지며, 배열 리터럴은 문법적으로 훨씬 더 간단합니다.
• JSON 은 배열과 객체를 다르게 취급하는 반면, 자바스크립트는 둘을 비슷하게 처리합니다.

- 자바스크립트의 typeof 연산자는 배열에 대해 "object" 를 반환하기 때문에, 배열인지 확인하려면 Array.isArray(value) 를 사용합니다.

 

- 배열 요소를 한 번에 하나씩 처리하기보다, 배열을 좀 더 함수처럼 처리해야 한다는 생각이 최근의 트렌드입니다.

 

명시적인 반복문 처리가 없어져 코드가 단순해지고, 멀티 프로세서에 작업을 분산해서 처리할 수 있는 능력이 생깁니다.

 

- 배열을 만드는 방법

 

const arr1 = new Array(10).fill(0); // new Array(정수)
const arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; // 배열 리터럴

 

- 배열의 여러가지 메서드들

 

- pop : 배열의 가장 마지막 요소를 배열에서 제거하고 반환

 

let a = [1, 2, 3];
a.pop(); // 3
a; // [1,2]

 

- push : 새로운 요소를 배열 끝에 추가

 

let a = [1, 2];
a.push(3);
a; // [1, 2, 3]

 

- shift : 배열의 0번째 요소를 제거하고 반환 / unshift : 배열의 가장 앞에 새로운 요소 추가

 

두 함수는 pop, push 에 비해 많이 느립니다.

 

let a = [1, 2, 3];
a.shift(); // 1
a; // [2, 3];

a.unshift(4);
a; // [4, 2, 3]

 

- indexOf : 배열의 요소를 찾으면 해당 요소의 색인 값을 반환, 찾는 값이 없으면 -1 반환

 

let a = [1, 2, 3];
a.indexOf(3); // 2
a.indexOf(4); // -1

 

- lastIndexOf : indexOf 와 비슷하나 배열의 앞이 아닌 뒷쪽부터 검색

 

- includes : 값이 배열에 존재하면 true, 없으면 false

 

const a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false

 

- reduce : 배열을 하나의 값으로 축약 // reduceRight : 배열의 끝에서 시작, reduce 와 동일한 동작

 

let a = [3, 5, 7, 11];
let b = a.reduce((acc, cur) => acc + cur), 0);
b; // 26

 

- forEach : 배열의 모든 요소에 대해 전달된 함수 호출하며 호출한 함수의 반환 값은 무시

 

- every : 배열 안의 모든 요소가 주어진 함수를 통과하는지 테스트, 모두 통과하면 true 반환

 

const isUnder = (value) => value < 40;
const a = [1, 30, 39, 29, 10, 13];
const result = a.every(isUnder);
result; // true

 

- some : 배열 안의 어떤 한 요소라도 주어진 함수를 통과하는지 테스트, 통과하면 true 반환

 

const a = [1, 3, 5];
const even = e => e % 2 === 0;
const result = a.some(even);
result; // false

 

- find : 주어진 판별함수를 만족하는 첫 번째 요소의 값 반환, 없으면 undefined 반환 // findIndex : 배열 요소의 색인을 반환

 

const a = [10, 2, 33, 48];
const found = e => e > 10;
const result = a.find(found);
result; // 33

 

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

 

const a = [1, 2, 3, 4, 5];
const even = e => e % 2 === 0;
const result = a.filter(even);
result; // [2, 4]

 

- map : forEach 와 비슷하지만 배열의 각 요소에 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환

 

const a = [1, 2, 3, 4, 5];
const double = e => e * 2;
const result = a.map(double);
result; // [2, 4, 6, 8, 10];

 

- sort

 

sort 메서드는 배열을 정렬하는 함수인데, 추가 메모리 공간을 사용하지 않고 배열 자체를 수정합니다.

기본으로 사용하는 비교 함수는 값을 문자열로 간주해 정렬합니다. 값이 숫자라도 문자열처럼 정렬합니다.

다행히 문자열로 정렬하는 부분은 비교 함수를 전달해 바로잡을 수 있습니다.

 

let a = ['orange', 'apple', 'banana'];
a.sort(); // ['apple', 'banana', 'orange']

let b = [4, 9, 17, 3, 10];
b.sort(); // [10, 17, 3, 4, 9]

let c = [4, 9, 17, 3, 10];
c.sort((x, y) => x - y); // [3, 4, 9, 10, 17]

 

- concat : 두 개 이상의 배열을 연결해 새로운 배열로 만듬

 

let a = [1, 2];
let b = [3, 4];
let c = a.concat(b); // [1, 2, 3, 4]

 

- join : 문자열 배열과 구분자를 인자로 받아 이들을 합쳐 하나의 큰 문자열로 만듬

 

let a = ['apple', 'banana', 'orange'];
let b = a.join(' & '); // 'apple & banana & orange'

 

- reverse : 배열의 요소들을 반대 방향으로 뒤집음 (배열 자체를 변경)

 

let a = [1, 2, 3];
a.reverse(); // [3, 2, 1]

 

- 배열의 순수 함수 (주어진 입력을 바꾸지 않는 함수)

 

concat / every / filter / find / findIndex / forEach / indexOf / join / lastIndexOf / map / reduce / reduceRight / slice / some

 

- 배열의 비순수 함수 (주어진 입력을 바꾸는 함수)

 

fill / pop / push / shift / splice / unshift / reverse / sort

 

출처 : 자바스크립트는 왜 그 모양일까?