4779 views This animated series will cover essential principles that a JavaScript developer needs to know. Challenge 1 – Data Types Challenge 2 – Declare global variables, initialize with primitive values Challenge 3 – Initialize a variable with an object Challenge 4 – Assign primitive values Challenge 5 – Set a property with [] or . Challenge 6 – Use [] with a variable Challenge 7 – Assign object values Challenge 8 – Access properties of nested objects 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. Click to share on Facebook (Opens in new window)Click to share on Twitter (Opens in new window)Click to share on LinkedIn (Opens in new window) You might also like : DevelopersWakanda Stories Open Letter to the Developer Community If you’re reading this, you might be curious about a few things. First, who or what is Wakanda? And ... by admin Share: Business Maybe We’re All Developers… Could it be that we are all potential developers? I’d like to talk to you about two recent stu... by Franck Kantor Share: enterprise mobile challengesNews Wakanda named “Cool Vendor” by Gartner A sense of pride is definitely what we feel at having been named Cool Vendor in “Application D... by Ricardo Mello Share: One Comment on “8 Challenges and Animations to Learn JavaScript” iboozyvoozy says: April 11, 2017 at 3:02 pm Amazing videos! Only now I finally understand how objects work in javascript Reply Leave a Reply to iboozyvoozy Cancel reply
One Comment on “8 Challenges and Animations to Learn JavaScript” iboozyvoozy says: April 11, 2017 at 3:02 pm Amazing videos! Only now I finally understand how objects work in javascript Reply Leave a Reply to iboozyvoozy Cancel reply