Code States Level 4 Underbar 과제를 진행하면서 array method들을 제대로 공부하지 않아
어려웠던 점이 많았다. 그래서 이 기회에 복습하는 의미로 정리해보려한다.

  • 배열의 property
    length
  • 배열의 길이를 변환한다.
var arr = ['hello', 'world', 1, 2, 3];
console.log(arr.length); // 5

1. Array.isArray(obj)

  • arguments: 검사할 객체
  • return value: true / false
  • 검사할 객체가 배열이면 true, 아니면 false를 반환
Array.isArray([]); // true
Array.isArray([1]); // true
Array.isArray(); // false
Array.isArray('Array'); // false
Array.isArray({}); // false

2. arr.forEach(callback) IMMUTABLE

  • arguments: element의 길이만큼 반복하는 함수
    • parameters
      • 순서대로 (현재 element, 현재 index, 배열 그 자체)
  • return value: 없음
  • element마다 함수를 반복 실행 합니다
function printArray(currentElement, index, array) {
  console.log(index + ': ' + currentElement);
}

['hello', 3, 5].forEach(printArray);
// 0: hello
// 1: 3
// 2: 5

arguments 와 parameter의 차이점

  • parameter(매개변수)
    다음 a 함수 정의에서 str1과 str2는 parameter 입니다.
function a (str1, str2){
    return str1 +" "+ str2;
}
  • argument(전달인자)
    a 함수를 호출할 때, 입력값 “parameter”와 “argument”는 argument입니다.
a("parameter","argument");
//"parameter argument"

callback 함수란?

  • 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
  • 이 함수(B)를 parameter로 받는 함수(A)가 callback 함수(B)를 즉시 실행할지, 나중에 실행할 지 결정할 수 있다.
function A(callback) {
  callback(); // 실행 가능한 콜백 함수
}

function B() { console.log('실행 가능한 콜백 함수'); }
A(B);

3.arr.map(callback) IMMUTABLE

  • arguments: element의 길이만큼 반복하는 함수
    • parameters
  • 순서대로 (현재 element, 현재 index, 배열 그 자체)
  • return value: callback이 실행되면서 return하는 값들을 모은 새로운 배열
  • callback 내에서 return 필요
  • 기존 배열과 동일한 길이를 갖고, 형태가 다른 새로운 배열을 만들 때 유용
[1, 3, 5].map(function(currentElement, index, array) {
  return currentElement * 2;
});
// [2, 6, 10]

4.arr.filter(callback) IMMUTABLE

  • arguments: element의 길이만큼 반복하는 함수
    • parameters
      • 순서대로 (현재 element, 현재 index, 배열 그 자체)
  • return value: 조건을 통과한 element들을 담은 새로운 배열
  • callback 내에서 boolean 형태의 return 필요
  • 기존 배열에서 조건에 따라 특정 element를 걸러낼 때 유용
[1, 3, 5].filter(function(currentElement, index, array) {
  return currentElement > 1
});
// [3, 5]

5.arr.push(newElement) MUTABLE

  • arguments: 추가할 element (여러 개 가능)
  • return value: 추가된 array의 길이
  • 배열 마지막에 요소를 추가
['code', 'states'].push('course'); // ['code', 'states', 'course']
[1, 3, 5].push(7, 9); // [1, 3, 5, 7, 9]

6.arr.pop() MUTABLE

  • return value: 제거된 element 반환
  • 배열 마지막 요소를 제거
var arr = ['code', 'states', 'course'];
arr.pop(); // 'course'
console.log(arr); // ['code', 'states'];

7.arr.slice([begin[, end]]) IMMUTABLE

  • arguments: 처음/마지막 index
  • return value: 새로운 배열 객체 반환
  • index의 범위만큼 element를 추출
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
  • 배열을 복사(shallow copy)할 때 유용

8.arr.splice(start[, deleteCount[, item1[, item2[, ...]]]]) MUTABLE

  • arguments:
    • 처음 index
    • (삭제시) 삭제할 element의 갯수
    • (추가시) 배열에 추가할 element (여러 개 가능)
  • return value: 새로운 배열 객체 반환
  • 배열의 내용을 추가/삭제할 때 사용
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drum'); // 'drum'을 두번째 인덱스에 삽입
// ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1); // 두번째 인덱스에서 하나의 항목('drum')을 삭제
// ["angel", "clown", "mandarin", "sturgeon"]

9.arr.reduce(callback[, initialValue]) IMMUTABLE

  • arguments: element의 길이만큼 반복하는 함수, 초기값
    • parameters
      • 순서대로 (누적값 accumulator, 현재값 currentValue, 현재 index currentIndex, 원본배열)
  • return value: 최종 누적값
  • 모든 element의 계산을 누적해 하나의 결과를 리턴할 때 유용
let array1 = [1, 2, 3, 4];
let reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

10.arr.join([separator = ',']) IMMUTABLE

  • arguments: 연결자
  • return value: 연결자로 element를 연결한 결과 문자열
var a = ['바람', '비', '불'];
var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입

11.arr.indexOf(searchElement) IMMUTABLE

  • arguments: 배열에서 찾을 element
  • return value: 배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1
  • element 존재 여부를 파악할 때 유용
var array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
//비슷한 목적을 가진 메소드로는 includes, find가 있음

그 밖의 Array Method

12.arr.concat([value1[, value2[, ...[, valueN]]]]) IMMUTABLE

  • arguments : 배열 또는 값
    • parameters :
      • 배열 또는 값
      • 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.
  • return value : 새로운 Array 객체를 반환
  • 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환할 때 유용.
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
  • 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다.
  • 중첩 배열 내부로 재귀하지 않습니다.
const alpha = ['a', 'b', 'c'];
const test = [1,[[1,2]]];
alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]
alpha.concat(test);
//결과 : ['a', 'b', 'c', 1, [1,2]]

13.arr.every(callback[, thisArg]) IMMUTABLE

  • arguments : 판별 할 배열의 element
    • parameters :
      • callback
        각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다.
        순서대로(현재 요소 currentValue, 현재 index, 배열 그 자체)
      • thisArg
        callback을 실행할 때 this로 사용하는 값.
  • return value : callback이 모든 배열 요소에 대해 참(truthy)인 값을 반환하는 경우 true, 그 외엔 false.
  • 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트할 때 유용.
function isBelowThreshold(currentValue) {
  return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
console.log(array1);
// expected output: [1, 30, 39, 29, 10, 13]

14.arr.some(callback[, thisArg]) IMMUTABLE

  • arguments : 판별 할 배열의 element
    • parameters :
      • callback
        각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다.
        순서대로(현재 요소 currentValue, 현재 index, 배열 그 자체)
      • thisArg
        callback을 실행할 때 this로 사용하는 값.
  • return value : callback이 어떤 배열 요소라도 대해 참인(truthy) 값을 반환하는 경우 true, 그 외엔 false.
  • 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트 할 때 유용.
    function isBiggerThan10(element, index, array) {
    return element > 10;
    }
    [2, 5, 8, 1, 4].some(isBiggerThan10);  // false
    [12, 5, 8, 1, 4].some(isBiggerThan10); // true

END

이 밖의 메서드들도 많은데 추후에 정리하려한다.✌