Let's Talk about 

Javascript

Johan Esteban Higuita

Software Developer at Talent.com

Bioengineer - Universidad de Antioquia

Session 3

Let's Talk about Javascript

Let's Talk about Javascript

Previous session...

  • Good coding practices.
  • Pollution of global scope.
  • It's a good practice to always use const instead of let if you are sure that the applied value will not change in future.
  • You shouldn't use var anymore

var - let - const

Let's Talk about Javascript

Let's Talk about Javascript

Primitive vs Reference values

Two categories of Types/Values in javascript

Primitive Values

Reference Values

  • Strings
  • Numbers
  • Booleans
  • null
  • undefined
  • Symbol

All other objects

Variable stores value itself

Variable stores a pointer (address) to location in memory

Copying a variable: copies the value

Copying a variable: copies the pointer/reference

Objects

Let's Talk about Javascript

Let's Talk about Javascript

Primitive vs Reference values

let company1 = "neuvoo";
let company2 = company1;

company2 = "talent.com"

console.log(company1) // "neuvoo"
console.log(company2) // "talent.com"
const fruits1 = ["apple", "orange"]
const fruits2 = fruits1;

fruits2.push("banana");

console.log(fruits1); // ["apple", "orange", "banana"]
console.log(fruits2); // ["apple", "orange", "banana"]

Primitive Values

Reference Values

"neuvoo"

talent.com

"neuvoo"

company1

company2

...

["apple", "orange"]

0x6F10A

...

["apple", "orange", "banana"]

fruits1 ---> 0x6F10A

fruits2 ---> 0x6F10A

Memory

Let's Talk about Javascript

Let's Talk about Javascript

Primitive vs Reference values

Code...

Let's Talk about Javascript

Let's Talk about Javascript

Primitive vs Reference values

This is the default behavior, Why?

  • Create and edit Reference values are more expensive.
  • not much memory is consumed working with primitive.
  • Avoid unnecessary duplication of data.

  • Avoid cluttering your memory 

  • Be more efficient

  • Provide better performance

Let's Talk about Javascript

Let's Talk about Javascript

Cloning Arrays

const clone = original.slice();
const original = ["Dog", "Cat", "Lion", "Snake"];
const clone = [...original];
const clone = Array.from(original);

1. Slice method (old way)

2. Spread Operator (ES6 way)

3 .Array.from

it's a Shallow Copy!

Let's Talk about Javascript

Array manipulation and Performance 

push() Add more elements to the end

pop() Removes the last element

shift() Removes the first element

unshift() Adds elements to the beginning 

splice() changes (removing or replacing) existing elements and/or adding new elements

Let's Talk about Javascript

Array manipulation and Performance 

code...

Let's Talk about Javascript

Object literal

You define (and create) a JavaScript object with an object literal:

const person = {
  firstName: "Juan",
  lastName: "Perez",
  age: 25,
  profession: "engineer"
};

Accessing Object Properties

const firstName = person["firstName"]
const firstName person.firstName;

Adding properties

person.weight = "137 pounds"

it's non-iterable!

Let's Talk about Javascript

Cloning Object literal

const clone = {...original};
const clone = Object.assign({}, original);

Spread Operator 

Object.assign()

it's a Shallow Copy!

If you want a deep Copy:

const clone = JSON.parse(JSON.stringify(original));
  • JSON parsing

🤮

  • Using a recursive function
  •  Using cloneDeep() of the lodash library

Code

Let's Talk about Javascript

Iterables

Technically, are Objects that implement the "iterable” protocol and have an @@iterator method

To us humans, Objects where you can use the for-of loop.

🤯

🤓

Not every iterable is an array!

  • NodeList
  • HTMLCollection
  • String
  • Map
  • Set

Let's Talk about Javascript

Array-like Objects

Objects that have a length property and use indexes to access items, but none of the array methods

Not every array-like object is an array!

  • NodeList
  • HTMLCollection
  • String

Array-like Objects can be converted to arrays using Array.from()

const company 		= "talent"; //Array-like
const companyArray 	= Array.from(company); //Array

Let's Talk about Javascript

for vs for-of vs for-in vs foreach

for in

for

for of

foreach

Execute code a certain amount of time (with a counter variable)

Execute for every element in an iterable

Execute for every key in an object

Executes a provided function once for each array element

for (let i = 0; i < animals.length; i++) {
    console.log(animals[i]);
}
for (const key in animals) {
    console.log(animals[key]);
}
for (const value of animals) {
    console.log(value);
}
animals.forEach(function(value){
    console.log(value)
});
const animals = ["dog", "cat", "lion", "snake"]

Let's Talk about Javascript

for vs for-of vs for-in vs foreach

for in

for

for of

foreach

Have access to the index

Customize steps and direction of iteration

Verbose

Have access to the index (key)

Works on literal objects (no iterables)

Cannot access to the index

only available for iterables

Cannot use break and continue statements

Have access to the index (key)

Verbose

concise

Code!

Let's Talk about Javascript

More topics...

  • Main JavaScript features
  • Concurrency and Paralellism
  • Asynchronism and Non-Blocking
  • async vs defer
  • ES6 Introduction
  • Scope
  • var let const
  • Hoisting
  • Shadowing
  • Strict Mode
  • Immutability
  • map, reduce, filter,  find
  • this
  • Prototypes vs Classes (ES6)
  • Primitive Referenced values
  • Web workers
  • Iterators
  • Memory managment
  • Functions
  • Promises & Callbacks
  • IA APIs
  • Node
  • Closures
  • Looping
  • Maps & Sets
  • for of / for in / for / foreach
  • arrow functions (ES6)
  • bind vs call vs apply

Thank you!

Made with Slides.com