collapsed:: true
- How:
- Developed by Brendan Eich in 1995 at Netscape.
- Initially created in just 10 days as a client-side scripting language for web browsers.
-
- Who:
- Brendan Eich, co-founder of Mozilla and creator of JavaScript.
- Netscape Communications Corporation.
-
- Why:
- To enable dynamic and interactive web content.
- To complement HTML and CSS for enhanced web development.
const size = 10;if (size > 100) { console.log('Big');} else if (size > 20) { console.log('Medium');} else if (size > 4) { console.log('Small');} else { console.log('Tiny');}// Print: Small
switch Statement
const food = 'salad';switch (food) { case 'oyster': console.log('The taste of the sea'); break; case 'pizza': console.log('A delicious pie'); break; default: console.log('Enjoy your meal');}
while (condition) { // code block to be executed}let i = 0;while (i < 5) { console.log(i); i++;}``
Reverse Loop
const fruits = ["apple", "orange", "banana"];for (let i = fruits.length - 1; i >= 0; i--) { console.log(`${i}. ${fruits[i]}`);}// => 2. banana// => 1. orange// => 0. apple
Do…While Statement
x = 0i = 0do { x = x + i; console.log(x) i++;} while (i < 5);// => 0 1 3 6 10
For Loop
for (let i = 0; i < 4; i += 1) { console.log(i);};// => 0, 1, 2, 3
Looping Through Arrays
for (let i = 0; i < array.length; i++){ console.log(array[i]);}// => Every item in the array
Break
for (let i = 0; i < 99; i += 1) { if (i > 5) { break; } console.log(i)}// => 0 1 2 3 4 5
Continue
for (i = 0; i < 10; i++) { if (i === 3) { continue; } text += "The number is " + i + "<br>";}
Nested
for (let i = 0; i < 2; i += 1) { for (let j = 0; j < 3; j += 1) { console.log(`${i}-${j}`); }}
for…in loop
const fruits = ["apple", "orange", "banana"];for (let index in fruits) { console.log(index);}// => 0// => 1// => 2
for…of loop
const fruits = ["apple", "orange", "banana"];for (let fruit of fruits) { console.log(fruit);}// => apple// => orange// => banana
JavaScript Iterators
Functions Assigned to Variables
let plusFive = (number) => { return number + 5; };// f is assigned the value of plusFivelet f = plusFive;plusFive(3); // 8// Since f has a function value, it can be invoked. f(9); // 14
Callback Functions
const isEven = (n) => { return n % 2 == 0;}let printMsg = (evenFunc, num) => { const isNumEven = evenFunc(num); console.log(`${num} is an even number: ${isNumEven}.`)}// Pass in isEven as the callback functionprintMsg(isEven, 4); // => The number 4 is an even number: True.
const members = ["Taylor", "Donald", "Don", "Natasha", "Bobby"];const announcements = members.map((member) => { return member + " joined the contest.";});console.log(announcements);
// Example of invalid key namesconst trainSchedule = { // Invalid because of the space between words. platform num: 10, // Expressions cannot be keys. 40 - 10 + 2: 30, // A + sign is invalid unless it is enclosed in quotations. +compartment: 'C'}
const origNum = 8;const origObj = {color: 'blue'};const changeItUp = (num, obj) => { num = 7; obj.color = 'red';};changeItUp(origNum, origObj);// Will output 8 since integers are passed by value.console.log(origNum);// Will output 'red' since objects are passed // by reference and are therefore mutable.console.log(origObj.color);
// A factory function that accepts 'name', // 'age', and 'breed' parameters to return // a customized dog object. const dogFactory = (name, age, breed) => { return { name: name, age: age, breed: breed, bark() { console.log('Woof!'); } };};
Methods
const engine = { // method shorthand, with one argument start(adverb) { console.log(`The engine starts up ${adverb}...`); }, // anonymous arrow function expression with no arguments sputter: () => { console.log('The engine sputters...'); },};engine.start('noisily');engine.sputter();
Getters and setters
const myCat = { _name: 'Dottie', get name() { return this._name; }, set name(newName) { this._name = newName; }};// Reference invokes the getterconsole.log(myCat.name);// Assignment invokes the settermyCat.name = 'Yankee';
JavaScript Classes
Static Methods
class Dog { constructor(name) { this._name = name; } introduce() { console.log('This is ' + this._name + ' !'); } // A static method static bark() { console.log('Woof!'); }}const myDog = new Dog('Buster');myDog.introduce();// Calling the static methodDog.bark();
Class
class Song { constructor() { this.title; this.author; } play() { console.log('Song playing!'); }}const mySong = new Song();mySong.play();
Class Constructor
class Song { constructor(title, artist) { this.title = title; this.artist = artist; }}const mySong = new Song('Bohemian Rhapsody', 'Queen');console.log(mySong.title);
Class Methods
class Song { play() { console.log('Playing!'); } stop() { console.log('Stopping!'); }}
extends
// Parent classclass Media { constructor(info) { this.publishDate = info.publishDate; this.name = info.name; }}// Child classclass Song extends Media { constructor(songData) { super(songData); this.artist = songData.artist; }}const mySong = new Song({ artist: 'Queen', name: 'Bohemian Rhapsody', publishDate: 1975});
JavaScript Modules
Export
// myMath.js// Default exportexport default function add(x,y){ return x + y}// Normal exportexport function subtract(x,y){ return x - y}// Multiple exportsfunction multiply(x,y){ return x * y}function duplicate(x){ return x * 2}export { multiply, duplicate}