4206 views

This animated series will cover essential principles that a JavaScript developer needs to know.

Challenge 1 – Data Types

Can you guess what are the data types involved in the following code example?

'foo';
{};
{a: 42, b: true};

Watch the answer on this video:

JavaScript has seven data types:

  • 6 primitive data types:
    • Number, String, Boolean, Symbol, Null, Undefined
  • and Object

Note: Function and Array are special kind of objects.

Read about Symbol and Null on MDN – Data Structures. In this series, you’ll learn more about the five other ones.

'foo', {} and { a: 42, b: true } are called literal values: they are not stored in a variable. Learn more about variables in the next challenges.

Challenge 2 – Declare global variables, initialize with primitive values

There are three kinds of declarations in JavaScript:

  • var
  • let
  • const

We’ll focus on the var statement. Learn more about let and const on MDN – Grammar and types.

var declares a variable, optionally initialized to a value.

In the following code sample, do you know what values alice and bob hold? And, by the way, what holds the alice and bob variables themselves?

var alice;
var bob = 42;

A variable declared outside of any function is called a global variable. In a web page, global variables declared with the var statement are properties of the global object window. This may be different in other contexts, like Node.js or web workers. In this series, the context is a web page.

Challenge 3 – Initialize a variable with an object

Do you know what value carol holds?

var carol = {a: true};

This is not as obvious as it may seem:

You have learned:

  • Primitive values (Number, String, Boolean…) are held directly by variables
  • Non-primitive values (objects) are held by references, not by variables

Challenge 4 – Assign primitive values

Can you guess what the last line returns?

alice = 'foo';
bob = alice;
alice = 'bar';
bob;

Primitive values are always assigned by value-copy. In bob = alice;, bob is assigned a copy of alice‘s value: the 'foo' value.

In JavaScript, you can’t have a variable alice pointing to another variable bob.

Challenge 5 – Set a property with [] or .

An object is a compound value. You can set properties holding their own values.

Can you guess what the last line returns?

var alice = {};
alice['foo'] = true;
alice.foo = 42;
alice;

Challenge 6 – Use [] with a variable

This challenge starts where challenge 5 ends. Can you guess what the last line returns?

var alice = {foo: 42};
var bar = 'foo';
alice[bar] = 'wat'
alice;

You have learned:

  • Object properties can be set with the bracket notation (alice['foo']) or the shorter dot notation (alice.foo).
  • The bracket notation accepts string literals ('foo' or "foo"). It also accepts a variable (bar), which is useful when the name of the property is dynamic and held by a variable.

Challenge 7 – Assign object values

Do you remember Challenge 4 – Assign primitive values? Let’s see how it works with object values. Can you guess what the last line returns?

var alice = {foo: 'bar'};
var bob = alice;
alice.foo = 'wat';
bob.foo;

Object values are always assigned by reference-copy. In bob = alice;, bob is assigned a copy of the reference held by alice. alice and bob are two references pointing to the same shared {foo: 'bar'} object value.

You have learned:

Data Type Held by Assigned by
Primitive values variables value-copy
Object values references reference-copy

Challenge 8 – Access properties of nested objects

Can you guess what the last line returns?

var alice = {
    bob: {
        a: 42,
        b: true
    }
};
var carol = alice.bob;
alice.bob.b = false;
carol;

You have learned:

  • An object can be written on several lines, especially with properties on separate lines and indented.
  • An object property can be a primitive value but also an object value. Such property holds a reference to a nested object.
  • You can chain the dot notation (and also the bracket notation) to access properties of nested objects: alice.bob.b, alice.bob['b'], alice['bob'].b or alice['bob']['b'].

If you have any remarks or questions about this series, don’t hesitate to add a comment below or send me a message @CedricSoulas. Follow us on @Wakandasoft to catch the next series.