[Javascript] 내장 함수

객체 단위인 JS에서 배열의 내장 함수를 이용하면 보다 쉽게 요소에 접근하거나 첨자를 찾아낼 수 있다.
내장함수로는 filter, find, findIndex, slice, map, foreach, concat, sort, join 등이 있는데 귀찮은 연산을 알아서 해준다.

 

일단 위에 적어둔 함수들의 사용 예시를 만들어보자.

 

forEach

// forEach

const ar = [1,2,3,4];
ar.forEach((x)=>{console.log(x*2)});

==================================
2
4
6
8

 forEach는 말 그대로 요소 각각에 적용해야 될 연산이 있을 때 사용된다. 원본은 건들지 않으며 단순히 각 요소를 인자로 받아 전달된 값만을 참조한다. 아마 파워쉘과 친숙한 사람들은 이미 많이 사용해봤을 것이다.

 

map

// map

const ar = [1,2,3,4];
const ar2 = ar.map((x)=> {return x*2;});
console.log(ar2);

==========================================
[2, 4, 6, 8]

map은 위의 forEach와 비슷한데 결과 값이 다르다. 정확히는 타입이 달라지는데 forEach는 연산된 결과에 따라 단순히 하나의 요소를 반환한다면 map은 말 그대로 대응된 값 즉, 배열을 반환한다.

includes

// includes

const ar = [1,2,3,4];
const value = 2;
console.log(ar.includes(value));

======================================================================
true

includes는 해당 객체내에 지정하는 값이 포함되어 있는지 확인한다. 있다면 true를 리턴하고 없으면 false를 리턴한다.

 

indexOf

// indexOf

const ar = [1,2,3,4];
const value = 3;
console.log(ar.indexOf(value));

======================================================================
2

 

indexOf는 배열 내에 해당 값이 들어있는지 확인하고 해당 첨자를 반환한다.

 

findIndex

//findIndex

const ar = [
	{
		introduce: "나는 바보다",
		askTo: "너는 누구냐"
	},
	{
		introduce: "나는 천재다",
		askTo: "너는 누구냐"
	}
];
console.log(ar.findIndex((x)=>{return x.introduce === "나는 바보다"}));

======================================================================
0

findIndex 함수는 객체가 포함된 배열에서 주로 사용되며 배열 내에서 찾으려는 객체가 몇 번째에 위치하는지 그 인덱스를 반환한다.

find

// find
const ar = [
	{
		introduce: "나는 바보다",
		askTo: "너는 누구냐"
	},
	{
		introduce: "나는 천재다",
		askTo: "너는 누구냐"
	}
];
console.log(ar.find((x)=>{return x.askTo === "너는 누구냐";}));

======================================================================
{introduce: "나는 바보다", askTo: "너는 누구냐"}
	introduce: "나는 바보다"
	askTo: "너는 누구냐

 findIndex와 동일하되 값을 찾을 때 사용되며 가장 첫 번째 요소만 리턴한다. 즉, 여러 객체에서 동일한 값을 갖고 있다하더라도 가장 첫 번째로 검색된 객체만 리턴한다. 만약 일치하는 모든 값을 전달받고 싶다면 filter 함수를 사용한다.

 

filter

// filter

const ar = [
	{
		introduce: "나는 바보다",
		askTo: "너는 누구냐"
	},
	{
		introduce: "나는 천재다",
		askTo: "너는 누구냐"
	}
];
console.log(ar.filter((x)=>{return x.askTo === "너는 누구냐";}));

======================================================================
[Object, Object]
0: Object
	introduce: "나는 바보다"
	askTo: "너는 누구냐"
1: Object
	introduce: "나는 천재다"
	askTo: "너는 누구냐"

찾고자 하는 값을 인자로 전달하면 배열 내에서 동일한 값을 갖는 모든 요소를 배열로 만들어 리턴한다. 

slice

// slice

const ar = [
	{
		introduce: "나는 바보다",
		askTo: "너는 누구냐"
	},
	{
		introduce: "나는 천재다",
		askTo: "너는 누구냐"
	}
];
console.log(ar.slice(0,1));

======================================================================
[Object]
0: Object
	introduce: "나는 바보다"
	askTo: "너는 누구냐"

뜻 그대로 잘라내는 동작을 하는 함수이다. 전달 값으론 보통 인덱스 번호를 넘기는데 위 구문은 "0번부터 1번까지 잘라줘"라는 뜻이다. slice(begin, end)의 원형을 갖고 있기 때문에 end값으로 지정된 인덱스 번호 이전까지의 값을 리턴한다고 보면 된다.

concat

// concat

const ar = [
	{
		introduce: "나는 바보다",
		askTo: "너는 누구냐"
	},
	{
		introduce: "나는 천재다",
		askTo: "너는 누구냐"
	}
];

const ar2 = [
	{
		introduce: "나도 바본데",
		askTo: "누가 더 바보냐"
	}
];

// const ar3 = ar.concat(ar2);
console.log(ar.concat(ar2));
======================================================================
(3)[Object, Object, Object]
0: Object
	introduce: "나는 바보다"
	askTo: "너는 누구냐"
1: Object
	introduce: "나는 천재다"
	askTo: "너는 누구냐"
2: Object
	introduce: "나도 바본데"
	askTo: "누가 더 바보냐"

두 객체를 이어 붙일때 사용한다. 선두가 될 배열에 함수를 사용하고 인자로 이어붙일 배열을 넘긴다. 리턴된 값은 두 배열을 이어붙인 새로운 배열을 리턴하며 이를 대입받아 사용할 수도 있다.

sort

// sort

const ar = [4,1,5,2,6,9,7,8,3,11,19,32];

function compare(a,b){
	if(a>b){return 1;}
	if(a<b){return -1;}
	return 0;
}

ar.sort(compare);
console.log(ar);

======================================================================
[1, 2, 3, 4, 5, 6, 7, 8, 9, 11, …]

sort는 배열 내 요소를 정렬할 때 사용된다. 비교 연산을 할 때 compare 함수를 전달해야 되는데 보면 알겠지만 간단한 구문만 추가하면 알아서 정렬해준다. 이를 생략하면 유니코드 순으로 정렬되며 아마 1, 11, 19, 2, ...와 같이 정렬될 것이다.

join

// join

const ar = ["반갑습니다.", "stdFrog", "입니다"];
const string = (ar.join(" "));
console.log(string);

======================================================================
반갑습니다. stdFrog 입니다

join은 인자로 전달된 리터럴을 각 요소 사이에 끼워 문자열로 만들고 이 값을 리턴한다.

여기까지 간단하게 내장 함수 몇 가지를 정리했다.
전부 직접 만들어 사용할 수 있겠지만 지원되는 native 함수이니 꼭 잘 활용했으면 좋겠다.