JavaScript

Slack

javascriptavanzado.slack.com

JavaScript Syntax

First: The basics

Variable declaration

// ES5
var foo;
var bar;

// ES6
let foo;
const bar = 'bar';

Variable declaration

// ES5
var foo = 5;
var bar = true;
var zet = 'zet';
var list = [];
var obj = {};

Variable declaration

var foo = [1, 2, 3];

var foo = {
  property: false,
  otherProperty: 15
}

Variable declaration

var foo = [{
  name: 'test',
  email: 'test@email.com'
}, {
  name: 'test2',
  email: 'test@email.com'
}]

Variable declaration

var foo = {
  name: 'test',
  email: 'test@email.com',
  list: [1, 3, 4, 5],
  otherProperty: {
    hello: stuff
  }
}

Variable assignation

var salvame;
salvame = null;

var telecinco = null;
telecinco = 0;

Variable assignation

var salvame;

function doNotWatchTv() {
   salvame = null;
}

doNotWatchTv();

Variable assignation

var salvame;
telecinco = 0;

function doNotWatchTv() {
   salvame = null;
}

var telecinco;

doNotWatchTv();

Where do i declare my variables?

Hoisting

It's always better to declare your variables at the top because JavaScript moves variable declarations at the top in a process called hoisting

JSBin

Operators

Unary operators

A unary operator is one that takes a single operand/argument and performs an operation.

OperatorExplanation

Unary plus (+)	Tries to convert the operand into a number
Unary negation (-)	Tries to convert the operand into a number and negates after
Logical Not (!)	Converts to boolean value then negates it
Increment (++)	Adds one to its operand
Decrement (--)	Decrements by one from its operand
Bitwise not (~)	Inverts all the bits in the operand and returns a number
typeof	Returns a string which is the type of the operand
delete	Deletes specific index of an array or specific property of an object
void	Discards a return value of an expression.

+ operator

Tries to convert the operand to a number

+3                                   // returns 3
+'-3'                                // returns -3
+'3.14'                              // returns 3.14
+'3'                                 // returns 3
+'0xFF'                              // returns 255
+true                                // returns 1
+'123e-5'                            // returns 0.00123
+false                               // returns 0
+null                                // returns 0
+'Infinity'                          // returns Infinity
+'infinity'                          // returns NaN
+function(val){  return val }        // returns NaN

+ operator

If a object has a valueOf method, that value will be returned

+{
  valueOf: function(){
    return '0xFF'
  }
}

//255

- operator

Tries to convert the operand to a number, but performs a negation

    -3                               // returns -3
    -'-3'                            // returns 3
    -'3.14'                          // returns -3.14
    -'3'                             // returns -3
    -'0xFF'                          // returns -255
    -true                            // returns -1
    -'123e-5'                        // returns -0.00123
    -false                           // returns -0
    -null                            // returns -0
    -'Infinity'                      // returns -Infinity
    -'infinity'                      // returns NaN
    -function(val){  return val }    // returns NaN
  -{                                 
    valueOf: function(){
      return '0xFF'
    }
  }                                //returns -255

! operator

Converts the value to it's boolean representantion before negating

!false        // returns true
!NaN          // returns true
!0            // returns true
!null         // returns true
!undefined    // returns true
!""           // returns true
!true         // returns false
!-3           // returns false
!"-3"         // returns false
!42           // returns false
!"42"         // returns false
!"foo"        // returns false
!"true"       // returns false
!"false"      // returns false
!{}           // returns false
![]           // returns false
!function(){} // returns false

!! operator

Converts the value to it's boolean representation

!!false        // returns false
!!true         // returns true
!!1            // returns true
!!0            // returns false

++ operator

Increments by one it's value

Can be used in 2 ways.
Before:

var x = 5;
var y = ++x;

// x === 6 
// y === 6

var x = 5;
var y = x++;

// x === 6
// y === 5

After
It returns the value before modifying

-- operator

Decrements by one it's value

Can be used in 2 ways.
Before:

var x = 5;
var y = --x;

// x === 4 
// y === 4

After
It returns the value before modifying

var x = 5;
var y = x--;

// x === 4
// y === 5

typeof operator

returns a string indicating the type of the value

typeof 2                                       // returns 'number'
typeof true                                    // returns 'boolean'
typeof null                                    // returns 'object'
typeof Infinity                                // returns 'number'
typeof '2'                                     // returns 'string'
typeof '-3'                                    // returns 'string'
typeof 'infinity'                              // returns 'string'
typeof Date()                                  // returns 'string'
typeof [1,2,3]                                 // returns 'object'
typeof {hi: 'world'}                           // returns 'object'
typeof function(val){  return val }            // returns 'function'
typeof undefined                               // returns 'undefined'
typeof hi                                      // returns 'undefined'
typeof NaN                                     // returns 'number'
typeof new Date()                              // returns 'object'

delete operator

deletes a object propery and returns true if it was succesful

// Deleting a property with the dot notation
var pub = { bar: "42" };
delete pub.bar;              // returns true
console.log(pub);            // returns {}

// Deleting a property that does not exist
var lunch = { fries: 1 };
delete lunch.beans;          // returns true
console.log(lunch);          // returns { fries: 1 }

// Deleting a non-configurable property of a predefined object
delete Math.PI;              // returns false  
console.log(Math.PI);        // returns 3.141592653589793

delete operator

deletes a object propery and returns true if it was succesful

// Deleting a property with the dot notation
var pub = { bar: "42" };
delete pub.bar;              // returns true
console.log(pub);            // returns {}

// Deleting a property that does not exist
var lunch = { fries: 1 };
delete lunch.beans;          // returns true
console.log(lunch);          // returns { fries: 1 }

// Deleting a non-configurable property of a predefined object
delete Math.PI;              // returns false  
console.log(Math.PI);        // returns 3.141592653589793

non configurable properties

delete has no effect on non configurable properties

var Person = {};
Object.defineProperty(Person, 'name',
 {  
    value: 'Scot',
    configurable: false
})

// Defines an object property and sets it to non-configurable
console.log(Person.value);                 // returns 'Scot'
delete Person.value                        // returns false
console.log(Person.value);                 // returns 'Scot'

Define property

== Comparission / unestrict equality

1    ==  1        // true
"1"  ==  1        // true
1    == '1'       // true
0    == false     // true

0    == null      // false
0    == undefined // false
null == undefined // true

Tries to convert it's type

Conversion flow

== Comparission

[] == [] // false
{} == {} // false
// Not same reference of memory

Comparission Common pitfails

// Is true
console.log([10] ==  10)
// Is true
console.log('10' ==  10)
// Is true
console.log([]  ==  0)
// Is true
console.log(''  ==  false)

JSBin

=== Comparission / strict equality

1 === 1  // true
1 === '1' // false
false === 0 // false

Enforces strict type equality

!= unestrict inequality / !== strict inequality

1 !=   2     // true
1 !=  '1'    // false
1 !=  "1"    // false
1 !=  true   // false
0 !=  false  // false

1 !==   2     // true
1 !==  '1'    // true
1 !==  "1"    // true
1 !==  true   // true
0 !==  false  // true

>, <, >=, <= relational operators

0 >= null // true
0 < null // false
1 < '3' // true 
'z' > 'a' // true

JavaScript coerces into its primitive number type

Logical operators

Logical operators are used to determine the logic between variables or values.

&&

||

!

Logical operators

Logical operators are used to determine the logic between variables or values.

(x < 10 && y > 1) // true
1 && "false"  // true


1 || false // true
0 || "true" // true

truthy falsey

Truthy: Something which evaluates to TRUE.
Falsey: Something which evaluates to FALSE.

undefined, null, NaN, 0, "" (empty string), and false

logical operator assignation

&& gives you the last value
|| gives you first value

3 && 7 // 7
3 || 7 // 3

false || 7 // 7

Arithmetic Operators

// Sum tries to perform string or number additions
var a = 5
a = a + 5
// Same as
a += 5

// Multiply only has number coercion
var a = 5;
a = a * 10
// Same as
a *= 10

O perators

Arithmetic Operators

// Division operator
var a = 5
a = a / 5
// Same as
a /= 5

// Remaining operator
var a = 6;
a = a % 5
// Same as
a %= 5

O perators

Arithmetic Operators

// exponentation operator
var a = 5
a = a ** 3
// 125

O perators

Arithmetic Operators Common Pitfails

// Number + Number -> addition
console.log(1 + 2);

// Boolean + Number -> addition
console.log(true + 1)

// Boolean + Boolean -> addition
console.log(false + false);

// Number + String -> concatenation
console.log(5 + 'foo')

// String + Boolean -> concatenation
console.log('foo' + false)

// String + String -> concatenation
console.log('foo' + 'bar')

JSBin

Arithmetic Operators Common Pitfails


// String - Number -> NaN
console.log('foo' - 3)

// The addition operator performs string or number operators.
// JavaScript will translate [] into it's string equivalent ''
console.log([] + []) 
// empty string
// [].toString() + [].toString()

// The operator - is not defined for strings
// then JavaScript will transform the value to number
console.log([] - []) 
// Number([]) - Number([])
// NaN

JSBin

WAT

https://www.destroyallsoftware.com/talks/wat

Ternary operator

var result = condition ? result1 : result2

var result = 0 == false ? 15 :  20

var otherResult = [] == [] ? 15 : 20

O perators