The Javascript Beginner's Handbook, Study notes of Javascript programming

Download The Javascript Beginner's Handbook and more Study notes Javascript programming in PDF only on Docsity!

JavaScript

Table of Contents

Preface

Introduction to JavaScript

History

Just JavaScript

Syntax

Semicolons

Values

Variables

Types

Expressions

Operators

Precedence

Comparisons

Conditionals

Strings

Arrays

Loops

Functions

Arrow Functions

Objects

Object properties

Object methods

Classes

Inheritance

Asynchonous Programming and Callbacks

Promises

Preface

The JavaScript Beginner's Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic.

I find this approach gives a well-rounded overview.

This book does not try to cover everything under the sun related to JavaScript. It focuses on the core of the language, trying to simplify the more complex topics.

I hope the contents of this book will help you achieve what you want: learn the basics of JavaScript.

This book is written by Flavio. I publish web development tutorials every day on my website flaviocopes.com.

You can reach me on Twitter @flaviocopes.

Enjoy!

Introduction to JavaScript

JavaScript is one of the most popular programming languages in the world.

I believe it's a great language to be your first programming language ever.

We mainly use JavaScript to create

websites web applications server-side applications using Node.js

but JavaScript is not limited to these things, and it can also be used to

create mobile applications using tools like React Native create programs for microcontrollers and the internet of things create smartwatch applications

It can basically do anything. It's so popular that everything new that shows up is going to have some kind of JavaScript integration at some point.

JavaScript is a programming language that is:

high level : it provides abstractions that allow you to ignore the details of the machine where it's running on. It manages memory automatically with a garbage collector, so you can focus on the code instead of managing memory like other languages like C would need, and provides many constructs which allow you to deal with highly powerful variables and objects. dynamic : opposed to static programming languages, a dynamic language executes at runtime many of the things that a static language does at compile time. This has pros and cons, and it gives us powerful features like dynamic typing, late binding, reflection, functional programming, object runtime alteration, closures and much more. Don't worry if those things are unknown to you - you'll know all of those at the end of the course. dynamically typed : a variable does not enforce a type. You can reassign

History

Created in 1995, JavaScript has gone a very long way since its humble beginnings.

It was the first scripting language that was supported natively by web browsers, and thanks to this it gained a competitive advantage over any other language and today it's still the only scripting language that we can use to build Web Applications.

Other languages exist, but all must compile to JavaScript - or more recently to WebAssembly, but this is another story.

In the beginnings, JavaScript was not nearly powerful as it is today, and it was mainly used for fancy animations and the marvel known at the time as Dynamic HTML.

With the growing needs that the web platform demanded (and continues to demand), JavaScript had the responsibility to grow as well, to accommodate the needs of one of the most widely used ecosystems of the world.

JavaScript is now widely used also outside of the browser. The rise of Node.js in the last few years unlocked backend development, once the domain of Java, Ruby, Python, PHP and more traditional server-side languages.

JavaScript is now also the language powering databases and many more applications, and it's even possible to develop embedded applications, mobile apps, TV sets apps and much more. What started as a tiny language inside the browser is now the most popular language in the world.

Just JavaScript

Sometimes it's hard to separate JavaScript from the features of the environment it is used in.

For example, the console.log() line you can find in many code examples is not JavaScript. Instead, it's part of the vast library of APIs provided to us in the browser. In the same way, on the server it can be sometimes hard to separate the JavaScript language features from the APIs provided by Node.js.

Is a particular feature provided by React or Vue? Or is it "plain JavaScript", or "vanilla JavaScript" as often called?

In this book I talk about JavaScript, the language.

Without complicating your learning process with things that are outside of it, and provided by external ecosystems.

5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'}

Identifiers

An identifier is a sequence of characters that can be used to identify a variable, a function, an object. It can start with a letter, the dollar sign $ or an underscore _ , and it can contain digits. Using Unicode, a letter can be any allowed char, for example, an emoji ߠ.

Test test TEST _test Test $test

The dollar sign is commonly used to reference DOM elements.

Some names are reserved for JavaScript internal use, and we can't use them as identifiers.

Comments

Comments are one of the most important part of any program. In any programming language. They are important because they let us annotate the code and add important information that otherwise would not be available to other people (or ourselves) reading the code.

In JavaScript, we can write a comment on a single line using //. Everything after // is not considered as code by the JavaScript interpreter.

Like this:

// a comment true //another comment

Another type of comment is a multi-line comment. It starts with /* and ends with */.

Everything in between is not considered as code:

/* some kind of comment

*/

Values

A hello string is a value. A number like 12 is a value.

hello and 12 are values. string and number are the types of those values.

The type is the kind of value, its category. We have many different types in JavaScript, and we'll talk about them in detail later on. Each type has its own characteristics.

When we need to have a reference to a value, we assign it to a variable. The variable can have a name, and the value is what's stored in a variable, so we can later access that value through the variable name.

Variables

A variable is a value assigned to an identifier, so you can reference and use it later in the program.

This is because JavaScript is loosely typed , a concept you'll frequently hear about.

A variable must be declared before you can use it.

We have 2 main ways to declare variables. The first is to use const :

const a = 0

The second way is to use let :

let a = 0

What's the difference?

const defines a constant reference to a value. This means the reference cannot be changed. You cannot reassign a new value to it.

Using let you can assign a new value to it.

For example, you cannot do this:

const a = 0 a = 1

Because you'll get an error: TypeError: Assignment to constant variable..

On the other hand, you can do it using let :

let a = 0 a = 1

Until 2015, var was the only way we could declare a variable in JavaScript. Today, a modern codebase will most likely just use const and let. There are some fundamental differences which I detail in this post but if you're just starting out, you might not care about. Just use const and let.

Types

Variables in JavaScript do not have any type attached.

They are untyped.

Once you assign a value with some type to a variable, you can later reassign the variable to host a value of any other type, without any issue.

In JavaScript we have 2 main kinds of types: primitive types and object types.

Primitive types

Primitive types are

numbers strings booleans symbols

And two special types: null and undefined.

Object types

Any value that's not of a primitive type (a string, a number, a boolean, null or undefined) is an object.

Object types have properties and also have methods that can act on those properties.

We'll talk more about objects later on.

Expressions

An expression is a single unit of JavaScript code that the JavaScript engine can evaluate, and return a value.

Expressions can vary in complexity.

We start from the very simple ones, called primary expressions:

2

'something' true false this //the current scope undefined i //where i is a variable or a constant

Arithmetic expressions are expressions that take a variable and an operator (more on operators soon), and result into a number:

1 / 2 i++ i -= 2 i * 2

String expressions are expressions that result into a string:

'A ' + 'string'

Logical expressions make use of logical operators and resolve to a boolean value:

a && b a || b !a

More advanced expressions involve objects, functions, and arrays, and I'll introduce them later.