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

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

 

 

💡 해당 글은 이전에 작성한 글을 참고하시면 다양한 함수를 이해하는데 도움이 됩니다. 🙏

 

[JS] 배열 조작 함수 -1 (from, splice, reduce, filter, join, sort, fill)

 

. 요약

---

번호	입력 타입	주요 기능	메서드 명	리턴 타입
9	Array	배열 조작	concat()	Array
10	Array	배열 조작	reverse()	Array
11	Array	값 비교	includes() / indexOf()	boolean / number
12	Array	배열 순회	map()	None
12	Array	배열 순회	forEach()	None
12	Array	배열 순회	for	None
12	Array	배열 순회	for of	None
12	Array	배열 순회	for in	None
13	Array	배열 조작	slice()	Array
14	Array	배열 원소 조작	at()	Array

 

 

9. [concat] 배열 합치기와 관련된 함수 

---

💡 concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환하는 데 사용합니다.

 

[ API Document ]

/**
 * Array.fill() 함수 
 * @param {any} value : 배열 또는 값
 * @param {any} valueN: [Optional] 배열 또는 값
 * @returns {Array<any>} 새로운 배열 객체 
 */
 array.concat([value1[, value2[, ...[, valueN]]]])

 

Array.prototype.concat() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);   // Array ["a", "b", "c", "d", "e", "f"]

 

 

10. [reverse] 배열의 역순 출력과 관련된 함수 

---

💡 reverse() 메서드는 배열을 역순으로 출력할 때 사용하는 함수입니다.

 

[ API Document ] 

/**
 * Array.reverse() 함수 
 * @returns {Array<any>} 순서가 반전된 배열
 */
 array.reverse()

Array.prototype.reverse() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const numArray = [1, 2, 3, 4, 5, 6];
numArray.reverse(); // [6, 5, 4, 3, 2, 1];

const strArr = ['one', 'two', 'three', 'four', 'five'];
strArr.reverse(); // ['five', 'four', 'three', 'two', 'one']

/**
 * 응용 사용 방법
 */
// Array.reverse()를 이용한 숫자 역순 변경
const numItem = 123456;
const reverseNumItem = numItem.toString().split('').reverse().join('');
parseInt(reverseNumItem); // 654312

// Array.reverse()를 이용한 문자 역순 변경
const strItem = '요세하녕안';
const reverseStrItem = strItem.toString().split('').reverse().join(''); // "안녕하세요"

 

11. [includes/indexOf] 배열 내에 배열 원소 값 조회 관련된 함수 

---

💡 include() 메서드는 배열 내에 값을 조회하는데 사용합니다. (return true/false)
💡 indexOf() 메서드는 배열 내에 값을 조회하는 데 사용되며 찾으면 배열의 인덱스를 리턴해주며 못 찾을 경우 -1을 리턴합니다.

 

[ API Document ] 

/**
 * Array.includes() 메서드 
 * @param {string} valueToFind : 탐색할 요소.(해당 값은 대소문자를 구분합니다.)
 * @param {number} fromIndex : [Optional] 이 배열에서 searchElement 검색을 시작할 위치입니다. (기본값은 0 입니다.)
 * @returns {boolean} 존재 여부를 반환 
 */
arr.includes(valueToFind[, fromIndex])

/**
 * Array.indexOf() 메서드
 * @param {string} searchElement: 배열에서 찾을 요소입니다.
 * @param {number} fromIndex : [Optional] 검색을 시작할 인덱스 
 * @returns {number} 배열내에 발견한 최초 인덱스, 발견되지 않으면 -1
 */
arr.indexOf(searchElement[, fromIndex])

Array.prototype.includes() - JavaScript | MDN

Array.prototype.indexOf() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const fruit = ["사과", "딸기", "바나나", "메론"];

if (fruit.includes("사과")) {
    console.log("사과는 존재한다");
}

fruit.indexOf("사과"); // 0
fruit.indexOf("귤"); // -1

 

12. [map/for of/for in/forEach] 배열 순회 함수

---

💡 해당 함수들은 간단히 설명 후 이전에 작성한 글로 대체를 합니다. 참고해주시면 감사합니다 🙏

[JS] 루프와 반복함수 이해하기

 

함수	장점	KeyPoint	사용법	return 여부
for 문	원하는 배열의 시작과 종료를 조작 할 수 있는 함수	배열의 시작과 종료값 조작할때 사용	for(let i =0 ; arr.length ; arr++)	X
for ~ of	배열의 값만 추출하여서 조작을 할 수 있는 함수	배열의 값만 추출하고자 할때 사용	for(let item of arr)	X
for ~ in	배열의 인덱스 값을 추출하여서 조작을 할 수 있는 함수	배열의 인덱스 값만 추출하고자 할 때 사용	for(let item in arr)	X
map	배열의 값과 인덱스를 반환 받아서 조작을 할 수 있는 함수	배열의 값과 인덱스를 추출하고자 할때 사용(*단 return 값이 존재하지 않을 경우 해당 인덱스에 undefined를 포함하여 리턴해준다)	arr.map((item)⇒ );	O
forEach	배열의 값과 인덱스를 반환 받아서 조작을 할 수 있는 함수	배열의 값과 인덱스를 추출하고자 할때 사용	arr.forEach((item)⇒ );	X
filter	배열의 값과 인덱스를 반환 받으며 조작한 함수를 리턴 받을 수 있는 함수	배열의 값과 인덱스를 추출하고 추출한 상태에 반환을 받을 때 사용 (*단 return 값이 존재하지 않을 경우 값을 포함하지 않고 리턴해준다.)	const result = arr.filter((item) ⇒);	O

 

 

💡 해당 함수들은 배열을 순회하면서 배열 원소 값 혹은 인덱스를 반환받습니다.
모두 filter() 함수와 다르게 return 값은 존재하지 않고 루프 내에서 조작을 수행합니다.

const arr = [1, 2, 3, 4, 5, 6];

arr.map((item, idx)=>{
	console.log(item, idx);
});

arr.forEach((item, idx)=>{
	console.log(item, idx);
});

// value 1, 2, 3, 4, 5, 6
for(const item2 of arr){
	console.log(item2)
};

// index 0, 1, 2, 3, 4, 5, 6
for(const item3 in arr){
	console.log(item3);
}

Array.prototype.map() - JavaScript | MDN

for...of - JavaScript | MDN

for...in - JavaScript | MDN

Array.prototype.forEach() - JavaScript | MDN

 

 

 

13. [slice] 배열 내에서 인덱스를 기준으로 배열 반환 관련 메서드

---

💡 slice() 메서드는 배열 내에서 인덱스를 기준으로 배열을 반환해주는 메서드입니다.

 

[ API Document ]

/**
 * Array.slice()의 속성
 * @param {any} begin : [Optional] 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.
 * @param {any} end : [Optional] 추출을 종료 할 0 기준 인덱스입니다.
 * @return {any} : 추출한 요소를 포함한 새로운 배열.
 */
arr.slice([begin[, end]])

Array.prototype.slice() - JavaScript | MDN

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const fruitsArr = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
fruitsArr.slice(1, 3); // ['Orange', 'Lemon']

/**
 * 응용 사용 방법
 */
// 배열의 마지막 요소를 가져옵니다.
console.log(fruitsArr.slice(-2)); // ['Apple', 'Mango']

 

14. [at] 배열내에서 원소 값과 관련된 메서드

---

💡 배열 내에서 원소 값을 가져오는 메서드입니다.

 

[ API Document ]

/**
 * Array.at()의 속성
 * @param {any} index : 배열에서 반환할 요소의 인덱스(위치). 음수 값을 지정할 경우 배열의 마지막을 기준으로 한 인덱스
 * @return {any} : 주어진 인덱스에 위치한 배열 요소, 주어진 인덱스가 배열에 없으면 undefined를 반환한다.
 */
arr.at(index)

 

[ 해당 메서드 활용하기 ]

/**
 * 기본 사용 방법
 */
const arr = [1, 2, 3, 4, 5, 6, 5, 1, 2, 3, 6];
arr[0]; // 1
arr.at(0); // 1

/**
 * 응용 사용 방법
 */
// 배열의 마지막 요소를 가져옵니다.
arr[arr.length - 1]; // 6
arr.at(-1); // 6

 

오늘도 감사합니다😀