2019년 4월 12일

배열(Array)

자바스크립트에서는 forEach(), map(), filter()를 자유자재로 다룰 줄 알아야한다.

for 문 대신에 이 세 가지를 쓰면서 연습하자.

reduce() 함수도 공부하자. 서버와 클라이언트에서 매우 많이 사용되는 함수이다.

array.join(구분자)

구분자를 기준으로 합친 새 문자열을 반환한다.
구분자를 입력하지 않으면 쉼표(,)가 구분자가 된다.

var array = [1, 2, 3];
array.join(); // "1,2,3"
array.join(':'); // "1:2:3"

array.concat()

배열을 병합(merge)후 새 배열을 반환한다.

var array = [1,2,3];
array = array.concat(4,5); // [1,2,3,4,5]
array.concat([6,7]); // [1,2,3,4,5,6,7]

array.push(), array.pop()

array.push(item): 배열의 맨 끝에 item을 추가하고 변경된 배열의 길이를 반환한다.
array.pop(): 배열의 맨 끝 항목을 삭제한다.

var array = [1,2,3];
array.push(4); // 4
array; // [1,2,3,4]
array.pop(); // [4]

array.unshift(), array.shift()

array.unshift(item): 배열의 맨 앞에 item을 추가하고 변경된 배열의 길이를 반환한다.
array.shift(): 배열의 맨 앞 항목을 삭제한다.

array.splice(시작점, 지울 개수, 추가할 항목)

splice를 이용하면 배열의 중간에도 항목(item)을 추가 삭제 할 수 있다.

var array = [1,2,3,4];
array.splice(2, 1, 5); // 3
array; // [1,2,5,4];

삭제하지 않고 추가만 하고 싶으면 지울 개수에 0을 넣으면 된다. splice(시작점, 0, 추가할 항목)

every

array.every(function(항목) { 조건 })

every: 배열의 모든 항목이 true면 true를 반환한다.

some

array.some(function(항목) { 조건 })

some: 배열의 일부 항목이 true면 true를 반환한다.

var array = [1, 3, 5, 7, 9];
array.every(function(i) {
  return i % 2 === 1;
}); // true
array.every(function(i) {
  return i < 9;
}); // false
array.some(function(i) {
  return i === 9;
}); // true

for 문을 대체할 유용한 메서드

forEach(), map(), reduce()

forEach(), map(), reduce() 메서드의 특징

콜백 함수를 통해 각 요소(element)에 대한 정보를 받는다.

콜백 함수의 인자로부터 전달되는 정보
- currentValue: 배열에서 현재 입력받는 element.
- index: 배열에서 현재 입력받는 element의 인덱스.
- array: forEach()를 호출한 배열 (나머지 메서드도 동일)

forEach()

array.forEach(function(항목){ 조건 })

배열의 각 요소(element)에 대하여 조건식의 함수를 적용한다.

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"

for 문과 forEach() 비교

// for loop
var arr = [3, 9, 4, 2, 7, 6];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 == 0) {
        console.log(arr[i]);
    }
}

// forEach()
var arr = [3, 9, 4, 2, 7, 6];
arr.forEach(function (n) {
    if (n % 2 == 0) {
        console.log(n);
    }
});

for loop 대신 forEach()를 쓰면 좋은 점
- 가독성이 높아진다.
- forEach는 콜백 함수의 첫 번째 인자로 각 element 값을 받는다.
- 따라서 인덱스 값과 element를 받기위한 변수 (i, arr[i]) 가 필요없다.

map()

array.map(function(항목){ 조건 })

콜백 함수의 리턴을 모아서 새로운 배열을 만든다.

map()을 이용하면 원본 배열을 유지한 채 새로운 배열을 쉽게 만들 수 있다.

forEach 와 차이점: 1) map은 바뀐 새 배열을 반환하지만, forEach는 반환하지 않는다.

// 배열의 각 항목에 +1 을 하고 리턴하는 함수 
var array = [1,2,3];
array.map(function(x) {
  return x+1;
}); // [2,3,4]

var array = [1,2,3];
array.forEach(function(x) {
  return x+1;
}); // undefined

forEach 와 차이점: 2) 코드가 직관적이고 가독성이 높다.
map()은 부모 스코프 영역을 건드리지 않고 콜백 함수만으로 원하는 결과를 얻는다. (사이드 이펙트 없음)
함수 밖에 있는 스코프(scope)와 변수(variable)를 신경쓰지 않아도 되기 때문에 직관적이다.

// 문자열 배열에서 문자열 길이를 리턴하는 함수
// 함수만 봐도 어떤 일을 하는지 알 수 있다.
var arr = ['foo', 'hello', 'diamond', 'A'];
var arr2 = arr.map(function (str) {
    return str.length;
});
console.log(arr2); // [3, 5, 7, 1]

// for 문을 사용하면 함수 내에서 외부 변수 arr2를 참조해야한다.
// 부모 스코프까지 신경써야 하므로 직관적이지 않다.
var arr = ['foo', 'hello', 'diamond', 'A'];
var arr2 = [];
arr.forEach(function (str) {
    arr2.push(str.length);
});
console.log(arr2); // [3, 5, 7, 1]

filter()

array.filter(function(항목){ 조건 })

특정 조건에 해당하는 요소(element)만 걸러내 새 배열로 만든다.

// 배열 안의 짝수만 남기고 리턴하는 함수
var array = [1,2,3,4,5];
array.filter(function(x) {
  return x % 2 === 0;
}); // [2,4]

콜백 함수의 리턴은 boolean을 갖는다.
리턴이 true인 요소만 모아서 새로운 배열을 만든다.
생략하면 리턴은 undefined이므로 false가 된다.
리턴이 true인 요소가 없다면 빈 배열[]이 반환된다.

var arr = [4, 377, 1024];
var arr2 = arr.filter(function (n) {
    return n % 5 == 0;
});
console.log(arr2); // []

undefined도 아닌 빈 배열[]을 반환하는 것은 매우 큰 의미를 갖는다.
보통 도메인을 해결하기 위해서 Array 메서드를 여러개 연결해 사용한다.
이 때 undefined이 아닌 빈 배열[]을 반환 함으로써 중간에 오류가 나지 않고 다음 Array 메서드를 사용할 수 있다.

// 조건에 맞는 요소가 없는 경우
var arr = [4, 377, 1024]; // 5의 배수가 없음.
var arr2 = arr.filter(function (n) {
    return n % 5 == 0;
}).map(function (n) { // filter로부터 빈 배열이 반환됨.
    return n * 2;
});
console.log(arr2); // []. map()의 콜백 함수는 결국 한 번도 호출되지 않았으나 문제 없음.

reduce()

array.reduce(function(이전값, 현재값){ 조건 }, 초기값)

reduce() 메서드는 map(), filter()를 대체할 수 있다.
배열의 왼쪽부터 조건을 적용해 하나의 값으로 만든다.
오른쪽부터 조건을 적용하고 싶으면 reduceRight()를 쓴다.

1. callback 함수

previousValue: 이전 마지막 콜백 호출에서 반환된 값.
currentValue: 배열 내 현재 처리되고 있는 element.
currentIndex: 배열 내 현재 처리되고 있는 element의 인덱스
array: reduce()에 호출되는 배열

2. initialValue(초기값): 선택사항. callback의 첫 호출에 첫 번째 인수로 사용하는 값.

다른 메서드와는 달리 initialValue라는 두 번째 인자를 넣을 수 있다.
중요!: reduce()의 return은 배열(array), 배열의 element 또는 사용자가 원하는 값이 될 수 있다.

// 배열의 왼쪽부터 더한 값을 리턴하는 함수
var arr = [1, 2, 3, 4, 5];
arr.reduce(function(prev, cur) {
  return prev + cur;
}); // 15

위 함수의 호출 순서를 살펴보면 다음과 같다.

호출 순서	pre	cur	return
1	1 (첫 번째 element)	2	3 (1+2)
2	3	3	6 (3+3)
3	6	4	10 (6+4)
4	10	5	15 (10+5)

reduce의 두 번째 인자인 initialValue를 생략했기 때문에 pre의 첫번째 element로 1이 전달되었다.

// 배열 요소의 합 계산하기
var arr = [1, 2, 3, 4, 5];
var count = 0;
var sum = arr.reduce(function (pre, value) {
    count++;
    return pre + value;
}, 0); // initialValue가 주어졌다!
console.log(sum); // 15
console.log(count); // 5

위 함수의 호출 순서를 살펴보면 다음과 같다.

호출 순서	pre	cur	return
1	0 (initialValue)	1	1 (0+1)
2	1	2	3 (1+2)
3	3	3	6 (3+3)
4	6	4	10 (6+4)
5	10	5	15 (10+5)

위에 map()과 filter()로 구현한 예제를 reduce()로 구현하면 다음과 같다.

// map - 문자열 배열에서 문자열 길이만 획득하기
// reduce로 구현
var arr = ['foo', 'hello', 'diamond', 'A'];
var arr2 = arr.reduce(function (pre, value) {
    pre.push(value.length);
    return pre;
}, []);
console.log(arr2); // [3, 5, 7, 1]

// filter - 정수 배열에서 2의 배수인 정수만 모으기
// reduce로 구현
var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function (pre, value) {
    if (value % 2 == 0) {
        pre.push(value);
    }
    return pre;
}, []);
console.log(arr2); // [2,4]

위의 예제는 reduce()를 사용하는 것보다 filter()와 map()을 사용하는 게 가독성이 좋다.
따라서 상황에 따라 적절한 메서드를 사용해야한다.
reduce() 메서드를 객체(object)에도 적용할 수 있다.

var obj = {
    apple: 500,
    grape: 2000,
    berry: 30
};

위 객체(object)에서 각 key에 해당하는 value값을 더하고 싶다.
그런데 reduce()메서드는 배열(array)에만 사용할 수 있다.
Object.keys를 이용하면 객체(object)의 key값을 배열(array)로 만들 수 있다.

var obj = { 
    apple: 500, 
    grape: 2000, 
    berry: 30 }; 
var sum = Object.keys(obj).reduce(function (pre, value) {
    return pre + obj[value];
    }, 0); 
console.log(sum); // 2530

하지만 객체를 탐색하는 방법은 for -in을 사용하는 게 더 간단하다.

var obj = {
    apple: 500,
    grape: 2000,
    berry: 30
};
var sum = 0;
for (let prop in obj) {
    sum += obj[prop];
}
console.log(sum); // 2530

기억해야할 부분

배열의 요소(element)를 탐색할 때 forEach() 이외에 다른 메서드를 적절히 사용할 줄 알아야한다.
콜백 함수에서 상위 스코프(scope)의 변수 건드리는 사이드 이펙트를 발생시키지 않도록 주의하자.

콜백 함수에서 부모 스코프의 변수를 참조하는게 위험한 이유(사이드 이펙트)

부모 스코프의 변수나 객체를 변경할 위험이 있다.

var arr = [
 {x1: 1, x2: 1},
 {x1: 2, x2: 2},
 {x1: 3, x2: 3}
];
var arr2 = null;

console.log(arr2);
/**
1. arr은 변경사항이 없어야 한다.
2. arr2는 다음과 같아야 한다.
[
 {x1: 1, x2: 1, result: 1},
 {x1: 2, x2: 2, result: 4},
 {x1: 3, x2: 3, result: 9}
]
*/

위와 같이 arr2의 배열을 만드는 함수를 작성한다고 가정하자.

arr2 = arr.map(function (obj) {
    obj.result = obj.x1 * obj.x2;
    return obj;
});
console.log(arr);
/**
1. arr
[
  {x1: 1, x2: 1, result: 1},
  {x1: 2, x2: 2, result: 4},
  {x1: 3, x2: 3, result: 9}
]
*/
console.log(arr2);
/**
2. arr2
[
  {x1: 1, x2: 1, result: 1},
  {x1: 2, x2: 2, result: 4},
  {x1: 3, x2: 3, result: 9}
]
*/

위의 경우 arr과 arr2가 동시에 변경 되었다.
즉 부모 스코프의 변수를 변경했다.

var arr = [
  {x1: 1, x2: 1},
  {x1: 2, x2: 2},
  {x1: 3, x2: 3}
];
var arr2 = null;

arr2 = arr.map(function (obj) {
    return {
        x1: obj.x1,
        x2: obj.x2,
        result: obj.x1 * obj.x2
    };
});
console.log(arr);
/**
1. arr
[
  {x1: 1, x2: 1},
  {x1: 2, x2: 2},
  {x1: 3, x2: 3}
]
*/
console.log(arr2);
/**
2. arr2
[
  {x1: 1, x2: 1, result: 1},
  {x1: 2, x2: 2, result: 4},
  {x1: 3, x2: 3, result: 9}
]
*/

위의 경우 부모 스코프 변수의 변경사항 없이 원하는 결과를 얻었다.
자바스크립트에서 Array, Function, Object는 call by reference로 전달된다.
따라서 콜백 함수의 인자로 전달된 객체를 변경하면 부모 스코프에도 반영된다.
그러므로 콜백 함수 자체 스코프 영역을 벗어나지 않도록 주의하자

Reference

MDN: forEach
MDN: map
MDN: filter
MDN: reduce
ZeroCho Blog: (JavaScript) 객체(Object)와 배열(Array)
비비로그: 자바스크립트의 유용한 배열 메서드 사용하기... map(), filter(), find(), reduce()

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2019-04-12-Array.md

2019-04-12-Array.md

배열(Array)

array.join(구분자)

array.concat()

array.push(), array.pop()

array.unshift(), array.shift()

array.splice(시작점, 지울 개수, 추가할 항목)

every

array.every(function(항목) { 조건 })

some

array.some(function(항목) { 조건 })

for 문을 대체할 유용한 메서드

forEach(), map(), reduce() 메서드의 특징

forEach()

array.forEach(function(항목){ 조건 })

map()

array.map(function(항목){ 조건 })

filter()

array.filter(function(항목){ 조건 })

reduce()

array.reduce(function(이전값, 현재값){ 조건 }, 초기값)

기억해야할 부분

콜백 함수에서 부모 스코프의 변수를 참조하는게 위험한 이유(사이드 이펙트)

Reference

Files

2019-04-12-Array.md

Latest commit

History

2019-04-12-Array.md

File metadata and controls

배열(Array)

array.join(구분자)

array.concat()

array.push(), array.pop()

array.unshift(), array.shift()

array.splice(시작점, 지울 개수, 추가할 항목)

every

array.every(function(항목) { 조건 })

some

array.some(function(항목) { 조건 })

for 문을 대체할 유용한 메서드

forEach(), map(), reduce() 메서드의 특징

forEach()

array.forEach(function(항목){ 조건 })

map()

array.map(function(항목){ 조건 })

filter()

array.filter(function(항목){ 조건 })

reduce()

array.reduce(function(이전값, 현재값){ 조건 }, 초기값)

기억해야할 부분

콜백 함수에서 부모 스코프의 변수를 참조하는게 위험한 이유(사이드 이펙트)

Reference