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.

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.
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 valuesconst 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.

// primary2
"Happy"
true
// arithmetici++
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 valuelet ten = 10// Addition Operator: used to perform addition as well as concatenate stringsconst 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 multiplicationconst twelve = 6 * 2// Remainder Operator: used to calculate the remainder

const zero = 20 % 5
// Exponentiation Operator: used to find the power of the 2nd operandcont 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"

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 .lengthcities.length // 3// You can add an element to the end of an array using .pushcities.push("LA")// You can add an element to the beginning of an array using .unshiftcities.unshift("DC")// You can remove an element from the end of an array using .popcities.pop()// You can remove an element from the beginning of an array using .popcities.shift()// You can combine two or more arrays using .concat or the spread operatorconst 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 .includescities.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 interpolatedconst variable = `Hello! My name is ${name}.`// expressions can also be interpolatedconst 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.

Graduate of Flatiron School’s Software Engineering Bootcamp as of 12/4/2020. Actively job searching in New York City.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store