[js] 배열 함수 정리

앞에 작성한 배열 글에서 추가적으로
찾아보면서 배열과 관련된 함수들을 정리해보면 좋을 것 같아서
헷갈릴 때 찾아볼 수 있게 해두자요 !!

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 ]

includes

배열에 아이템이 있는지 판별
있다면 true, 아니면 false 반환

var arr11 = [1,2,3]
console.log(arr11.includes(1)) // true
console.log(arr11.includes(4)) // false

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, 제거할 요소 개수, 배열에 추가될 요소 )

array.splice(index, deleteCount, item1, item2, ...)
             
index: 배열에서 요소를 추가하거나 제거할 위치를 지정
deleteCount: 제거할 요소의 개수를 지정/0보다 큰 정수
item1, item2, ...: 배열에 추가할 요소

var arr = [1, 2, 3, 4, 5, 6, 7];
arr.splice(3, 2);
console.log(arr); // [1, 2, 3, 6, 7]
// 3번째 인덱스에서부터 2개 요소를 제거

var arr2 = [1, 2, 3, 4, 5, 6, 7];
arr2.splice(2, 1, "a", "b");
console.log(arr2); // [1, 2, "a", "b", 4, 5, 6, 7]
// 2번째 인덱스에서 1개 요소를 제거한 후 "a"와 "b"를 추가

slice

기존 배열을 변경하지 않고, 선택한 요소들을 잘라 새로운 배열로 반환
생략하면 배열의 끝까지 선택된다.

var arr = [1, 2, 3, 4, 5, 6, 7];
var slicedArr = arr.slice(2, 5);	
// 2번 인덱스 값인 3 부터 5번 인덱스(미포함)이므로
//5번 인덱스 값인 6의 전까지인 5까지가 새로운 배열에 담긴다.
console.log(slicedArr); // [3, 4, 5]

// 끝 인덱스를 생략할 경우
var arr = [1, 2, 3, 4, 5, 6, 7];
var slicedArr = arr.slice(2);
console.log(slicedArr); // [3, 4, 5, 6, 7]

concat

다수의 배열을 합치고 병합된 배열의 사본을 반환 ( 원본 배열은 변경되지 않는다 )

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var concatenatedArr = arr1.concat(arr2);
console.log(concatenatedArr); // [1, 2, 3, 4, 5, 6]

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

var arr4 = [10, 11, 12];
var concatenatedArr3 = arr1.concat(arr4, "a", "b");
console.log(concatenatedArr3); // [1, 2, 3, 10, 11, 12, "a", "b"]

every

배열의 모든 요소가 주어진 조건을 만족하는지를 확인

배열의 모든 요소가 주어진 조건을 만족하면 true를 반환하고,그렇지 않으면 false를 반환
이 메서드는 배열의 각 요소에 대해 주어진 조건을 검사하여
조건이 모든 요소에 대해 참인지 확인한다.

var arr1 = [1, 2, 3, 4, 5];
var isAllEven = arr1.every(num => num % 2 === 0);
console.log(isAllEven); // false

var arr2 = [2, 4, 6, 8, 10];
var isAllEven2 = arr2.every(num => num % 2 === 0);
console.log(isAllEven2); // true

some

배열의 요소 중 하나 이상이 주어진 조건을 만족하는지를 확인
배열의 어떤 요소라도 주어진 조건을 만족하면 true를 반환
그렇지 않으면 false를 반환

var arr1 = [1, 2, 3, 4, 5];
var hasEvenNumber = arr1.some(num => num % 2 === 0);
console.log(hasEvenNumber); // true

var arr2 = [1, 3, 5, 7, 9];
var hasEvenNumber2 = arr2.some(num => num % 2 === 0);
console.log(hasEvenNumber2); // false

forEach

배열의 각 원소별로 지정된 함수를 실행
반환 값이 없으며, 배열을 수정하지 않는다.

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


var arr = [1, 2, 3, 4, 5];
arr.forEach(function(num, index) {
  console.log("Index " + index + ": " + num);
});
// 출력:
// Index 0: 1
// Index 1: 2
// Index 2: 3
// Index 3: 4
// Index 4: 5

map

배열 내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환
기존 배열 변경 x

var arr = [1, 2, 3, 4, 5];
var squaredArr = arr.map(function(num) {
  return num * num;
});
console.log(squaredArr); // [1, 4, 9, 16, 25]

// 화살표 함수 사용
var arr = [1, 2, 3, 4, 5];
var squaredArr = arr.map(num => num * num);
console.log(squaredArr); // [1, 4, 9, 16, 25]

//응용 예시1 
const materials = ['Hydrogen', 'Helium', 'Lithium', 'Beryllium'];
console.log(materials.map((material) => material.length)); // [8, 6, 7, 9]
// material 배열을 매개변수를 받아서 해당 요소의 길이를 반환
//따라서 materials 배열의 각 요소인 문자열의 길이가 새로운 배열로 반환된다.

//응용 예시2 
const words = ['apple', 'banana', 'orange', 'grape'];
const capitalizedWords = words.map(word => word.charAt(0).toUpperCase() + word.slice(1));
console.log(capitalizedWords); // ["Apple", "Banana", "Orange", "Grape"]

//각 문자열의 첫 글자를 대문자로 바꾸기 위해 map 함수를 사용
//각 요소를 화살표 함수로 전달하여 첫 번째 글자를 대문자로 만들고, 나머지 문자열은 그대로 유지

filter

배열의 각 요소를 특정 조건에 따라 필터링하여 새로운 배열을 반환
주어진 조건을 만족하는 요소만을 포함

var arr = [1, 2, 3, 4, 5];
var evenNumbers = arr.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

reduce

배열의 각 요소에 대해 주어진 콜백 함수를 실행하여 하나의 결과값을 반환
배열을 순회하면서 각 요소를 이전의 결과값과 결합하여 최종 결과값을 생성

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

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 ];

var arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort(function(a, b) {
  return a - b;  // 오름차순 정렬 
});
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

// 화살표 함수로 표현
var arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort((a, b) => b - a); // 내림차순 정렬
console.log(arr); // [9, 6, 5, 4, 3, 2, 1, 1]

toString

배열을 문자열로 바꾸어 반환

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

valueOf

객체의 원시 값(Primitive Value)를 반환
배열의 valueOf 메서드는 배열 자체를 반환한다.

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

우선순위:
대부분의 연산에서 JavaScript는 valueOf를 toString보다 먼저 호출한다.
그러나 문자열 연결 연산자(+)의 경우, toString을 먼저 호출한 후에 valueOf를 호출한다.
이에 따라 객체가 문자열 연결 연산자와 함께 사용될 때
toString 메서드의 반환값이 사용된다.

var obj = {
  valueOf: function() {
    return 5;
  },
  toString: function() {
    return "hello";
  }
};
console.log(obj + 2); // "hello2"
위 예시에서는 toString이 valueOf보다 우선하여 호출되며, 
따라서 문자열 "hello"가 반환됨
그 후에는 문자열 연결이 이루어져 "hello2"가 된다.

join

배열 원소 전부를 하나의 문자열로 병합
구분값을 생략할 경우 기본값으로 쉼표가 사용된다.

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

var arr = ["apple", "banana", "orange"];
var result = arr.join(", "); //  쉼표와 공백으로 구분
console.log(result); // "apple, banana, orange"

isArray

배열여부 판별

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("hello")); // false
console.log(Array.isArray({})); // false

Split

문자열을 특정 구분자(separator)를 기준으로 분할하여 배열로 반환

string.split(separator, limit)

separator : 문자열을 분할할 때 사용할 구분자
만약 구분자가 생략되거나 null 또는 빈 문자열('')이면
문자열 전체를 단일 요소로 하는 배열이 반환된다.
limit (선택사항) : 분할할 최대 개수
이 값이 주어지면 반환되는 배열의 요소 개수가 limit 값보다 많지 않도록 분할된다.
이후의 문자열은 마지막 요소로 처리되고 생략하면 문자열 전체를 분할한다.

var str = "apple,banana,orange";
var arr = str.split(",");
console.log(arr); // ["apple", "banana", "orange"]

find / findIndex

배열에서 조건을 만족하는 첫 번째 요소와 해당 요소의 인덱스를 찾는다.

find 메서드는 주어진 조건을 만족하는 배열의 첫 번째 요소를 반환
(여러개를 만족할 때 첫번째 것만 반환!)
만약 조건을 만족하는 요소가 없으면 undefined를 반환합니다.

var arr = [1, 2, 3, 4, 5];
var result = arr.find(function(element) {
  return element > 2;
});
console.log(result); // 3

var arr = [1, 2, 3, 4, 5];
var result = arr.find(function(element) {
  return element > 10;
});
console.log(result); // undefined

findIndex 메서드는 find와 유사함
조건에 만족하는 아이템의 인덱스값을 반환
여러개일 땐 첫번째 아이템의 인덱스 번호만 반환
(조건을 만족하는 요소가 없을 때 -1을 반환)

var arr = [1, 2, 3, 4, 5];
var index = arr.findIndex(function(element) {
  return element > 2;
});
console.log(index); // 2

var arr = [1, 2, 3, 4, 5];
var index = arr.findIndex(function(element) {
  return element > 10;
});
console.log(index); // -1

🔎 undefined - > 미정의 값
컴퓨팅 미정의 값은 문법적으로 유효함에도 불구하고 식이 올바른 값을 가지고 있지 않은 상태이다. 미정의 값은 빈 문자열, 불리언의 "false", 또는 정의되었으나 비어있는 값과는 구별된다.