[코드스테이츠 TIL] 배열 Array method

 

 

[ 배열 Array ]

객체지향 대안으로 함수형 프로그래밍을 선호하는 추세인데 array를 공부하는 것이 중요하다.

배열은 객체의 일부이기 때문이다.

 

Array.isArray(obj) : 인자가 배열이라면 true를 반환하고, 아니라면 false를 반환한다.

기본적으로 typeof 를 쓰면 데이터 타입을 알 수 있는데, array는 object 타입으로 나오기 때문에,

array 타입인지 구분하려면 Array.isArray() 메소드를 사용해야한다.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false

 

객체와 배열은 strict equal(===)로 구분할 수 없다. 왜냐하면 객체와 배열은 reference type이기 때문이다.

 

callback : 인자로 넘겨주는 함수(a)를 의미한다.

함수(a)를 매개변수에 받는 함수(b)가 콜백함수a를 즉시 실행할 지 나중에 실행할 지 결정할 수 있다.

function system(callback) {
callback(); // 실행 가능한 콜백 함수
}

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

system(foo);

// system(foo) 호출 시 '실행 가능한 콜백 함수'가 화면에 출력된다

 

arr.foreach(callback) : 주어진 함수를 배열 요소 각각에 대해 실행한다.

- arguments : 배열의 길이만큼 반복하는 함수

- 콜백함수의 parameters : 현재 element, 현재 index(생략가능), 원본배열(생략가능)

- return value : 없음

- 특징 : 배열의 element마다 함수를 반복 실행한다 (for 문 대신 사용 가능)

function printArray(currentElement, index, array) {
console.log(index + ': ' + currentElement);
}

['hello', 3, 5].forEach(printArray);

// 0: hello
// 1: 3
// 2: 5

 

arr.map(callback) : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

- arguments : 배열의 길이만큼 반복하는 함수

- 콜백함수의 parameters : 현재 element, 현재 index(생략가능), 원본배열(생략가능)

- return value: callback이 실행되면서 return하는 값들을 모은 새로운 배열

- 특징 : callback 함수 내에서 return 이 필요하다. 기존 배열과 동일한 길이를 갖는 새로운 배열을 만들 때 유용하다.

[1, 3, 5].map(function(currentElement, index, array) {
return currentElement * 2;
});

// [2, 6, 10]

 

arr.filter(callback) : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

- arguments : 배열의 길이만큼 반복하는 함수

- 콜백함수의 parameters : 현재 element, 현재 index(생략가능), 원본배열(생략가능)

- return value : 조건을 통과한 element들을 담은 새로운 배열

- 특징 : callback 내에서 boolean 형태로 나올 수 있는 return이 필요하다. 기존 배열에서 조건에 따라 특정 element를 걸러낼 때 유용하다.

[1, 3, 5].filter(function(currentElement, index, array) {
return currentElement > 1 //true or false로 판별 가능한 코드
});

// [3, 5]

 

arr.push(el) : 배열 마지막에 요소를 추가한다.

- arguments : 추가할 element (여러 개 가능)

- return value: 추가된 element를 포함한 array의 길이

- mutable이기 때문에 원본 배열이 변경된다

['code', 'states'].push('course'); 

// 리턴값 : 3
// 원본배열 : ['code', 'states', 'course']

[1, 3, 5].push(7, 9); 

// 리턴값 : 5
// 원본배열 : [1, 3, 5, 7, 9]

 

arr1.concat(value) : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

- arguments : 배열 또는 값

- return value : 두 배열을 합친 새로운 배열

- immutable하기 때문에 원본 배열을 건드리지 않음

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result in ['a', 'b', 'c', 1, 2, 3]
// letters = ['a', 'b', 'c']

numers.concat(4);
// result in [1, 2, 3, 4]
// numbers = [1, 2, 3]

 

arr.pop() : 배열에서 마지막요소를 제거하고 그 요소를 반환한다.

- return value : 제거된 element 반환

- mutable하기 때문에 원본 배열이 변경된다.

var arr = ['code', 'states', 'course'];
arr.pop(); 
// 'course'

console.log(arr); 
// ['code', 'states'];

 

arr.slice(begin, end) : 어떤 배열의 begin부터end까지(end 미포함)에 대한 복사본을 새로운 배열 객체로 반환한다.

- arguments : 처음/마지막 index

- return value : 새로운 배열 객체 반환

- index의 범위만큼 element를 추출

- 배열을 복사(shallow copy)할 때 유용 : arr.slice()

- immutable하기 때문에 원본 배열을 건드리지 않는다.

 

- begin index : 음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.

slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출한다.

begin 이 undefined인 경우에는, 0번 인덱스부터 slice 한다.

begin 이 배열의 길이보다 큰 경우에는, 빈 배열을 반환한다.

- end index : end 인덱스를 제외하고 추출한다.

예를들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2, 3을 인덱스로 하는 요소) 추출한다.

음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.

예를들어 slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출한다.

end가 생략되거나, 배열의 길이보다 크다면 slice는 배열의 끝까지(arr.length) 추출한다.

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
    // ["camel", "duck"]

console.log(animals)
// ["ant", "bison", "camel", "duck", "elephant"]

 

arr.splice(start, deletecount, el) : 배열의 기존 요소를 삭제 또는 새 요소를 추가하여 배열의 내용을 변경한다

- arguments : 처음 index (삭제시) 삭제할 element의 갯수 or (추가시) 배열에 추가할 element (여러 개 가능)

- return value : 변경된 새로운 배열 반환

- mutable하기 때문에 배열 추가 및 삭제시 원본 배열이 변경된다.

- 배열 중간에 무언가를 추가하거나 삭제할 유일한 방법이다

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

var fishes = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = fishes.splice(2); // 2번 인덱스를 포함해서 이후의 모든 요소 제거

// fishes is ["angel", "clown"] 
// removed is ["mandarin", "sturgeon"]

 

arr.reduce(callback, initialvalue) : 배열의 각 요소에 대해 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

- arguments : 배열의 길이만큼 반복하는 함수

- 콜백함수의 parameters : 누적값 accumulator, 현재값 currentValue, 현재 index currentIndex(생략가능), 원본배열(생략가능)

- return value : 최종 누적값

- 모든 element의 처리값을 누적해 하나의 결과를 리턴할 때 유용

- initialValue를 넣으면 array.length 만큼 반복되지만, 없으면 array.length-1 만큼 반복된다.

- arr.join 을 reduce로도 구현할 수 있다

 

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
});

// 초기 값 없는 경우 함수 3번 실행
// sum is 6

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 1);

// 초기 값 있는 경우 함수 4번 실행
// sum is 7

//Sum of values in an object array

var initialValue = 0;
var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) {
return accumulator + currentValue.x;
},initialValue)

console.log(sum) // sum is 6

//To sum up the values contained in an array of objects, you must supply an initialValue, 
//so that each item passes through your function.

//Counting instances of values in an object

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});

// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

 

arr.join([separator = ',']) : 배열의 모든 요소를 연결해 하나의 문자열로 만든다

- 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에 '바람비불'을 대입

 

arr.indexOf(searchElement) : 배열에서 지정된 요소를 찾을 수있는 첫 번째 인덱스를 반환한다

- arguments : 배열에서 찾을 element

- return value : 배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1 반환

- 배열 내에서 element 존재 여부를 파악할 때 유용하다

var array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1

 

arr.every(callback) : 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다.

- arguments : 배열의 모든 요소에 대한 조건을 가진 함수

- callback함수의 parameters: 현재 요소, 이하 생략가능

- return value : 배열의 모든 요소가 콜백함수의 조건을 충족하면 true, 아니면 false 반환

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

 

arr.some(callback) :  배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다.

- arguments: 배열의 각 요소를 시험할 함수

- return value: callback이 어떤 배열 요소라도 대해 참인(truthy) 값을 반환하면 true, 그 외엔 false 반환

var fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
    return arr.some(function(arrVal) {
        return val === arrVal;
    });
}

checkAvailability(fruits, 'kela'); //false
checkAvailability(fruits, 'banana'); //true

 

arr.shift() :  배열의 0번째 인덱스에 해당하는 요소를 제거한다

- return value : 제거한 요소 (만약 배열의 length가 0이라면 undefined를 리턴)

- mutable이기 때문에 원본 배열이 변경된다

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

var shifted = myFish.shift(); 

제거후 myFish 배열: [clown,mandarin,surgeon]

// shifted === 'angel'

//while 반복문 안에서 shift() 사용하기

var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
    console.log(i);
}
// Andrew, Edward, Paul, Chris, John

 

arr.unshift(element) : 배열 맨 앞에 요소를 추가한다

- return value : 요소를 추가한 새로운 배열의 length

- mutable이기 때문에 원본 배열이 변경된다

var arr = [1, 2];

arr.unshift(0); 

// result value is 3, the new array length
// arr is [0, 1, 2]

 

arr.toString() : 지정된 배열 및 그 요소를 나타내는 문자열을 반환

- return value : 배열을 표현하는 문자열 (배열을 합쳐(join) 쉼표로 구분된 각 배열 요소를 포함하는 문자열 하나를 반환)

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); 

// myVar is 'Jan,Feb,Mar,Apr'

 

arr.sort(compareFunction) : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

- arguments : 정렬 순서를 정의하는 함수.
  생략하면 배열은 각 문자의 유니 코드 코드 포인트 값에 따라 정렬

- return value : 정렬된 원 배열
  mutable 하므로 원본 배열이 바뀐다

- 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다

- compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬

• compareFunction(a, b)이 0보다 작은 경우 a가 먼저온다
• compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬
• compareFunction(a, b)이 0보다 큰 경우 b가 먼저온다

compare 함수 형식

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

 

오름차순 정렬 compare 함수

function compareNumbers(a, b) {
  return a - b;
}

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

 

 

★ 자바스크립트에서는 method를 연결 연결해서 쓸 수 있다.

let num = [1,2,3,4,5];

function isEven(num){
return num%2 === 0;
}

function multiply(num){
return num*2;
}

function sum(acc,curr){
return acc+curr;
}

num.filter(isEven).map(multiply).reduce(sum); //12

 

 

rest 파라미터

1. 정해지지 않은 수(an indefinite number) 인자를 배열로 나타낼 수 있게 한다.

즉 함수 인자로 여러개가 들어갈 수  있고 그것은 배열로 변환된다.

배열 메서드를 사용할 수있다 (sort, map, forEach 등)

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

2. spread operator : 연산자의 대상 배열 또는 이터러블(iterable)을 "개별" 요소로 분리한다.

따라서 배열 요소를 하나 하나 인자로 받을 수 있다.

console.log(...[1, 2, 3]); // -> 1, 2, 3

var array1 = [1, 2, 3];

console.log(Math.max(...array1));
// expected output: 3

 

Array(숫자) : 숫자만큼 인덱스 있는 빈배열 만들기

let arr = Array(3)
//arr = [empty × 3]

arr[0] = 'hi'
// arr = ["hi", empty × 2]

 

++

1. immutable한 메소드가 뭔지 알아야된다
2. for / of 는 순차탐색이 가능할 때 사용 가능하다
3. object는 순서가 따로 없다 (인덱스라는 개념이 없다)
4. 콘솔로그는 리턴 이전에 찍어줘야 잘 디버깅할 수 있다