Adding Tools To Your Technical Toolbox: JavaScript Edition I

JavaScript is a powerful, object-oriented language that empowers us to do a lot of amazing things — from building dynamic, ultra responsive websites to handling API calls and more. However, in accordance with a colloquial phrase, in order to run we must first walk; in this article, I detail base concepts that every front end developer should know.

Source: https://lh3.googleusercontent.com/proxy/PvuOOzJDIHY9S97rV5ez4EXQPF2K4LxMRC1RNsxP8NNn-NVBaFqrVGY6MibSYCGcpxp6eYR2sKbSFuybNwkBUA1tE_f9uS2E8MwP

JavaScript is:

• High Level as it allows us to abstract concepts to decrease our mental load and write code efficiently without having to worry about what’s going on under the hood; it manages memory automatically using a garbage collector; and it provides many constructs to create reusable variables/objects.
• Dynamic as it executes at runtime giving us robust features like dynamic typing, late binding, reflection, functional programming, object runtime alteration, closures, etc.
• Interpreted as browsers are able to compile JavaScript before executing it thus increasing performance.
• Multi-Paradigm as the language does not enforce any particular programming paradigm (e.g., you can use class based and functional programming as of ES6).

Now For Your Tools:

1. White Space is not meaningful in JavaScript. The amount of spaces and line breaks should be consistent throughout your application. A linter or styling tool, such as Prettier, can help with this.
2. JavaScript is Case Sensitive; variables should be declared using camelCase.
3. Literals are values written in source code. For example:

16
"I am a string!"
true
["Weights", "Cardio"]
{name: "Sidney", breed: "German Shepherd", color: "Black & Tan"}

4. Identifiers are a sequence of characters that, as the name suggests, can be used to identify a variable, function, or object. It can start with a letter, dollar sign (commonly used to reference DOM elements), or underscore and can contain integers. Note: some names are reserved as keywords for JavaScript to use internally and therefore cannot be used as identifiers.

5. Comments are arguably one of the most important parts of an application; allowing us to annotate our thought process and give key insight for later use to not only ourselves, but other developers. Single-line comments are denoted using //, whereas multi-lined comments start with /* and end with */ with notes in-between.

6. Semicolons are used to mark the end of code lines. The use of semi-colons is good practice, but nowadays the JavaScript interpreter is smart enough to introduce semicolons for you.

7. Values are things such as peyton and 4, whereas string and integer are Types of those values. Types are then classified into Primitive and Object. Primitive data include integers, strings, booleans, symbols, null and undefined, while Object data have properties and methods.

8. When we need to reference a value, we assign it to a Variable. Variables must be declared before you can use them. There are two ways to declare variables — using const and let. const points to a constant reference to a value and must be initialized at the declaration (i.e., once assigned, you cannot change the value), whereas let is the exact opposite.

const m = 4
//
let m
m = 16
// for both const and let you can assign multiple values
const hello = 5, goodbye = 10
let hola = 15, adios = 20

It is recommended to only use let when you know you’ll need to reassign a value as this decreases potential sources for bugs via accidental reassignment.

Note: Variables are untyped meaning you can assign a variable a value with some type (e.g., a string) and later reassign another type (e.g., an integer) without issue.

9. An Expression is a unit of code that JavaScript can evaluate and return a value. Naturally, expression vary in complexity.

// primary
2
"Happy"
true
// arithmetic
i++
1 / 2
// string 
"I" + "love" + "to" + "code"
// logical (use comparison operators and resolve to a boolean value)
m && s
m || s

// more advanced expressions involve objects, functions, and arrays

10. Operators allow you to combine expressions to create complexity in code.

// Assignment Operator: used to assign a value
let ten = 10
// Addition Operator: used to perform addition as well as concatenate strings
const three = 1 + 2
const three = "thr" + "ee"
// Subtraction Operator: used to perform subtraction  
const six = 12 - 6
// Division Operator: used to perform division 
const five = 20 / 4
// Multiplication Operator: used to perform multiplication
const twelve = 6 * 2
// Remainder Operator: used to calculate the remainder
 
const zero = 20 % 5
// Exponentiation Operator: used to find the power of the 2nd operand
cont four = 2 ** 2

11. Comparison Operators are used to check if specific conditions are met and, as a result, always return a boolean value.

• Less Than: < means "less than"
• Less Than or Equal To:<=
• Greater Than:> means "greater than"
• Greater Than or Equal To:>=
• Equality: ===
• Inequality: !==

12. Conditionals use if / if...else statements that instruct the program to perform specific actions depending on the result of an expression evaluation.

if (true) {
  // do something
  console.log("Please hire me! :)")
}
//
if (true) {
  // do something
} else {
  // do something else
}

13. Arrays are collections of elements, as well as objects. Arrays can hold any value (including other arrays)! You can access any element in an array by referencing its index which starts at 0.

const us = ["NYC", "Savannah", "Boston"]
// You can find the number of elements in an array by calling .length
cities.length // 3
// You can add an element to the end of an array using .push
cities.push("LA")
// You can add an element to the beginning of an array using .unshift
cities.unshift("DC")
// You can remove an element from the end of an array using .pop
cities.pop()
// You can remove an element from the beginning of an array using .pop
cities.shift()
// You can combine two or more arrays using .concat or the spread operator
const europe = ["London", "Berlin", "Paris"]
const world = cities.concat(europe)
const world = [...us, ...europe]
world // ["NYC", "Savannah", "Boston", "London", "Berlin", "Paris"]
us // ["NYC", "Savannah", "Boston"]
europe // ["London", "Berlin", "Paris"]
// You can check if an array contains a specific element using .includes
cities.includes("Paris")
// true

14. Strings can be denoted using single or double quotes (as long as you’re consistent throughout your application). Backticks can be used to define multi-lined strings or to interpolate information within a string.

const long = `Wow! I just read the Great Gatsby for the 500th time. I absolutely love this book and want to watch the movie, but can't find it for free online.`
// defined variables can be interpolated
const variable = `Hello! My name is ${name}.`
// expressions can also be interpolated
const expression = `something ${foo() ? 'x' : 'y'}`

15. Functions are blocks of code that are self-contained. For example:

function hello() {
  // do something
}
// In order to execute, functions must be invoked like so: 
hello()

A function can have one or more argument(s). When we pass arguments, we define parameters that must be met in invocation. Any value can be passed as a parameter (including other functions).

function hair(color, length) {
  // do something
}
hair("brown", 27)
hair("black")
// In the second invocation, we did not pass in a length argument. Therefore, in that instance, length will be undefined. To avoid this, you can add default parameters if an argument is missing.
function hair(color = "blonde", length = 22) {
  // do something
}

By default, a function returns undefined, unless you add the return keyword with a value:

function hello() {
  // do something
  return 'Bonjour!'
}

We can assign this return value to a variable when we invoke the function:

function hello() {
  // do something
  return 'Bonjour!'
}
let greeting = hello()
greeting // Bonjour!

To return multiple values, you can return an object or array:

function madeline() {
  return ["Madeline Rose Stalter", 25]
}
let [name, age] = madeline()

16. Arrow Functions are often favored over the aforementioned and must be assigned to a variable.

const getData = () => {
  // do something
}
getData()

Parameters are passed in the parentheses:

const getData = (name, height) => {
  console.log(name, height)
}

Arrow functions have implicit returns or values that are returned without having to use the return keyword. Aside from that, the two types function very similarly. The major difference will be discussed in Edition II.