Java Script

Java script projects to learn and master Js

Simple: JavaScript

Intermediate: use React

Capstone: backend + front end + database

Java script coursera

Syntax, logical and runtime errors
By the end of this reading, you'll be able to:

 Recognize common types of errors in JavaScript

Here are some of the most common errors in JavaScript:

 ReferenceError
 SyntaxError
 TypeError
 RangeError
There are some other errors in JavaScript. These other errors include:

 AggregateError
 Error
 InternalError
 URIError

Recursion in JS

Declaring variable with var vs let & const

Variables declared with const must be assigned during declaration.

Let allows you to

Objects in Java script
 Objects are versatile data structures in JavaScript used to store key-value pairs.
 They can be created in multiple ways (literal, constructor functions, classes).
 Objects are dynamic, allowing you to modify their structure at runtime.
 They support methods and inheritance through prototypes.

Basics of Objects in JavaScript

1. Object Creation: You can create objects in several ways:

o Object Literal:

o Using the new Object() Syntax:

o Constructor Functions:
 o Classes (ES6 Syntax):

Key Features of JavaScript Objects

1. Key-Value Pairs:
o Objects store data as properties (keys) and values. Keys are typically strings
(or symbols), while values can be any data type (strings, numbers, functions,
other objects, etc.).
2. Dynamic Nature:
o You can add, modify, or delete properties at any time, making objects highly
flexible.
3.

Methods:
o Objects can have functions associated with them, called methods. These
methods can operate on the object’s properties.

4. Prototype:
o JavaScript uses prototypes to enable inheritance. Objects can inherit properties
and methods from other objects.
Explaining further:

To give more context, here's how it might look with a full constructor
function:

Using [Link] shares the info method among all instances of

Dog, making it memory-efficient because info is defined only once, no
matter how many instances of Dog are created. Each instance can then
call info, and this refers to the specific instance calling the method.

There is other way for Inheritance: [Link]()

The [Link]() method in JavaScript is a powerful way to create a

new object that directly inherits from another existing object

Before classes were added in ES6, inheritance was achieved through

prototypes, like with [Link]() or by directly setting prototypes on
functions. Although extends is now preferred for class inheritance,
prototype-based inheritance is still a foundational feature of JavaScript,
and methods like [Link]() remain useful.
 5. this Keyword:
o Inside an object method, this refers to the object itself, allowing access to its
properties and methods.

Working with Objects

 Accessing Properties: You can access object properties using dot notation or bracket
notation.

 Iterating Over Properties: You can use for...in to iterate over the properties of an
object.

 Object Methods: You can use [Link](), [Link](), and

[Link]() to work with object properties.

ES6
ES6, also known as ECMAScript 2015, is the sixth edition of the ECMAScript
language specification and represents a major update to JavaScript.
ECMAScript (often abbreviated as "ES") is the standardized scripting
language that JavaScript implements.

Key Features Introduced in ES6

Here are some of the most important features added in ES6:

1. Let and Const: New ways to declare variables with let (block-scoped) and const
(constant values), instead of var.

2. Arrow Functions: A shorter syntax for writing functions and improved handling of
the this keyword.
3. Classes: A more familiar syntax for creating objects and implementing inheritance,
similar to traditional object-oriented languages.

4. Template Literals: A new syntax for creating strings that allows embedded
expressions and multiline strings.

5. Default Parameters: Ability to set default values for function parameters.

6. Destructuring: Syntax for unpacking values from arrays or objects into distinct
variables.

7. Promises: A new way to handle asynchronous operations, making code cleaner and
easier to manage.

8. Modules: Native support for JavaScript modules with import and export.
9. Spread and Rest Operators: The ... syntax allows for spreading elements in arrays
and collecting remaining elements.

Spread Operator (...)

Rest Operator(…)

10. Map and Set Data Structures: New data structures for storing unique values (Set)
and key-value pairs (Map).
Importance of ES6

ES6 was one of the biggest updates to JavaScript, adding features that
improved readability, maintainability, and functionality, which has led to
more consistent and powerful code.

destruction variables and arrays and objects

I already know that the PI property exists on the math object. I make a
copy of it and I save the new object in a separate variable. I name PI.

Note that I can only destruction something that already exists on an object
using faulty spelling, including lower case won't work and will return an
undefined value If I type let {pi}=math, pi returns as undefined. This is
because there isn't a pi property on the math object. So, when I try to
destroy culture it, I get the value of undefined for the pi variable. The next
step is to confirm that PI variable has the identical value and data type as
[Link] by using the === comparison operator. This will return a value of
true.

To prove that the destructured property and the original property are in no
way connected. I update the value of PI to be 1.

I can now compare and I get false. It's clear that these two are no longer
the same. The only reason why this worked is because the original
property on the object and the destructured value are not connected in
any way.

In other words, there's no connection between the destructured variable

and the source property on the given object.

destructuring assignment : allows you to extract values from an array

into distinct variables. the first element of the meal is assigned to the
variable x and the second to the variable y
[Link](), [Link](), and [Link]()

For loop and objects

Using for...in for All Properties
Using [Link]() with forEach to iterate over the direct properties of
speedCar, so it ignores inherited properties from car.

Or using for … of with [Link]()

Example :
EC6 template literals: Alt Gr + 7 gives : `

Variable interpolation

Data structure in Js

Arrays: An ordered list of elements, accessible by index.

Supprimer un élément par son index:

Copier un tableau:

Objects: A collection of key-value pairs, allowing named properties.

Sets: A collection of unique values.

Maps: A collection of key-value pairs that preserves insertion order.

Stacks: Follows Last-In-First-Out (LIFO) principle.

Queues: Follows First-In-First-Out (FIFO) principle.

Single linked lists

 Doubly linked lists

Working with arrays in JavaScript

Some methods that exist on arrays: foreach(), map() and filter()
The forEach() method

To explain the syntax, the forEach() method accepts a function that will
work on each array item. That function's first parameter is the current
array item itself, and the second (optional) parameter is the index. The
appendIndex function has parameters because forEach automatically passes
each element in the array and its index to the callback function. When
forEach is used, it calls appendIndex for each element in the fruits array and
passes two arguments.

Very often, the function that the forEach() method needs to use is passed
in directly into the method call, like this:

The filter() method

the filter() method. It filters your arrays based on a specific test. Those
array items that pass the test are returned.
Similar to the forEach() method, the filter() method also accepts a
function and that function performs some work on each of the items in the
array.

The map method

This method is used to map each array item over to another array's item,
based on whatever work is performed inside the function that is passed-in
to the map as a parameter.

The .map() method in JavaScript creates a new array by applying a function

to each element in the calling array. It doesn’t change the original array;
instead, it returns a new array containing the results.

Working with Objects in JavaScript

The example below demonstrates how to use the object data structure to
complete a specific task. This task is to convert an object to an array:
Working with Maps in JavaScript

A map can feel very similar to an object in JS. However, it doesn't have
inheritance. No prototypes! This makes it useful as a data storage.

Working with Sets in JavaScript

The Set constructor can, for example, accept an array. This means that we
can use it to quickly filter an array for unique members.

Spread operator
Instead of this :

We can use this (plus pratique dans les cas où notre Array contient plus
d’éléments )

Results

More examples:

Merging Objects

Merging arrays (concatenating arrays)

Convert a string to an array using the spread operator

Copy either an object or an array into a separate one

Output is 200, 200

Output: ['apples'] 'not' ['apples','pears']
Rest operator
the rest operator groups the remaining parameters in a list, within a
standard array

The variable first = the 1st element of top7 = the colosseum

The variable second = the 2nd element of top7 = the Roman Forum

The variable third = the 3rd element of top7 = the Vatican

Then I have the list secondVisit that has the rest of the values

So, the rest operator gives us what is left over as a sub array

I can use the rest operator with functions too

the rest parameter, must be the last parameter in the function definition.
This means, that adding any other parameter, to my addTaxToPrices
function, after the rest operator (itemsBought) would result in an error.
Ternary Operators
syntaxe

Condition : Une expression qui est évaluée en un booléen (true ou false).

exprSiVrai : Une expression qui est évaluée si la condition est équivalente

à true (truthy)

exprSiFaux : Une expression qui est évaluée si la condition est équivalente

à false (falsy).

example

Java script modules

JavaScript modules are standalone units of code that you can reuse again
and again. Being standalone means that you can add them to your
program, remove them and replace them with other modules and
everything will still work.

modules are a way to organize code into separate, reusable files, making
it easier to manage and maintain complex projects. Each module can
contain code (like functions, variables, classes) that can be exported and
then imported into other files as needed.

1. Creating a module

A module is simply a JavaScript file that exports certain elements.

Here’s an example of a module, [Link], that exports a function:
2. Exporting modules

Named Exports: Export specific variables or functions. Each of

them can be imported by name in other files

Default Export: You can also export a default value, which can
be a function, class, or any variable.

3. Importing modules

Named Imports: Import specific functions or variables.

Default Import: If a module has a default export, you can import

it without curly braces:

4. Re exporting modules

You can re-export functions or variables from another module,

which helps when organizing related modules into a single entry
point.
 5. Benefits of Modules

Modules help:

 Avoid name collisions by isolating code.

 Improve readability by dividing code into smaller, logical
files.
 Enable code reuse across different parts of the app.

In modern JavaScript (ES6+), modules are used widely in both

frontend and backend development with [Link], and they are
essential for scalable applications.

Java script DOM manipulation

The basics of DOM manipulation and use some of the most common DOM
manipulation methods.

Example 2
JavaScript interactivity
Did you know that JavaScript's initial purpose was to provide
interactivity in the browser?

In other words, it was the "set of controls" that would allow web
developers to control the behavior of the webpages and even the browsers
that these webpages worked on. This is still the case today.

Although CSS has developed significantly over the years, it is still

JavaScript that allows users to:

 Get their geolocation,

 Interact with maps,

 Play games in the browser,

 Handle all kinds of user-triggered events, regardless of the device,

 Verify form input before sending it to the backend of a webapp,

 and more!

There are many, many ways in which JavaScript allows you to build rich,
interactive experiences on the web.

Java script selectors

When I clicked on the body I git the number of time I clicked (exp I clicked
3)

To capture user input, you can use the built-in prompt() method, like this:

This line would give you this :

Example 1
Example 2

You can make a diff function inside addEventListener()