[JS]어쩌다 까먹는 자바스크립트 배열 메소드/함수 총정리

.pop 

맨 뒤에 있는 원소를 추출하고 그 원소는 제거된다.

const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value); //40
console.log(numbers); //[10, 20, 30]

.push

추가하고 싶은 요소를 맨 뒤에 추가한다.

const array = [1, 2, 3, 4, 5];
console.log(array.push(6)) //[1, 2, 3, 4, 5, 6]

.unshift

추가하고 싶은 요소를 맨 앞에 추가한다.

const numbers = [10, 20, 30, 40];
numbers.unshift(5);
console.log(numbers); //[5, 10, 20, 30, 40]

.shift

맨 앞의 원소를 배열에서 추출하고, 그 원소는 제거된다.

const numbers = [10, 20, 30, 40];
const value = numbers.shift();
console.log(value); //10
console.log(numbers); //[20, 30, 40]

.splice

위의 네 개의 메소드와 달리 삭제와 추가가 가능한 메소드이다. 파라미터를 세 개까지 취할 수 있다.

let array = ['today', 'was', 'not', 'so', 'great'];
array.splice(2, 2);
//'today', 'was', 'great']

위 예제에선 두 개의 파라미터를 취했는데 .splice(제거가 시작되는 인덱스, 제거하려는 요소 개수)이다.

이 메소드는 배열 값을 바꿀 뿐만 아니라, 제거가 반영된 새로운 배열을 리턴한다.

let array = ['I', 'am', 'feeling', 'really', 'happy'];
let newArray = array.splice(3, 2);
//['really', 'happy']

파라미터가 세 개인 경우, 세번째 파라미터는 제거된 인덱스에 추가되는 값이다.

const numbers = [10, 11, 12, 12, 15];
const startIndex = 3;
const amountToDelete = 1;

numbers.splice(startIndex, amountToDelete, 13, 14);
console.log(numbers);
//[ 10, 11, 12, 13, 14, 15 ]

.slice

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

slice 는 splice 랑 조금 비슷하게 배열을 잘라낼 때 사용하는데, 차별점은 기존의 배열은 건드리지 않는다는 점이다.

slice(start)
slice(start, end)

start 파라미터는 어디서에서 시작할지, 그리고 end 파라미터는 어디까지 자를지를 의미한다.

.concat

여러 개의 배열을 하나의 배열로 합친다.

참고로 concat 함수는 기존 배열에 변화를 주지 않는다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);

console.log(concated);//[1, 2, 3, 4, 5, 6];

.every

배열 안의 모든 원소가 주어진 함수에 의한 테스트 통과 여부를 알려준다. 따라서 Boolean 값을 리턴한다.

//ex1
const isBelowThreshold = (currentValue)=> currentValue<40;
const arr1=[1,34,22,6,4];
console.log(arr1.every(isBelowThreshold)); //true

//ex2
function isBigEnough(element, index, array) {
	return element >= 10;
}

[12,3,5,66,44].every(isBigEnough); //false
[22,33,44,55,66].every(isBigEnough); //true
[12,3,5,66,44].every(x=> x>=10); //화살표 함수 경우

.some

every와는 달리 최소 하나라도 테스트를 통과하는지 여부를 알려준다. 마찬가지로 Boolean 값을 리턴한다.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
//true

.forEach

forEach는 for 반복문을 대체시킬 수 있다.

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

for (let i = 0; i < superheroes.length; i++) {
  console.log(superheroes[i]);
}

superheroes.forEach(hero => {
  console.log(hero);
});

forEach 함수의 파라미터로 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 파라미터 hero는 각 원소를 가르킨다.

이렇게 함수형태의 파라미터를 전달하는 것을 콜백함수 라고 부른다. 함수를 등록해주면, forEach 가 실행을 해준다.

.map

map은 배열 안의 원소를 변환할 때 사용되며, 이 과정에서 새로운 배열이 만들어진다.

//원소를 제곱해서 새로운 배열 만들기
const arr = [1,2,3,4,5,6];

//1)for문 이용
const aquared=[];
for (let i =0;i<arr.length;i++) {
	squared.push(arr[i]*arr[i]);
}
console.log(squared);

//2)forEach 이용
const squared=[];
arr.forEach(n=> {
	squared.push(n*n);
});
console.log(squared);

//3)map 사용
const square = n => n*n;
const squared  = arr.map(square);
console.log(squared);

//[1, 4, 9, 16, 25, 36];

map 함수의 파라미터로로는 변화를 주는 함수를 전달해준다.

위 예시에서 변화함수 square는 파라미터 n 을 받아와서 이를 제곱해준다.

arr.map 을 사용할 때 square을 변화함수로 사용함으로써 내부의 모든 값에 대해 제곱을 하여 새로운 배열을 생성하였다.

 

참고로 변화함수를 꼭 이름 붙여서 선언할 필요는 없다. 그러면 다음과 같이 작성 가능하다.

const squared = array.map(n => n * n);
console.log(squared);

.filter

배열에서 특정 조건을 만족하는 값들만 필터링해서 새로운 배열을 만드는 함수이다.

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo => todo.done === false);
console.log(tasksNotDone);

//결과
[
  {
    id: 4,
    text: '배열 내장 함수 배우기',
    done: false
  }
];

.reduce

//기본 Form
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

//ex1 총합 계산
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => {
  console.log({ accumulator, current });
  return accumulator + current;
}, 0);

console.log(sum);

//결과
//object {accumulator: 0, current: 1}
//object {accumulator: 1, current: 2}
//object {accumulator: 2, current: 3}
//object {accumulator: 3, current: 4}
//object {accumulator: 4, current: 5}
//15

//ex2 평균 계산
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum); //3

reduce 함수에는 두 개의 파라미터가 필요하다. 첫번째는 accumulator(누적값)와 current를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째는 reduce 함수에서 사용할 초깃값이다.

.reverse

원소의 순서를 거꾸로 바꾸는 메소드로, 원래 배열을 바꾼다.

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

.sort

배열의 원소를 순서대로 위치시킨다. 디폴트값은 오름차순이며, 문자열은 UTF-16 코드 순서를 따른다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

그러나 이렇게 할경우 숫자를 오름차 순 혹은 내림차순으로 정렬하고 싶을 때 제대로 구현할 수가 없다.

제대로 정렬하기 위해선 비교함수를 적어야 한다.

arr.sort(compareFunction() {})

이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우,

이 함수가 리턴하는 값이 0보다 작을 경우,  a가 b보다 앞에 오도록 정렬하고,

이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다.

만약 0을 리턴하면, a와 b의 순서를 변경하지 않는다.

function CompareForSort(first, second)
{
    if (first == second)
        return 0;
    if (first < second)
        return -1;
    else
        return 1; 
}

var myArray = [1, 2, 23, 13];
console.log(myArray.sort(compareForSort));   // [ 1, 2, 13, 23 ]

두 숫자 차이를 이용해서 간단하게 아래와 같이 나타낼 수 있다. 내림차순은 반대로 b-a를 해주면 된다.

arr.sort(function(a, b)  {
  return a - b;
});

문자열도 이런 원리를 이용해서 다음과 같이 응용하여 정렬할 수 있다.

//대소문자 구분없이 오름차순 정렬
const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA > upperCaseB) return 1;
  if(upperCaseA < upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

//b,banana,Boy

//대소문자 구분없이 내림차순 정렬
arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA < upperCaseB) return 1;
  if(upperCaseA > upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

//Boy,banana,b

.toString 

객체를 나타내는 문자열을 리턴하며, 객체의 toString을 overrriding하면 다른 형식의 문자열을 리턴할 수 있다.

문자열이 기대되는 곳에서 문자열이 아닌 객체를 사용하면 toString을 호출하게 된다.

자바스크립트에서는 prototype을 이용해 객체의 메소드를 override 할 수 있다.

function Dog(name) {
  this.name = name;
}

const dog1 = new Dog('Gabby');

Dog.prototype.toString = function dogToString() {
  return `${this.name}`;
};

console.log(dog1.toString());
// expected output: "Gabby"

.valueOf

특정 객체의 primitive value를 리턴한다.

function MyNumberType(n) {
  this.number = n;
}

MyNumberType.prototype.valueOf = function() {
  return this.number;
};

const object1 = new MyNumberType(4);

console.log(object1 + 3);
// expected output: 7

.join

배열 안의 값들을 문자열 형태로 합쳐준다.

const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

.parseInt

문자열을 parse해서 정수를 리턴한다.

//Syntax
parseInt(string)
parseInt(string, radix) //option

function roughScale(x, base) {
  const parsed = parseInt(x, base);
  if (isNaN(parsed)) { return 0; }
  return parsed * 100;
}

console.log(roughScale(' 0xF', 16));
// expected output: 1500

console.log(roughScale('321', 2));
// expected output: 0

.hasOwnProperty

객체에 특정 프로퍼티가 있는지 알려주는 메소드로, Boolean을 리턴한다.

const object1 = {};
object1.property1 = 42;

console.log(object1.hasOwnProperty('property1'));
// expected output: true

console.log(object1.hasOwnProperty('toString'));
// expected output: false

console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

.indexOf

찾으려는 요소가 몇번째 인덱스인지 알려주는 메소드이다.

만약 배열에 없는 요소일 경우 -1을 리턴한다.

let arr = [1,2,3]
arr.indexOf(3) //2
arr.indexOf(7) //-1

 

 

참고문: https://learnjs.vlpt.us/basics/09-array-functions.html

09. 배열 내장함수 · GitBook

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-data-structures

JavaScript Algorithms and Data Structures Certification | freeCodeCamp.org

MDN