Beginner's Guide To Javascript Part 1
Published: 2021-05-13 09:32:48

# The Beginner’s Guide To JavaScript 




Part 1



* * * * *



### The Beginner’s Guide To JavaScript 



#### Part 1 



![](https://cdn-images-1.medium.com/max/1200/1*Cg0j-L4ZHN7_5g2In-K-Ew.png)



### How to learn effectively 



**Learning**: The acquisition of skills and the ability to apply them in

the future.



**What makes an Effective learner?**



-   They are active listeners.

-   They are engaged with the material.

-   They are receptive of feedback.

-   They are open to difficulty.



**Why do active learning techniques feel difficult?**



-   It feels difficult because you are constantly receiving feedback,

    and so you are constantly adapting and perfecting the material.



**Desirable Difficulty**



-   The skills we wish to obtain is often a difficult one.

-   We want challenging but possible lessons based on current level of

    skill.



**Effective learners space their practice**



-   Consistent effort \> cramming =\> for **durable knowledge**



* * * * *



#### Here’s a REPL to practice with: 

<iframe frameborder="0" width="100%" height="500px" src="https://replit.com/@bgoonz/lambda-prep-1?lite=true"></iframe>





* * * * *




<iframe frameborder="0" width="100%" height="500px" src="https://lambda-prep.netlify.app/ "https://lambda-prep.netlify.app/"></iframe>



* * * * *



### Hello World 



-   **console.log** : command used to print something onto the screen.

-   **syntax** : the exact arrangement of the symbols, characters, and

    keywords in our code.

-   **//** : notation for creating a code comment in JS.

-   **code comment** : useful for annotating pieces of code to explain

    how something works, ignored by computer.



> ***“Simplicity is prerequisite for reliability.” — Edsger W.Dijkstra***



* * * * *



### The Number Data Type 



The **number** data type in JS is used to represent any numerical

values, including integers and decimal numbers.



**Basic Arithmetic Operators**



Operators are the symbols that perform particular operations.



-   **+** (addition)

-   **-** (subtraction)

-   **asterisk** (multiplication)

-   **/** (division)

-   **%** (modulo)



JS evaluates more complex expressions using the general math order of

operations aka PEMDAS.



-   **PEMDAS** : Parentheses, Exponents, Multiplication, Division,

    Modulo, Addition, Subtraction.

-   *To force a specific order of operation, use the group operator ( )

    around a part of the expression.*



**Modulo** : Very useful operation to check divisibility of numbers,

check for even & odd, whether a number is prime, and much more!

*(Discrete Math concept, circular problems can be solved with modulo)*



-   Whenever you have a smaller number % a larger number, the answer

    will just be the initial small number.

-   `console.log(7 % 10); // => 7;`



* * * * *



### The String Data Type 



The **string** data type is a primitive data type that used to represent

textual data.



-   can be wrapped by either **single** or **double** quotation marks,

    *best to choose one and stick with it for consistency*.

-   If your string contains quotation marks inside, can layer single or

    double quotation marks to allow it to work.

-   `"That's a great string"; (valid)`

-   `'Shakespeare wrote, "To be or not to be"'; (valid)`

-   `'That's a bad string'; (invalid)`

-   Alt. way to add other quotes within strings is to use template

    literals.

-   `` `This is a temp'l'ate literal ${function}` // use ${} to invoke functions within. ``

-   **.length** : property that can be appended to data to return the

    length.

-   empty strings have a length of zero.

-   **indices** : indexes of data that begin at 0, can call upon index

    by using the bracket notation [ ].



`console.log("bootcamp"[0]); // => "b"`



`console.log("bootcamp"[10]); // => "undefined"`



`console.log("boots"[1 * 2]); // => "o"`



`console.log("boots"["boot".length - 1]); // => "t"`



-   we can pass expressions through the brackets as well since JS always

    evaluates expressions first.

-   The index of the last character of a string is always one less than

    it’s length.

-   **indexOf()** : method used to find the first index of a given

    character within a string.

-   `console.log("bagel".indexOf("b")); // => 0 console.log("bagel".indexOf("z")); // => -1`

-   if the character inside the indexOf() search does not exist in the

    string, the output will be -1.

-   the indexOf() search will return the first instanced index of the

    the char in the string.

-   **concatenate** : word to describe joining strings together into a

    single string.



* * * * *



### The Boolean Data Type

The **boolean** data type is the simplest data type since there are only

two values: **true** and **false**.



-   **Logical Operators** (B*oolean Operators*) are used to establish

    logic in our code.

-   **!** (not) : reverses a boolean value.

-   `console.log(!true); // => false console.log(!!false); // => false`

-   **&&** (and) **Truth Table**



![](https://cdn-images-1.medium.com/max/800/1*Aw4iCm7-FQ7znEcBVH3FTw.png)



-   **Logical Order of Operations** : JS will evaluate !, then &&, then

    ||.

-   **De Morgan’s Law** : Common mistake in boolean logic is incorrectly

    distributing ! across parentheses.

-   `!(A || B) === !A && !B; !(A && B) === !A || !B;`

-   In summary, to correctly distribute ! across parentheses we must

    also flip the operation within.

-   **Short-Circuit Evaluation** : Because JS evalutes from left to

    right, expressions can “short-circuit”. For example if we have true

    on the left of an || logical comparison, it will stop evaluating and

    yield true instead of wasting resources on processing the rest of

    the statement.

-   `console.log(true || !false); // => stops after it sees "true ||"`



* * * * *



### Comparison Operators


All comparison operators will result in a boolean output.



**The relative comparators**



-   **\>** (greater than)

-   **\<** (less than)

-   **\>=** (greater than or equal to)

-   **\<=** (less than or equal to)

-   **===** (equal to)

-   **!==** (not equal to)



> *Fun Fact: “a” \< “b” is considered valid JS Code because string

> comparisons are compared lexicographically (meaning dictionary order),

> so “a” is less than “b” because it appears earlier!*



> *If there is ever a standstill comparison of two string

> lexicographically (i.e. app vs apple) the comparison will deem the

> shorter string lesser.*



**Difference between == and ===**



-   **===** : Strict Equality, will only return true if the two

    comparisons are entirely the same.

-   **==** : Loose Equality, will return true even if the values are of

    a different type, due to coercion. (Avoid using this)



* * * * *



### Variables 

Variables are used to store information to be referenced and manipulated

in a program.



-   We initialize a variable by using the **let** keyword and a **=**

    single equals sign (assignment operator).

-   `let bootcamp = "Lambda"; console.log(bootcamp); // "Lambda"`

-   JS variable names can contain any alphanumeric characters,

    underscores, or dollar signs (cannot being with a number).

-   If you do not declare a value for a variable, undefined is

    automatically set.

-   `let bootcamp; console.log(bootcamp); // undefined`

-   We can change the value of a previously declared variable (let, not

    const) by re-assigning it another value.

-   **let** is the updated version of **var**; there are some

    differences in terms of hoisting and global/block scope — will be

    covered later in the course (common interview question!)



**Assignment Shorthand**



``` js

let num = 0;num += 10; // same as num = num + 10num -= 2; // same as num = num - 2num /= 4; // same as num = num / 4num *= 7; // same as num = num * 7

```



-   In general, any nonsensical arithmetic will result in **NaN** ;

    usually operations that include undefined.

-   **declaration** : process of simply introducing a variable name.

-   **initialization** : process of both declaring and assigning a

    variable on the same line.



* * * * *



### Functions

A function is a procedure of code that will run when called. Functions

are used so that we do not have to rewrite code to do the same thing

over and over. (Think of them as ‘subprograms’)



-   **Function Declaration** : Process when we first initially write our

    function.

-   Includes three things:

-   Name of the function.

-   A list of *parameters* ()

-   The code to execute {}

-   **Function Calls** : We can call upon our function whenever and

    wherever\* we want. (\*wherever is only after the initial

    declaration)

-   JS evaluates code top down, left to right.

-   When we execute a declared function later on in our program we refer

    to this as **invoking** our function.

-   Every function in JS returns undefined unless otherwise specified.

-   When we hit a **return** statement in a function we immediately exit

    the function and return to where we called the function.

-   When naming functions in JS always use camelCase and name it

    something appropriate. \> Greate code reads like English and almost

    explains itself. Think: Elegant, readable, and maintainable!



* * * * *



### Parameters and Arguments 


-   **Parameters** : Comma seperated variables specified as part of a

    function’s declaration.

-   **Arguments** : Values passed to the function when it is invoked.

-   *If the number of arguments passed during a function invocation is

    different than the number of parameters listed, it will still work.*

-   However, is there are not enough arguments provided for parameters

    our function will likely yield **Nan**.



#### Further resources: {#6cbb .graf .graf--h4 .graf-after--li name="6cbb"}



[**A list of all of my articles to link to future posts**\

*You should probably skip this one… seriously it’s just for internal

use!*bryanguner.medium.com](https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b "https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b")[](https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b)



[**bgoonz’s gists**](https://gist.github.com/bgoonz)



[**bgoonz — GitHub**](https://github.com/bgoonz "https://github.com/bgoonz")[](https://github.com/bgoonz)



[**Web-Dev-Resource-Hub**](https://web-dev-resource-hub.netlify.app/ "https://web-dev-resource-hub.netlify.app/")[](https://web-dev-resource-hub.netlify.app/)

"https://github.com/bgoonz")[](https://github.com/bgoonz)

[**Web-Dev-Resource-Hub**\
*Edit
description*web-dev-resource-hub.netlify.app](https://web-dev-resource-hub.netlify.app/ "https://web-dev-resource-hub.netlify.app/")[](https://web-dev-resource-hub.netlify.app/)