ARRAY.method

유용한 Array.method

Array.pop( ) : 마지막 요소를 삭제

let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr);	>>> arr = [ 1, 2, 3, 4 ];

Array.push( ) : 마지막에 요소 추가

arr.push(33);
console.log(arr);	>>> arr = [ 1, 2, 3, 4, 33 ];

Array.shift( ) : 첫번째 요소를 삭제

arr.shift();
console.log(arr);	>>> arr = [ 2, 3, 4, 33 ];

Array.unshift( ) : 첫번째에 요소 추가

arr.unshift(24);
console.log(arr);	>>> arr = [ 24, 2, 3, 4, 33 ];	

Array.splice( ) : 요소를 삭제하고 추가

arr.splice(0, 2, 16);
// index 0부터 2개 요소를 삭제하고 그 자리에 16을 추가
console.log(arr);	>>> arr = [ 16, 3, 4, 33 ];

Array.slice( ) : 요소를 잘라내기

let sliceArr = arr.slice(1, 3);
// index 1부터 2까지 요소를 잘라내기
console.log(sliceArr);	>>> sliceArr = [ 3, 4 ];
>>> arr = [ 16, 3, 4, 33 ];

Array.concat( ) : 두 개 이상의 array를 (요소) 병합

let newArr = [10, 11, 12];
let addArr = arr.concat(newArr);	
// 올바른 방식의 array 병합 > array 형태로 반환
let wrongArr = arr + newArr;
// 틀린 방식의 array 병합 > string 형태로 반환
console.log(addArr);	>>> addArr = [ 16,  3,  4, 33, 10, 11, 12 ];
console.log(wrongArr);	>>> wrongArr = '16,3,4,3310,11,12';

Array.every( ) & some( )

let condition = function(value){
  return value % 2 === 0;
}
console.log(arr.every(condition));	>>> false
// ( every elements의 condition() === true ) ? true : false
console.log(arr.some(condition));	>>> true
// ( some elements의 condition() === true ) ? true : false

Array.map( ) : 요소를 일괄적으로 변경해 새 Array로 반환

let mapArr = arr.map(function(element){
  return element * 2;
})
console.log(mapArr);	>>> mapArr = [ 32, 6, 8, 66 ]
console.log(arr);	>>> arr = [ 16, 3, 4, 33 ]

Array.map( ) >>> Array.forEach로 구현하려면

let forEachArr = [];
// 먼저 빈 배열을 선언한 후에 그 안에 push method로 결과값을 return
arr.forEach(function(element){
  forEachArr.push(element * 2);
})
console.log(forEachArr);	>>> forEachArr = [ 32, 6, 8, 66 ]
console.log(arr);		>>> arr = [ 16, 3, 4, 33 ]
// 같은 값을 반환할 수는 있지만 목적에 따라 사용하는 것이 좋음

arr의 요소가 너무 적어졌으니 새로운 array로 다음 methods를 공부해보겠습니다.

let arr = [1, 2, 3, 4, 5, 10, 23, 52, 102]

Array.filter( ) : 조건에 맞는 요소를 배열로 반환

let filterArr = arr.filter(function(element){
  return element % 2 === 0;
})
console.log(filterArr);		>>> filterArr = [ 2, 4, 10, 52, 102 ]
console.log(arr);		>>> arr = [1, 2, 3, 4, 5, 10, 23, 52, 102]
]

Array.find( ) : 조건에 맞는 첫번째 요소의 값을 반환 (배열 X)

find method는 array에서 조건에 맞는 찾을 때까지 함수를 호출합니다. 
let count = 0;
let findArr = arr.find(function(element){
  count++;
  return element > 10;
})
console.log(findArr);		>>> findArr = 23; → 조건에 맞는 첫번째 요소
console.log(count);		>>> count = 7 → 함수 7번 호출

Array.reduce( ) : 다양하게 활용 가능!
reduce의 initial value는 default value 개념?

let arr = [1, 2, 3, 4, 5, 10, 23, 52, 102]
let sum = arr.reduce(function(pre, value){
  return pre + value;
}, 0)
console.log(sum)		>>> sum = 202;

• initial value가 있는 경우 첫번째 호출의 첫번째 인자 pre가 됩니다.
• 첫번째 호출의 return값은 두번째 호출의 첫번째 인자 pre가 됩니다!!!
  1번호출 : pre = 0 (initialValue) & value = 1 → return pre + value = 1
  2번호출 : pre = 1 & value = 2 → return pre + value = 3
  3번호출 : pre = 3 & value = 3 → return pre + value = 6
  4번호출 : pre = 6 & value = 4 → return pre + value = 10
  5번호출 : pre = 10 & value = 5 → return pre + value = 15
  6번호출 : pre = 15 & value = 10 → return pre + value = 25
  7번호출 : pre = 25 & value = 23 → return pre + value = 48
  8번호출 : pre = 48 & value = 52 → return pre + value = 100
  9번호출 : pre = 100 & value = 102 → return pre + value = 202

위 예시에서 arr가 빈 배열 [] 이었다면?
initial value가 없는 경우 : error 발생
initial value가 있는 경우 : sum = initial value 

.reduce method의 다양한 활용 예시를 공부하기 위해
요소가 적은 새로운 arr를 만들어보겠습니다.

let arr = [1, 2, 100]

Array.map( ) → Array.reduce( )

let mapReduce = arr.reduce(function(pre, value){
  pre.push(value * 2);
  return pre;
},[])
> 1번호출 : pre = [] & value = 1 → return [].push(1 * 2) = [2];
> 2번호출 : pre = [2] & value = 2 → return [2].push(2 * 2) = [2, 4];
> 3번호출 : pre = [2, 4] & value = 100 → return [2, 4].push(100 * 2) = [2, 4, 100];
console.log(mapReduce)		>>> mapReduce = [ 2, 4, 100 ]

Array.filter( ) → Array.reduce( )

let filterReduce = arr.reduce(function(pre, value){
  if(value < 50) {
    pre.push(value);
  }
  return pre
},[])
> 1번호출 : pre = [] & value = 1 < 50 → return [].push(1) = [1];
> 2번호출 : pre = [1] & value = 2 < 50 → return [1].push(2) = [1, 2];
> 3번호출 : pre = [1, 2] & value = 100 > 50 → return [2, 4].push() = [1, 2];
console.log(filterReduce)	>>> filterReduce = [ 1, 2 ]

Array.find( ) → Array.reduce( )

let findReduce = arr.reduce(function(pre, value){
  if(pre == undefined && value % 5 == 0){
    pre = value;
  }
  return pre;
},undefined)
> 1번호출 : pre = undefined & value = 1 % 5 != 0 → return pre = value = undefined;
> 2번호출 : pre = undefined & value = 2 % 5 != 0 → return pre = value = undefined;
> 3번호출 : pre = undefined & value = 100 % 5 = 0 → return pre = value = 100;
console.log(findReduce)		>>> findReduce = 100

Array.sort( ) : 요소를 지정된 순서에 따라 배열

let arr = [1, 2, 100]
console.log(arr.sort())		>>> [ 1, 100, 2 ]
// ASCII 문자 순서로 정렬
let atoz = arr.sort(function(a, b){
  return a - b;
})
console.log(atoz)		>>> [ 1, 2, 100 ]
let ztoa = arr.sort(function(a, b){
  return b - a;
})
console.log(ztoa)		>>> [ 100, 2, 1 ]