Link to code snippet: GitHub
\nWorking with objects always feels slightly less fluid when compared to arrays. With arrays, we can simply validate the length of the array (if it's equal to zero). For objects, we can do something similar thanks to the built-in Object.keys() method, but even then we need to add an extra validation. Let's take a closer look at two different ways to check for empty objects.
Let's create two test objects that we'll use to perform our validations. The first object will have three properties and the second object will have none.
\nconst object1 = { a: 5, b: 8, c: 10 }\nconst object2 = {}\nThe first method we'll use involves a combination of Object.keys() and checking whether the constructor is an extension of the Object class. The latter is important because in JavaScript, we can create new object instances in many different ways. For example, new Date() and new Array() would both pass the Object.keys() validation, but we want to make sure that we're actually testing objects and not primitives or wrapper instances.
const isObject1Empty =\n Object.keys(object1).length === 0 && object1.constructor === Object\nconsole.log(isObject1Empty) // false\n\nconst isObject2Empty =\n Object.keys(object2).length === 0 && object2.constructor === Object\nconsole.log(isObject2Empty) // true\nThe second method is the old-fashioned way: a for...in loop. This method loops over each object property and calls hasOwnProperty() to verify whether the specified property is a direct property of the object. If the object has a property, the result of the function will false (meaning not empty).
const isEmpty = object => {\n for (let prop in object) {\n if (object.hasOwnProperty(prop)) {\n return false\n }\n }\n\n return true\n}\n\nconsole.log(isEmpty(object1)) // false\nconsole.log(isEmpty(object2)) // true\nThe final method we can use to validate empty objects is a rather interesting approach. We can use JSON.stringify() to convert JavaScript objects into JSON strings. If we do this for our two objects and compare each of them to an empty object (after converting to a JSON string), we can see that the first object is not empty and the second one is.
console.log(JSON.stringify(object1) === JSON.stringify({})) // false\nconsole.log(JSON.stringify(object2) === JSON.stringify({})) // true\nAs always, it's a good practice to create helper utility functions that can be easily reused throughout your application. This is a prime example of a use case you will run into fairly often. There are also utility libraries (e.g. Lodash) that can be used as well.
"}},{"node":{"fields":{"slug":"chaining-array-methods","dateSlug":"2021-08-15","postID":"chaining-array-methods-2021-08-15"},"frontmatter":{"category":"arrays","tags":["javascript","es6","arrays"],"date":"August 15, 2021","format":"image","title":"Chaining Array Methods","author":{"name":"Stephen Sun"},"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwABAv/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAEeDGXI5P/EABkQAAIDAQAAAAAAAAAAAAAAAAACARESMv/aAAgBAQABBQK1Heo3I75Oh4pv/8QAFhEAAwAAAAAAAAAAAAAAAAAAARAh/9oACAEDAQE/ARV//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGRABAQADAQAAAAAAAAAAAAAAAQARIjEh/9oACAEBAAY/AnUtfLNzkDJf/8QAGxABAAMAAwEAAAAAAAAAAAAAAQARITFRYYH/2gAIAQEAAT8hXaYfJRI6VcVcc7EDhVQy/eeYPWT/2gAMAwEAAgADAAAAEPgf/8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARMf/aAAgBAwEBPxA4Ukx7f//EABYRAQEBAAAAAAAAAAAAAAAAAAAhAf/aAAgBAgEBPxDYj//EABwQAQEAAgMBAQAAAAAAAAAAAAERADEhUWFB8P/aAAgBAQABPxBjXIqPDR1+uJQFaJnu8vkc+DDfWSJBUaPe8W2PssH4Yaajl7z/2Q==","aspectRatio":1.5,"src":"/static/1cbb6705ee34b01df491a5e950e809bb/3866d/chaining-array-methods.jpg","srcSet":"/static/1cbb6705ee34b01df491a5e950e809bb/d1bff/chaining-array-methods.jpg 6w,\n/static/1cbb6705ee34b01df491a5e950e809bb/3866d/chaining-array-methods.jpg 510w,\n/static/1cbb6705ee34b01df491a5e950e809bb/f7bf2/chaining-array-methods.jpg 1920w","srcWebp":"/static/1cbb6705ee34b01df491a5e950e809bb/47cfc/chaining-array-methods.webp","srcSetWebp":"/static/1cbb6705ee34b01df491a5e950e809bb/ab631/chaining-array-methods.webp 6w,\n/static/1cbb6705ee34b01df491a5e950e809bb/47cfc/chaining-array-methods.webp 510w,\n/static/1cbb6705ee34b01df491a5e950e809bb/2532a/chaining-array-methods.webp 1920w","sizes":"(max-width: 510px) 100vw, 510px","presentationWidth":510,"presentationHeight":350}}}},"excerpt":"Link to code snippet: GitHub One of the greatest things about JavaScript is how easy it is to work with arrays. The various array methods (map, filter, reduce, etc.…","html":"Link to code snippet: GitHub
\nOne of the greatest things about JavaScript is how easy it is to work with arrays. The various array methods (map, filter, reduce, etc.) can be combined with arrow function expressions to create succinct code.
\nIn addition, we're able to combine or chain these specific array methods to perform different operations sequentially.
\nLet's start with an array of different vehicles. Each vehicle will have a type, brand, color, and a price.
\nconst vehicles = [\n { type: 'car', brand: 'Tesla', color: 'red', price: 50000 },\n { type: 'car', brand: 'Toyota', color: 'blue', price: 20000 },\n { type: 'truck', brand: 'Ford', color: 'green', price: 40000 },\n { type: 'SUV', brand: 'Nissan', color: 'beige', price: 35000 },\n { type: 'car', brand: 'Tesla', color: 'gray', price: 80000 }\n]\nNow, let's say we want to find out which cars cost more than $20,000 from least to greatest in price. Breaking the requirements down into steps, we would get the following:
\ncarFor the first step, we'll need to get just the vehicles that are cars. We can combine this with our price requirement using one Array.filter() method.
If we had stopped here, we would get the two Tesla cars, but they may not be in the correct order. To ensure that the cars are ordered from least to greatest by price, we need to apply the Array.sort() method.
This can be done through chaining. Because Array.filter() returns an array, we can chain the sort method, which will be applied to the result of the previous filter method.
vehicles\n .filter(vehicle => vehicle.type === 'car' && vehicle.price > 20000)\n .sort((vehicle1, vehicle2) => vehicle1.price - vehicle2.price)\n .map(vehicle =>\n console.log(\n `${vehicle.color} ${vehicle.brand} ${\n vehicle.type\n } is $${vehicle.price.toFixed(2)}`\n )\n )\nNow that we have the desired outcome that we were looking for, it's time to print the result to the console. We can conveniently print out each element in our final array using Array.map().
// red Tesla car is $50000.00\n// gray Tesla car is $80000.00\nTemplate literals can be used to format the text as we choose, using property values from the elements in the array.
"}},{"node":{"fields":{"slug":"how-to-add-or-remove-an-element-at-the-end-of-an-array","dateSlug":"2021-08-08","postID":"how-to-add-or-remove-an-element-at-the-end-of-an-array-2021-08-08"},"frontmatter":{"category":"arrays","tags":["javascript","es6","arrays"],"date":"August 8, 2021","format":"image","title":"How to add or remove an element at the end of an array","author":{"name":"Stephen Sun"},"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEEAv/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAaidGRB//8QAGhABAQACAwAAAAAAAAAAAAAAAQACERIhIv/aAAgBAQABBQI6tE5Is5eeV//EABcRAQADAAAAAAAAAAAAAAAAAAABETH/2gAIAQMBAT8BjFv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAXEAEAAwAAAAAAAAAAAAAAAAAQATJh/9oACAEBAAY/AipGn//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExQaH/2gAIAQEAAT8hAr4ToB5KABl3LyIVQYM+z//aAAwDAQACAAMAAAAQ88//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QAaY//8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAB/9oACAECAQE/ENUi/8QAGhABAAMBAQEAAAAAAAAAAAAAAQARITFBUf/aAAgBAQABPxBwA6NMXGN6TOx8SF1yOy4AKfS6qHKQt7pKbr5H/9k=","aspectRatio":1.5,"src":"/static/beaf25d428c6b154a246d4c6be1d7e49/3866d/how-to-add-or-remove-an-element-at-the-end-of-an-array.jpg","srcSet":"/static/beaf25d428c6b154a246d4c6be1d7e49/d1bff/how-to-add-or-remove-an-element-at-the-end-of-an-array.jpg 6w,\n/static/beaf25d428c6b154a246d4c6be1d7e49/3866d/how-to-add-or-remove-an-element-at-the-end-of-an-array.jpg 510w,\n/static/beaf25d428c6b154a246d4c6be1d7e49/f7bf2/how-to-add-or-remove-an-element-at-the-end-of-an-array.jpg 1920w","srcWebp":"/static/beaf25d428c6b154a246d4c6be1d7e49/47cfc/how-to-add-or-remove-an-element-at-the-end-of-an-array.webp","srcSetWebp":"/static/beaf25d428c6b154a246d4c6be1d7e49/ab631/how-to-add-or-remove-an-element-at-the-end-of-an-array.webp 6w,\n/static/beaf25d428c6b154a246d4c6be1d7e49/47cfc/how-to-add-or-remove-an-element-at-the-end-of-an-array.webp 510w,\n/static/beaf25d428c6b154a246d4c6be1d7e49/2532a/how-to-add-or-remove-an-element-at-the-end-of-an-array.webp 1920w","sizes":"(max-width: 510px) 100vw, 510px","presentationWidth":510,"presentationHeight":350}}}},"excerpt":"Link to code snippet: GitHub Let's begin with an array of colors: We can add the color yellow to the end of our array: Now, our array contains four different colors…","html":"Link to code snippet: GitHub
\nLet's begin with an array of colors:
\nconst colors = ['red', 'blue', 'green']\nWe can add the color yellow to the end of our array:
colors.push('yellow')\nNow, our array contains four different colors:
\nconsole.log(colors) // 4\nWe can also push multiple elements at the same time:
\ncolors.push('orange', 'gray', 'black')\nNow, we have a total of seven colors in our array:
\nconsole.log(colors) // 7\nIf we want to remove elements from the end of the array, we can use the Array.pop() method:
colors.pop()\nFinally, we're left with an array containing only six elements:
\nconsole.log(colors) // [ 'red', 'blue', 'green', 'yellow', 'orange', 'gray' ]\nLink to code snippet: GitHub
\nOne of the great features of ES6 is computed property names.
\nLet's say we have the following properties:
\nconst a = 'age'\nconst j = 'j'\nAnd a person object:
const person = {\n firstName: 'John',\n lastName: 'Doe',\n [a]: 25,\n [`${j}ob`]: 'Software Developer'\n}\nAs long as we have brackets around our expressions, these expressions will be dynamically translated into the string used as the key.
\nThis includes template literals and string concatenation.
\nIf we now log the person object, we would get the following result:
{\n firstName: 'John',\n lastName: 'Doe',\n age: 25,\n job: 'Software Developer'\n}\nThis method can also be used in functions without the need of creating an object! Passing in the two properties into our createPerson function gives the same result:
const createPerson = (a, j) => {\n return {\n firstName: 'John',\n lastName: 'Doe',\n [a]: 25,\n [`${j}ob`]: 'Software Developer'\n }\n}\nLink to code snippet: GitHub
\nDates can be a bit tricky in JavaScript.
\nOftentimes, we may need to add a given number of days to a date object.
\nDate objects have getDate() and setDate() methods that can be used to get and set dates.
Let's first create a function named addDays. This function will need to take in two arguments: a date and the number of days to be added to this date.
const addDays = (date, days) => {\n const newDate = new Date(date)\n newDate.setDate(newDate.getDate() + days)\n return newDate\n}\nIf we directly call the setDate() method on our date object, then the date would be mutated. This could potentially cause issues, especially if we're using this date elsewhere.
Instead, we should create a new date instance, perform the operation and return this new date.
\nCalling getDate() on our new date object gets us the day of the month according to local time. We can then add the number of days to this value.
Last but not least, we will need to call setDate() on our new date object to set the calculated date.
What if we wanted to add three days to today's date? Let's try it out.
\nconst date = new Date()\nconst newDate = addDays(date, 3)\nconsole.log(newDate) // Thu Jun 17 2021 21:33:05 GMT-0500 (Central Daylight Time)\nCreating a new date instance will give use the current date. We can use our addDays() function and pass our date instance and a value of three for the second argument.
Logging this result gives us Thu Jun 17 2021 21:33:05 GMT-0500 (Central Daylight Time).
(It is currently June 14, 2021 as I'm typing this).
"}},{"node":{"fields":{"slug":"how-to-add-key-value-pairs-to-an-object","dateSlug":"2021-03-08","postID":"how-to-add-key-value-pairs-to-an-object-2021-03-08"},"frontmatter":{"category":"objects","tags":["javascript","es6","objects"],"date":"March 8, 2021","format":"image","title":"How to add key value pairs to an object","author":{"name":"Stephen Sun"},"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMBBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHgWkjBX//EABcQAAMBAAAAAAAAAAAAAAAAAAIQEQD/2gAIAQEAAQUCxDHV/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAGRABAQEAAwAAAAAAAAAAAAAAAQAREDFx/9oACAEBAAE/ISbuj48Dlq2//9oADAMBAAIAAwAAABCcz//EABYRAAMAAAAAAAAAAAAAAAAAABARIf/aAAgBAwEBPxCIf//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAECAQE/EKf/xAAbEAEAAgIDAAAAAAAAAAAAAAABACExURARQf/aAAgBAQABPxAqgZYCCBTYDrhcKinuZ23P/9k=","aspectRatio":1.5,"src":"/static/29f9bf9ed69cb4803d874ea179067e09/3866d/how-to-add-key-value-pairs-to-an-object.jpg","srcSet":"/static/29f9bf9ed69cb4803d874ea179067e09/d1bff/how-to-add-key-value-pairs-to-an-object.jpg 6w,\n/static/29f9bf9ed69cb4803d874ea179067e09/3866d/how-to-add-key-value-pairs-to-an-object.jpg 510w,\n/static/29f9bf9ed69cb4803d874ea179067e09/f7bf2/how-to-add-key-value-pairs-to-an-object.jpg 1920w","srcWebp":"/static/29f9bf9ed69cb4803d874ea179067e09/47cfc/how-to-add-key-value-pairs-to-an-object.webp","srcSetWebp":"/static/29f9bf9ed69cb4803d874ea179067e09/ab631/how-to-add-key-value-pairs-to-an-object.webp 6w,\n/static/29f9bf9ed69cb4803d874ea179067e09/47cfc/how-to-add-key-value-pairs-to-an-object.webp 510w,\n/static/29f9bf9ed69cb4803d874ea179067e09/2532a/how-to-add-key-value-pairs-to-an-object.webp 1920w","sizes":"(max-width: 510px) 100vw, 510px","presentationWidth":510,"presentationHeight":350}}}},"excerpt":"Link to code snippet: GitHub Let's go over a few different methods of adding key/value pairs to an object! Let's begin with an object named orange and give it two p…","html":"Link to code snippet: GitHub
\nLet's go over a few different methods of adding key/value pairs to an object!
\nLet's begin with an object named orange and give it two properties: type and fruit.
const orange = {\n type: 'fruit',\n color: 'orange',\n}\nThe first method is dot notation. We can access properties on an object by calling object.property. In our example, orange is our object and type is a property of orange.
Logging orange.type will give us the value fruit.
console.log(orange.type) // fruit\nAdding new properties can be done in a similar fashion. Even though our orange object doesn't have a property named shape, we can add the key/value pair for this property using dot notation.
orange.shape = 'circle'\nconsole.log(orange.shape) // circle\nAfter setting the shape property to circle, our orange object is now modified to include this key/value pair.
Bracket notation is another way of accessing properties on an object, but with a different syntax, object[property].
Logging orange['type'] will again give us the value fruit.
console.log(orange['type']) // fruit\nTo add on to our example, let's add a new property called weight and give it a value of 1.
orange['weight'] = 1\nconsole.log(orange['weight']) // 1\nNow, our orange object has a total of four properties: type, color, shape and weight.
The Object.assign() method allows us to copy all the properties from one object to another object.
Let's create an object containing the properties we want to add to our orange object. We'll call this object extraProps.
const extraProps = {\n length: 4,\n width: 4,\n}\nNow, let's add the key/value pairs from our extraProps object and add them to our orange object. We'll call the new object newOrange.
const newOrange = Object.assign(orange, extraProps)\nnewOrange now contains the properties previously added, as well as length and width from our extraProps object.
The object spread operator is similar to the Object.assign() method but provides a shorter syntax.
Let's create an object to highlight how this method works. We'll call this object price.
const price = { cost: 0.99 }\nIf we wanted to clone our orange object, we can do so.
const anotherOrange = { ...orange }\nOur anotherOrange object will contain all the properties that the orange object has.
Now, let's add a cost property to our anotherOrange object.
We can do this simply by taking advantage of the spread syntax. We'll call the new object that's created, orangeForSale.
const orangeForSale = { ...anotherOrange, ...price }\nOur orangeForSale object contains all the properties from the previous examples, with an addition of a cost property.
Git, in a nutshell, is a system that allows us to properly and effectively track code changes. It allows multiple developers to work together at the same time, while also maintaining a history of all the changes in a repository. Git also provides many usefuls features such as branching and merging to allow developers to work on specific features independently.
\nDownload Git: Getting started installing Git
\ngit init
git clone <path/url>
git add <filename>
git commit -m \"<commit message>\"
git push origin <branch name>
git pull
git status
git merge <branch name>
git checkout -b <branch name>
git checkout master
git branch -d <branch name>
git remote add origin <server>
Find a good location where you would like to store your repositories and create a folder for your new project. For this example, let's use my-first-project.
Since this is a brand new repository, we need to initialize it with git init. This tells Git to track code changes for your project.
mkdir my-first-project\ncd my-first-project\ngit init\nNext, let's create a file called index.js using the touch command in the terminal.
touch index.js\nTo include this change in our upcoming git commit, we will need to add this file to the staging area. We can think of this staging area as git's way of grouping our pre-commit changes together. This can be done with the add command.
\ngit add index.js\nNow, what if we wanted to add more than one file at a time? All we have to do is list out all the file names at the end. It would look something like this:
\ngit add index.js file1.js file2.js file3.js\nAlso, if we wanted to simply add all the files in our project, we can use the shortcut:
\ngit add .\nAll changes, staged or unstaged, can be checked at any time with the status command.
\ngit status\nOnce we're satisfied with our staged changes, it's time to create our first commit with the commit command. We should always add a message to our commit, describing our code changes.
\ngit commit -m \"Created index.js file\"\nThe commit is now ready to be pushed from our machine to our remote repository (GitHub, Gitlab, Bitbucket, etc). We will use the push command to do so. The origin keyword is a shorthand name for our remote repository and master refers to the branch we want to push our commit to. If we wanted to push to a different branch, we can specify another branch name (e.g. development).
git push origin master\nUsing the push() method, we can add elements to the end of an array.
\nBut what if our goal is to add elements to the beginning of an array?
\nJavaScript has another method called unshift() that can do just that.
\nLet's say we have an array of colors:
\nconst colors = ['red', 'blue', 'green']\nAnd we want to add the color yellow to the beginning of our array:
\nconsole.log(colors.unshift('yellow')) // 4\nconsole.log(colors) // ['yellow', 'red', 'blue', 'green']\nWe can also add more than one color at a time.
\nLet's take our colors array (including yellow) and add some more colors:
\nconsole.log(colors.unshift('orange', 'gray', 'black')) // 7\nconsole.log(colors) // ['orange', 'gray', 'black', 'yellow', 'red', 'blue', 'green]\nWhat if we want to remove an element from the beginning of the array instead?
\nSimilar to the pop() method which removes the last element of an array, we have the shift() method!
\nLet's take our colors array that now has seven colors and remove the first element:
\nconsole.log(colors.shift()) // orange\nconsole.log(colors) // ['gray', 'black', 'yellow', 'red', 'blue', 'green]\nIf we want to remove multiple colors, then we would need to use the shift() method in a loop.
\nThe downside to using unshift() and shift() is that these methods mutate the original array.
\nIf we want to avoid mutations, we can use concat() or the spread operator, which will return a new array.
"}},{"node":{"fields":{"slug":"how-to-check-if-a-key-exists-in-a-javascript-object","dateSlug":"2020-07-27","postID":"how-to-check-if-a-key-exists-in-a-javascript-object-2020-07-27"},"frontmatter":{"category":"objects","tags":["javascript","es6","objects"],"date":"July 27, 2020","format":"image","title":"How to check if a key exists in a JavaScript object","author":{"name":"Stephen Sun"},"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAbFzLKDQEf/EABsQAAMAAgMAAAAAAAAAAAAAAAECEQADBBND/9oACAEBAAEFAgxyiOvbgev68ZLp/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQMBAT8BJ//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAICAgMAAAAAAAAAAAAAAAABAhESYSExQf/aAAgBAQAGPwJeI7FLRjVcEnoTP//EABoQAQEAAwEBAAAAAAAAAAAAAAERADFRIWH/2gAIAQEAAT8h1MgSvM3wt1v3LeoMnAj67g+uyiYbDtc//9oADAMBAAIAAwAAABALD//EABYRAQEBAAAAAAAAAAAAAAAAACEBEP/aAAgBAwEBPxCgz//EABcRAAMBAAAAAAAAAAAAAAAAAAABEVH/2gAIAQIBAT8Qa0p//8QAHBABAAMAAgMAAAAAAAAAAAAAAQARITGxQYHh/9oACAEBAAE/EAYhC4BR19dRvESo6Lh76qZ5MhGpsUlKW8wneCFqgoN+RGosquNn/9k=","aspectRatio":1.5,"src":"/static/be279c7c72812cf79c0d5da3613c120f/3866d/how-to-check-if-a-key-exists-in-a-javascript-object.jpg","srcSet":"/static/be279c7c72812cf79c0d5da3613c120f/d1bff/how-to-check-if-a-key-exists-in-a-javascript-object.jpg 6w,\n/static/be279c7c72812cf79c0d5da3613c120f/3866d/how-to-check-if-a-key-exists-in-a-javascript-object.jpg 510w,\n/static/be279c7c72812cf79c0d5da3613c120f/f7bf2/how-to-check-if-a-key-exists-in-a-javascript-object.jpg 1920w","srcWebp":"/static/be279c7c72812cf79c0d5da3613c120f/47cfc/how-to-check-if-a-key-exists-in-a-javascript-object.webp","srcSetWebp":"/static/be279c7c72812cf79c0d5da3613c120f/ab631/how-to-check-if-a-key-exists-in-a-javascript-object.webp 6w,\n/static/be279c7c72812cf79c0d5da3613c120f/47cfc/how-to-check-if-a-key-exists-in-a-javascript-object.webp 510w,\n/static/be279c7c72812cf79c0d5da3613c120f/2532a/how-to-check-if-a-key-exists-in-a-javascript-object.webp 1920w","sizes":"(max-width: 510px) 100vw, 510px","presentationWidth":510,"presentationHeight":350}}}},"excerpt":"When working with objects, we may need to check if a certain key exists or has a certain value. Let’s say we have a dog object: And we want to validate whether or n…","html":"When working with objects, we may need to check if a certain key exists or has a certain value.
\nLet’s say we have a dog object:
\nconst dog = {\n name: 'Jack',\n color: 'white',\n age: 5,\n}\nAnd we want to validate whether or not this dog object has the key age.
\nWe can use the hasOwnProperty() method on the object, and see whether this returns true or false.
\nconsole.log(dog.hasOwnProperty(age)) // evaluates to true\nAnother option we have is to use the in operator.
\nThe in operator will return true if the key exists in our dog object.
\nThe syntax is as follows: prop in object
\nIn our example, our property or key is age, and our object is dog.
\nconsole.log('age' in dog) // evaluates to true\nA common practice is to always use a fallback to account for undefined values:
\ndog.age || 5 // evaluates to 5\nThis will set a default value of 5 in the case that age doesn’t exist.
"}},{"node":{"fields":{"slug":"how-to-check-if-array-contains-duplicate-values","dateSlug":"2020-07-23","postID":"how-to-check-if-array-contains-duplicate-values-2020-07-23"},"frontmatter":{"category":"arrays","tags":["javascript","es6","arrays"],"date":"July 23, 2020","format":"image","title":"How to check if array contains duplicate values","author":{"name":"Stephen Sun"},"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIBBP/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHq26mwR//EABoQAAICAwAAAAAAAAAAAAAAAAECACEDERL/2gAIAQEAAQUCD22UKFPSiVNz/8QAFxEAAwEAAAAAAAAAAAAAAAAAARARQf/aAAgBAwEBPwETV//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAECAQE/Aaf/xAAXEAEAAwAAAAAAAAAAAAAAAAABABAx/9oACAEBAAY/AkmQayv/xAAZEAADAQEBAAAAAAAAAAAAAAAAARExECH/2gAIAQEAAT8hV5MKBuKkyonYqNNqcf/aAAwDAQACAAMAAAAQt9//xAAYEQADAQEAAAAAAAAAAAAAAAAAATERIf/aAAgBAwEBPxBljR3h/8QAFxEBAAMAAAAAAAAAAAAAAAAAERAhMf/aAAgBAgEBPxAW1H//xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMUFR/9oACAEBAAE/EAtBzf3LghC/IJelT5Cm+TtbHbQpWksYFB4T/9k=","aspectRatio":1.5,"src":"/static/c1502065e4dff2cef2193214782d8f91/3866d/how-to-check-if-array-contains-duplicate-values.jpg","srcSet":"/static/c1502065e4dff2cef2193214782d8f91/d1bff/how-to-check-if-array-contains-duplicate-values.jpg 6w,\n/static/c1502065e4dff2cef2193214782d8f91/3866d/how-to-check-if-array-contains-duplicate-values.jpg 510w,\n/static/c1502065e4dff2cef2193214782d8f91/f7bf2/how-to-check-if-array-contains-duplicate-values.jpg 1920w","srcWebp":"/static/c1502065e4dff2cef2193214782d8f91/47cfc/how-to-check-if-array-contains-duplicate-values.webp","srcSetWebp":"/static/c1502065e4dff2cef2193214782d8f91/ab631/how-to-check-if-array-contains-duplicate-values.webp 6w,\n/static/c1502065e4dff2cef2193214782d8f91/47cfc/how-to-check-if-array-contains-duplicate-values.webp 510w,\n/static/c1502065e4dff2cef2193214782d8f91/2532a/how-to-check-if-array-contains-duplicate-values.webp 1920w","sizes":"(max-width: 510px) 100vw, 510px","presentationWidth":510,"presentationHeight":350}}}},"excerpt":"Knowing how to check for duplicates in an array can be useful in many different situations. Here are two ways to accomplish this: Combination of some() and indexOf(…","html":"Knowing how to check for duplicates in an array can be useful in many different situations. Here are two ways to accomplish this:
\nThe some() method can be used to check if each element in an array passes a function.
\nWe'll be passing a callback with two arguments: the element of the array and the index of the element.
\nIn order to check whether a value already exists in an array (a duplicate), we'll use the indexOf() method and pass in each value from our colors array.
\nThe indexOf() method will return the index of the first occurence of the value.
\nRemember how our callback in the some() method also contains the index (i)?
\nThis will be our verification!
\nIf this condition passes and there are equal index values, that means there are duplicates.
\nIn our example, we have two values of \"blue\" and two values of \"red\".
\nThis will satisfy our index comparison, and return true.
\nconst colorsArray = ['red', 'blue', 'green', 'blue', 'red']\n\nconst doesArrayHaveDuplicates = colorsArray.some(\n (val, i) => colorsArray.indexOf(val) !== i\n)\n\nconsole.log(doesArrayHaveDuplicates) // true\nSet is one of the great features that came with ES6.
\nYou can think of Set as an object with a collection of values.
\nThe only catch is that each value in the Set must be unique, which makes it perfect for finding duplicates!
\nIf a value already exists in the Set, it won't be added to the collection.
\nIn our example, we create a new Set object with our colors array as our collection of values.
\nSet internally will check for unique values, and since there are two values of \"red\", the size of our Set will only by 3 (instead of 4).
\nThe length of our colors array is 4, so our validation will return true, meaning duplicates exist.
\nconst doesArrayHaveDuplicates = array => {\n return array.length !== new Set(array).size\n}\n\nconst colorsArray = ['red', 'blue', 'green', 'red']\nconsole.log(doesArrayHaveDuplicates(colorsArray)) // fal\nLet's go over a few ways to combine arrays in Javascript!
\nWe have two arrays, an array of numbers and an array of colors.
\nconst numbers = [1, 2, 3]\nconst colors = ['red', 'blue', 'green']\nconst newArray = [].concat(numbers, colors) // method 1\nconst mutatedArray = numbers.concat(colors) // method 2\ndocument.write(newArray)\nWe can use [].concat syntax to create a new empty array, and then add all the elements from our number and color arrays.
\nSince we're creating a new array, we are preserving immutability.
\nThe second way of concatenation is to take an array and add the elements from the second array.
\nIn our example, we would take our numbers array and add the elements from the colors array.
\nThe result may look the same, but the second method actually mutates our numbers array.
\nIf we wish to use our numbers array elsewhere, it won't have the same values that we started with.
\nBe careful!
\nES6 gave us a new method of combining arrays: the spread operator.
\nThis specific syntax allows elements in an array to be expanded and accessed in a clean way.
\nconst numbers = [1, 2, 3]\nconst colors = ['red', 'blue', 'green']\nconst newArray = [...numbers, ...colors]\ndocument.write(newArray)\nInstead of using concat(), we can simplify things by:
\nAnother way to combine arrays is to use the reduce() method.
\nIt is particularly useful when you want to perform a specific operation on each element in an array.
\nconst numbers = [1, 2, 3]\nconst colors = ['red', 'blue', 'green']\nconst arrays = [numbers, colors]\nconst newArray = arrays =>\n arrays.reduce((accumulator, next) => [...accumulator, next])\ndocument.write(newArray(arrays))\nIn this case, we want to loop through all the elements of both of our numbers and colors array, and add them into our new array.
\nFirst, we create an array with both our numbers array and colors array.
\nNext, we pass this array to our reduce method, which returns a new array with the elements from the accumulator and the next item.
\nThis happens to be our numbers array (accumulator) and colors array (next).
\nWith ES2019, we now have access to the flat() method.
\nThis new method creates a new array that recursively concatenates sub-array elements.
\nWhat does that mean?
\nLet's take a look at an example!
\nconst numbers = [1, 2, 3]\nconst colors = ['red', 'blue', 'green']\nconst arrays = [numbers, colors]\nconst newArray = arrays.flat(arrays)\ndocument.write(newArray)\nLet's create an array, with our numbers array and colors array as elements.
\nNow, we have two different arrays inside an array.
\nWe can use the flat() method to flatten the two inside arrays and return one array instead.
\nHow convenient!
\nThis is extremely useful, when you have nested arrays and arrays of different sizes.
"}},{"node":{"fields":{"slug":"how-to-use-async-await-in-loops","dateSlug":"2020-07-16","postID":"how-to-use-async-await-in-loops-2020-07-16"},"frontmatter":{"category":"loops","tags":["javascript","es6","asynchronous","loops"],"date":"July 16, 2020","format":"image","title":"How to use async await in loops","author":{"name":"Stephen Sun"},"image":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMFAv/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABUmhrNgloP//EABoQAAMAAwEAAAAAAAAAAAAAAAABAgMREhP/2gAIAQEAAQUCwzSMirvTJW24TPM//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BJ//EAB4QAAEBCQAAAAAAAAAAAAAAAAABAhARISIxMkFh/9oACAEBAAY/ApslKQTrrmzJT//EABsQAQACAwEBAAAAAAAAAAAAAAEAESExUUFh/9oACAEBAAE/IVbdxqZL4ULPsbbDktbbduLl/9oADAMBAAIAAwAAABCDL//EABURAQEAAAAAAAAAAAAAAAAAAAAh/9oACAEDAQE/EIj/xAAWEQEBAQAAAAAAAAAAAAAAAAABEQD/2gAIAQIBAT8QFLo7/8QAHBABAAICAwEAAAAAAAAAAAAAAQARITFRgcHh/9oACAEBAAE/EKG0VhM+wSYghZv7caWNI0SlzvbCMOTpyRDw8g+T/9k=","aspectRatio":1.5,"src":"/static/c9d830e2fa4303b3b97f44cfc3b1058d/3866d/how-to-use-async-await-in-loops.jpg","srcSet":"/static/c9d830e2fa4303b3b97f44cfc3b1058d/d1bff/how-to-use-async-await-in-loops.jpg 6w,\n/static/c9d830e2fa4303b3b97f44cfc3b1058d/3866d/how-to-use-async-await-in-loops.jpg 510w,\n/static/c9d830e2fa4303b3b97f44cfc3b1058d/f7bf2/how-to-use-async-await-in-loops.jpg 1920w","srcWebp":"/static/c9d830e2fa4303b3b97f44cfc3b1058d/47cfc/how-to-use-async-await-in-loops.webp","srcSetWebp":"/static/c9d830e2fa4303b3b97f44cfc3b1058d/ab631/how-to-use-async-await-in-loops.webp 6w,\n/static/c9d830e2fa4303b3b97f44cfc3b1058d/47cfc/how-to-use-async-await-in-loops.webp 510w,\n/static/c9d830e2fa4303b3b97f44cfc3b1058d/2532a/how-to-use-async-await-in-loops.webp 1920w","sizes":"(max-width: 510px) 100vw, 510px","presentationWidth":510,"presentationHeight":350}}}},"excerpt":"As developers, we frequently find ourselves needing to perform certain asynchronous tasks. What if we want to do this in a loop? Let's dive into a few examples of c…","html":"As developers, we frequently find ourselves needing to perform certain asynchronous tasks.
\nWhat if we want to do this in a loop?
\nLet's dive into a few examples of common loops in JavaScript and see how async/await behaves in each scenario.
\nWe'll be using the public Dog API for all of our examples: Dog API
\nLet's start off with an example of a forEach loop.
\nconst dogUrls = [\n 'https://dog.ceo/api/breeds/image/random',\n 'https://dog.ceo/api/breed/hound/images/random',\n 'https://dog.ceo/api/breed/hound/afghan/images/random',\n]\n\nconst getDogImage = async url => {\n const res = await fetch(url)\n const data = await res.json()\n document.write(`<img src=${data.message} />`)\n console.log('displaying dog image')\n}\n\nconst fetchDogs = () => {\n dogUrls.forEach(async url => await getDogImage(url))\n console.log('Done!')\n}\n\nfetchDogs()\nLet's break down the different parts of our example:
\nWhat we expect to happen is the following order:
\nBut what we see is that the \"Done!\" message is being printed to the console before all the tasks in our forEach loop.
\nThis is because forEach loops are synchronous by design, and won't wait for promises to resolve/complete.
\nAs a result, it is not possible to perform asynchronous tasks inside forEach loops, and we should only use this loop when dealing with synchronous tasks.
\nNow, let's take our previous example and use a for-of loop instead.
\nconst dogUrls = [\n 'https://dog.ceo/api/breeds/image/random',\n 'https://dog.ceo/api/breed/hound/images/random',\n 'https://dog.ceo/api/breed/hound/afghan/images/random',\n]\n\nconst getDogImage = async url => {\n const res = await fetch(url)\n const data = await res.json()\n document.write(`<img src=${data.message} />`)\n console.log('displaying dog image')\n}\n\nconst fetchDogs = async () => {\n for (const url of dogUrls) {\n await getDogImage(url)\n }\n console.log('Done!')\n}\n\nfetchDogs()\nAs we can see, all of the tasks execute in the order that we expected in the forEach example.
\nWhenever we await getDogImage(), the for loop waits for all of the tasks in getDogImage() to complete before moving on to the next iteration.
\nAlso, the \"Done\" message is printed to the console only after all the iterations of the for loop completes.
\nAs a result, we should use for-of loops when we need to perform asynchronous tasks in a specific order.
\nWhat if we don't care about the order that our asynchronous tasks execute?
\nAlso, what if we care about performance, and we want to fetch/display our dog images as fast as possible?
\nconst dogUrls = [\n 'https://dog.ceo/api/breeds/image/random',\n 'https://dog.ceo/api/breed/hound/images/random',\n 'https://dog.ceo/api/breed/hound/afghan/images/random',\n]\n\nconst getDogImage = async url => {\n const res = await fetch(url)\n const data = await res.json()\n document.write(`<img src=${data.message} />`)\n console.log('displaying dog image')\n}\n\nconst fetchDogs = async () => {\n const promises = dogUrls.map(async url => await getDogImage(url))\n await Promise.all(promises)\n console.log('Done!')\n}\n\nfetchDogs()\nInstead of waiting for each iteration to complete before the next, we can create an array of promises and fire all of them off at the same time.
\nThe map method always returns an array, and in our case, an array of promises that call our getDogImage() function.
\nWe then pass our array of promises to Promise.all, which will execute all of the promises at once.
\nAgain, if your asynchronous tasks need to be executed in a specific order, then a for-of loop should be used.
\nWhat if we want both order and speed?
\nconst dogUrls = [\n 'https://dog.ceo/api/breeds/image/random',\n 'https://dog.ceo/api/breed/hound/images/random',\n 'https://dog.ceo/api/breed/hound/afghan/images/random',\n]\n\nconst getDogImage = async url => {\n const res = await fetch(url)\n const data = await res.json()\n document.write(`<img src=${data.message} />`)\n console.log('displaying dog image')\n}\n\nconst fetchDogs = async () => {\n await dogUrls.reduce(async (promise, url) => {\n await getDogImage(url)\n await promise\n }, Promise.resolve())\n console.log('Done!')\n}\n\nfetchDogs()\nReduce to the rescue!
\nThe reduce method is commonly used when we want tasks to happen in a specific order, and each task depends on the result of the previous task.
\nIn our example, we start our reduce method with Promise.resolve(), which is an already resolved Promise object.
\nWe then await our getDogImage() function first, before we await our accumulator (promise).
\nThis makes our reduce method performant, while executing our tasks sequentially.
"}}]}},"pageContext":{}},"staticQueryHashes":["1112540427","1408454471","2347443422","2404490943","2661970575","3904292974","399170485","648301173","850277546"]}