[Javascript] 내장 객체 - Array

특정 메소드를 찾으시는 분들은 Crtl + F로 검색하시길 바랍니다.

자바스크립트의 내장 객체인 Array는 값의 집합, 즉, 배열을 다루는데 이용되는 내장 객체입니다.

 

배열에 대한 설명은 아래링크를 참조하시길 바랍니다.

2021/03/02 - [Programming/Javascript] - [Javascript] 배열

[Javascript] 배열

---

1. 배열의 기본 활용

1-1. length

length;

배열의 길이를 취득합니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.length);

 

1-2. isArray()

isArray(obj);

isArray는 정적 메소드로, 인수로 객체를 받는데, 이때 객체 obj가 배열인지를 확인합니다. 배열이라면 true, 배열이 아니라면 false를 반환합니다.

 

let arr = [1, 2, 3, 4, 5];
let arr1 = 1;

console.log(Array.isArray(arr));
console.log(Array.isArray(arr1));

 

1-3. toString()

toString();
toLocaleString();

toString은 '요소, 요소, ...'와 같은 형태로 배열을 문자열로 바꿔줍니다.

toLocaleString()도 배열을 문자열로 바꿔주는데 현재 로케일에 맞는 형식으로 문자열을 변경해줍니다.

무슨이야기인가 하면 대표적으로 날짜 형식은 대한민국은 년.월.일 순서대로 표시되는데 미국같은경우에는 월.일.년 순서로 표기가됩니다. 이처럼 로케일마다 다른 표기방식(통화, 시간 등)을 지원해줍니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.toString());

console.log(typeof arr);
console.log(typeof(arr.toString()));

 

1-4. indexOf()

indexOf(elem, [idx]);
lastIndexOf(elem, [idx]);

배열에서 인수 elem으로 준 키와 일치한 첫 요소의 키를 반환합니다. 이때 추가적으로 인수 idx(정수값)을 주면 그 위치부터 검색을 시작합니다.

lastIndexOf()는 일치한 마지막 요소의 키를 반환합니다.

 

let arr = [1, 3, 3, 4, 5];

console.log(arr.indexOf(3));
console.log(arr.lastIndexOf(3));

 

1-5. entries(), keys(), values()

entries();
keys();
values();

entries()는 모든 키와 모든 값을 얻습니다.

keys()는 모든 키를 얻습니다.

values()는 모든 값을 얻습니다.

 

 

 

 

2. 배열의 가공

2-1. concat()

concat(arr);

현재의 배열에 다른 배열 arr을 연결합니다.

 

let arr = [1, 2, 3, 4, 5];
let arr1 = [6, 7];

console.log(arr.concat(arr1));

 

2-2. join()

join(char);

join은 배열 내부의 요소룰 구분 문자 char로 연결시켜줍니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.join(';'));
console.log(arr.join('다음'));

 

2-3. slice()

slice(start, [end]);

배열의 요소를 start+1부터 끝까지(또는 end까지) 추출합니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.slice(1));
console.log(arr.slice(2, 3));

 

2-4. splice()

splice(index, n, [elem, ...]);

splice는 배열 내부에 요소를 더하거나 바꾸거나 삭제하는데 사용되는 메소드입니다. 기본 작동은 'index부터 n개를 지운다'입니다. 이때 elem이라는 추가 요소를 주면 삭제가 아닌 치환 혹은 추가가 됩니다.

 

elem은 추가 혹은 치환하는 인수인데 elem을 기입하지 않을 경우 index부터 n개만큼 삭제하는 일을 하게 됩니다.

let arr = [1, 2, 3, 4, 5];

console.log(arr.splice(2,1));
console.log(arr);

요소 3이 삭제됨

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.splice(3,2, 10));
console.log(arr);

제거 및 치환

let arr = [1, 2, 3, 4, 5];

console.log(arr.splice(3,2, 6, 7, 8));
console.log(arr);

제거 및 추가

이렇게 코드로만 보면 복잡할 수 있는데, 대부분 IDE를 쓰므로 ide에서 다음과 같이 친절하게 알려줍니다.

 

2-5. from()

from(arrLike);

arrLike 인수는 열거 가능한 객체로 from 메소드는 이 열거 가능한 객체를 배열로 변환시켜 줍니다. 열거 가능한 객체는 간단히 말해서 Map 같이 값들의 집합이지만 배열은 아닌 객체를 의미합니다.

 

 

2-6. of()

Array.of(elem1, ...);

of 메소드는 인수로 들어온 elem들을 배열로 변환해줍니다. 또한 정적메소드라는 점도 갖고있습니다.

 

 

2-7. copyWithin()

copyWithin(target, start, [end]);

copywithin()메소드는 start+1번째 요소부터 end까지 요소를 target+1위치부터 복사합니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.copyWithin(3,1));

 

 

 

2-8. fill()

fill(var, [start, [end]]);

배열의 start+1부터 end까지 요소를 var로 치환합니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.fill(7));

let arr = [1, 2, 3, 4, 5];

console.log(arr.fill(7, 3));

 

 

 

3. 배열 요소의 추가와 삭제

3-1. push(), pop()

push(data);
pop();

push는 인수 data를 배열의 마지막 요소 다음에 집어넣습니다.

pop은 배열의 마지막 요소를 삭제합니다.

 

let arr = [1, 2, 3, 4, 5];

arr.push(6)
console.log(arr);

arr.pop();
console.log(arr);

 

3-2. shift(), unshift()

shift();
unshift(data, ...);

shift()는 배열 맨 앞의 요소를 삭제합니다.

unshift()는 배열 맨앞에 요소를 추가합니다.

 

let arr = [1, 2, 3, 4, 5];

arr.shift();
console.log(arr);

arr.unshift(0, 1);
console.log(arr);

 

 

3-3. 스택과 큐

위에서 나온 네가지 메소드를 이용하면 스택과 큐를 배열로 간단하게 구현할 수 있습니다.

 

스택은 후입선출(LIFO: Last In First Out) 구조를 가진 자료구조 중 하나입니다.

(나중에 들어간 데이터가 먼저 나온다.)

 

큐는 선입선출(FIFO: First In First Out) 구조를 가진 자료구조입니다.

(먼저 들어간 데이터가 먼저 나온다.)

지금은 자료 구조시간이 아니므로 이런게 있다 정도만 알면 됩니다. 기회가 된다면 자세하게 다뤄보겠습니다.

 

 

 

4. 배열 요소의 정렬

4-1. sort()

sort();

sort()메소드는 배열의 요소를 오름차순으로 정렬해 주는 메소드입니다. 이때 숫자 뿐만 아니라 문자도 순서대로 정렬이 가능합니다.

 

let arr = [4, 5, 1, 3, 2];

console.log(arr.sort());

 

 

4-2. reverse()

reverse();

reverse()메소드는 배열의 요소를 반전시킵니다.

 

let arr = [1, 2, 3, 4, 5];

console.log(arr.reverse());

 

 

 

5. Array 객체 멤버의 콜백

콜백(callBack)은 호출되는 함수 내부에서 다시 호출되는 함수입니다. 혹은 특정 시점에 도달해서 실행된다라고도 해석되기도 합니다. 

 우선 용어에 대해 설명하자면 인수 func은 처리하기 위한 함수, that은 콜백 함수 내부에서 this가 가리키는 객체입니다. this는 우선 객체의 인스턴스를 말한다 정도로만 이해하고 넘어가시면됩니다. 후에 this객체에 대해서 다룰 예정이므로 링크 걸어두겠습니다. 

this키워드에 대한 설명은 아래 링크를 참조해주세요.

2021.03.18 - [Programming/Javascript] - [Javascript] this

[Javascript] this

 

5-1. forEach()

forEach(func, [that]);

forEach()메소드는 배열의 요소를 순서대로 func 함수로 처리하는 메소드입니다.

 

 

5-2. map()

map(func, [that]);

배열의 요소를 순서대로 func함수로 가공하는 메소드입니다. 가공이기 때문에 콜백 함수 내에서 return문을 이용한 값의 반환이 필요합니다.

 

 

5-3. every()

every(func, [that]);

배열 내부의 모든 요소가 func함수와 일치하는 지를 판별합니다.

 

 

5-4. some()

some(func, [that]);

이번에는 배열 내부의 일부 요소가 func함수와 일치하는 지를 판별합니다. every와 다르게 일부라는 점에 주목해야합니다.

 

 

5-5. filter()

filter(func, [that]);

 

filter()메소드는 조건 func에 일치하는 요소로만 새로운 배열을 생성하는 메소드입니다.

 

5-6. find()

find(func, [that]);

배열 요소를 순서대로 func함수로 처리하며 처음으로 true 결과를 반환하는 요소를 얻는 메소드입니다.

 

 

5-7. findIndex()

findIndex(func, [that]);

배열 요소를 순서대로 func함수로 처리하며 처음으로 true 결과를 반환하는 요소의 인덱스를 얻는 메소드입니다.

 

 

 

5-8. reduce(), reduceRight()

reduce(func, [init]);
reduceRight(func, [init]);

바로 옆의 두 요소를 처리합니다. 이때 인수 init은 초기 값입니다.

이때 reduce()는 왼쪽에서 오른쪽으로 func함수 처리를 실행하고 reduceRight()는 오른쪽에서 왼쪽으로 func함수를 처리한다.

---

활용도가 높은 배열인 만큼 많은 메소드들이 나왔습니다. 대부분 메소드의 이름 따라서 기능이 설정되어 있으므로 헷갈리지는 않을거라고 생각됩니다.