lodash 라이브러리 정리

lodash 라이브러리 정리

안녕하세요 TriplexLab입니다 :)

오늘은 lodash 라이브러리에 대해서 정리해보겠습니다.(lodash 사용법)
lodash 같은 경우에는 FE개발자들이 정말 자주 하는 작업들을 쉽고, 단순하게 작업을 도와주는 역할을 합니다.

예를 들어서 JSON형태의 데이터들을 받아서 화면에 뿌려주는데, 그냥 뿌려주는 것이 아니라, 필요한 데이터만 필터링한다던가,
혹은 다른 연산을 하고, 뿌려준다던가 작업 등등을 할때 유요한 라이브러리입니다.

이 라이브러리를 몰랐을 때는 제가 필요한 함수(기능)를 직접 만들어서 사용했는데...
이제 그럴 필요가 없어졌네요ㅠ 제가 만든 거보다 그 이상으로 많은 함수들을 재공해 주니깐요ㅎㅎ

Array

_.findIndex

 (function() {
 const users = [
	 { 'user': 'jace',  'active': false },
	 { 'user': 'fred',    'active': false },
	 { 'user': 'pebbles', 'active': false },
	 { 'user': 'minju',   'active': true },
 ];

	// 콜백함수를 실행하여 결과가 처음 true가 나오는 index 값을 반환합니다.
	const idx1 = _.findIndex(users, function(item) {
		return item.user === 'pebbles';
	});
	console.log(idx1)
    // → 2

	// 처음 일치하는 object의 index 값을 반환합니다.
	const idx2 = _.findIndex(users, { 'user': 'fred', 'active': false });
	console.log(idx2)
    // → 1

	// 처음으로 해당 key를 가지고 value가 true인 index 값을 반환합니다.
	const idx3 = _.findIndex(users, 'active');
	console.log(idx3)
    // → 3
})();

_.remove

(function() {
	const array = [1, 2, 3, 4];

	// 원하는 조건에 해당되는 값은 기존 array에서 제거되어 배열로 반환됩니다.
	const evens = _.remove(array, function(n) {
		return n % 2 == 0;
	});

	console.log(array);
	// → [1, 3]

	console.log(evens);
	// → [2, 4]
})();

 

Collection

_.every

(function() {
	const users = [
		{ 'user': 'barney', 'active': false },
		{ 'user': 'fred',   'active': true }
	];
	
    // key에 해당하는 value가 모두 true이면 true를 반환합니다.
	const eve1 = _.every(users, 'active');
	console.log(eve1)
	// → false
})();

_.filter

(function() {
	// 콜백함수를 실행하여 true를 반환하는 값들의 배열을 반환합니다.
	_.filter([4, 5, 6], function(n) {
		return n % 2 == 0;
	});
	// → [4, 6]

const users = [
	{ 'user': 'barney', 'age': 36, 'active': false },
	{ 'user': 'fred',   'age': 20, 'active': false },
    { 'user': 'jace',  'age': 20, 'active': false },
    { 'user': 'fred',   'age': 20, 'active': false },
    { 'user': 'pebbles', 'age': 10, 'active': false },
    { 'user': 'minju', 'age': 100, 'active': true },
];

	// 입력한 object의 key와 value들을 모두 포함하는 객체들을 배열로 반환합니다.
	const filter1 = _.filter(users, { 'age': 20 });
	console.log(filter1)
	/**
      [
    	0: {user: "fred", age: 20, active: false}
    	1: {user: "jace", age: 20, active: false}
    	2: {user: "fred", age: 20, active: false}
      ]
    */

	// 입력한 key값이 true인 객체들을 배열로 반환합니다.
	const filter2 = _.filter(users, 'active');
	console.log(filter2)
	// → [{ 'user': 'minju', 'age': 100, 'active': true }]
})();

_.find

(function() {
	const users = [
		{ 'user': 'barney',  'age': 36, 'active': false },
		{ 'user': 'fred',    'age': 40, 'active': false },
		{ 'user': 'pebbles', 'age': 10,  'active': true }
	];

	// 콜백함수가 처음으로 찾이주는 객체를 반환
	const find1 = _.find(users, function(chr) {
		return chr.age < 40;
	});
	console.log(find1)
	// → { 'user': 'barney',  'age': 36, 'active': true }

	// 객체의 key와 value가 모두 일치하는 처음의 객체 반환
	const find2 = _.find(users, { 'age': 10, 'active': true });
	console.log(find2)
	// → { 'user': 'pebbles', 'age': 10,  'active': true }

	// 해당 key가 처음으로 true가 되는 객체 반환
	const find3 = _.find(users, 'active');
	console.log(find3)
	// → { 'user': 'pebbles', 'age': 10,  'active': true }
})();

_.forEach

(function() {
	const users = [
		{ 'user': 'barney',  'age': 36, 'active': false },
		{ 'user': 'fred',    'age': 40, 'active': false },
		{ 'user': 'pebbles', 'age': 10,  'active': true }
	];

	// 배열은 한개의 값씩 대입하여 함수를 실행시킵니다.
	_([1, 2]).forEach(function(value) {
		console.log(value);
	});
	// 1
	// 2

	// object는 한개의 value와 키를 대입하여 함수를 실행시킵니다.
	_.forEach({ "user": "barney", "age": 36, "active": false }, function(value, key) {
		console.log(key, value);
	});
	// user barney
	// age 36
	// active false
})();

_.includes

(function() {
	// 배열에 값이 있는지 찾습니다.
	const includes1 = _.includes([1, 2, 3], 1);
	console.log(includes1)
	// → true

	// index에 해당 값이 있는지 찾습니다.
	const includes2 = _.includes([1, 2, 3], 1, 2);
	console.log(includes2)
	// → false

	// 일치하는 값이 있는지 찾습니다.
	const includes3 = _.includes({ 'user': 'fred', 'age': 40 }, 40);
	console.log(includes3)
	// → true

	// 일치하는 값이 문자열 안에 있는지 찾습니다.
	const includes4 = _.includes('barney', 'ney');
	console.log(includes4)
	// → true
})();

_.map

(function() {
	const timesThree = function(n) {
		return n * 3;
	}

	// 해당함수를 실행하고 그 결과를 배열로 반환합니다.
	const map1 = _.map([3, 6], timesThree);
	console.log(map1)
	// → [9, 18]

	// 해당함수를 실행하고 그 결과를 배열로 반환합니다.
	const map2 = _.map({ 'age': 16, 'num': 10 }, timesThree);
	console.log(map2)
	// → [48, 30]

	const users = [
		{ 'user': 'jace',  'active': false },
		{ 'user': 'fred',    'active': false },
		{ 'user': 'pebbles', 'active': false },
		{ 'user': 'minju',   'active': true },
	];

	// key값만 집어넣을 경우 해당 value값들을 배열로 반환해줍니다.
	const map3 = _.map(users, 'user');
	console.log(map3)
	// → ["jace", "fred", "pebbles", "minju"]
})();

_.reduce

(function() {
	// reduce는 콜백함수의 첫번째 인자로 전의 함수가 실행시킨 결과를 받습니다.
	// 그리고 함수가 모두 실행된 뒤에 결과를 반환합니다.

	const reduce1 = _.reduce([1, 2], function(total, n) {
		return total + n;
	});
	console.log(reduce1)
	// → 3

	const reduce2 = _.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
		result[key] = value * 5;
		return result;
	}, {});
	console.log(reduce2)
	// → { 'a': 5, 'b': 10, 'c': 5 }
})();

 

제가 정리한 함수들 파일로도 제공합니다. 필요한 분들은 다운로드하세요~
제가 정리한 것 외에도 더 많은 함수들이 있습니다. 
공식문서를 참고해서 보면 좋을 것 같습니다. 

 

Lodash.zip

0.01MB

🎯 참고자료

자세한 내용은 공식문서를 참고 하세요 😄

Lodash Documentation