Array prototype methods

들어가기 전..

드디어 Array prototype methods 차례가 왔습니다!

빠바바밤~~!

기존 ES5에서 넘어온 것도, ES6, ES7에서 추가된 함수도 있습니다.

모든 method를 다 작성할 것은 아닙니다.. 제 기준으로 그저 자주 사용할 수 있는 ..?

주관적인 기준으로 몇 개 뽑았습니다.

 

 

---

Array.prototype methods

배열은 Array 타입 객체입니다.

Array.prototype의 프로퍼티를 상속받습니다.

Array prototype에는 수 많은 method가 정의되어 있습니다.

모든 배열은 이 method를 사용할 수 있습니다.

 

 

Array.prototype's method list

• 수정 메서드  원본 배열을 수정
• 접근자 메서드  배열을 다른 형태로 가공해 새로운 배열을 반환 ( 원본 배열은 수정하지 않음 )
• 반복 메서드  원본 배열의 모든 요소를 순회하며 특정 작업을 수행

 

오늘 포스팅할 내용은 bold 및 컬러 표시를 하였습니다.

분류	method	설명	version
수정 메서드	copyWithin(target, begin, end)	begin ~ (end-1) 사이의 요소를 target의 위치에 복사	ES6
	fill(target, begin, end)	begin ~ (end-1) 사이의 요소를 target으로 대체	ES6
	pop()	배열의 마지막 요소를 잘라냄
	push()	배열 끝에 data 값을 배열 요소로 추가
	reverse()	배열의 요소를 역순으로 정렬
	shift()	배열의 첫번째 요소를 잘라냄
	sort([callback])	배열의 요소를 callback에서 만든 조건에 따라 정렬
	splice(start, deleteCount)	index부터 deleteCount개의 배열 요소를 data로 대체
	unshift(data)	인수로 지정한 데이터를 배열의 시작 부분에 추가
접근자 메서드	concat(array)	지정한 배열을 대상 배열에 연결
	indexOf(data, index)	data와 같은 첫 번째 배열 요소의 키를 검색 (index는 검색을 시작하는 위치)
	join(string)	배열의 요소를 string으로 연결한 문자열로 반환
	lastIndexOf(data, index)	data와 같은 마지막 배열 요소의 키를 검색 (index는 검색을 시작하는 위치)
	slice(begin, end)	begin ~ (end-1) 사이의 요소를 제거한 새로운 배열 반환
	toLocalString()	배열의 요소를 해당 지역에 맞는 언어로 지역화환 문자열로 변환 후 쉼표로 연결해서 반환
	toString()	배열의 요소를 문자열로 변환 후 쉼표로 연결해서 반환
	includes(data, start)	배열이 특정 요소(data)를 포함하는 판별 후 Boolean 값 반환	ES7
반복 메서드	entires()	배열 요소의 인덱스와 값이 요소로 들어있는 배열을 값으로 반환하는 이터레이터를 반환	ES6
	every(callback)	배열의 모든 요소가 callback 조건에 부합하는 판정
	filter(callback)	callback 조건에 부합하는 배열 요소만 담은 새로운 배열 생성
	find(callback, thisValue)	callback 조건에 부합하는 첫번째 배열 요소를 반환	ES6
	findIndex(callback, thisValue)	callback 조건에 부합하는 첫 번째 배열 요소의 인덱스를 반한	ES6
	forEach(callback, thisValue)	배열 요소를 callback을 사용하여 차례대로 처리
	keys()	배열 요소의 인덱스 값을 가지는 이터레이터를 반환	ES6
	map(callback, thisValue)	배열의 요소를 callback으로 처리한 결과물을 배열로 반환
	reduce(callback, initial)	배열 요소를 배열의 왼쪽부터 차례대로 callback으로 처리하여 하나의 값으로 만들어 반환 (initial은 초깃값)
	recueRight(callback, initial)	배열 요소를 배열의 오른쪽부터 차례대로 callback으로 처리하여 하나의 값으로 만들어 반환 (initial은 초깃값)
	some(callback, thisValue)	배열 요소 단 하나라도 callback 조건에 부합하는지 판정
	vlaues()	배열 요소의 데이터를 값으로 가지는 이터레이터를 반환	ES6

※ 이터레이터 : 객체를 next methods로 순환 할 수 있는 객체입니다.

 

브라우저 호환성

	Chrome	Edge	IE	Safari
forEach	1	12	9	3
map	1	12	9	3
filter	1	12	9	3
find	45	12	x	8
findIndex	45	12	x	8
indexOf	1	12	9	3
every	1	12	9	3
some	1	12	9	3
includes	47	14	x	9
reduce	3	12	9	5

 

---

forEach

인수로 받은 callback 함수에서 배열의 요소 별로 한 번씩 실행합니다.

callback 함수에는 인수 value, index, array 가 전달됩니다.

for문 대신 유용하게 사용할 수 있습니다.

 

const arr = ['a','b','c','d','e'];

// 'b'인 값에 'anana' string을 추가해보겠습니다.
arr.forEach((val, ind, arr) => {
  if(val === 'b') {
	arr[ind] = val + 'anana';
  }
});
console.log(arr); // ['a','banana','c','d','e']

 

---

map

인수로 받은 함수를 배열의 요소별로 한 번씩 실행되며 마지막에는 그 함수가 반환한 값으로 새로운 배열을 생성합니다.

forEach와 마찬가지로 함수에는 인수 value, index, array 가 전달됩니다.

요소 값을 return해주지 않으면 undefined로 채워집니다. (예제 마지막 확인)

 

const arr = ['a','b','c','d','e'];

// 각 요소 앞에 'item-' string을 추가해 새로운 배열을 만든다면..
const arr2 = arr.map(val => `item-${val}`);
console.log(arr2); // ["item-a", "item-b", "item-c", "item-d", "item-e"];


// 숫자만 있는 배열에 대해 짝수 홀수를 적어주는 새로운 배열을 만든다면..
const orgArr = ['1','2','3','6','11','13'];
const resArr = result = orgArr.map((val) => {
  if (val % 2) {
    return `${val} is 홀수`;
  }
  return `${val} is 짝수`;
}); // ["1 is 홀수", "2 is 짝수", "3 is 홀수", "6 is 짝수", "11 is 홀수", "13 is 홀수"];


// 숫자와 텍스트가 섞인 배열에서 숫자일 경우 나누기 2 해주는 배열을 만든다면..
const mixArr = [1,2,3,4,5,'치즈',8];
const mixResArr = mixArr.map((val) => {
  if(typeof val === 'number') {
    return val / 2
  }
}); // [0.5, 1, 1.5, 2, 2.5, undefined, 4]

 

---

filter

인수로 받은 함수 조건에 부합되는 배열의 요소만 담아 새로운 배열을 생성합니다.

 

// type이 home인 object로만 배열을 구성한다면..
const arr = [
  {id:2, type: 'home', content: 'my-home'},
  {id:14, type: 'company', content: 'my-company'},
  {id:21, type: 'bus', content: 'your-bus'},
  {id:28, type: 'home', content: 'my-computer'}
];

const result = arr.filter(val=> {
  return val.type === 'home';
}); // [{id:2, type: 'home', content: 'my-home'},{id:28, type: 'home', content: 'my-computer'}]

 

---

find

인수로 받은 함수 조건에 부합되는 배열의 첫번째 요소를 반환합니다.

인수로 받은 함수 연산을 하다가 true가 반환하면 find 함수는 종료되며

함수 조건에 만족하는 요소가 없을 경우, undefind를 반환합니다.

• filter : 조건에 부합되는 배열 요소를 담아 새로운 배열을 생성
• find : 조건에 부합되는 첫번째 요소를 반환

// type이 bus인 요소를 찾는다.
const arr = [
  {id:2, type: 'home', content: 'my-home'},
  {id:14, type: 'company', content: 'my-company'},
  {id:21, type: 'bus', content: 'your-bus'},
  {id:28, type: 'home', content: 'my-computer'}
];

const result = arr.find(val=> {
  return val.type === 'bus';
}); // {id: 21, type: "bus", content: "your-bus"}

 

---

findIndex

인수로 받은 함수 조건에 부합되는 배열의 첫번째 요소를 반환합니다.

 

// type이 bus인 배열 요소의 index 값을 구해본다면..
const arr = [
  {id:2, type: 'home', content: 'my-home'},
  {id:14, type: 'company', content: 'my-company'},
  {id:21, type: 'bus', content: 'your-bus'},
  {id:28, type: 'home', content: 'my-computer'}
];
const result3 = arr.findIndex((val, result2 ) => {
    return val.type === 'bus'
}); // 2. index는 0부터 시작하니까용~

 

---

indexOf

배열 안에서 인수로 지정한 값을 검색해서 가장 먼저 찾은 요소의 인덱스를 반환합니다. 찾지 못했을 시 -1을 반환합니다.

indexOf 메서드는 인덱스가 작은 쪽부터 순서대로 검색하고 lastIndexOf는 인덱스가 큰 쪽부터 검색합니다.

• 첫번째 인수 : 검색할 값
• 두번째 인수 : 검색을 시작할 index. 생략하면 0. 배열 길이를 넘는 값을 입력하면 검색하지 않습니다.

const arr = ['a','b','c','d','e'];
console.log(arr.indexOf('b')); // 1
console.log(arr.indexOf('f')); // -1

 

---

every

배열 안의 모든 요소가 callback 조건에 부합되는지 판정합니다.

개인적인 생각으론 validation check 시 사용하면 좋을 것 같습니다.

const arr = [
  {id:2, type: '아메리카노', price: 2200},
  {id:14, type: '감자전', price: 16000},
  {id:21, type: '테라', price: 2400},
  {id:28, type: '닭도리탕', price: 6500}
];

const result1 = arr.every( val => {
  // 요소의 price가 10000보다 작다면 true
  return val.price < 10000;
}); // false

const result2 = arr.every(val=> {
  // 요소의 price가 10000보다 작다면 true
  return val.price < 20000;
}); // true

 

---

some

배열 요소 중 단 하나라도 callback 조건에 부합하는지 판단합니다.

하나라도 맞을 경우 true를 반환합니다.

const arr = [
  {id:2, type: '아메리카노', price: 2200},
  {id:14, type: '감자전', price: 16000},
  {id:21, type: '테라', price: 2400},
  {id:28, type: '닭도리탕', price: 6500}
];

const result1 = arr.some( val => {
  // 요소 중 하나라도 price가 10000보다 크다면 true
  return val.price > 10000;
}); // true

const result2 = arr.some(val=> {
  // 요소 중 하나라도 price가 20000보다 크다면 true
  return val.price > 20000;
}); // false

 

---

includes

indexOf는 원소의 위치를 반환해주지만 includes는 true false인 boolean 값으로 반환합니다.

 

• 첫번째 인수 : 검색할 값
• 두번째 인수 : 검색을 시작할 index. 생략하면 0. 배열 길이를 넘는 값을 입력하면 false.

const arr = ['a','b','c','d','e'];
console.log(arr.includes('b')); // true
console.log(arr.includes('f')); // false

 

 

---

★ reduce ★

배열의 첫 번째 요소부터 마지막 요소까지 callback 함수를 실행시켜 하나의 결과값을 반환합니다.

callback 함수는 누적값, 현재값, index, array(reduce를 호출한 배열)을 인수로 받습니다.

 

Array.reduce((누적값, 현재값, index, Array) => {
  return 결과
}, 초기값(ex. [], {}));

 

※ 인수

• accumlator (acc / 누적값) 이전 콜백 호출에서 반환된 값. 첫번째 인덱스일 경우 초기값임.
• currentValue (cur / 현재값) 반복 callback에서 현재 처리할 요소의 data
• currentIndex (ind / 인덱스) 반복 callback에서 현재 처리할 요소의 index (optional)
• array (src&arr / 원본배열) reduce를 호출한 배열 (optional)

※ 초깃값 (optional)

• initialValue (초기값) callback의 최초 호출에서 누적값에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce method를 호출하면 오류가 발생합니다.

※ 반환값

• 누적 계산의 결과 값

 

 

 

간단한 덧셈을 하자면.. 배열의 number 요소 1,2,3,4를 더해보겠습니다.

 

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

const result1 = arr.reduce((acc, cur, ind) => {
  return acc + cur
}, 0); // 10

 

acc는 누적값이고 cur은 현재값입니다.

배열의 length 값은 4니 index는 3. 총 4번을 반복 할 것입니다.

index 0번째 반복에서는 누적값(초기값) 0과 현재값 1을 더합니다.

index 1번째 반복에서는 누적값 1과 현재값 2를 더합니다.

index 2번째 반복에서는 누적값 3과 현재값 3를 더합니다.

index 3번째 반복에서는 누적값 6과 현재값 4를 더합니다.

 

그렇게 결과 값은 10이 됩니다.

 

 

 

숫자 계산 외에도 여러가지 방면으로 활용이 가능합니다.

예를 들어 filter method 처럼 사용할 수도 있습니다.

 

// type이 home인 object로만 배열을 구성한다면..

const arr = [
  {id:2, type: 'home', content: 'my-home'},
  {id:14, type: 'company', content: 'my-company'},
  {id:21, type: 'bus', content: 'your-bus'},
  {id:28, type: 'home', content: 'my-computer'}
];


// filter
const filterResult = arr.filter(val=> {
  return val.type === 'home';
}); 
// [{id:2, type: 'home', content: 'my-home'},{id:28, type: 'home', content: 'my-computer'}]


// reduce
const reduceResult = arr.reduce((acc, cur, ind) => {
  if (cur.type === 'home') {
    acc.push(cur);
  }
  return acc;
}, []); 
// [{id:2, type: 'home', content: 'my-home'},{id:28, type: 'home', content: 'my-computer'}]

 

reduce methods로 filter, map, find, includes 등 구현이 가능합니다.

반복이 필요한 상황에서 다재다능하게 사용할 수 있는 유연한 메소드입니다.

 

Q. 그렇다면 모든 상황에서 다 reduce 쓰면 되지 않나요?

A. 구현은 가능하지만 가독성인 측면을 생각하면 상황에 따라 적절한 methods를 사용하는 것이 좋을 것 같습니다.

마치 시맨틱 태그처럼요.

 

 

 

---

오늘은 간단하게 예제만 작성하였습니다..

다음에 map과 reduce 관련하여 심화과정을 들고 오도록 하겠습니다. :)

 

 

 

참고

서적 : 모던 자바스크립트 입문

w3c https://www.w3schools.com/jsref/jsref_obj_array.asp

mdn https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce