[JS] 배열(Array) 조작 함수 이해하기 - 1

해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 대해서는 포함하고 있지 않으며 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다)

 

 

1. 요약

---

chapter	번호	입력 타입	주요 기능	메서드 명	리턴 타입
1번 글	1	Array	배열 생성	[] / new Array / Array.from()	Array
1번 글	2	Array	배열 초기화	[] / new Array / splice()	Array
1번 글	3	Array	배열 조작	push() / unshift() / pop() / shift()	Array
1번 글	4	Array	배열 조작	reduce()	string
1번 글	5	Array	배열 조작	filter()	Array<string>
1번 글	6	Array	배열 조작	join()	string
1번 글	7	Array	배열 조작	sort()	Array
1번 글	8	Array	배열 조작	fill()	Array

 

 

2. [[] / new Array / Array.from()] 배열 생성 관련 메서드

---

💡 해당 메서드는 배열을 생성하고자 할 때 사용되는 메서드입니다.

 

[ API Document ]

/**
 * Array.from()의 속성
 * @param {String, Number, Set, Map} arrayLike : 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.
 * @param {} mapFn : [Optional] 배열의 모든 요소에 대해 호출할 맵핑 함수.
 * @param {} thisArg : [Optional] mapFn 실행 시에 this로 사용할 값.
 * @return {Array}  :새로운 배열 반환 값
 */
Array.from(arrayLike[, mapFn[, thisArg]])
/**
 * Array.of()의 속성
 * @param {any} elementN: 배열을 생성할 때 사용할 요소.
 * @returns {Array}: 새로운 배열 반환
 */
Array.of(element0[, element1[, ...[, elementN]]])

Array.from() - JavaScript | MDN

Array.of() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const emptyArr = [];
console.log(emptyArr); // []

const emptyArr2 = new Array();
const emptyArr3 = new Array(0);
const empty3Arr = new Array(3);
console.log(emptyArr2, emptyArr3, empty3Arr); // [], [], [empty × 3]

const emptyArr4 = Array.from([]);
const emptyArr5 = Array.from('');
console.log(emptyArr4, emptyArr5); // [], []

const emptyArr6 = Array.of();
console.log(emptyArr6); // []

/**
 * 응용 사용 방법
 */
// Array.from()으로 데이터를 가공 후 배열을 반환 받는 방법
const fromMethodArr1 = Array.from([1, 2, 3], (fItem) => fItem + 2);
console.log(fromMethodArr1); // [3, 4, 5]

// Array.from()으로 중복을 제거한 배열을 반환 받는 방법
const numArr = [1, 2, 3, 4, 4];
const fromMethodArr2 = Array.from(new Set(numArr));
console.log(fromMethodArr2); // [1, 2, 3, 4]

// Array.of()으로 즉시 배열을 구성하여 배열을 반환 받는 방법
const ofMehtodArr1 = Array.of('가', '나', '다'); // ["가", "나", "다"]

 

 

3. [[] / length / splice] 배열 초기화 관련 메서드 

---

💡 해당 메서드는 배열의 값을 존재하는 경우 초기화해 줄 때 사용하는 메서드입니다.

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
let numArr: number[] = [1, 2, 3, 4, 5, 6];

numArr.splice(0, numArr.length);
console.log(numArr); // []

numArr.splice(0);
console.log(numArr); // []

numArr.length = 0;
console.log(numArr); // []

numArr = [];
console.log(numArr); // []

Array.length - JavaScript | MDN

 

 

4. [push() / unshift() / pop() / shift()] 배열 삽입 및 추출 관련 메서드 

---

💡 push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환하는 메서드입니다. 
💡 unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환하는 메서드입니다.
💡 pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환하는 메서드입니다.
💡 shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 하는 메서드입니다.

 

[ API Document ]

/**
 * Array.push()의 속성
 * @param {any} elementN : 배열의 끝에 추가할 요소
 * @return {Array} : 배열이 추가 된 이후 Array.length 값
 */
 arr.push(element1[, ...[, elementN]])

/**
 * Array.unshift()의 속성
 * @param {any} elementN : 배열 맨 앞에 추가할 요소
 * @return {Array} : 배열이 추가 된 이후 Array.length 값
 */
arr.unshift([...elementN]);

/**
 * Array.pop()의 속성
 * @param {any} elementN : 배열의 끝에 추가할 요소
 * @return {Array} : 배열에서 제거한 요소. 빈 배열의 경우 undefined 를 반환합니다.
 */
arr.pop();

/**
 * Array.shfit()의 속성
 * @return {Array} : 배열에서 제거한 요소. 빈 배열의 경우 undefined 를 반환합니다.
 */
arr.shift();

Array.prototype.push() - JavaScript | MDN

Array.prototype.unshift() - JavaScript | MDN

Array.prototype.pop() - JavaScript | MDN

Array.prototype.shift() - JavaScript | MDN

 

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */

const numArr = [1, 2, 3, 4, 5];
numArr.push(6, 7); // 7
console.log(numArr); // [1, 2, 3, 4, 5, 6, 7];

const numArr2 = [1, 2, 3, 4, 5];
numArr2.unshift(6, 7); // 7
console.log(numArr2); // [6, 7, 1, 2, 3, 4, 5];

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

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

 

 

5. [reduce] 배열 내 사칙 연산 단일 값 반환 메서드

---

💡 해당 메서드는 배열 내에 모든 값에 대해 연산을 위해 사용하는 메서드입니다. 주로 배열 내에 사칙연산(+, -, *, %)을 하고자 할 때 응용하여 사용합니다.

 

[ API Document ] 

/**
 * reduce() 함수 속성
 * @param {number} accumulator : 첫번째 호출한 값이면서 배열 안에 값을 순차적으로 출력된다.
 * @param {number} currentValue : 처리 할 현재 요소가 출력된다.
 * @param {number} currentIndex : [Optional] 인덱스가 출력된다.
 * @param {number} array : [Optional] reduce를 호출한 배열
 * @param {any} initialValue: [Optional] 최초 호출에서 첫 번째 인수의 값
 * @returns {number} 처리한 결과값을 반환한다.
 */
arr.reduce(callback[, initialValue])

Array.prototype.reduce() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const numArr: number[] = [1, 2, 3, 4, 5, 6];
// reduce()으로 배열 원소의 합계를 구하는 방법
const reduceMethodArr = numArr.reduce((acc, curr) => acc + curr); // 720

/**
 * 응용 사용 방법
 */
// reduce()으로 배열 원소의 곱을 구하는 방법
const reduceMethodArr2 = numArr.reduce((acc, curr) => acc * curr); // 720

// reduce()으로 배열 원소 중 최대 값을 구하는 방법
const reduceMethodArr3 = numArr.reduce((acc, curr) => Math.max(acc, curr)); // 6

// reduce()의 초기값을 10으로 지정하고 처리하는 방법 -> 10 * 1 * 2 * 3 * 4 * 5 * 6
const reduceMethodArr4 = numArr.reduce((acc, curr) => acc * curr, 10); // 7200

 

6. [filter] 배열 내 원소 조작 후 반환 관련 메서드

---

💡 해당 메서드는 배열 내에서 조건을 수행 한 뒤 하나의 결괏값을 반환받고자 할 때 사용합니다.

 

[ API Document ]

/**
 * filter() 메서드 속성
 * @param {any} element : 배열 내에서 순회하면서 반환 받는 값이며, 해당 값을 이용하여 특정 조건으로 filter 한다.
 * @param {number} index : [Optional] 배열의 인덱스
 * @param {number} array : [Optional] filter를 호출한 배열.
 * @param {number} thisArg : [Optional] callback을 실행할 때 this로 사용하는 값.
 * @returns {number} 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.
 */
arr.filter(callback(element[, index[, array]])[, thisArg])

Array.prototype.filter() - JavaScript | MDN

 

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const numArr = [1, 2, 3, 4, 5, 6];
const filterMehtodArr = numArr.filter((fItem) => fItem > 4); // [5, 6]

/**
 * 응용 사용 방법
 */
// filter() 함수를 이용하여서 numArr2랑 같지 않은 배열을 반환 받는다.
const numArr2 = [2, 3, 4];
const filterMehtodArr2 = numArr.filter((fItem) => !numArr2.includes(fItem)); // [1, 5, 6]
console.log(filterMehtodArr2);

// ⭐️ [주의사항] filter() 함수를 이용하여서 대문자를 변환하기는 사용불가 - 원소의 변형이 없이 추출하는 용도로 사용됨.
const strArr = ['a', 'b', 'c', 'd'];
const filterMehtodArr3 = strArr.filter((fItem) => fItem.toUpperCase());
console.log(filterMehtodArr3);

 

 

 

7. [join] 배열 원소 간 구분 문자 추가 관련 메서드

---

💡 해당 메서드는 배열의 모든 요소를 연결하여 하나의 문자로 만들고자 할 때 사용합니다.

 

[ API Document ]

/**
 * Array.join() 메서드 속성
 * @param {Array<number|string>} separator [Optinal] 배열의 각 요소를 구분할 문자열을 지정합니다. 이 구분자는 필요한 경우 문자열로 변환됩니다.
 * @returns {string} 배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다.
 */
arr.join([separator])

 

Array.prototype.join() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const numArr = [1, 2, 3, 4, 5, 6];
const joinMehtodArr1 = numArr.join('-'); // 1-2-3-4-5-6

/**
 * 응용 사용 방법
 */
// ⭐️ join() 매서드를 사용하여 배열 요소를 개행(\\r\\n)을 주어서 사용합니다.
const joinMethodArr2 = numArr.join('\\r\\n'); // 1 \\r\\n 2 \\r\\n 3

 

 

8. [sort] 배열 숫자 및 문자 정렬 관련 메서드 

---

💡 해당 메서드는 배열 내의 문자열/숫자에 대한 오름차순/내림차순으로 정렬하고자 할 때 사용합니다.

 

[ API Document ]

/**
 * Array.sort() 속성
 * @param {Array<any>} compareFunction [Optional] 정렬 순서를 정의하는 함수.
 * @returns {Array<any>} 정렬한 배열을 반환한다. 단, 기존에 지정한 배열이 정렬이 된다.
 */
arr.sort([compareFunction])

Array.prototype.sort() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]
* 숫자의 정렬
* 문자의 정렬
* 문자 중 특정 순번(index)의 정렬
* 숫자/문자의 랜덤(셔플) 정렬

/**
 * 기본 사용 방법
 */
const numArr = [4, 3, 2, 1];

numArr.sort(); // 1, 2, 3, 4
numArr; // 1, 2, 3, 4

/**
 * 응용 사용 방법 -1 : 숫자의 정렬
 */
// sort() 메서드를 이용한 '숫자 오름차순' 정렬
const numArr1 = [4, 3, 2, 1];
const sortMethodArr1 = numArr1.sort((a, b) => a - b); // [1, 2, 3, 4]

// sort() 메서드를 이용한 '숫자 내림차순' 정렬
const numArr2 = [1, 2, 3, 4];
const sortMethodArr2 = numArr2.sort((a, b) => b - a); // [4, 3, 2, 1]


/**
 * 응용 사용 방법 -2 : 문자의 정렬
 */
// sort() 메서드를 이용한 '문자 오름차순' 정렬(대소문자 구분 O)
const strArr1 = ['D', 'c', 'B', 'a'];
const sortMethodArr3 = strArr1.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)); // ['B', 'D', 'a', 'c'] 

// sort() 메서드를 이용한 '문자 내림차순' 정렬(대소문자 구분 O)
const strArr2 = ['A', 'b', 'C', 'd'];
const sortMethodArr4 = strArr2.sort((a, b) => (a > b ? -1 : a < b ? 1 : 0)); // ['d', 'b', 'C', 'A']

// sort() 메서드를 이용한 '문자 오름차순' 정렬(대소문자 구분 X)
const strArr3 = ['D', 'c', 'B', 'a'];
const sortMethodArr5 = strArr3.sort((a, b) => a.localeCompare(b)); // ['a', 'B', 'c', 'D']

// sort() 메서드를 이용한 '문자 내림차순' 정렬(대소문자 구분 X)
const strArr4 = ['A', 'b', 'C', 'd'];
const sortMethodArr6 = strArr4.sort((a, b) => b.localeCompare(a)); // ['d', 'C', 'b', 'A']

// 배열을 문자열로 반환 받는 방법
console.log(...sortMethodArr1);

/**
 * 응용 사용 방법 -3: 선택한 문자열의 인덱스에 따라 문자열 정렬
 */
const strArr5 = ['dog', 'bear', 'cat'];
const idx = 1;

// sort() 메서드를 이용하여 index 기준의 숫자 별 정렬 - 내림차순
const sortMethodArr7 = strArr5.sort((a, b) => {
	if (a[idx] > b[idx]) return 1;
	else if (a[idx] < b[idx]) return -1;
	else return a > b ? 1 : -1;
}); 
// ['cat', 'bear', 'dog']

// sort() 메서드를 이용하여 index 기준의 숫자 별 정렬 - 오름차순
const sortMethodArr8 = strArr5.sort((a, b) => {
	if (a[idx] < b[idx]) return 1;
	else if (a[idx] > b[idx]) return -1;
	else return a < b ? 1 : -1;
}); 
// ['dog', 'bear', 'cat']

/**
 * 응용 사용 방법 -4: 배열을 무작위로 섞어서 정렬 한다.
 */
const strArr9 = ['가', '나', '다', '라', '마'];
strArr9.sort(() => Math.random() - 0.5); // 랜덤 셔플 함수 수행

 

 

8. [fill] 배열 내에 값을 채워주는 메서드

---

💡 해당 fill() 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는 데 사용합니다.
( * 단, 기준이 되는 배열의 값 이상은 추가시켜주지는 않는다 )

 

[ API Document ]

/**
 * Array.fill() 함수 
 * @param {string} value : 배열을 채울 값.
 * @param {number} start : [Optional] 시작 인덱스, 기본 값은 0.
 * @param {number} end : [Optional] 끝 인덱스, 기본 값은 this.length.
 * @returns {Array<string>} 변형한 배열 
 */
arr.fill(value[, start[, end]])

Array.prototype.fill() - JavaScript | MDN

 

 

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const starArr = new Array(5).fill('*'); // ['*', '*', '*', '*']

/**
 * 응용 사용 방법
 */
const strArr = ['apple', 'banna', 'mongo', 'watermelon'];

// Array.fill() 함수를 이용하여 원하는 인덱스에만 채워넣는다.
strArr.fill('**', 0, 2); // ['**', '**', 'mongo', 'watermelon']

// ⭐️ Array.fill()를 사용하여 기존의 배열을 초과하여 인덱스를 지정하더라도 추가는 되지 않는다.
strArr.fill('***', 2, 5); // ['apple', 'banna', '***', '***']

// Array.fill()을 응용한 배열안의 숫자 값 Counting 각각의 값 하기
const numArr = [1, 1, 3, 4, 5, 1, 2, 2, 2];
const countingArr = Array(6).fill(0);
numArr.forEach((nIdex) => {
	countingArr[nIdex]++;
});
console.log(countingArr); // [0, 3, 3, 1, 1, 1]

 

💡 해당 글에 이어져서 다음 글로 이어집니다.

[JS] 배열 조작 함수 -2 (concat, reverse, include, indexOf, map, forEach, slice, at)

 

 

오늘도 감사합니다😀