오늘 익힌 메소드
- Object.keys()와 Array.prototype.keys()의 차이
: 전자는Object.keys(딕셔너리이름)방식으로 쓰며, 키값만 추출해서 새로운 array에 담는다.
: 후자는const a = 배열이름.keys()방식으로 쓰며, 배열의 각 인덱스를 키 값으로 가지는 새로운 '배열 반복기' 객체를 반환한다.
'배열 반복기' 객체를 그냥 console.log() 해서는 볼 수 없다.
대신, for (const key of a) { console.log(key); }를 통해 볼 수 있다. - reduce()
[].reduce(function (preValue, currentValue, Index, array) {원하는 계산}, initialValue);
: reduce() 메소드는 배열의 '각 요소'에 대해 '주어진 reducer 함수를 실행'하고, 하나의 결과값을 반환한다.
: reduce에 사용되는 콜백 함수의 매개 변수는 4개이다. 누적값(s), 배열요소(e), 인덱스(i), 배열원본(a) 순이다.
accumulator 자리에 s를 넣고, currentValue 자리에 e를 넣어주면 계산이 실행된다.
사용 예 1:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator(축적자), currentValue(현재값)) => accumulator + currentValue; // 이게 '주어진 reducer 함수'이다. 다른 계산을 짜도 된다.
console.log(array1.reduce(reducer)); // array1 값들에 대해 reducer 함수를 실행한다.
// 따라서 1 + 2 + 3 + 4 = 10이 되기 때문에 "10"이 출력된다.
console.log(array1.reduce(reducer, 0)); // reducer 뒤에 숫자를 입력하면, 계산을 시작할 때의 첫 accumulator가 0이 된다.
// 따라서 0 + 1 + 2 + 3 + 4 = 10이 되기 때문에 "10"이 출력된다.
console.log(array1.reduce(reducer, 5)); // 계산을 시작할 때의 첫 accumulator에 5가 주어졌다.
// 따라서 5 + 1 + 2 + 3 + 4 = 15이 되기 때문에 "15"이 출력된다.사용 예 2:
nums = new Array();
for (i=1; i<=20; i++) {
nums[i] = i;
}
nums.sum = function() {
return this.reduce((s, e) => s + e, 0);
}; // 1부터 20까지 더하는 계산이다.
console.log(nums.sum()) // 출력: 210나는 mozilla 보다 이 블로그와 이 블로그에서 더 이해가 잘 되었다.
- Array.prototype.map()
: map() 메소드는 배열 내의 '모든 요소 각각'에 대해 '주어진 함수를 호출'한 결과를 모아 새로운 배열을 반환한다.
reduce() 메소드와 비슷하지만, 크게 두 가지에서 차이가 있다.
1) 보다 사용이 간단하다는 점
2) 하나의 결과값이 아닌 '각각의 결과를 새 배열에 담아' 반환한다는 점
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
// 출력: Array [2, 8, 18, 32]- Map
: Map 객체는 key-value 쌍을 저장한다. 각 쌍의 삽입 순서를 기억하며, key와 value에 아무 값이라도 들어갈 수 있다.
Mozilla 예:
let myMap = new Map()
let keyString = '문자열'
let keyObj = {}
let keyFunc = function() {}
// 값 설정
myMap.set(keyString, "'문자열'과 관련된 값")
myMap.set(keyObj, 'keyObj와 관련된 값')
myMap.set(keyFunc, 'keyFunc와 관련된 값')
myMap.size // 3
// getting the values
myMap.get(keyString) // "'문자열'과 관련된 값"
myMap.get(keyObj) // "keyObj와 관련된 값"
myMap.get(keyFunc) // "keyFunc와 관련된 값"
myMap.get('문자열') // "'문자열'과 관련된 값"
// keyString === '문자열'이기 때문
myMap.get({}) // undefined, keyObj !== {}
myMap.get(function() {}) // undefined, keyFunc !== function () {}: 위의 예처럼 new Map() 생성자, Map.prototype.set() 메소드 , Map.prototype.get() 메소드가 연결되어 사용된다.
-
!!! Set은 중복값이 없는 '배열'이다!!!
: Set은 키-값을 가질 수 없다. 왜냐하면 Set은 배열로서 존재하며, 딕셔너리가 될 수 없기 때문이다.
: 또한, Set은 자료형에 관계 없이 '원래 값'을 저장한다. 따라서, number가 string으로 바뀌는 등의 일이 발생하지 않는다. -
.size
: Set.prototype.size이다.
size 접근자 속성은 Set 객체의 원소 개수를 반환한다.
배열의 길이를 반환하는 .length 속성과 비슷하다.
(주의!) size 뒤에 괄호를 붙이지 않는다. 내장 함수가 아니고 속성이기 때문이다. -
객체['key']와 객체.key의 차이
: 둘 다 객체의 key에 접근한다.
그런데 key에 - 같은 부호가 들어가거나 key가 숫자로 시작할 때, 객체.key 방식은 error를 유발한다. 연산이나 number 자료형으로 인식하기 때문이다. (key가 number 자료형으로 시작하면 원래 에러가 발생한다.)
따라서, 객체['key'] 방식을 사용하는 게 보다 정확하고 안전하다.
다만, 속성명이 다른 변수로 재선언되어 정보가 섞이는 일이 없도록 하자.
아래와 같이 재선언이 이루어져 정보가 섞일 때는 객체['key'] 방식도 정확한 값을 출력하지 못한다.
var obj = {
first : 1,
second : 2
}
var first = ‘second’
console.log(`${obj[first]} is not equal to ${obj.first}`) // 2 is not equal to 1