DEV Community: SavagePixie

Best practices to authenticate with Passport.js

SavagePixie — Mon, 20 Jul 2020 19:07:29 +0000

I would like to ask the community for help to better understand and use Passport.js.

The way I learned to use it, you define a strategy, make a couple of auth routes and persist session on a cookie.

So, for instance, you would create a Google strategy like this:

const passport = require('passport')
const GoogleStrategy = require('passport-google-oauth20').Strategy

passport.use(new GoogleStrategy(
    options,
    (accessToken, refreshToken, profile, done) => done(null, profile)
))

Then add cookie-session and passport middleware:

app.use(cookieSession(cookieOptions))
app.use(passport.initialize())
app.use(passport.session())

And finally create a log in route and a callback route:

app.get('/google', passport.authenticate('google', scope))

app.get('/google/callback', passport.authenticate('google', options))

But my understanding of Passport.js is very limited and I often wonder if this is even a good idea. For instance, I don't really know what the parameters accessToken and refreshToken in the strategy's callback are. I imagine they serve some purpose beyond just existing, but I wouldn't know how to use them.

So I thought I'd ask around and hopefully hear good opinions on the matter.

How do you personally use Passport.js?
What method(s) do you use to persist sessions?
What are the pitfalls/security issues with the approach I outlined above?
What can we use accessToken and refreshToken for?

Thanks a lot in advance for your replies^^

Mutability and reassignability in JavaScript

SavagePixie — Fri, 10 Jul 2020 14:14:02 +0000

When you started learning JavaScript and were introduced to variable declaration, you might have read something along these lines:

let creates a variable that can change and be reassigned freely. const, on the other hand, creates a read-only variable that cannot be changed.

Then, as if an afterthought, you might have seen something like this:

It is important to remember, though, that even if they are declared using const arrays and objects can still change.

At which point you would hardly be to blame should you be confused. This is just an example, by the way. Your case might be different. You might have got an amazing explanation that perfectly cleared up how let and const worked.

Nonetheless, let and const tend to generate confusion as to whether the value they hold can change or not. The goal of this article is to try a different approach and perhaps clear up some of the confusion.

The first thing that you need to know is that let and const have nothing to do with whether a value can be changed or not.

Mutability depends on type

Let this sink for a moment. Whether you can change a value has nothing to do with the keyword you used to declare its variable.

So, what does it have to do with, then? The answer is very simple: the value's type.

In JavaScript there are two kinds of types: primitive types and objects. If you really want to dig deep into the issue, MDN has a good explanation. But for now, it is enough to grossly oversimplify it and say that objects are object literals and arrays and primitives are numbers, strings, booleans, undefined, null and symbols.

Primitive types

Primitive types are immutable in JavaScript. This means that their value can never be changed. 5 is always going to be 5, you can't simply add something to it and change it. The code below exemplifies it:

let x = 5
x + 2
console.log(x) // -> 5

Even if we add two to x, the value of x is still 5. The expression x + 2 doesn't change the value 5. It generates a new value (which in this case happens to be 7). If we wanted to use that new value, we would need to assign it to something (more on that later).

Similarly the String method slice (and all other String methods) returns a new string rather than modifying the value of a string.

let str = 'Blue mountain'
str.slice(0, 4)
console.log(str) // -> 'Blue mountain'

In summary, the value of a primitive type cannot be changed, so it is immutable. Once it's defined, that's what it is. We can create a new value based on that, but it'll be a new one, not the same.

Objects (and Arrays)

Objects (and arrays) are mutable. This means that their value can change. In fact, arrays have a plethora of methods you can use to change their value.

Let's use the Array method push as an example:

let arr = [ 1, 2, 3 ]
arr.push(4)
console.log(arr) // -> [ 1, 2, 3, 4 ]

As we can see here, the actual value inside arr has changed. Whereas in the previous examples x and str always had the same value, even after we operated on them, arr's value has changed.

We can similarly extend object literals:

let obj = { a: 1 }
obj.b = 2
console.log(obj) // -> { a: 1, b: 2 }

Again, the value inside obj has changed, or to be more precise, mutated. This is what mutability means. The same value can take a new shape and become something different.

At this point, I have a little confession to make. I have been using change as synonymous to mutate. This isn't strictly true and it isn't always used that way. Change's meaning is broader and, as far as I'm aware, it's not a technical term. So often you'll see it used in the meaning of reassign. Change's ambiguity is, I think, one of the reasons for the confusion about mutability.

So what's the deal with `let` and `const`?

Ah, I'm glad you asked. let and const are not related to mutability. They are used to express reassignability.

In short, a variable declared with let is reassignable, a variable declared with const isn't.

What is this reassignability?

By reassignability I mean the ability to be assigned an entirely new value. That is, completely discard whatever value we had before and take on a new one.

In JavaScript, when we want to assign a value we use the assignment operator (=) (well, almost always at any rate). That means that when we want to assign a value to a variable, we use an =, like so:

let a = 1
let b = 3

Reassignability means that after the first assignment, a variable can be reassigned a new value. Its current value may or may not be mutable, that depends on its type. However, if it is reassignable, it can always completely discard said value and take on a new one. Even of a different type. The following code is perfectly valid:

let x = 5
x = [ 1, 2, 3 ]
x = 'Blue mountain'

In this case, x is first assigned the value 5 and then reassigned several new values. The values themselves don't change (although the array might potentially change). What changes is what x is assigned to.

Even if we were to run x = x + 2 we're not really mutating the value 5. What we are doing is returning a new value from an expression and then reassigning that new value to x.

`const`, `let` and objects

Because objects are mutable, we can always mutate their value (unless we somehow prevent it). When we declare them using let, we're allowing the object to be discarded and have a new value assigned to the variable.

1  let obj = { a: 1 }
2  obj.b = 2
3  obj = { c: 3 }
4  console.log(obj) // -> { c: 3 }

In this example, we are declaring the object obj, mutating it to add a new property in the next line, and then assigning a completely new object to it. We can run line 2 because objects are mutable. If they weren't, it wouldn't work. We can run line 3 because obj is reassignable. It is reassignable because we declared it using let.

1  const obj = { a: 1 }
2  obj.b = 2
3  obj = { c: 3 } // -> throws TypeError
4  console.log(obj)

Here line 3 throws an error because obj is not reassignable. We can mutate the value as much as we want. Objects are mutable. But we cannot discard the value and assign a new one to it because we declared it using const.

Summary

The keywords let and const are used to describe a variable's reassignability, not whether the value is mutable. Mutability depends on the value's type.

Primitive values are immutable and therefore cannot take a different shape. 5 is always 5. Objects (and arrays) are mutable and therefore their shape can be modified.

let allows us to reassign a new value to a variable. We can discard whatever value it had before and give it a new one. const doesn't. Variables declared with const can only be assigned a value once.

Asteroid App: Project Submission

SavagePixie — Fri, 17 Apr 2020 10:57:51 +0000

What I built

For the Twilio Hackathon, I have built an automated WhatsApp account to which you can ask information about the closest asteroid to Earth at a particular date.

When a user sends a WhatsApp message, the API endpoint will try and parse it. If it is asking about asteroid information, it'll check for dates. If there are no dates present, it'll assume today. Otherwise, it'll parse the dates and use them as start and end of the period for which to issue the request to NASA's NeoWs API.

If the API is unable to parse the message, it will issue a request to Cat Facts API and respond with an apology and a cat fact.

If the parsing process is successful, it'll issue a request to NeoWs, glean the data returned and send it in a human-readable form.

Category Submission: Interesting Integrations

Demo

Here are some images of responses to different messages:

A simple request asking about the closest asteroid to Earth. Since there is no date, today is assumed:
A request including the start and end dates of a period:
A bad request. Something that the API can't understand:

I apologise for the typo in the reply. I didn't realise it was there until the image was cropped and uploaded and didn't feel like going through the process again.

Link to Code

Asteroid App's code, together with its README and set up instructions is available under a MIT license in this git repository.

How I built it (what's the stack? did I run into issues or discover something new along the way?)

I originally intended to build this project with Elixir. But it proved to be more than I could chew. So I decided to go with JavaScript and build it on Node.

You can read about some of the issues and notes of the process in previous posts in this series. There I documented part of the journey and most of the issues I ran into.

Something new that I discovered along the way was the beauty of Either. Creating the request parser proved to be a bit of a challenge. Especially when I wanted to allow for custom date requests. In the beginning, I had simply coded it with a bunch of ifs. But it was a mess.

So I remembered Professor Frisby Introduces Composable Functional JavaScript, which I had been watching last week (if you don't know what an either is, by the way, I strongly recommend watching the first five videos. The explanation is simply brilliant). So I decided to try a different approach using eithers.

The result was simply beautiful. Now, instead of a bunch of nested ifs, the parser is this simple pipeline of transformations:

checkKeyWords(str.toLowerCase())
    .map(matchDate)
    .chain(parseDate)
    .map(buildObject)
    .fold(
        () => ({ result: 'notOk' }),
        x => ({
            result: 'ok',
            payload: x,
        })
    )

Additional Resources/Info

I guess I'll use this section to say that building this project was a lot of fun. I got to learn how to integrate a Twilio service in my API and I experimented with functional libraries and types. The result is a pretty simple app, but I'm quite happy with the result. It does what I set out to accomplish.

Asteroid App: Phase Three

SavagePixie — Tue, 14 Apr 2020 11:57:25 +0000

For the Twilio Hackathon, I'm doing an automated WhatsApp account to which you can ask information about the closest asteroid to Earth at a particular date.

Today's Work

Today was the hardest day of work so far. Not because anything was particularly challenging in itself, but because all I did was very unfamiliar terrain for me. I deployed the asteroid app on Heroku, I configured the end point to properly interpret and respond to Twilio's request and set that as the end point for incoming messages on Twilio.

I'm not going to bore you with the details of all that. Big thanks to @avalander for helping me deploy the app on Heroku, though. It is nice that now I just need to push changes to the repository and they get automatically deployed.

The API's endpoint wasn't all that hard to configure, but I had to read through a lot of documentation to get there. It also didn't help that I was parsing a JSON instead of stringifying it and that caused it to throw an error.

I didn't get to tidying up the code. But oh well, that'll be another day's trouble.

Next Steps

Now I finally have a bare bones app. It is extremely simple, but it is completely functional. Next on my list is:

Tidy up the code a bit (this time for real).
Create a fallback URL for error handling.
Allow for some level of customisation when sending a request for asteroid data.

Asteroid App: Phase Two

SavagePixie — Sat, 11 Apr 2020 11:15:04 +0000

For the Twilio Hackathon, I'm doing an automated WhatsApp account to which you can ask information about the closest asteroid to Earth at a particular date.

Done So Far

I came across some issues using Sanctuary. It doesn't really support promises well. Looking through the issues, somebody suggested using Fluture, which looks interesting, but I don't really have a lot of time to put in it now, so it'll have to wait until a fluture project. There was also some suggestions about defining a specific type for promises, but I couldn't seem to get it to work. In the end, I thought it was more trouble than it was worth and decided to switch to Ramda instead.

I have written a module that parses the user's request and returns and object with the result: 'ok' and the start and end dates of the request if successful and simply result: 'notOk' otherwise. For now, it will only return the current day as both start and end dates if the request includes the words "asteroid" and "close". It isn't very customisable, yet, but it returns something.

Because Sanctuary didn't work well with promises and its Maybes were a bit weird, I decided to change the approach and do something more Elixir-like. The parser function will return a result of ok or notOk. Based on that, the next function will either send a request to NeoWs or to Cat Fact API (did you know that a healthy cat's body temperature is between 38 and 39ºC?). Then I created an object with ok and notOk keys to simulate some sort of pattern matching.

Finally, I put together a README based on Twilio's example. I'm not sure if it follows the guideline of having clear setup instructions yet, but hey, it's a beginning.

The code is now public on my github repository.

Next Steps

The basic structure of the app is almost done. For the next phase, I plan on accomplishing the following:

Plug the node API to Twilio, so that when a user sends a message to the WhatsApp number it'll actually get processed by asteroid app.
Tidy up the code a bit. Right now it's quite messy.

After that is done, I'll want to look into making the requests for data more customisable. At the very least, I want to make it possible to ask for one specific date. But I would also like to allow a date range and expressions like "last week" or "in two weeks". We'll see how I manage.

Asteroid App: Phase One

SavagePixie — Thu, 09 Apr 2020 14:57:35 +0000

For the Twilio Hackathon, I'm doing an automated WhatsApp account to which you can ask information about the closest asteroid to Earth at a particular date.

What I have done so far

I have decided to use Sanctuary, because some functional types (particularly Maybe) are going to be useful. It also provides a layer to declare types using Haskell notation, which is really cool. I'm not sure I'll use that part, though, as I'm not used to it. If I've got enough time, it might be cool to dive into it.

I have finished the functionality that fetches data from NeoWs. The most challenging part was delving through the vast amount of data that the API provides to take only what I'm interested on. I also had to create my own version of take, because, for some reason, Sanctuary has decided to make it return a Maybe with Nothing if you ask for more items that the list's length. So, following the way Elixir does it, I created one that returns the whole list if you ask for more elements than it has.

I have also created a module that calls Cat Facts API. If the program can't parse a user's request, instead of simply failing, it'll respond with "Sorry, I didn't understand your request, but did you know that cats' eyes shine in the dark because of the tapetum, a reflective layer in the eye, which acts like a mirror?" (or some other random cat fact).

Lastly, I have created a Twilio account and got WhatsApp running. I'm going to leave actually connecting it to my Node's endpoint until that's finished, but I can now send and receive WhatsApp messages.

Next Steps

For the next phase, I plan on doing the following:

Making a module to parse the user's request, i.e., reading the message that the user sends and extracting the data to make a request to NeoWs.
Writing a function that returns a Maybe. If the parsing is successful, it'll return the data for the request to NeoWs and the next function will do the request. If it isn't, it'll return Nothing and the next function will do a request to Cat Facts.
Put together a first draught of a readme.

It's not a whole lot, but the project is starting to take shape. Plus, investigating this Sanctuary library is proving to be quite fun.

What's the closest asteroid to Earth?

SavagePixie — Tue, 07 Apr 2020 06:59:12 +0000

I thought that for the Twilio Hackathon it might be fun to do something that integrates a couple of APIs. I also thought it might be interesting to use their new WhatsApp API. I am always happy to dig through all the goodies in NASA Open APIs. So this time, I thought I'd make a WhatsApp automated number that answers questions related to the closest celestial body to earth.

I'm not entirely sure how exactly I'll make it work. It'd be nice if it answered more than just the closest asteroid right now. If you could, for instance, ask for the closest this week, yesterday, on the day of your wedding, etc. I'll have to see if I can make the bot understand that sort of request written in natural language.

Originally, I had intended to do it with Elixir, as I have been itching to do a proper project in it for a while now. But I think it's more than I can bite at the moment, as I have never written a server in Elixir and I already have enough to familiarise with for this project. So I suppose I'll use NodeJS.

Anyway, this is my declaration of intentions. I hope I can finish it and ends up being something relatively cool.

Recursive approach to map and reduce: A thought experiment

SavagePixie — Wed, 01 Apr 2020 11:31:13 +0000

In my early stages of learning Elixir, I had to write a recursive implementation of the functions map and reduce. It turned out to be a simple albeit extremely interesting exercise. I was struck by the elegance and simplicity of such implementations.

That got me thinking about how similar or different it would be to implement a recursive approach to these functions in JavaScript. So what follows are my thoughts on the matter, where I translate my implementations into JavaScript and think out loud about some differences between Elixir and JavaScript.

Map

Here's my quick implementation for map:

def map([], _func), do: []
def map([ head | tail ], func), do: [ func.(head) | map(tail, func) ]

This executes the function until it finds an empty list, at which point it returns the empty list. Until that point, it takes the fist element of the list, applies the given function to it, and maps the rest of the list.

My first attempt to implement this in JavaScript was a very naïve one. I did this:

const map = ([ head, ...tail ], func) => [
    func(head),
    map(tail, func)
]

If you pay more attention to detail than I, you'll probably have realised that this will cause a call stack overflow. Unlike Elixir, JavaScript doesn't support defining multiple clauses for a function. So, in order to translate it into JavaScript, we need a condition or some other way to exit the recursion:

const map = ([ head, ...tail ], func) => tail.length === 0
    ? func(head)
    : [ func(head), map(tail, func) ]

This is better. When map reaches the last element in the list, it simply applies the function to it and returns it. Again, because we can't just define multiple clauses for a function in JavaScript, the empty list as ending point doesn't really work. At least not with this parameter definition. However, if we did want to use an empty list as the stopping point (to keep it closer to the original version?), we could try something like this:

const map = (list, func) => list.length === 0
    ? []
    : [ func(list[0]), map(list.slice(1), func) ]

Here we're keeping the same exit point for the recursion. It generates almost the same result as the previous implementation, but the body of the function is a bit more cumbersome. I prefer the previous one, because there's no need to call slice or to pick the first element in list.

You may have already noticed that there is a problem with this map. Specifically, it returns a list with the processed value as the fist element and another list as the second. So the result is going to be a mess of nested lists:

const list = [ 1, 2, 3, 4, 5 ]
const double = x => x * 2
map(list, double) // -> [ 2, [ 4, [ 6, [ 8, 10 ] ] ] ]

Turns out that doing [ func(head), map(tail, func) ] in JavaScript isn't equivalent to doing [ func.(head) | map(tail, func) ] in Elixir. The pipe character in Elixir separates the value of an element and the pointer to the next element. So it is expected that the pointer will be to a list. The comma in JavaScript separates two elements in a list. So if the second element is a list, it will be a nested list.

Obviously, we don't want that. To try and fix it, we could take a hint from map's arguments and use the spread operator:

const map = ([ head, ...tail ], func) => tail.length === 0
    ? func(head)
    : [ func(head), ...map(tail, func) ]

But if we do that, the runtime will complain and say that map is not a function or its return value is not iterable. A quick fix would be to use concat instead:

const map = ([ head, ...tail ], func) => tail.length === 0
    ? func(head)
    : [ func(head) ].concat(map(tail, func))

This returns a list with the first element as the head, and concatenates a recursive call to include the following elements. Now it generates the proper result:

const list = [ 1, 2, 3, 4, 5 ]
const double = x => x * 2
map(list, double) // -> [ 2, 4, 6, 8, 10 ]

Although it doesn't seem much more complex, I like the implementation in Elixir a lot better. Mostly it's because I think this is ugly: [ func(head) ].concat(map(tail, func)). I don't like creating an array and immediately invoking a method on it. But that might be just me. I also don't like that it needs a conditional expression. But there's not much we can do without pattern matching and multiple function clauses. It turned out to be a lot simpler than I expected, though.

Reduce

Once we've done map, it seems that reduce shouldn't be much harder. This is the implementation I wrote in Elixir:

def reduce([], value, _func), do: value
def reduce([ head | tail ], value, func), do: reduce(tail, func.(head, value), func)

Note: I am aware that this doesn't handle the case where the function receives list with a single element. This would be easy to implement, but since the point of this exercise is to look at the general logic, I didn't want to over complicate it by handling all possible cases.

Here we have another function with two clauses. Much like map, it applies a function to a value and then calls itself again. It keeps doing that until it reaches an empty list, at which point it returns the accumulated value.

Much like we did with map, we can check if we're on the last element of the list, in which case we return the function applied to the current element and the accumulated value. Otherwise, we call reduce itself passing the list, the call to the function and the function itself. Something like this:

const reduce = ([ head, ...tail ], value, func) => tail.length === 0
    ? func(head, value)
    : reduce(tail, func(head, value), func)

const list = [ 1, 2, 3, 4, 5 ]
const sum = (val, acc) => val + acc
reduce(list, 0, sum) // -> 15

This works just fine. But what happens if we want to use the first element of the list as the initial value? In Elixir it is as simple as creating another function that takes care of it:

def reduce([ head, second | tail ], func), do: reduce(tail, func.(second, head), func)

This function will use the first element of the list as the initial value and then call the other reduce function with the right accumulated value. But in JavaScript two different functions can't share name and there's no such thing as function overloading. So we need an alternative.

If we want to keep the order of the parameters, we need to figure out whether the second argument is a function or not in order to know if it's the initial value. We could write something like this:

const reduce = ([ head, ...tail ], second, third) => {
    if (tail.length === 0) {
        return third(head, second)
    }
    if (typeof second === 'function') {
        return reduce(tail.slice(1), second(tail[0], head), second)
    }
    return reduce(tail, third(head, second), third)
}

As before, we first check if we've reached the end of the list, in which case we assume third is a function and second the accumulated value.

If it's not the end of the list, we check if second is a function. If it is, we assume we've passed no initial value and forget about third. Then we slice tail in order to be able to use the first two elements in our call to the function.

Otherwise, we do the same we did in the last implementation.

However, this is hard to understand. Since we don't know what second and third are going to be, it's hard to give them meaningful names, which doesn't help anyone who reads it.

So let's try changing the order of the parameters. We'll define the reducer function as the second parameter and the initial value as the third:

const reduce = ([ head, ...tail ], func, value) => {
    if (tail.length === 0) {
        return func(head, value)
    }
    if (value === undefined) {
        return reduce(tail.slice(1), func, func(tail[0], head))
    }
    return reduce(tail, func, func(head, value))
}

The implementation doesn't change all that much from the previous one, but the names are a lot clearer. Now we can pass two or three arguments and the function we'll be able to handle it:

const list = [ 1, 2, 3, 4, 5 ]
const sum = (val, acc) => val + acc
reduce(list, sum) // -> 15
reduce(list, sum, 5) // -> 20

This implementation still has one problem, though: it won't be able to handle well the case where it receives a two-element list and no initial value:

const list = [ 1, 2 ]
const sum = (val, acc) => val + acc
reduce(list, sum) // -> NaN

To fix that, we can check the whole list's length in the first if instead of only the tail's:

const reduce = (list, func, value) => {
    if (list.length === 0) {
        return value
    }

    const [ head, ...tail ] = list
    if (value === undefined) {
        return reduce(tail.slice(1), func, func(tail[0], head))
    }

    return reduce(tail, func, func(head, value))
}

Now it will check the length of the whole list first and, if it's not empty, it'll do the destructuring. If we wanted, to avoid those ugly tail.slice and tail[0], we could use some more destructuring:

const reduce = (list, func, value) => {
    if (list.length === 0) {
        return value
    }

    if (value === undefined) {
        const [ head, second, ...tail ] = list
        return reduce(tail, func, func(second, head))
    }

    const [ head, ...tail ] = list
    return reduce(tail, func, func(head, value))
}

All in all, the JavaScript version of reduce isn't particularly complicated either. Because of the different places in which it does the destructuring, the recursive calls are nice and clean. Very much like map, instead of three clauses (or, to be precise, a function with one clause and a function with two clauses), we have three branches within the function sifted through with two conditionals.

Final thoughts: Was it worth it?

I'm not going to suggest to write your own implementation of map and reduce to use in a project. I'm not even sure that using recursion is a good idea if one were to do it. But, as an exercise, it has been interesting to think how to do it in JavaScript and to observe how it differs from Elixir.

One of the things I really like about Elixir is pattern matching. I think it adds a lot of flexibility when defining functions and, to me, how a function handles different cases is clearer and easier to follow with a clause for each case, rather than with a bunch of conditions in the function's body. It is unfortunate that until pattern matching is implemented in JavaScript, different cases have to be handled with conditions (or a plugin).

I also liked thinking how to translate [ func.(head) | map(tail, func) ] into JavaScript. The pipe character is really useful to create lists and prepend elements. In some cases, the spread operator would accomplish the same; but not when we want to join a list and the result of recursively calling a function.

So it has been an interesting exercise for me.

Good resources to learn Kotlin for Android?

SavagePixie — Fri, 31 Jan 2020 10:09:45 +0000

In my dealings with React Native, I have found certain plugins disappointing, so I am considering writing my own plugin in Kotlin. Obviously, that requires knowledge of Kotlin and how to develop for Android. I know the barest basics of Kotlin, but I know of a few resources to improve my knowledge of the language.

What I'd like to ask from you guys is if you know of any good tutorial, book, playground or other such things to learn Kotlin specifically to develop Android apps.

Bonus points if you can also point me to somewhere that explains how to develop plugins for React Native.

Thanks a lot!

What language are you planning to learn next?

SavagePixie — Mon, 09 Dec 2019 16:59:34 +0000

A lot of people who code seriously (whether as a job or as a hobby), end up hearing about other programming languages, getting interested and deciding to learn them (or at least about them).

What programming language(s) are you planning on learning next and why?

Cool Object methods in JavaScript

SavagePixie — Wed, 04 Dec 2019 10:46:14 +0000

This is a compilation of a few Object methods that may come in handy.

Object.assign
Object.entries
Object.freeze
Object.fromEntries
Object.is

Object.assign

This copies all enumerable own properties from one or more source objects to a target object. So we can use it to add specific properties or change their values by passing other objects to the method. If more than one object have the same key, it will always use the one that's passed last. It returns the target object.

Syntax

Object.assign(target, ...sources)

target is the object onto which properties will be copied.
sources are all the objects from which properties will be copied.

Examples

const pony = {
  colour: 'pink',
  species: 'unicorn',
}
Object.assign(pony, { cutieMark: 'star' }, { colour: 'pruple' })
console.log(pony) //{ colour: 'purple', species: 'unicorn', cutieMark: 'star' }

Object.assign can also be used to create new objects:

const pony = {
  colour: 'pink',
  species: 'unicorn',
}
const newPony = Object.assign({}, pony, { cutieMark: 'star' }, { colour: 'pruple' })
console.log(pony) //{ colour: 'pink', species: 'unicorn' }
console.log(newPony)//{ colour: 'purple', species: 'unicorn', cutieMark: 'star' }

Since arrays are objects, Object.assign also works on them:

const array = [ 0, 1, 2, 3, 4, 5 ]
Object.assign(array, { 1: 3, 3: 1 })
console.log(array) //[ 0, 3, 2, 1, 4, 5 ]

Object.entries

This method returns an array of the object's own enumerable properties in [ key, value ] pairs.

Syntax

Object.entries(object)

Example

const pony = {
  colour: 'pink',
  cutieMark: 'star',
  species: 'unicorn',
}
const arrayedPony = Object.entries(pony)
console.log(arrayedPony) //[[ 'colour', 'pink' ], [ 'cutieMark', 'star'], [ 'species', 'unicorn' ]]

Note Object.keys and Object.values function similarly but only return keys and values respectively.

Object.freeze

This one keeps an object from being changed at all. After freezing it, you can't add properties, remove them or change their value. It returns the same object that was passed.

Syntax

Object.freeze(object)

Example

const pony = {
  colour: 'pink',
  species: 'unicorn',
}

Object.freeze(pony)
Object.assign(pony, { cutieMark: 'star' }) //Throws error

Object.fromEntries

This method does the opposite of Object.entries. It takes an array of [ key, value ] pairs and turns them into an object.

Syntax

Object.fromEntries(array)

Object.is

This one compares two values and determines if they are the same value.

This is different from the equality operator (==) in that it doesn't do any sort of type coercion.

It is also different from the identity operator (===) in that it makes a difference between -0 and +0 and it treats NaN as equal to NaN and to Number.NaN.

Syntax

Object.is(value1, value2)

Examples

console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true

console.log(Number.NaN === NaN) //false
console.log(Object.is(Number.NaN, NaN)) //true

console.log(NaN === +'potato') //false
console.log(Object.is(NaN, +'potato')) //true

console.log(+0 === -0) //true
console.log(Object.is(+0, -0)) //false

Two different objects will only be evaluated as true if they refer to the same object.

const ponyA = {
  colour: 'pink',
  species: 'unicorn',
}

const ponyB = ponyA

console.log(Object.is(ponyA, ponyB)) //true

const ponyC = {
  colour: 'pink',
  species: 'unicorn',
}

console.log(Object.is(ponyA, ponyC)) //false

//But we can still compare their properties' values:
console.log(Object.is(ponyA.colour, ponyC.colour)) //true

Promise flow: An in-depth look at then and catch

SavagePixie — Tue, 26 Nov 2019 13:54:42 +0000

Promises are one way in which you can handle asynchronous operations in JavaScript. Today we are going to look at how the promise methods then and catch behave and how the information flows from one another in a chain.

I think one of the strengths of promise syntax is that it is very intuitive. This is a slightly modified version of a function I wrote to retrieve, modify and re-store information using React Native's community Async Storage:

const findAndRemoveOutdated = (key) => AsyncStorage.getItem(key)
    .then(data => data != null ? JSON.parse(data).items : [])
    .then(items => items.filter(x => new Date(x.date) >= Date.now()))
    .then(items => ({ items }))
    .then(JSON.stringify)
    .then(items => AsyncStorage.setItem(key, items))

Even if you don't know how Async Storage works, it's reasonably easy to see how the data flows from one then to the next one. Here's what's happening:

AsyncStorage.getItem() is fetching the value associated to key, which is a stringified JSON. (The data stored has this shape: { items: [{ date, ... }, { ... }, ... ]})
If the query doesn't return null, we parse the JSON and return it as an array. Otherwise we return an empty array.
We filter the returned array and keep only the items whose date is greater than or equal to now.
We create an object and assign the filtered array to its items property.
We stringify the object.
We save the new object in place of the old one.

So it is pretty intuitive. It reads like a list of steps manage the data, which it's what it is really. But while a bunch of thens is relatively easy to follow, it might get a bit more complicated when catch is involved, especially if said catch isn't at the end of the chain.

An example of promise

For the rest of the article, we are going to work with an asynchronous function that simulates a call to an API. Said API fetches ninja students and sends their id, name and grade (we will set an object with a few students to use). If there are no students found, it sends null. Also, it's not a very reliable API, it fails around 15% of the time.

const dataToReturn = [{ //Our ninja students are stored here.
  id: 1,
  name: 'John Spencer',
  grade: 6,
},{
  id: 2,
  name: 'Tanaka Ike',
  grade: 9,
},{
  id: 3,
  name: 'Ha Jihye',
  grade: 10,
}]

const asyncFunction = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    const random = Math.random()
    return random > 0.4 //Simulates different possible responses
            ? resolve(dataToReturn) //Returns array
            : random > 0.15
            ? resolve(null) //Returns null
            : reject(new Error('Something went wrong')) //Throws error
  }, Math.random() * 600 + 400)
})

If you want to get a hang of what it does, just copy it and run it a few times. Most often it should return dataToReturn, some other times it should return null and on a few occasions it should throw an error. Ideally, the API's we work in real life should be less error prone, but this'll be useful for our analysis.

The basic stuff

Now we can simply chain then and catch to do something with the result.

asyncFunction()
    .then(console.log)
    .catch(console.warn)

Easy peasy. We retrieve data and log it into the console. If the promise rejects, we log the error as a warning instead. Because then can accept two parameters (onResolve and onReject), we could also write the following with the same result:

asyncFunction()
    .then(console.log, console.warn)

Promise state and `then`/`catch` statements

I wrote in a previous article that a promise will have one of three different states. It can be pending if it is still waiting to be resolved, it can be fulfilled if it has resolved correctly or it can be rejected if something has gone wrong.

When a promise is fulfilled, the program goes onto the next then and passes the returned value as an argument for onResolve. Then then calls its callback and returns a new promise that will also take one of the three possible states.

When a promise is rejected, on the other hand, it'll skip to the next catch or will be passed to the then with the onReject parameter and pass the returned value as the callback's argument. So all the operations defined between the rejected promise and the next catch¹ will be skipped.

A closer look at `catch`

As mentioned above, catch catches any error that may occur in the execution of the code above it. So it can control more than one statement. If we were to use our asyncFunction to execute the following, we could see three different things in our console.

asyncFunction()
    //We only want students whose grade is 7 or above
    .then(data => data.filter(x => x.grade >= 7))
    .then(console.log)
    .catch(console.warn)

If everything goes all right, we will see the following array:

{
  id: 2,
  name: 'Tanaka Ike',
  grade: 9,
},{
  id: 3,
  name: 'Ha Jihye',
  grade: 10,
}

If asyncFunction rejects and throws an error, we'll see Error: "Something went wrong", which is the error we defined in the function's body.
If asyncFunction returns null, the promise will be fulfilled, but the next then cannot iterate over it, so it will reject and throw an error. This error will be caught by our catch and we'll see a warning saying TypeError: "data is null".

But there's more to it. Once it has dealt with the rejection, catch returns a new promise with the state of fulfilled. So if we were to write another then statement after the catch, the then statement would execute after the catch. So, if we were to change our code to the following:

asyncFunction()
    //We want to deal with the error first
    .catch(console.warn)
    //We still only want students whose grade is 7 or above
    .then(data => data.filter(x => x.grade >= 7))
    .then(console.log)

Then we could still see three different things in our console, but two would be slightly different:

If asyncFunction returns null, we will still see the message TypeError: "data is null", but this time it will be logged as an error instead of a warning, because it fired after the catch statement and there was nothing else to control it.
If asyncFunction returns an error, catch will still handle it and log it as a warning, but right below it we'll see an error: TypeError: "data is undefined". This happens because after it deals with the error, catch returns undefined (because we haven't told it to return anything else) as the value of a fulfilled promise.

Since the previous promise is fulfilled, then tries to execute its onResolve callback using the data returned. Since this data is undefined, it cannot iterate over it with filter and throws a new error, which isn't handled anywhere.

Let's now try to make our catch return something. If asyncFunction fails, we'll use an empty array instead.

asyncFunction()
    .catch(error => {
      console.warn(error)
      return []
    })
    .then(data => data.filter(x => x.grade >= 7))
    .then(console.log)

Now, if the call to asyncFunction rejects, we will still see the warning in our console, but it'll be followed by an empty array instead of a type error. The empty array that it returns becomes the data that the following then filters. Since it is an array, the filter method works and returns something.

We still have the possible error if asyncFunction returns null, though. So let's deal with it:

asyncFunction()
    .catch(error => {
      console.warn(error)
      return []
    })
    .then(data => data.filter(x => x.grade >= 7))
    .catch(error => {
      console.warn(error)
      return []
    })
    .then(console.log)

We've just copied the same catch statement and pasted it after the filtering then. Now, if an error occurs on either promise, we will see it logged as a warning (either as a type error or as our custom error) and an empty array logged under it. That is because our catch statements have dealt with all errors and returned fulfilled promises, so the then chain continues until it's time to log it in the console.

In fact, while we're at it, we might realise that the first catch is superfluous. It's doing the exact same thing as the second one and the result of filtering an empty array is always an empty array, so it doesn't really matter if the empty array returned by it gets filtered or not. So we can just dispose of it.

asyncFunction()
    .then(data => data.filter(x => x.grade >= 7))
    .catch(error => {
      console.warn(error)
      return []
    })
    .then(console.log)

If we wanted, instead we could do some different error handling. We could feed it fake data (not advisable in real production), try fetching data from another API, or whatever our system requires.

Conclusion

Whenever a promise is resolved, the runtime will execute the following then and catch statements depending on the promise's state.

A fulfilled promise will trigger the next then(onResolve). This then will return a new promise that will either be fulfilled or rejected.
A rejected promise will jump straight to the next catch or then(..., onReject) statement. In turn, it will return a new promise. Unless the code in catch causes it to reject, the newly returned promise will allow any then statements below it to be executed normally.

1: From now on, I will only refer to catch as a method to handle errors, because it is more common. Know that anything that I say about catch also works for then when an onReject callback is passed to it.

DEV Community: SavagePixie

Best practices to authenticate with Passport.js

Mutability and reassignability in JavaScript

Mutability depends on type

Primitive types

Objects (and Arrays)

So what's the deal with let and const?

What is this reassignability?

const, let and objects

Summary

Asteroid App: Project Submission

What I built

Category Submission: Interesting Integrations

Demo

Link to Code

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Additional Resources/Info

Asteroid App: Phase Three

Today's Work

Next Steps

Asteroid App: Phase Two

Done So Far

Next Steps

Asteroid App: Phase One

What I have done so far

Next Steps

What's the closest asteroid to Earth?

Recursive approach to map and reduce: A thought experiment

Map

Reduce

Final thoughts: Was it worth it?

Good resources to learn Kotlin for Android?

What language are you planning to learn next?

Cool Object methods in JavaScript

Object.assign

Syntax

Examples

Object.entries

Syntax

Example

Object.freeze

Syntax

Example

Object.fromEntries

Syntax

Object.is

Syntax

Examples

Promise flow: An in-depth look at then and catch

An example of promise

The basic stuff

Promise state and then/catch statements

A closer look at catch

Conclusion

So what's the deal with `let` and `const`?

`const`, `let` and objects

Promise state and `then`/`catch` statements

A closer look at `catch`