DEV Community: Daniel John Keefer

Some of my favourite array methods

Daniel John Keefer — Thu, 08 Oct 2020 10:51:02 +0000

There are many array methods available in JavaScript to manipulate arrays. These methods are called by using a dot then the method name with any arguments that take. some of my favorites are .concat , .flat , .join , .map and .filter.

Array.join()\
The dot join method takes every element of the an array and returns it as a string connected by the character specified as the argument. This means if you have an array of words you could join them into a sentence.

const words = ["this","could","be","a","sentence"]
const sentence = words.join(' ')
//sentence outputs: "this could be a sentence"

Array.concat()\
The dot concat method is very similar to dot join. Instead of joining the elements of an array into a single whole by transforming it into a string it takes the elements from two arrays and joins them into one big array.

const frontNine = [1,2,3,4,5,6,7,8,9]
const backNine = [10,11,12,13,14,15,16,17,18]
const aFullRound = frontNine.concat(backNine)
//sentence outputs: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]

Array.flat()\
Again in the theme of joining things together the dot flat method when called on a nested array will remove n levels of nestedness, n is an teger specified as the argument. This means if you have a an nested array that contains two arrays and you call .flat() on the nested array, the out put will be a single array with all the elements of the first array followed by the elements of the second array.

const twoKindsOfToast = [["toast","peanut butter"],["jam","toast"]]
const pbjToastie = twoKindsOfToast.flat()
// pbjToastie outputs: ["toast","peanut butter","jam","toast"]

const russianDolls = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
const unpackedDolls = russianDolls.flat(4)
//unpackedDolls outputs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.filter()\
One of the 'Higher Order Array Functions', the dot filter method takes a function that takes an argument and compares it in a boolean expression. .filter() then uses that function and executes it once of each element in the array and returns a new array with all the elements that evaluated to true through the function.

const stringsAndNumbers = [1,"two",3,"four",5,"six"]
const onlyStrings = stringsAndNumbers.filter(el => typeof el === 'string')
const notStrings = stringsAndNumbers.filter(el => typeof el !== 'string')
// onlyStrings outputs: ["two","four","six"]
// notStrings outputs: [1,3,5]

Array.map()\
Another 'Higher Order Array Function', the dot map method takes a function that takes an argument and performs some action on the argument. .map() then uses that function and executes it once of each element in the array and returns a new array with all the elements modified by the action. If the elements are numbers, the action could be some sort of mathematical operation. Or if the elements are arrays/strings/objects, the action could be an array/string/object method.

const odds = [1,3,5,7]
const evens = odds.map(el => el + 1)
// evens outputs: [2,4,6,8]

const lotsOfWords = [["to","be"],["or","not"],["to","be"],["that","is"],["the","question"]]
const brokenShakespeare = lotsOfWords.map(pair => pair.join(' '))
//brokenShakespeare: [["to be"],["or not"],["to be"],["that is"],["the question"]]

const shakespeare = brokenShakespeare.flat().join(' ')
//shakespeare: "to be or not to be that is the question"

Data types in Javascript

Daniel John Keefer — Wed, 16 Sep 2020 07:29:31 +0000

JavaScript has nine fundamental data types, these data types can be categorised as six primitives, two structural and a special primitive-like value called null.

Null

null is a special datatype that for all intents and purposes function like a primitive data type. it is used to represent a void, a empty value. It is a literal representation of nothing within JavaScript. It is special because it is actually an object that it the base for all other objects that are made in JavaScript but it useful to think of it as an absence of data.

Primitives

Primitive data comes in a couple of different flavours and are the most basic building blocks of code in JavaScript. These are the types of data that aren't objects and have no methods. Another key feature is that all primitives are immutable. This means they cannot be changed. It can be tricky to understand this at first because it is easy to think of a variable that is assigned a primitive to be the same as the primitive.

Look at this snippet from MDN that shows a variable with a string assigned doesn't alter when you use string methods on it, but can be reassigned with a new string that is the output of that method. (it also shows that an **Array* that is a structural datatype is mutable. But I'll get to that in a second.*)

// This snippet is from MDN glossary entry for Primitives

// Using a string method doesn't mutate the string
var bar = "baz";
console.log(bar);               // baz
bar.toUpperCase();
console.log(bar);               // baz

// Using an array method mutates the array
var foo = [];
console.log(foo);               // []
foo.push("plugh");
console.log(foo);               // ["plugh"]

// Assignment gives the primitive a new (not a mutated) value
bar = bar.toUpperCase();       // BAZ

Primitive data types include:

Numbers

These are floats and integers between negative and positive (2**53)-1 (+/-9007199254740991) and the special values of NAN, which stands for 'Not A Number', it means somewhere in your arithmetic something other than a number was introduced. And Infinity, which represents a value greater than any number (like the result of something dived by zero, for example.).

BigInt

BigInt is very similar to numbers except instead of having a 64bit precision they are represented with arbitrary-precision, which means the digits in a BigInt are precise to the amount of available memory the local machine can allocate to represent the number. These are used to represent exceedingly large magnitude number in both the positive and negative direction.

Boolean

Booleans are the logical values of true and false used to implement flow control with things like if() statements and loops.

Strings

Strings are a sequence of text characters, not much more to say about that.

Symbols

Symbols are a new primitive introduced with ECMAScript 2015, if you are familiar with Ruby Symbols these are different so don't be fooled. They create an anonymous unique identifier that can optionally given a description.

Undefined

undefined is very similar to the null described earlier. The difference is that null represents an absence of data, where undefined indicated a variable that has been declared but has no data assigned to it.

Structural

Structural types include the Object and the Function

Functions

a function is a non-data structure that responds to typeof keyword. Functions are derived from objects but typically this not necessary to know.

Objects

Finally there are Objects, these are all the data structures that can be made with the new keyword. This list includes: Objects, Arrays, Sets and Maps to name a few, typically these are objects that a constructed by combining multiple primitive data types in some sort of list or some specific format like in a Date.

[Sources]---

Type Coercion in Javascript

Daniel John Keefer — Fri, 11 Sep 2020 09:33:35 +0000

Type coercion is Javascript is the automatic change that happens to a value based on the context of the code around it. For example if you were to declare some variables like:

let someNum = 4;
let stringNum = "7";
let aString = "sixteen";

and you wanted to perform some functions or manipulations with those variables, you could concatenate stringNum with aString that pretty straightforward.

stringNum + aString; // output: '7sixteen'

But what if we add stringNum with someNum ? One is a string the other is a integer! what will happen? Type Coercion, thats what happens. Javascript see a single character string that is also a digit and assumes it is far more likely that you want to sum the two numbers together. Similarly if we were to try and concatenate aString with someNum javascript sees a long string and assumes that rather than adding the sum of the ascii character codes to the number four you want make the number a string and concatenates it.

stringNum + someNum; // output: 11
aString + someNum; // output: 'sixteen4'

While this can cause some funky errors if you aren't careful it also allows for some pretty elegant code in the form of short circuit logic. The values null, undefined, false, '' and 0 are falsey in javascript and all other values are truthy. meaning that when javascript functions are expecting a boolean those variables a type coerced to either true or false based on their truthiness. Here are some examples:

("" || "some populated string."); // evals to true
(0 || null); //evals to false
(1 && undefined); //evals to false

We can use this truthy and falsey properties of the type coercion in javascript to our advantage to write some elegant code as well in what's called short circuit logic. For example, say we have a website that blogs on a topic. And that providing your email is optional during the sign up process. But to everyone that has given their email, we will send a newsletter. An example user might look like:

{
  "users": {
    "user_id_string_a": {
      "name": "Stephen Strange",
      "email": null
    },
    "user_id_string_b": {
      "name": "Tony Stark",
      "email": "tony@starkindustries.com"
    }
  }
}

We can see that ol' Steve has not provided his email but tony has. is there some way we can use type coercion to write a piece of code that sends the newsletter to the users with emails but skip the ones with no email? Well yeah, but you probably saw that coming. We could write something like:

function SendAllMail(users){
  for(user in users){
    user.email && sendNewsletter(user.email)
  }
}

// the function 'sendNewsletter' in 
// this example would just take in 
// an email address and then as an 
// output send a newsletter to that 
// address

So how does it work? when the function get to each user in turn with in the for loop it uses the the user.email property as the first half of an boolean comparison. In Dr. Strange's case the code collects the null value and then knowing it has to do a boolean comparison, type coerces it to false as null is a falsey value.

The code then 'short circuits' knowing that the first half of the and operand is false causes it to immediately evaluate to false skipping the code written in the second half.

Conversely on Tony's turn through the function, user.email is a populated string, which is truthy. When it gets type coerced, it becomes true which forces the code to look at the other half of the && comparison. this then executes the sendNewsletter(user.email) function, ensuring Mr. Stark remains abreast of all your latest news.

So that's it, thanks for the read and I hope you can use your new understanding to write more awesome code then you could have before. And if you know more than me and I've messed up in my explanation, please comment and help me write more awesome code then I could have before <3. --xxKeefer