New Year Resolution: deep dive in JavaScript

My New Year resolution is to become a master in JavaScript. This blog post will serve more as a reference to me where I can come back to and review things that I have written. Also the act of writing helps me fossilize in my brain these concepts.

I will start by reviewing the concepts I know about Objects, Arrays and Functions.

Update: Jan 20th Adding Nested data, Scope notions as well.

Arrays and objects are ways to organize data in Javascript(JS).

Objects

JS allows us to create objects in object literal notation, such as:

var Santa = {};

This Santa is a bit empty so let’s add some properties. Properties are the keys in a key-value data structure.
It looks like this:

 {username: "hack_thon", age: 23} //where 'username' and 'age' are the properties

To add properties and values to an object, it is as simple as this:
e.g

var Santa = {name: "Santonio Clause", favoriteFood: "Cookies"};
 

However, while coding you will rarely define values and properties of an object from the get go. You need other ways to add values to properties. In JS, you can use dot notation or bracket notation.

Dot notation
e.g

Santa.costumeColor = "red"; // {name: "Santonio Clause", favoriteFood: "Cookies", costumeColor: "red"}

Caveat: Note that what comes after the ‘.’ becomes the property of the object. Properties cannot be integer or another variable. This would throw an error:

Santa.4 = "four"; // Syntax error...
 

Bracket notation:

You can pass properties to JS objects within brackets. e.g:

Santa['occupation'] = "Children's Gift Manager";
// {name: "Santonio Clause", favoriteFood: "Cookies", costumeColor: "red", occupation: "Children's Gift Manager"}

With bracket notation you can pass characters that would not be possible in dot notation:

Santa[4] = "four"; // {..., '4' ="four"}

Caveat: With bracket notation, JS will understand the property if it is passed as a string.
Santa[occupation] for example would throw ‘Reference: occupation key in not defined’ error.

Round up:

Dot notation is faster to write and clearer to read.

Square bracket notation allows access to properties containing special characters and selection of properties using variables

Arrays

These are collections or dictionaries in other languages.

You can store elements of different data types in an array

array = [1, '2', {obj_name: 'I am a object'}];

You access the elements of an array with bracket notation only

array[0]; // 1
array.0; // Syntax error...

Functions

Functions are objects that accomplish something. It is like a blender that when you put into it some things(parameters) and press a button so it gives you something in the end.

function invocation is the parenthesis at the end of the JS function

console.log();

Function can return a piece of data or be a side-effect. The function console.log it is a side effect. When you append something to the DOM it is a side effect. When you return the result of a math calculation it returns a piece of data.

In a function you can get all its arguments by typing “arguments”

It will return the arguments as an object.

There is a way that you return them as an array.

It is done like so:

var subtract = function(a,b) {
  Array.prototype.slice.call(arguments, 0);
//return a - b;
}

functions are objects so you can add dot notation to it

subtract.example = “This is a function and we added the dot notation to it”;

Constructors

Constructors are functions that return an object.

 var Santa = function {
   return {name: "Santonio Clause", favoriteFood: "Cookies", costumeColor: "red", occupation: "Children's Gift Manager"}
};

Nesting

It is when there are objects within objects. This is an example of nested data structure:

house = {
bedroom: {
inhabitant: “cat Mike”,
color: “white”
}
}

You can call it with bracket or dot notation:

house.bedroom.color; // “white
house[“bedroom”][“color”] // “white”
house[“bedroom”].color // “white”

If you assign a variable to a JS object and modify this obj later. The object within this variable will also be modified. This is not however if the variable is given the value of a data type.

example:

</pre>
var house = {};
var houseString = '{}';

house.kitchen = "large";

houseString.kitchen = "large";

house; // { kitchen: 'large' }

houseString; // '{}'

Scope

Global and local scope in JS

 var animal = &quot;horse&quot;; // global scope

function talkToStrangers { //global scope
   greeting = &quot;Hello there!&quot;; // global scope
   var farewell = &quot;Bye!&quot;; // local scope
   window.flirtation = &quot;I like you!&quot; //global scope
}

Scope precedence rule: the most local variable will have precedence in the scope.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s