Javascript Cookbook

Javascript Cookbook

Object

assign()

assign 함수는 특정 객체의 값을 복사하는 함수입니다. assign 함수를 통해 두 개 이상의 객체를 병합하는 등의 작업을 수행 가능합니다.

assign 함수는 아래와 같이 사용되며 대상 객체를 반환합니다.

example

Object.assign(target, ...source)

객체 복사하기

var source = { a: 1 };
var target = Object.assign({}, source);

위와 같이 Object.assign은 객체를 복사하는 데 사용될 수 있으며, {} 처럼 빈 객체를 넣고 반환값을 받음으로써 빈 객체에 source 가 되는 object를 복사할 수 있습니다.

객체 병합하기

assign 함수를 통해 객체를 병합 할 수 있습니다. 가령 a, b 객체가 있고 각각의 키값을 하나로 병합하고 싶다면 다음과 같이 수행 할 수 있습니다.

var obj1 = { a:1, b:2 };
var obj2 = { a:1, c:4, d:5 };

var target = Object.assign({}, obj1, obj2);

이처럼 만약 동일한 key를 가졌다면 뒤에 오는 source의 key, value 들로 덮어씌워지는 방식으로 복사될 것입니다.

keys()

entries()

entries 함수는 object의 키들을 열거가능한 [key, value] 쌍을 리턴해 주며, 다음과 같이 사용됩니다.

example

var obj = { a:1, b:2, c:3 };
var entries = Object.entries(obj);
// [["a", 1],["b", 2],["c", 3]]

객체 내의 다양한 키들을 순환하는 로직을 구현 하는 경우 이는 매우 효과적이며 다음과 같이 사용됩니다.

exmaple

var obj = { a:1, b:2, c:3 };
var entries = Object.entries(obj);
entries.foreach((key, value)=>{
  // do some stuff
  console.log(key, value);
})

Map

js에서 Map 이란 일종의 key 와 value의 쌍으로 흔히 object와 비슷한 역할을 수행하지만, object와 달리 어떤 종류의 값도 저장할 수 있는 장점이 있으며, 흔히 대량의 자료가 저장되는 경우 object에 비해 훨씬 좋은 성능을 보인다.

이번 포스트에서는 Map 이 가진 다양한 함수들과 이에 대한 활용법에 대해 알아보도록 한다.

example

new Map([iterable]) //key, value pair

set

var map = new Map([[a, 1], [b, 2]]);
map.set(c, 3);

get

var map = new Map([[a, 1], [b, 2]]);
map.get(1);

delete(key)

var exampleMap = new Map([a, 1], [b, 2]);
exampleMap.delete(a);

foreach

var example = new Map([a, 1], [b, 2]);
example.foreach((value, key){
  // do some stuff here.
})

Array

sort()

array의 sort는 배열을 정렬하기 위한 아주 좋은 method 입니다.

sort는 뒤에 오는 콜백함수를 계속 실행하여 callback(a, b)의 값이 0보다 작은 경우 a를 앞으로 보내고, 0보다 큰 경우 a를 뒤로 보내는 방식으로 동작합니다.

/* 정상 동작 */
score.sort(function(a, b) { // 오름차순
    return a - b;
    // 1, 2, 3, 4, 10, 11
});

score.sort(function(a, b) { // 내림차순
    return b - a;
    // 11, 10, 4, 3, 2, 1
});

student.sort(function(a, b) { // 오름차순
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
    // 광희, 명수, 재석, 형돈
});

student.sort(function(a, b) { // 내림차순
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
    // 형돈, 재석, 명수, 광희
});

splice()

array.splice(i,1)를 통해 index i 로 부터 1개의 요소를 제거하고 제거한 자리에 값을 추가한다.

example

var array = [0, 1, 2, 3, 4, 5];
array.splice(2, 1);
//array에는 세번째 요소가 빠진 상태가 된다.
[0, 1, 3, 4, 5]

delete

특정 요소를 삭제할 때 사용한다.

var arr = ["a", "b", "c"];
delete arr[1];

pop

array를 stack으로 사용하는 경우 pop() 함수는 매우 유용하며, 가장 우측의 element를 제거한다.

example

let list = [1, 2, 3, 4, 5, 6, 7];

console.log('original list: ', list);

let poped = list.pop();
console.log('poped item: ', poped);
console.log('list after pop() executed: ', list);

Push

리스트에 특정 아이템을 추가하고 추가된 이후에 총 아이템의 갯수를 반환한다.

이 함수는 원래의 리스트를 변형한다.

console.log('original list: ', list);

let count = list.push('pushed item');
console.log('Total item count after push() executed: ', count);
console.log('list after push() executed: ', list);

shift

shift는 주로 que의 구현에 많이 사용되며, 제일 앞의 element를 제거하고 반환해 준다.

console.log('original list: ', list);

let shifted = list.shift();
console.log('shifted item: ', shifted);
console.log('list after shift() executed: ', list);

unshift()

제일 앞쪽에 밀어 넣는다.

example

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits

foreach(()=>{})

모든 어레이값에 대해 연산을 수행하는 함수이며 다음과 같이 사용된다.

var arr = [1, 2, 3, 4, 5];
arr.foreach((element, index, array)=>{
  console.log(element);
})

reduce

reduce는 array의 모든 값에 대해 계속해서 callback함수를 실행시키는 함수이며 다음과 같은 용도로 사용합니다.

syntax

var arr = [1, 2, 3, 4, 5];
arr.reduce((accumulator, currentValue, currentIndex, array)=>{
  // do some stuff here.
})

여기서 첫번째 인자인 accumulator는 계속해서 다음 callback의 인자로 전달되는 값이며 어떤 변환을 하더라도 해당 변환 내용이 다음으로 전달되며, currentValue는 현재 값을 나타냅니다.

배열에서 가장 큰 값을 구하기

accumulator를 통해 계속 앞의 return 값을 받아와 비교하면서 가장 큰 값을 구할 수 있습니다.

var arr = [1, 2, 3, 4, 5];
var max = arr.reduce((before, current)=>
  return before<current ? current : before
)