Array Cardio (javascript30 - 4)

array의 중요 함수와 기능들에 대해서 실습해 봅니다.

(https://github.com/KIMSG/javascript30/blob/master/day4/index.html)

기본예제 소스 : https://github.com/wesbos/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/index-START.html

처음에 예제소스에 선언된 배열이 있기 때문에 예제 소스를 우선 다운받아서 시작합니다.

1 2 3 4 5 6 7 8 9 10 11

// Array.prototype.filter()     // 1. Filter the list of inventors for those who were born in the 1500's      const fifteen = inventors.filter(function(inventor){        if (inventor.year >= 1500 && inventor.year < 1600) {          return true;        }else {          return false;        }      });     const fifteen = inventors.filter(inventor =>              (inventor.year >= 1500 && inventor.year < 1600));     console.log(fifteen); Colored by Color Scripter

cs

function을 매번 화살표 연산자로 바꿔주는데 이제 좀 문법이 익숙해 질 것 같습니다.

평소의 저라면 위에 있는 fifteen으로 사용했을텐데..

filter() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

var new_array = arr.filter(callback[, thisArg])

filter는 배열 내 callback이 true를 반환하는 값들을 배열로 새로 담는다.

모든 작은 값 걸러내기

다음 예는 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 filter()를 사용합니다.

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

map() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

Map객체는 간단한 Key, Value의 형태 입니다.

Map 객체 사용하기

var myMap = new Map();

var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};

// 값 저장하기
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");

myMap.size; // 3

// 값 불러오기
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get("a string");   // "value associated with 'a string'"
                         // because keyString === 'a string'
myMap.get({});           // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !== function () {}

reduse() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

왼쪽에서 오른쪽으로 이동하며 배열의 각 요소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 줄입니다.

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.

	accumulator	currentValue	currentIndex	array	반환값
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

reduce에 의해 반환되는 값은 마지막 콜백 호출의 반환값 (10)이 됩니다.

sort() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/sort

배열의 요소를 정렬하여 출력합니다.

var number = new Uint8Array([40, 1, 5, 200]);

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

numbers.sort(compareNumbers);

// Uint8Array [ 1, 5, 40, 200 ]