TIL 39 (2020.09.12) JS

jeanbaek·2020년 9월 12일
0

TIL (Today I Learned)

목록 보기
39/106

오늘 익힌 메소드

  • 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
profile
💡 Software Engineer - F.E

0개의 댓글