Java - Array(배열) 관련 자주 사용하는 내장 함수

NodeJS는 Javascript에 프레임워크(상위 라이브러리 방식)로 동작하는 구조이기 때문에, Vue, React, Svelte등을 이용할 때  Javascript를 이용하는 방법을 알고 있어야 개발을 원활하게 진행할 수 있다.

그중 배열은 Javascript에서 가장 많이 사용되는 방식인데, 내장 함수를  통해 코드의 간결성과 편의성을 상당히 높일 수 있있다.  그중 자주 사용되는 내장 함수들에 대해서 알아보도록 하겠다.

내장 함수를 사용할 때 유의할 점
return형 인지, 원본 데이터가 변경되는지를 확인하는 것이 좋다.
만약 return 형인 경우 원본 데이터에는 영향을 주지 않기 때문에, return을 받을 변수를 지정하여 사용할 수 있다.
sort와 같이 원본 배열의 데이터를 변경하는 내장 함수도 있으므로 사용시 주의하도록 하자.

forEach

가장 먼저 forEach이다. forEach를 사용하면 for를 사용한 효과를 바로 적용할 수 있다.

forEach를 사용하면, Javascript는 배열에 리스트를 하나씩 객체로 꺼내어 구성한 함수에 전달해주게 된다.

이를 변수로(필자는 element로 설정하였다) 지정해서 함수에 전달하는 방식으로 구성이 가능하다.

const arr_obj = [1,2,3,4,5]

// for 문자 사용
for (let i =0; i < arr_obj.length; i++) {
  console.log(arr_obj[i])
}


// forEach 사용
arr_obj.forEach(function (element){
console.log(element);
});


// forEach + 화살표 함수(콜백 함수)를 통한 my_print 객체 전달
function my_print(print_obj){
  console.log(print_obj);
}


arr_obj.forEach((element) => my_print(element));

화살표 함수(=>)는 결과를 전달하는 함수 이기 때문에 코드 간결성을 위해 Javascript에서 많이 사용된다.

함수로 바로 전달하거나, 한줄로 표현이 가능한 경우 별도의 중괄호가 필요하지 않다.

includes

배열에 동일한 결과가 있는지 확인하고 있는 경우 해당 값이 있는 경우 true를 반환한다.

문자열, 숫자형 등 자료형이 동일해야 한다는점은 유의하자.

const arr_obj = [1,2,3,4,5]

let number = 4;

console.log(arr_obj.includes(number));
//console 결과 true


// 문자열로 number를 변환
number = "4";


console.log(arr_obj.includes(number));
//console 결과 false

indexOf

배열에 동일한 결과가 있는지 확인하고 있는 경우 해당 값이 있는 경우 해당 값의 인덱스 위치를 반환한다. 

인덱스 위치는 0부터 시작하며, -1인 경우 값이 없다는 의미이다. 문자열, 숫자형 등 자료형이 동일해야 한다는점은 유의하자.

const arr_obj = [1,2,3,4,5]

let number = 4;

console.log(arr_obj.indexOf(number));
//console 결과 3

const arr_obj = [1,2,3,4,5]

let number = 6;

console.log(arr_obj.indexOf(number));
//console 결과 -1

findIndex

findIndex는 key, value와 같이 보다 복잡한 Index 구조에서 활용할 수 있는 내장 함수 이다.

다만 주의할 점은 모든 동일한 조건이 2개 이상 있다 하더라도 가장 처음 매칭되는 index를 반환하게 된다.

따라서 동일한 여러 배열의 index를 찾아야 하는경우에는 filter를 사용하는 것을 추천한다.

const arr_obj = [
  {name: "a"},
  {name: "b"},
  {name: "c"},
  {name: "d"},
  {name: "a"},
]

console.log(arr_obj.findIndex((element) => element.name ==="a" ));
// console 결과 0

find

findIndex는 find와 사용법은 동일한데, 결과를 인덱스 번호가 아닌 실제 배열내 값을 반환한다.

const arr_obj = [
  {name: "a"},
  {name: "b"},
  {name: "c"},
  {name: "d"},
  {name: "a"},
]

console.log(arr_obj.find((element) => element.name ==="a" ));
// console 결과 { "name" : "a"}

filter

 find는 하나의 값을 반환하지만, filter는 동일한 여러개의 값을 배열로 모두 반환한다.

const arr_obj = [
  {name: "a"},
  {name: "b"},
  {name: "c"},
  {name: "d"},
  {name: "a"},
]

console.log(arr_obj.filter((element) => element.name ==="a" ));
// console 결과 [{ "name" : "a"},{ "name" : "a"}]

slice

지장한 배열을 잘라내기 하는 내장 함수이다. 잘라내기를 할 때 2개의 값을 전달해야 하는데,

첫번째 값은 잘라내기를 시작할 위치, 두번째 값은 잘라낼 개수 이다.

const arr_obj = [
  {name: "a"},
  {name: "b"},
  {name: "c"},
  {name: "d"},
  {name: "a"},
]


console.log(arr_obj.slice(0,2));
//console 결과 [{"name": "a"}, {"name": "b"}]

concat

배열과 배열을 합치는 용도로 사용된다.

Javascript 의 장점으로 자료 구조가 달라도 합칠 수 있다.

const arr_obj = [
  {name: "a"},
  {name: "b"},
  {name: "c"},
]

const arr_obj2 = [
  {name: "x"},
  {name: "y"},
  {name: "z"},  
]

console.log(arr_obj.concat(arr_obj2));
//console 결과 [{"name": "a"}, {"name": "b"}, {"name": "c"}, {"name": "x"}, {"name": "y"}, {"name": "z"} ]

sort

원본 배열의 값이 변경되는데, 문자열 방식으로 정렬을 진행하게 된다.

만약 정렬 방식을 변경해야 한다면, 별도의 함수를 만들어 sort에 지정해주면 가능하다.

let arr_obj = ["c","b","a"]

arr_obj.sort();
console.log(arr_obj);

join

배열로 저장되어 있는 합쳐주는 내장함수이다. 문자열로 결과들을 하나로 합쳐서 사용하고자 할 때 즐겨 사용된다.

join() 중괄호에, 합칠때 사용할 문자열을 입력하면, 해당 문자열이가 배열이 합쳐질 때 입력되어 진다.

줄바꿈, 혹은 문자열에 필요한 내용을 입력하여 사용할 수 있다.

let arr_obj = ["hello","asecurity","goodbye"]

console.log(arr_obj.join());

console.log(arr_obj.join(" "));
//console 결과
//"hello,asecurity,goodbye"
//"hello asecurity goodbye"