Archive

Lodash 총정리 (계속 업데이트)

30 Jul 2021 | Javascript

Lodash 총정리 (계속 업데이트)

1. array

  • chunk() : 길이에 맞춰 배열 분리, 길이 안맞으면 마지막에 붙임
_.chunk([1,2,3,4,5], 3); // [[1,2,3], [4,5]]
  • compact() : false 값을 제거한 배열을 만듦
_.compact([0,1,false,2,'',3,undefined,4]); // [1,2,3,4]
  • difference() : 첫번째 배열에서 나머지 배열들에 없는 값만 새로운 배열로 반환. sameValueZero를 사용하여 동등비교 ※sameValueZero : === 와 비슷한데 NaN를 비교했을 때, true가 나온다는 점이 다름.
_.difference([1,2], [2,3], ["1", "2"]); // [1]
  • drop() : 첫번째부터 n개의 요소가 삭제된 배열 반환, default = 1
_.drop([1,2,3,4], 3); // [4]
  • fill() : 배열의 요소를 값으로 채움, 몇번째부터 몇번째까지 지정 가능
_.fill([1,2,3], 2); // [2,2,2]
_.fill([1,2,3,4], '*', 1, 3); // [1,*,*,4];
  • findIndex() : find()와 비슷하나, 찾은 첫번째 요소의 인덱스를 반환한다는 점이 다름
const a = [
    { 'name': 'rabbit', 'active': false },
    { 'name': 'monkey', 'active': true },
    { 'name': 'dog', 'active': false }
]

_.findIndex(a, function(e){ return e.name === 'dog' }); // 2, 콜백 결과가 처음 true인 값
_.findIndex(a, ['active', true]); // 1, 해당 key와 value를 가진 값
_.findIndex(a, 'active'); // 1, 해당 key를 가지고 value가 처음 true인 값
  • head() : 배열의 첫번째 요소 반환, 비어있으면 undefined 반환, 반대는 last()
_.head([1,2,3]); // 1
_.head([]); // undefined
  • flatten() : single level deep로 병합
_.flatten(1, [2, [3]], [4,[5,[6]]]); // [1,2,[3],4,[5,[6]]]
  • flattenDeep() : 깊은 병합
_.flattenDeep(1, [2, [3]], [4,[5,[6]]]); // [1,2,3,4,5,6]
  • fromPairs() : key-value Object로 반환
_.fromPairs([['a', 1], ['b', 2]]); // { 'a': 1, 'b': 2}
  • initial() : 배열의 마지막 요소 제외한 배열 반환
_.initial([1,2,3]); // [1,2]
  • intersection() : difference()와는 반대로 겹치는 요소 배열 반환
_.intersection([3,4], [4,5]); // [4]
  • nth() : 배열의 n번째 요소를 반환
_.nth([1,2,3], 2); // 3
_.nth([1,2,3], -2); // 2
  • pull() : sameValueZero를 이용하여 지정된 모든 요소를 제거
_.pull(['a', 'b', 'c', 'a', 'c'], 'a', 'c'); // ['b']
  • pullAt() : 인덱스에 해당하는 요소를 제거하고 반환, 새배열 x
const array = ['a', 'b', 'c', 'd'];
const pulled = _.pullAt(array, [1, 3]); // ['b', 'd'];
console.log(array); ['a', 'c'];
  • remove() : 조건식이 true인 요소를 배열에서 제거 후 반환, 새배열x
const array = [1,2,3,4];
const removed = _.remove(array, function(e){ return e % 2 === 0 }); // [2,4]
console.log(array); // [1,3]
  • tail() : 배열의 첫번째 요소를 제외한 모든 요소 반환
_.tail([1,2,3]); // [2,3]
  • take() : 배열 시작부터 n개의 요소를 모아서 반환, default = 1, 배열 길이보다 넘기면 전부 반환
_.take([1,2,3]); // [1]
_.take([1,2,3], 2); // [1,2]
_.take([1,2,3], 4); // [1,2,3]
_.take([1,2,3], 0); // []
  • union() : sameValueZero로 동일성 비교하여 순서대로 고유한 값의 배열 반환
_.union([2], [1,2], [2,3]); // [2,1,3];
  • uniq() : sameValueZero로 동일성 비교하여 중복없는 배열 반환
_.uniq([2,3,2,1,3,1]); // [2,3,1]
  • without() : sameValueZero로 동일성 비교하여 주어진 값을 제외한 배열 반환
_.without([2,3,1,3,2], 2, 3); // [1]


2. Lang

  • castArray() : 배열이 아닌 경우 배열로 캐스팅
_.castArrray('abc'); // ['abc']
  • clone() : 얕은 복사
const object = [{a:1},{b:2}];
const shallow = _.clone(object);
shallow[0].a = 100;
console.log(object[0].a); // 100
console.log(shallow[0].a); // 100
  • cloneDeep() : 깊은 복사
const object = [{a:1},{b:2}];
const shallow = _.cloneDeep(object);
shallow[0].a = 100;
console.log(object[0].a); // 1
console.log(shallow[0].a); // 100
  • conformsTo() : object의 속성이 특정 조건을 준수하는지 확인
const object = { a:1, b:2 };
_.conformsTo(object, { b: function(e) { return e > 1 }}); // true
_.conformsTo(object, { b: function(e) { return e > 3 }}); // false
  • eq() : sameValueZero로 동등비교하여 동일한지 확인
const obj1 = { 'a': 1};
const obj2 = { 'a': 1};

_.eq(obj1, obj2); // false
_.eq(NaN, NaN); // true
  • gt() : 값이 다른 값보다 큰지 확인, 반대 lt()
_.gt(3,1); // true
_.gt(3,3); // false
_.gt(1,3); // false
  • gte() : 값이 다른 값보다 크거나 같은지 확인, 반대 lte()
_.gte(3,1); // true
_.gte(3,3); // true
_.gte(1,3); // false
  • isArray() : array인지확인
_.isArray([1,2,3]); // true
_.isArray('123'); // false
  • isBoolean() : boolean인지 확인
_.isBoolean(false); // true
_.isBoolean([false]); // false
  • isDate() : Date 객체인지 확인
_.isDate(new Date()); // true
_.isDate('Mon April 23 2021'); // false
  • isElement() : DOM element인지 확인
_.isElement(document.body); // true
_.isElement('<body>'); // false
  • isEmpty() : 객체, 배열이 비어있는지 확인
_.isEmpty(null); // true
_.isEmpty([1]); // false
_.isEmpty({a:1}); // false
  • isEqual() : 두 값을 deep 비교하여 동일한지 확인
const obj1 = {a:1};
const obj2 = {a:1};

_.isEqual(obj1, obj2); // true
obj1 === obj2; // false
  • isError() : Error 객체인지 확인
_.isError(new Error); // true
  • isFinite() : 유한한 숫자인지 확인
_.isFinite(3); // true
_.isFinite(Infinity); // false
  • isFunction() : function 객체인지 확인
_.isFunction(function(){}); // true
  • isInteger() : integer인지 확인
_.isInteger(3); // true
_.isInteger(Number.MIN_VALUE); // false
  • isMatch() : 객체를 심층비교하여 동일한 속성이 포함되어 있는지 확인
const obj = {a:1, b:2};
_.isMatch(obj, {b:2}); // true
_.isMatch(obj, {b:1}); // false
  • isNaN() : NaN인지 확인
_.isNaN(3); // false
_.isNaN(NaN); // true
_.isNaN(undefined); // false
isNaN(undefined); // true
  • isNil() : null인지 undefined인지 확인
_.isNil(null); // true
_.isNil(undefined); // true
_.isNil([]); // false
  • isNull() : null인지 확인
_.isNull(null); // true
_.isNull(undefined); // false
  • isObject() : object인지 확인
_.isObject({}); // true
_.isObject([1,2,3]); // true
  • isSafeInteger() : 안전한 정수인지 확인
_.isSafeInteger(3); // true
_.isSafeInteger(Number.MIN_VALUE); // false
  • isString() : String인지 확인
_.isString('a'); // true
_.isString(1); // false
  • isUndefined() : undefined인지 확인
_.isUndefined(null); // false
_.isUndefined(undefined); // true
  • isPlainObject() : 값이 일반 객체인지, 생성자에 의해 생성된 객체인지 확인
_.isPlainObject(new Date()); // false
_.isPlainObject([1,2,3]); // false
_.isPlainObject({a:1}); // true
  • toArray() : array로 변환
_.toArray({a:1, b:2}); // [1,2]
_.toArray('abc'); // ['a', 'b', 'c']
_.toArray(1); // []
  • toFinite() : 값을 유한한 숫자로 변환
_.toFinite(Number.MIN_VALUE); // 5e-324
  • toInteger() : 값을 integer로 변환
_.toInteger(Number.MIN_VALUE); // 0
_.toInteger(3.2); // 3
_.toInteger('3,2'); // 3
  • toString() : 문자열로 변환
_.toString(null); // ''
_.toString([1,2,3]); '1,2,3'
  • toNumber() : 숫자로 변환
_.toNumber(3.2); // 3.2
_.toNumber('3.2'); // 3.2
_.toNumber(Infinity); // Infinity


3. Object

  • assign() : 왼쪽에서 오른쪽으로 합치는데 중복되는 값은 오른쪽 기준.
_.assign({a:1},{a:2, b:3},{b:4, c:5}); // {a: 2, b: 4, c: 5}
  • defaults() : 첫번째 객체에 나머지들 병합, 중복된 키값은 무시
_.defaults({a:1}, {b:2}, {a:3}); // {a:1, b:2}
  • defaultsDeep() : 첫번째 객체에 나머지들 깊은 병합
_.defaultsDeep({a: {b:2}}, {a: {b:3, c:4}}); // {a: {b:2, c:4}}
  • has() : 값이 객체의 속성인지 확인
const obj = {a: {b: 2}};
_.has(obj, 'a'); // true
  • values() : 객체에서 value 값만 추출한 배열을 반환
_.values({a:1, b:2, c: [3,4]}); // [1, 2, [3,4]]
_.values('asd'); // ['a', 's', 'd']
  • get() : 객체의 해당 key에 대한 value를 가져옴, 옵션으로 default value 설정 가능
const obj = {a:1, b:2, c: {d: 4}};
_.get(obj, 'a'); // 1
_.get(obj, 'z'); // undefined
_.get(obj, 'z', 4); // 4
_.get(obj, 'c.d'); // 4
  • merge() : 객체 병합, deep merge가 가능함
const A1 = {
    B: {
        C: 'C1',
      	E: 'E'
    }
}

const A2 = {
    B: {
      	C: 'C2'
        D: 'D',
    }
}
_.merge(A1, A2); // { B: { C: 'C2', E: 'E', D: 'D'}}
// 중복된 key 값에 대해서 오른쪽 순서로 적용된 것을 볼 수 있다
  • create() :
  • omit() : 객체에서 해당 key를 제외한 객체 반환
const obj = {a:1, b:2, c:3};
_.omit(obj, ['a', 'c']); // {b:2}
_.omit(obj, 'a'); // {b:2, c:3}
  • pick() : 객체에서 선택한 key로 구성된 객체 반환
const obj = {a:1, b:2, c:3};
_.pick(obj, ['a', 'c']); // {a:1, c:3}
  • transform() :
  • result() : function의 경우 부모 객체의 this 바인딩으로 호출되고 결과를 반환, 그 외엔 get()과 동일


참고 자료

lodash - 공식문서

Related Posts