📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Lodash
Why Lodash?
- Iterating arrays, objects, & strings
- Manipulating & testing values
- Creating composite functions
Lodash Installation
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
Lodash JS Examples
Lodash _.assign Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
var foo = {
a: "a property"
};
var bar = {
b: 4,
c: "an other property"
}
var result = _.assign({
a: "an old property"
}, foo, bar);
console.log(JSON.stringify(result));
</script>
</head>
<body></body>
</html>
{"a":"a property","b":4,"c":"an other property"}
Lodash _.first() and _.last() Methods
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// Lodash first and last array elements
words = ['sky', 'wood', 'forest', 'falcon',
'pear', 'ocean', 'universe'
];
let fel = _.first(words);
let lel = _.last(words);
console.log(`First element: ${fel}`);
console.log(`Last element: ${lel}`);
</script>
</head>
<body></body>
</html>
First element: sky
Last element: universe
Lodash _.find Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// Lodash first and last array elements
var users = [
{ firstName: "John", lastName: "Doe", age: 28, gender: "male" },
{ firstName: "Jane", lastName: "Doe", age: 5, gender: "female" },
{ firstName: "Jim", lastName: "Carrey", age: 54, gender: "male" },
{ firstName: "Kate", lastName: "Winslet", age: 40, gender: "female" }
];
var user = _.find(users, { lastName: "Doe", gender: "male" });
console.log(user);
// user -> { firstName: "John", lastName: "Doe", age: 28, gender: "male" }
var underAgeUser = _.find(users, function(user) {
return user.age < 18;
});
console.log(underAgeUser);
</script>
</head>
<body></body>
</html>
{firstName: "John", lastName: "Doe", age: 28, gender: "male"}
{firstName: "Jane", lastName: "Doe", age: 5, gender: "female"}
Lodash _.chunk() Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// Lodash chunking array
nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let c1 = _.chunk(nums, 2);
console.log(c1);
let c2 = _.chunk(nums, 3);
console.log(c2);
</script>
</head>
<body></body>
</html>
[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9 ] ]
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
Lodash _.slice() Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// Getting array slice
nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let c2 = _.slice(nums, 2, 6);
console.log(c2);
let c3 = _.slice(nums, 0, 8);
console.log(c3);
</script>
</head>
<body></body>
</html>
[3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8]
Lodash _.random() Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// Getting array slice
var r = _.random(15);
console.log(r);
r = _.random(5, 15);
console.log(r);
</script>
</head>
<body></body>
</html>
8
7
Lodash _.keyBy Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
var users = [
{ id: 1, firstName: "John", lastName: "Doe", age: 28, gender: "male" },
{ id : 2, firstName: "Jane", lastName: "Doe", age: 5, gender: "female" },
{ id : 3, firstName: "Jim", lastName: "Carrey", age: 54, gender: "male" },
{ id : 4, firstName: "Kate", lastName: "Winslet", age: 40, gender: "female" }
];
users = _.keyBy(users, "id");
var user = users[1];
console.log(user);
</script>
</head>
<body></body>
</html>
{id: 1, firstName: "John", lastName: "Doe", age: 28, gender: "male"}
Lodash _.reduce Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
var users = [
{ name: "John", age: 30 },
{ name: "Jane", age: 28 },
{ name: "Bill", age: 65 },
{ name: "Emily", age: 17 },
{ name: "Jack", age: 30 }
]
var reducedUsers = _.reduce(users, function (result, user) {
if(user.age >= 18 && user.age <= 59) {
(result[user.age] || (result[user.age] = [])).push(user);
}
return result;
}, {});
console.log(JSON.stringify(reducedUsers));
</script>
</head>
<body></body>
</html>
{"28":[{"name":"Jane","age":28}],"30":[{"name":"John","age":30},{"name":"Jack","age":30}]}
Lodash _.shuffle() Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
words = ['sky', 'wood', 'forest', 'falcon',
'pear', 'ocean', 'universe'];
console.log(_.shuffle(words));
console.log(_.shuffle(words));
console.log(_.shuffle(words));
console.log(words);
</script>
</head>
<body></body>
</html>
["universe", "pear", "ocean", "sky", "wood", "falcon", "forest"]
["forest", "pear", "ocean", "falcon", "wood", "universe", "sky"]
["ocean", "sky", "wood", "universe", "pear", "forest", "falcon"]
["sky", "wood", "forest", "falcon", "pear", "ocean", "universe"]
Lodash _.times Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
_.times(4, () => {
console.log("brave");
})
</script>
</head>
<body></body>
</html>
brave
brave
brave
brave
Lodash _.delay function
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
function message()
{
console.log("Some message");
}
_.delay(message, 150);
console.log("Some other message");
</script>
</head>
<body></body>
</html>
Some other message
Some message
Lodash _.range Method
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
const vals = _.range(10);
console.log(vals);
const vals2 = _.range(0, 15);
console.log(vals2);
const vals3 = _.range(0, 15, 5);
console.log(vals3);
</script>
</head>
<body></body>
</html>
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 ]
[ 0, 5, 10 ]
Lodash _.min and _.max() Methods
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
const vals = [-3, 4, 0, 12, 43, 9, -12];
var min = _.min(vals);
console.log(min);
var max = _.max(vals);
console.log(max);
max = _.max(_.range(5, 25));
console.log(max);
const obs = [{n: 12}, {n: -4}, {n: 4}, {n: -11}];
min = _.minBy(obs, 'n');
console.log(min);
max = _.maxBy(obs, 'n');
console.log(max);
</script>
</head>
<body></body>
</html>
-12
43
24
{ n: -11 }
{ n: 12 }
Lodash _.sum Method
Example:
const vals = [-2, 0, 3, 7, -5, 1, 2];
const sum = _.sum(vals);
console.log(sum);
6
Lodash String Case Methods
- _.camelCase
- _.capitalize
- _.kebabCase
- _.lowerCase
- _.upperCase
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
const words = ["sky", "Sun", "Blue Island"];
console.log(_.map(words, _.camelCase));
console.log(_.map(words, _.capitalize));
console.log(_.map(words, _.kebabCase));
console.log(_.map(words, _.lowerCase));
console.log(_.map(words, _.upperCase));
</script>
</head>
<body></body>
</html>
[ 'sky', 'sun', 'blueIsland' ]
[ 'Sky', 'Sun', 'Blue island' ]
[ 'sky', 'sun', 'blue-island' ]
[ 'sky', 'sun', 'blue island' ]
[ 'SKY', 'SUN', 'BLUE ISLAND' ]
Lodash string _.startsWith and _.endsWith Methods
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
const words = ["tank", "boy", "tourist", "ten",
"pen", "car", "marble", "sonnet", "pleasant",
"ink", "atom"]
console.log("Starting with 't'");
words.forEach( e => {
if (_.startsWith(e, 't')) {
console.log(e);
}
});
console.log("Ending with 'k'");
words.forEach( e => {
if (_.endsWith(e, 'k')) {
console.log(e);
}
});
</script>
</head>
<body></body>
</html>
Starting with 't'
tank
tourist
ten
Ending with 'k'
tank
ink
Lodash object keys and values
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// using Object Literals
var user = {
firstName: 'Ramesh',
lastName: 'Fadatare',
emailId: 'ramesh@gmail.com',
age: 29,
getFullName: function () {
return user.firstName + " " + user.lastName;
}
}
const keys = _.keys(user);
console.log(keys);
const values = _.values(user);
console.log(values);
</script>
</head>
<body></body>
</html>
["firstName", "lastName", "emailId", "age", "getFullName"]
["Ramesh", "Fadatare", "ramesh@gmail.com", 29, Æ’]
Lodash iterate object properties
Example:
<!DOCTYPE html>
<html>
<head>
<title>Lodash Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script type="text/javascript">
// using Object Literals
var user = {
firstName: 'Ramesh',
lastName: 'Fadatare',
emailId: 'ramesh@gmail.com',
age: 29
}
_.forIn(user, (value, key) => {
console.log(`${key}: ${value}`);
})
</script>
</head>
<body></body>
</html>
firstName: Ramesh
lastName: Fadatare
emailId: ramesh@gmail.com
age: 29
Comments
Post a Comment
Leave Comment