[JavaScript] Array methods

pop

배열 뒷부분의 값을 삭제한다.

var arr = [ 1, 2, 3, 4 ];
arr.pop();
console.log( arr ); // [ 1, 2, 3 ]

push

배열 뒷부분에 값을 삽입

var arr = [ 1, 2, 3, 4 ];
arr.push( 5 );
console.log( arr ); // [ 1, 2, 3, 4, 5 ]

unshift

배열 맨 앞에 값을 삽입한다.

var arr = [ 1, 2, 3, 4 ];
arr.unshift( 0 );
console.log( arr ); // [ 0, 1, 2, 3, 4 ]

shift

배열 맨 앞의 값을 삭제한다.

var arr = [ 1, 2, 3, 4 ];
arr.shift();
console.log( arr ); // [ 2, 3, 4 ]

splice

배열의 특정위치에 요소를 추가하거나 삭제하고 삭제한 값을 반환한다.

splice( index, 제거할 요소 개수, 배열에 추가될 요소 )
var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );
console.log( arr ); // [ 1, 2, 3, 6, 7 ]   3번째 인덱스에서부터 2개 제거
var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 2, 1, "a", "b");
console.log( arr ); 
// [ 1, 2, "a", "b", 4, 5, 6, 7 ] 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가

slice( startIndex, endIndex)

배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환한다.
매개변수를 넣지 않으면 배열이 복사된다.

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
var newArr = arr.slice( 3, 6 );
console.log( 'slice',  newArr ); // [ 4, 5, 6 ]

concat

다수의 배열을 합치고 병합된 배열의 사본을 반환한다.
즉, 다른 참조값을 반환한다.

var arr1 = [ 1, 2, 3 ];
var arr2 = [ 4, 5, 6 ];
var arr3 = arr2.concat( arr1 );
console.log( arr3 ); // [ 4, 5, 6, 1, 2, 3 ]
console.log(arr1.concat([7,8],9,0); // [1, 2, 3, 7, 8, 9, 0]

every

배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.every( isEven ) ); // false  모든 요소가 true이면 true를 return 하고 그렇지 않으면 false

some

지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // true  하나라도 true이면 true를 return

forEach

배열의 각 원소별로 지정된 함수를 실행한다.

var arr =[ 1, 2, 3 ];
arr.forEach( function( value, index, arr ) {
  console.log( value );   // 1 2 3
  console.log( index );   // 0 1 2
});

map

배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

//example1
var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.map( isEven );
console.log( newArr ); 
// [ false, true, false, true, false, true, false, true, false, true ]
//
// example2
let userList = [
  	{name: "mike", age: 30},
    {name: "jane", age: 27},
    {name: "tom", age: 10},
];
let newUserList = userList.map((user,index) => {
  return Object.assign({},user,{
    id: index + 1;
    isAdult: user.age > 19,
  });
});
// {name: "mike", age: 30, id: 1, isAdult: true},
// {name: "jane", age: 27, id: 2, isAdult: true},
// {name: "tom", age: 10, id: 3, isAdult: false},

flatMap

map과 기본기능은 같다.
차이점은 flatMap은 반환된 값을 1차원 줄여서 반환한다.

const list = [10,20];
const cb = (element, index, all) => {
	return [element + 5]
};
console.log(list.map(cb)); // [[15],[25]]
console.log(list.flatMap(db)); // [15, 25]

filter

지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reduce

누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var value = arr.reduce( function( previousValue, currentValue, index ) {
  return previousValue + currentValue;
});
console.log( value ); // 55

reverse

배열의 원소 순서를 거꾸로 바꾼다.

var arr =[ 1, 2, 3, 4 ];
arr.reverse();
console.log( arr ); // [ 4, 3, 2, 1 ]

sort

배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다.
모든 원소를 문자열로 취급해 사전적으로 정렬한다.

var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort();
console.log( arr ); // [ 1, 10, 11, 12, 13, 2, 3, 5 ];
// sort에 함수로 정렬
var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort( function( a, b ) {
  return a - b;
})
console.log( arr ); // [ 1, 2, 3, 5, 10, 11, 12, 13 ]

toString

배열을 문자열로 바꾸어 반환한다.
진수 변환 시에도 사용가능하다. 색상 값 변경시 용이

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4
var num = 10;
console.log(num.toString(2)); // "1010"
var num2 = 255;
console.log(num2.toString(16)); // "ff"

## valueOf
> toString과 비슷하나 배열을 반환한다.
>>
```javascript
var arr =[ 1, 2, 3, 4 ];
console.log( arr.valueOf() ); // [ 1, 2, 3, 4 ]

indexOf

매개변수의 index를 처음부터 검색해서 반환한다.

var arr = [1,2,3,4,5,1,2,3];
arr.indexOf(3) ;// 2
arr.indexOf(3,3); // 7, index 3부터 검색

lastIndexOf

매개변수의 index를 끝에서 부터 검색해서 반환한다.

var arr = [1,2,3,4,5,1,2,3];
arr.lastIndexOf(3); // 7

includes

Generic

배열에서 매개변수 값이 있는지 없는지 확인한다.

var arr = [1,2,3];
arr.includes(2); // true
arr.includes(8); // false

// generic 사용 예시
const like = {0: 10, 1: 20, 2: 30, length: 30}
console.log(Array.prototype.includes.call(like,20));
// true

join

배열 원소 전부를 하나의 문자열로 합친다. 매개변수가 없으면 , 가 default다.

var arr =[ 1, 2, 3, 4 ];
console.log( arr.join() );      // 1,2,3,4
console.log( arr.join( '-' ) ); // 1-2-3-4

find

매개변수에 함수를 넣어 해당 함수에서 true를 반환하는 값을 출력한다.
처음 발견된 값을 반환한다.

만약 값이 없다면 undefined를 반환한다.

// example1
let arr = [1,2,3,4,5];
const result = arr.find((item) => {
  return item % 2 === 0;
});
console.log(result); // 2
//example2
let userList = [
  	{name: "mike", age: 30},
    {name: "jane", age: 27},
    {name: "tom", age: 10},
];
userList.find((user)=>{
  if(user.age < 19){
    return true;
  }); 
// {name: "tom", age: 10}

findIndex

매개변수에 함수를 넣어 해당 함수에서 true를 반환하는 값의 index을 출력한다.
처음 발견된 값의 index를 반환한다.

없다면 -1 을 반환한다.

let userList = [
  	{name: "mike", age: 30},
    {name: "jane", age: 27},
    {name: "tom", age: 10},
];
userList.findIndex((user)=>{
  if(user.age < 19){
    return true;
  }); 
// 2

fill

Generic

설정한 범위 값을 지정한 값으로 대체한다.

파라미터: 대체할 값, opt 시작 인덱스 ,opt 끝 인덱스

//Generic 사용 예시
const like = {0 : "A", 1:"B", 2:"C", length:3};
console.log(Array.prototype.fill.call(like, "책", 1));
// {0: A, 1: 책, 2: 책, length: 3}

copyWithin

Generic

범위값을 얕은 복사하여 같은 오브젝트의 설정한다.
원본값을 수정한다.

파라미터 : 붙여넣기를 시작할 인덱스, 복사 시작 인덱스, 복사 끝 인덱스
복사 끝 인덱스는 포함되지 않는다.

// 파라미터를 두 개 사용한 경우
const list = ["A","B","C","D","E"];
const copy = list.copyWithin(1,3);
console.log(list); // [A, D, E, D, E]
console.log(copy); // [A, D, E, D, E]

// 파라미터를 세 개 사용한 경우
const list = ["A","B","C","D","E"];
const copy = list.copyWithin(0, 2, 4);
console.log(copy);// [C,D,C,D,E]

// 복사 후 붙여넣기 시 원본 배열의 인덱스를 벗어날 경우 그 부분은 무시
const list = ["A","B","C","D","E"];
const copy = list.copyWithin(3, 2, 4);
console.log(copy);// [A, B, C, C, D];

flat()

배열 차원을 변환하고 새로운 배열로 설정하여 반환
원본값은 유지된다.

파라미터: opt 대상 깊이 (디폴트 값 1)
예시: 파라미터가 3 일 경우 (3+1)차원 배열까지 모두 1차원 배열로 만든다.

대상 깊이가 배열의 차원보다 크면 1차원 배열이 된다.

// 파라미터를 지정하지 않았을 때, 1
const list = [1,2,[3,4]];
const result = list.flat();

console.log(list); // [1,2,[3,4]]
console.log(result); // [1,2,3,4]

// 파라미터를 지정했을 때, 3
const list = [1,2,[3,4,[5,[6]]]];
const result = list.flat(3);
console.log(result); // [1,2,3,4,5,[6]]

// 추가 기능 : 빈 엘리먼트를 삭제한다.
const list = [1,2, , , ,[3,4]];
const change = list.flat();
console.log(change); // [1,2,3,4]

Array.isArray()

배열인지 아닌지 판단해주는 메소드

let user = {
  name: "Mike",
  age: 30,
};
let userList = ["Mike", "Tom", "Jane"];
console.log(typeof user); // object
console.log(typeof userList); // object
console.log(Array.isArray(user)); // false
console.log(Array.isArray(userList)); //true

Array.from()

파라미터 : 변환 대상, opt 전개될 때마다 호출할 함수 , opt this 바인딩

첫번제 파라미터의 오브젝트를 Array 로 변환

const like = {0: "zero", 1: "one", length: 2};
const list = Array.from(like);
console.log(list); // [zero, one]

console.log(Array.from("ABC")); // [A,B,C]

// <li class="sports">축구</li>
// <li class="sports">농구</li>
const nodes = document. querySelectorAll(".sports");
const show = (node) => log(node.textContent);
Array.from(node).forEach(show); 
/*
축구
농구
*/

두번째 파라미터에 전개될 때마다 호출할 함수 지정

const like = {0: "zero", 1: "one", length: 2};
console.log(Array.from(like, value => value + "변경"));
// [zero변경, one변경]

// 2차원 배열 만들기
const getVisited = (row, col) =>
  Array.from(Array(row), () => Array(col).fill(false));

세번째 파라미터에 this 바인딩

cosnt like = {0: 10, 1: 20, length: 2};
console.log(Array.from(like, funcion(value){
	return value + this.plus;
	}, {plus: 70})); 
// [80,90]

Array.of()

파라미터 값을 Array로 변환
파라미터는 콤마로 구분하여 다수 작성 가능하다.

만약 파라미터가 없다면 빈 배열을 반환한다.

const result = Array.of(1,2,3);
console.log(result); // [1,2,3]
console.log(Array.of()) // []