This book is for all front-end developers who wish to improve their JavaScript skills. Youll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.
Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
A Perfect Summer's Day
It was a lovely day for a walk in the park.The birds were singing and the kids were all back at school.
Where existing code is required for context, rather than repeat all of it, will be displayed:
function animate() { new_variable = "Hello";}
Some lines of code should be entered on one line, but weve had to wrap them because of page constraints. An indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/responsive-web-design-real-user-testing/?responsive1");
Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings
Hey, You!
Tips provide helpful little pointers.
Ahem, Excuse Me ...
Notes are useful asides that are relatedbut not criticalto the topic at hand. Think of them as extra tidbits of information.
Make Sure You Always ...
... pay attention to these important points.
Watch Out!
Warnings highlight any gotchas that are likely to trip you up along the way.
Chapter 1: The Anatomy of a Modern JavaScript Application
by James Kolce
Theres no doubt that the JavaScript ecosystem changes fast. Not only are new tools and frameworks introduced and developed at a rapid rate, the language itself has undergone big changes with the introduction of ES2015 (aka ES6). Understandably, many articles have been written complaining about how difficult it is to learn modern JavaScript development these days.
In this article, Ill introduce you to modern JavaScript. Well take a look at recent developments in the language and get an overview of the tools and techniques currently used to write front-end web applications. If youre just starting out with learning the language, or youve not touched it for a few years and are wondering what happened to the JavaScript you used to know, this article is for you.
A Note About Node.js
Node.js is a runtime that allows server-side programs to be written in JavaScript. Its possible to have full-stack JavaScript applications, where both the front and back end of the app is written in the same language. Although this article is focused on client-side development, Node.js still plays an important role.
The arrival of Node.js had a significant impact on the JavaScript ecosystem, introducing the npm package manager and popularizing the CommonJS module format. Developers started to build more innovative tools and develop new approaches to blur the line between the browser, the server, and native applications.
JavaScript ES2015+
In 2015, the sixth version of ECMAScript the specification that defines the JavaScript language was released under the name of ES2015 (still often referred to as ES6). This new version included substantial additions to the language, making it easier and more feasible to build ambitious web applications. But improvements dont stop with ES2015; each year, a new version is released.
Declaring variables
JavaScript now has two additional ways to declare variables: let and const.
let
is the successor to var
. Although var
is still available, let
limits the scope of variables to the block (rather than the function) theyre declared within, which reduces the room for error:
// ES5for (var i = 1; i < 5; i++) { console.log(i);}// <-- logs the numbers 1 to 4console.log(i);// <-- 5 (variable i still exists outside the loop)// ES2015for (let j = 1; j < 5; j++) { console.log(j);}console.log(j);// <-- 'Uncaught ReferenceError: j is not defined'
Using const
allows you to define variables that cannot be rebound to new values. For primitive values such as strings and numbers, this results in something similar to a constant, as you cannot change the value once it has been declared:
const name = 'Bill';name = 'Steve';// <-- 'Uncaught TypeError: Assignment to constant variable.'// Gotchaconst person = { name: 'Bill' };person.name = 'Steve';// person.name is now Steve.// As we're not changing the object that person is bound to, JavaScript doesn't complain.
Arrow functions
Arrow functions provide a cleaner syntax for declaring anonymous functions (lambdas), dropping the function
keyword and the return
keyword when the body function only has one expression. This can allow you to write functional style code in a nicer way: