DEV Community: shunku

Chapter 11: JavaScript Best Practices and Resources

shunku — Tue, 30 May 2023 12:58:39 +0000

In the final chapter of our journey into JavaScript, we'll look at the best practices that will make your code more efficient, readable, and secure. Additionally, we'll share some resources to keep learning and stay updated with the rapidly changing JavaScript landscape.

Coding Standards and Style Guide

JavaScript doesn't have an official coding style, but there are popular conventions that most developers adhere to.

Use clear and descriptive variable names: A variable name should describe the data it contains, making it easier to understand the code.
Indent your code: Use indentation to make the structure of your code more visible.
Use comments: Leave comments to explain why you're doing something, rather than what you're doing. It's usually clear what the code does, but the reasoning behind it may not be obvious.
Keep your functions small: A function should ideally do one thing. If a function is doing multiple things, consider splitting it into multiple functions.
Use === instead of ==: JavaScript's == operator checks for equality with type conversion, which can lead to unexpected results. The === operator checks for equality without type conversion, which is usually safer.

Performance Tips and Security

Keep your code DRY (Don't Repeat Yourself): If you find yourself writing the same code multiple times, consider creating a function for that task.
Use async/await or promises for asynchronous tasks: JavaScript is single-threaded, so blocking operations can make your website or app unresponsive. By using async/await or promises, you can perform tasks like network requests without blocking the rest of your code.
Avoid using eval(): The eval() function can execute arbitrary JavaScript code, which makes it a major security risk. Try to avoid using it, and if you must use it, make sure the input is properly sanitized.

Resources for Further Learning

JavaScript is a rapidly evolving language, and staying up-to-date requires continuous learning. Here are some resources to help you keep up with the latest developments:

Mozilla Developer Network (MDN) Web Docs: The MDN Web Docs are a comprehensive resource for JavaScript and web development. Their JavaScript reference is one of the best available.
ECMAScript specifications: The ECMAScript specifications define the standard for JavaScript. They can be dense and hard to read, but they're the ultimate authority on how JavaScript should work.
You Don't Know JS (book series): This book series goes into great depth on various aspects of JavaScript. It's freely available online.
JavaScript Weekly: This is a weekly newsletter that features the latest news and resources for JavaScript developers.
Podcasts and YouTube Channels: Podcasts like JavaScript Jabber and channels like Traversy Media, The Net Ninja can provide useful content.
Stack Overflow and GitHub: They are great platforms for problem-solving and learning from other developers' code.

This concludes our journey into JavaScript. Remember, the most effective way to learn is by doing - so get out there and start building!

Chapter 10: Building a Project from Scratch

shunku — Tue, 30 May 2023 12:58:30 +0000

Planning and Setting Up Your Project

To start a project, you'll need to initialize a new project directory, and install any necessary dependencies. Depending on the framework, the setup process may differ:

Next.js

Start a new Next.js project:

npx create-next-app@latest my-app
cd my-app

Remix

Start a new Remix project:

npx create-remix@latest my-app
# follow the prompts to configure your Remix app
cd my-app

Gatsby

Start a new Gatsby site:

npm install -g gatsby-cli
gatsby new my-app
cd my-app

Angular

Start a new Angular application:

npm install -g @angular/cli
ng new my-app
cd my-app

Vue.js

Start a new Vue.js project:

npm install -g @vue/cli
vue create my-app
cd my-app

Implementing Features

In your App component (or equivalent), display a "Hello, World!" message. Here's how you can do this in each framework:

Next.js

In pages/index.js:

function HomePage() {
  return <h1>Hello, World!</h1>
}

export default HomePage;

Remix

In app/routes/_index.jsx:

export const meta = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
}

Gatsby

In src/pages/index.js:

import React from "react"

const IndexPage = () => <h1>Hello, World!</h1>

export default IndexPage

Angular

In src/app/app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello, World!</h1>`,
})
export class AppComponent {}

Vue.js

In src/App.vue:

<template>
  <h1>Hello, World!</h1>
</template>

Debugging and Testing Your Project

For testing, Jest is commonly used in all frameworks for unit testing but Angular, which uses Jasmine. Cypress is used for end-to-end testing in all. Here is how to install Jest and Cypress, and a sample test for each:

Jest

Install Jest:

npm install --save-dev jest

A simple Jest test (App.test.js) could look like this:

test('displays hello world', () => {
  const message = "Hello, World!";
  expect(message).toBe("Hello, World!");
});

To run your Jest tests:

npx jest

Cypress

Install Cypress:

npm install --save-dev cypress

A simple Cypress test (cypress/integration/app_spec.js) might look like this:

describe('Homepage', () => {
  it('displays hello world', () => {
    cy.visit('/');
    cy.contains('h1', 'Hello, World!');
  });
});

To run your Cypress tests:

npx cypress open

Angular

For Angular, instead of Jest and Cypress, you'll use Jasmine and Cypress (or Nightwatch, WebdriverIO).

A simple Jasmine test (src/app/app.component.spec.ts) could look like:

it('should display hello world', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('Hello, World!');
});

To run your Jasmine and Cypress tests:

ng test
ng e2e

Deploying Your Project

Depending on the framework and the complexity of your project, there are numerous ways to deploy your application. For simpler applications, Vercel, Netlify, and GitHub Pages are popular choices.

Please follow the respective deployment guide for your chosen framework:

Remember to commit and push your changes to a remote repository before deploying your application.

Chapter 9: Front-End JavaScript Frameworks

shunku — Tue, 30 May 2023 12:58:22 +0000

Introduction to JavaScript Frameworks (React, Angular, Vue)

React

React is a popular JavaScript library developed by Facebook for building interactive user interfaces. React encourages the creation of reusable components, enabling developers to build complex UIs from small, isolated pieces of code.

While create-react-app was traditionally a common way to bootstrap a new React application, developers are increasingly turning to frameworks built on top of React that offer more features out of the box. Let's look at Next.js, Remix, and Gatsby.

Next.js

Next.js is a React framework developed by Vercel. It enables features like server-side rendering and generating static websites for React-based web applications. This can dramatically improve performance and SEO of your applications.

To create a new application using Next.js, you'll first need to have Node.js and npm installed on your computer. Then, you can use the create-next-app CLI tool:

npx create-next-app@latest my-app
cd my-app
npm run dev

Remix

Remix is a modern full-stack framework built for React, which provides everything you need to build better, faster web applications. It was designed from the ground up for fast, incremental adoption, and can be incorporated into existing applications bit by bit.

To start a new project with Remix, you can use create-remix CLI tool:

npx create-remix@latest my-app
cd my-app
npm run dev

Then follow the prompts in your terminal to configure and create your Remix app.

Gatsby

Gatsby is a React-based, GraphQL powered static site generator. It brings together the best components of React, webpack, react-router, GraphQL, and other front-end tools for efficient web development.

To create a new Gatsby site, you'll need the Gatsby CLI installed:

npm install -g gatsby-cli

Then you can create a new site:

gatsby new my-app
cd my-app
gatsby develop

To include React in an existing application, you can install it via npm:

npm install --save react react-dom

Then you can import React and use it in your JavaScript files:

import { createRoot } from 'react-dom/client';

// Render your React component
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Angular

Angular is a powerful, full-featured JavaScript framework developed by Google. It's great for building complex, large-scale applications. It's written in TypeScript, and comes with features like data binding, dependency injection, decorators, and a CLI that can generate parts of your application for you.

To start a new Angular application, first install the Angular CLI globally on your computer:

npm install -g @angular/cli

Then you can create a new application:

ng new my-app
cd my-app
ng serve

Adding Angular to an existing project can be complicated because Angular is a complete framework and has its own build process.

Vue.js

Vue.js is a lightweight and easy-to-learn framework, making it a good choice for beginners. Vue.js also uses a virtual DOM and provides reactive and composable view components.

To create a new Vue.js project, you can use Vue CLI. First, install it globally:

npm install -g @vue/cli

Then create a new application:

vue create my-app
cd my-app
npm run serve

If you want to add Vue.js to an existing project, you can include it directly with a script tag, or you can install it via npm:

npm install vue

Then you can import Vue and use it in your JavaScript files:

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Remember, while these JavaScript frameworks can help you develop complex applications more efficiently, it's important to have a solid understanding of JavaScript fundamentals before diving into a framework.

How to Choose the Right Framework

Choosing the right framework depends on a number of factors, including:

Project Size and Complexity: Angular is often used for large-scale, complex applications, while React and Vue.js are often used for smaller, less complex applications.

Learning Curve: Vue.js is generally considered the easiest to learn, followed by React, and then Angular.

Community and Ecosystem: React has a very large community and ecosystem, followed by Angular and then Vue.js. A larger community can often mean more third-party libraries, resources, and help if you get stuck.

Performance: All three frameworks have good performance, but they handle things differently under the hood. Research the differences to see which would best suit your project.

Job Market: Look at job postings in your area or in the area you want to work. What frameworks are most companies asking for?

Remember, there's no "best" framework — just the one that's best for your specific needs and situation. It's also very beneficial to eventually learn more than one framework. The concepts you learn in one often transfer over to others, making each additional framework easier to learn than the last.

Chapter 8: Modern JavaScript: ES6 and Beyond

shunku — Tue, 30 May 2023 12:58:13 +0000

Let, Const and Block Scope

In JavaScript, the scope of a variable defines the portion of the code where the variable can be accessed. Prior to ES6, JavaScript had only two types of scope: Global Scope and Function Scope. ES6 introduced Block Scope with the new let and const keywords, which are improvements over the function scoped var.

var and Function Scope

Variables declared with var are function scoped. This means that if a variable is declared anywhere within a function, it's accessible everywhere in that function, even before it's been declared due to a feature called hoisting.

function example() {
    console.log(myVar); // Outputs: undefined (Not an error)
    var myVar = 'Hello, world!';
    console.log(myVar); // Outputs: 'Hello, world!'
}

Also, var does not respect block scope -- a block being what's inside any pair of curly braces {}.

if (true) {
    var myVar = 'Hello, world!';
}
console.log(myVar); // Outputs: 'Hello, world!'

let and const with Block Scope

Unlike var, variables declared with let and const are block scoped. This means that they exist only within the block in which they were declared, as well as any nested blocks.

if (true) {
    let myLetVar = 'Hello, world!';
    const myConstVar = 'Hello again, world!';
}
console.log(myLetVar); // ReferenceError: myLetVar is not defined
console.log(myConstVar); // ReferenceError: myConstVar is not defined

In the above code, myLetVar and myConstVar are not accessible outside the if block.

Also, let and const are not hoisted like var. When trying to access them before they're declared, JavaScript throws an error.

function example() {
    console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
    let myLetVar = 'Hello, world!';
}

Understanding these differences and the concept of block scope is crucial for writing predictable, bug-free JavaScript code.

Arrow Functions

Arrow functions not only provide a more concise syntax to write functions, but they also have some differences in how they handle the this keyword.

In JavaScript, this is a special keyword that's set at the time of a function's execution, and what it refers to depends on how the function was called.

this in Traditional Function

In traditional function calls, this is set to the object that the function is a property of — also known as the calling object.

let myObject = {
  property: 'I am an object property!',
  myMethod: function() {
    console.log(this.property);
  }
};

myObject.myMethod(); // Outputs: 'I am an object property!'

But this can lead to unexpected results when this is used inside a callback function:

let myObject = {
  property: 'I am an object property!',
  myMethod: function() {
    setTimeout(function() {
      console.log(this.property);
    }, 1000);
  }
};

myObject.myMethod(); // Outputs: undefined

Here, this inside the setTimeout callback function refers to the global window object, not myObject.

this in Arrow Function

Arrow functions handle this differently. They don't have their own this. Instead, they inherit this from the surrounding lexical context.

let myObject = {
  property: 'I am an object property!',
  myMethod: function() {
    setTimeout(() => {
      console.log(this.property);
    }, 1000);
  }
};

myObject.myMethod(); // Outputs: 'I am an object property!'

In this example, the arrow function inherits this from myMethod, so this.property correctly refers to myObject.property.

This makes arrow functions particularly useful when working with methods that use callbacks, such as event listeners or timer functions. It's one of the many reasons arrow functions are popular in modern JavaScript development.

Template Strings, Spread and Rest Operators

Template strings allow you to embed expressions (variables, computations, etc.) directly into strings using ${} syntax.

let name = 'Alice';
console.log(`Hello, ${name}!`); // Outputs: "Hello, Alice!"

The spread operator (...) allows an iterable such as an array or string to be expanded in places where zero or more arguments or elements are expected.

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6]; // arr2 is now [1, 2, 3, 4, 5, 6]

The rest operator (...) is used to represent an indefinite number of arguments as an array.

function sum(...nums) {
  return nums.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // Outputs: 10

Destructuring and Default Parameters

Destructuring allows you to unpack values from arrays, or properties from objects, into distinct variables.

let [a, b] = [1, 2];
console.log(a); // Outputs: 1
console.log(b); // Outputs: 2

let { name, age } = { name: 'Alice', age: 25 };
console.log(name); // Outputs: "Alice"
console.log(age); // Outputs: 25

Default parameters allow you to specify default values for function parameters.

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet('Alice'); // Outputs: "Hello, Alice!"
greet(); // Outputs: "Hello, World!"

These modern JavaScript features help make your code more readable, flexible, and expressive. They're widely used in modern web development, so it's important to understand and become comfortable with them.

Chapter 7: Working with APIs in JavaScript

shunku — Tue, 30 May 2023 12:58:00 +0000

What is an API?

API stands for Application Programming Interface. It allows different software applications to communicate with each other. In web development, it's often used to fetch data from a server.

Web APIs usually use HTTP (Hypertext Transfer Protocol), the protocol used for transferring data over the internet. Web APIs also often use JSON (JavaScript Object Notation) to structure the data being transferred.

For example, you might have a web API that provides data about different types of plants. You could make a request to that API for information about roses, and it might return data like this:

{
  "name": "Rose",
  "sunlight": "Full Sun",
  "soil": "Well-draining",
  "color": "Red"
}

Making HTTP Requests (Fetch, Axios)

There are a few different ways to make HTTP requests in JavaScript. Two of the most common are using the fetch function or the axios library.

Here's an example using fetch:

fetch('https://api.example.com/plants/rose')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

And here's an example using axios, which returns a promise that resolves to the response data:

axios.get('https://api.example.com/plants/rose')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Working with Data from APIs

Once you've made a request to an API and received the data, you can use it in your JavaScript code just like any other data.

For example, you could use it to create new elements in the DOM:

fetch('https://api.example.com/plants/rose')
  .then(response => response.json())
  .then(data => {
    let name = document.createElement('h1');
    name.textContent = data.name;
    document.body.appendChild(name);

    let sunlight = document.createElement('p');
    sunlight.textContent = 'Sunlight: ' + data.sunlight;
    document.body.appendChild(sunlight);

    // Continue for other data properties...
  })
  .catch(error => console.error('Error:', error));

In this example, we fetch data from the API, convert the response to JSON, and then create new elements in the DOM to display the data.

APIs are incredibly important in web development, as they allow us to work with dynamic data and create interactive, data-driven websites and applications.

Chapter 6: JavaScript and the Document Object Model (DOM)

shunku — Tue, 30 May 2023 12:57:50 +0000

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document (such as a webpage) and allows programs to manipulate the document's structure, style, and content. In essence, the DOM represents a document as a tree-like structure made up of nodes. Each node represents part of the document (e.g., an element, an attribute, the text within an element, etc.).

Here's a simple HTML document and its DOM representation:

<!DOCTYPE html>
<html>
<head>
  <title>My Title</title>
</head>
<body>
  <h1>My Heading</h1>
  <p>My paragraph.</p>
</body>
</html>

This can be visualized as a tree:

Document
├── DOCTYPE: html
├── html
│   ├── head
│   │   └── title
│   │       └── "My Title"
│   └── body
│       ├── h1
│       │   └── "My Heading"
│       └── p
│           └── "My paragraph."

Traversing and Manipulating the DOM

JavaScript can be used to traverse (navigate through) and manipulate (change) the DOM.

For example, you can select an element in the DOM using JavaScript:

let heading = document.querySelector('h1'); // Selects the first h1 element

And you can change the content of an element:

heading.textContent = 'New Heading'; // Changes the text of the h1 element

You can also create new nodes and add them to the DOM:

let newParagraph = document.createElement('p'); // Creates a new p element
newParagraph.textContent = 'New paragraph.'; // Adds text to the new p element
document.body.appendChild(newParagraph); // Adds the new p element to the body

Event Handling

Events are actions or occurrences that happen in the browser, often as a result of user interaction. JavaScript can listen for these events and execute code in response.

To listen for an event, you use the addEventListener method, specifying the type of event and a function that should be run when the event occurs. This function is often called an event handler or event listener.

let button = document.querySelector('button'); // Selects the button element

button.addEventListener('click', function() {
  alert('Button was clicked!');
});

In this example, when the button is clicked, the browser will alert the user with a message saying "Button was clicked!".

The combination of JavaScript and the DOM is incredibly powerful. It's the foundation of how all modern websites and web applications create interactive experiences for users.

Chapter 5: Advanced JavaScript Concepts

shunku — Tue, 30 May 2023 12:57:40 +0000

Prototypes and Inheritance

JavaScript is often described as a prototype-based language, which means that it doesn't have classical inheritance based on classes as seen in other languages like Java or C++. Instead, JavaScript uses prototypes to achieve object-oriented inheritance.

Each object in JavaScript has a private property called a prototype, which points to another object. When a property is accessed on an object, and the object does not have that property, JavaScript will traverse the prototype chain to find the property on one of the prototypes.

Here's an example of prototypes in action:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function() {
  return this.firstName + " " + this.lastName;
}

let person = new Person("John", "Doe");
console.log(person.getFullName()); // Outputs: "John Doe"

In this example, the getFullName method is added to the prototype of the Person constructor function. All instances of Person can now use this method.

Asynchronous JavaScript (Promises, async/await)

JavaScript is single-threaded, but it has features that allow it to handle tasks that take a long time to complete, such as fetching data from a server, without blocking the rest of the code from executing. This is achieved with async functions and the Promise object.

A Promise represents a value that is unknown now that may become known in the future. Promises can be in one of three states: pending, fulfilled, or rejected.

let promise = new Promise(function(resolve, reject) {
  // some code

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  } else {
    reject(Error("It broke"));
  }
});

// We can chain a .then() call to our promise to specify what should happen when the promise is resolved:
promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

async and await are extensions of promises, and they allow you to write promise-based code as if it were synchronous.

async function getFullName() {
  try {
    let response = await fetch('/api/person');
    let person = await response.json();
    console.log(person.firstName + " " + person.lastName);
  } catch (error) {
    console.error('Error:', error);
  }
}

getFullName();

Error Handling and Debugging

JavaScript provides several mechanisms for handling errors and debugging your code.

One such mechanism is the try...catch statement, which is used to handle exceptions (unusual or erroneous situations) that can be thrown by your program.

try {
  // Code that may throw an exception
  throw new Error('Oops!');
} catch (error) {
  // Handle the error
  console.error(error.message); // Outputs: "Oops!"
}

JavaScript has built-in debugging capabilities that are usually accessed through developer tools in browsers. For example, the console.log function can be used to print values to the console, and the debugger statement can be used to set a breakpoint in your code.

console.log('Hello, World!'); // Outputs: "Hello, World!"

function buggyFunction() {
  debugger; // Execution will stop here
  // Rest of the function
}

These tools and concepts are essential to understand and handle errors in your JavaScript code.

Chapter 4: Objects and Arrays in JavaScript

shunku — Tue, 30 May 2023 12:57:30 +0000

Introduction to Objects

In JavaScript, an object is a standalone entity, with properties and type. It's an unordered collection of related data, of primitive or reference types, in the form of "key: value" pairs. These keys are also known as properties.

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  country: "USA"
};

console.log(person.firstName); // Outputs: "John"

You can access the properties of an object using dot notation (as above) or bracket notation (person["firstName"]). You can also modify the properties of an object:

person.age = 31;
console.log(person.age); // Outputs: 31

Arrays and Array Methods

An array in JavaScript is a type of object used for storing multiple values in a single variable. Each value (also called an element) in an array has a numeric position, known as its index, and it may contain data of any data type—numbers, strings, booleans, functions, objects, and even other arrays.

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Outputs: "apple"

JavaScript provides many functions that help you work with arrays. Here are some of the most common ones:

push: Add a new element to the end of an array.

fruits.push("date");
console.log(fruits); // Outputs: ["apple", "banana", "cherry", "date"]

pop: Remove the last element from an array.

fruits.pop();
console.log(fruits); // Outputs: ["apple", "banana", "cherry"]

shift: Remove the first element from an array.

fruits.shift();
console.log(fruits); // Outputs: ["banana", "cherry"]

unshift: Add a new element to the start of an array.

fruits.unshift("apple");
console.log(fruits); // Outputs: ["apple", "banana", "cherry"]

JSON (JavaScript Object Notation)

JSON is a format for structuring data that is used in JavaScript and many other programming languages. It's commonly used for transmitting data in web applications (e.g., sending data from a server to a client).

In JSON, data is presented in key/value pairs, just like JavaScript objects. Here's an example of JSON data:

{
  "employees": [
    { "firstName": "John", "lastName": "Doe" },
    { "firstName": "Anna", "lastName": "Smith" },
    { "firstName": "Peter", "lastName": "Jones" }
  ]
}

In JavaScript, you can convert an object into JSON using JSON.stringify():

let person = {
  firstName: "John",
  lastName: "Doe"
};

let json = JSON.stringify(person);
console.log(json); // Outputs: '{"firstName":"John","lastName":"Doe"}'

And you can convert JSON back into an object using JSON.parse():

let json = '{"firstName":"John","lastName":"Doe"}';
let person = JSON.parse(json);
console.log(person.firstName); // Outputs: "John"

Chapter 3: JavaScript Functions

shunku — Tue, 30 May 2023 12:57:21 +0000

Functions are a fundamental building block in JavaScript. They allow you to encapsulate a piece of code and call it from other parts of your program, potentially multiple times.

Defining Functions

In JavaScript, a function can be defined in a few ways. Here are the two most common methods:

Function Declaration: Also known as a function statement, it defines a function with the specified parameters.
```
function greet(name) {
  console.log("Hello, " + name);
}

greet("Alice"); // Hello, Alice
```

Function Expression: Defines a function as part of an expression.

let greet = function(name) {
  console.log("Hello, " + name);
};

greet("Alice"); // Hello, Alice

Function Scope and Hoisting

In JavaScript, each function creates its own scope. Variables declared inside a function are not accessible from outside the function. This is called function scope.

function greet() {
  let message = "Hello, Alice";
  console.log(message); // Hello, Alice
}

greet();
console.log(message); // Uncaught ReferenceError: message is not defined

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compile phase, before the code has been executed.

Function declarations are hoisted completely, but for variable declarations, only the names are hoisted, not their assignments.

// Function declaration
hoistedFunction(); // Outputs: "This function has been hoisted."

function hoistedFunction() {
  console.log("This function has been hoisted.");
}

// Variable declaration
console.log(hoistedVariable); // Outputs: undefined

var hoistedVariable = "This variable has been hoisted.";

Higher Order Functions

In JavaScript, functions are first-class objects, meaning they can be stored in variables, passed as arguments to other functions, and returned from other functions. A higher-order function is a function that takes another function as an argument, returns a function, or both.

Here's an example of a higher-order function:

function greet(name) {
  console.log("Hello, " + name);
}

function formalGreet(greet, name) {
  console.log("Good evening,");
  greet(name);
}

formalGreet(greet, "Alice"); // Good evening, Hello, Alice

Closures and Callbacks

A closure is a function that has access to its own scope, the outer function’s scope, and the global scope.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('outerVariable:', outerVariable);
    console.log('innerVariable:', innerVariable);
  }
}

const newFunction = outerFunction('outside');
newFunction('inside'); // Logs: outerVariable: outside, innerVariable: inside

In this case, innerFunction is a closure that is accessing its own scope (innerVariable), the outer function’s scope (outerVariable), and the global scope.

A callback is a function passed as an argument to another function. This technique allows a function to call another function.

function greet(name) {
  console.log("Hello, " + name);
}

function processUserInput(callback) {
  let name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greet);

In this case, greet is a callback function. It's passed as an argument to processUserInput and called inside that function.

Chapter 2: Basics of JavaScript

shunku — Tue, 30 May 2023 12:57:11 +0000

Syntax and Basic Constructs

JavaScript uses a syntax similar to other C-style languages (like C++ and Java). A JavaScript program is a sequence of statements and comments. Statements end with a semicolon (;), although they can be omitted due to Automatic Semicolon Insertion (ASI).

Here is a simple JavaScript statement:

console.log('Hello, World!');

Comments can be used to make your code more understandable to others (or to yourself). JavaScript supports both single-line comments, started with //, and multi-line comments, enclosed between /* and */.

// This is a single-line comment

/* 
This is a 
multi-line comment 
*/

Variables and Data Types

In JavaScript, we declare variables using the var, let, or const keywords. var is function-scoped, while let and const are block-scoped. const is used for variables that cannot be reassigned.

var name = "John Doe";
let age = 21;
const country = "USA";

JavaScript has dynamic types, meaning a variable can hold different types of values because it’s not tied to any particular type. There are seven basic data types in JavaScript:

Number: This includes both integers and floating-point numbers.

let count = 10; // integer
let price = 9.99; // floating-point number

String: A sequence of characters used to represent text.
```
let message = "Hello, World!";
```
Boolean: Represents a logical entity and can have two values: true or false.
```
let isComplete = true;
```
Undefined: A variable that has been declared but not yet assigned a value.
```
let x;
console.log(x); // undefined
```
Null: A special keyword representing a null or "empty" value.
```
let y = null;
```
Symbol: A unique and immutable data type that is often used as an identifier for object properties.

Object: Allows you to store collections of data.

let person = {
  name: "John Doe",
  age: 21
};

Operators and Expressions

Operators in JavaScript are used to perform operations on variables and values. The most common operators are:

Arithmetic operators: +, -, *, /, %, ++, --

let x = 10;
let y = 20;

console.log(x + y); // 30

Assignment operators: =, +=, -=, *=, /=, %=

let x = 10;
x += 5;

console.log(x); // 15

Comparison operators: ==, ===, !=, !==, <, >, <=, >=

let x = 10;

console.log(x == "10"); // true
console.log(x === "10"); // false

Logical operators: &&, ||, !

let x = 10;
let y = 20;

console.log(x > 5 && y > 5); // true

Control Flow (If, Else, Switch, Loops)

Control flow statements are used to conditionally execute blocks of code.

If-else statements

let age = 21;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Switch statement

let grade = 'A';

switch (grade) {
  case 'A':
    console.log("Excellent");
    break;
  case 'B':
    console.log("Good");
    break;
  case 'C':
    console.log("Fair");
    break;
  case 'D':
    console.log("Poor");
    break;
  default:
    console.log("Invalid grade");
}

For loop

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

While loop

let i = 0;

while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}

By understanding these fundamental concepts, you're now ready to explore more complex aspects of the JavaScript language.

Chapter 1: Introduction to JavaScript

shunku — Tue, 30 May 2023 12:56:25 +0000

What is JavaScript?

JavaScript is a powerful and flexible programming language that's primarily used to add interactivity to web pages. Along with HTML and CSS, it's one of the three core technologies of the World Wide Web. HTML gives a web page its structure, CSS provides the styling, and JavaScript makes it interactive, enabling users to interact with the page in dynamic ways.

JavaScript is interpreted, not compiled, which means that it's processed by the web browser at runtime, rather than being transformed into machine code prior to execution. This aspect makes JavaScript a very accessible language for beginners and allows for rapid feedback and iteration.

While JavaScript was initially used primarily on the client-side (in the web browser), it can now also be used on the server-side through environments like Node.js, making it a truly versatile and ubiquitous language.

How JavaScript Works in Web Browsers

When a user requests a web page, the server sends HTML, CSS, and JavaScript files to the user's browser. The browser then interprets the HTML to construct the page's structure, applies the CSS to style the page, and uses its JavaScript engine to interpret and run the JavaScript code.

JavaScript enables interactivity by manipulating the Document Object Model (DOM). The DOM is a programming interface for HTML documents, representing the structure of a webpage. JavaScript can manipulate the DOM to add, delete, or change HTML elements, apply styles, react to events, and more, making the webpage dynamic and interactive.

Setting Up Your JavaScript Development Environment

Here's a step-by-step guide to setting up your JavaScript development environment:

Step 1: Install a Text Editor

First, you'll need a text editor to write your JavaScript code. Visual Studio Code (VSCode) is a free, open-source editor developed by Microsoft and is one of the most popular choices for JavaScript development. It includes features like built-in Git, syntax highlighting, autocompletion, and a large library of extensions.

Here's how to install VSCode:

Visit the Visual Studio Code download page.
Download the version of VSCode for your operating system.
Run the installer and follow the instructions. It's generally safe to accept the default options during installation.

Step 2: Install a Web Browser

Next, you'll need a modern web browser. Google Chrome is widely used because of its advanced developer tools, but Firefox, Edge, and Safari are also suitable options. If you don't have Google Chrome installed, you can download it from the Google Chrome website.

Step 3: Getting Familiar with Browser Developer Tools

Once you've installed Chrome, you can access the developer tools. Here's how:

Open Google Chrome.
Click on the three vertical dots in the top-right corner to open the browser menu.
Hover over "More Tools," then click "Developer Tools."

Alternatively, you can use the shortcut Ctrl + Shift + I (or Cmd + Option + I on a Mac) to open the developer tools.

Step 4: Your First JavaScript Program

Now you're ready to write your first JavaScript program. You'll create a simple HTML page that includes a JavaScript script which writes "Hello World!" to the browser's console.

Open VSCode.
Create a new file by clicking File -> New File.

Copy and paste the following code into the new file:

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript Program</title>
</head>
<body>
    <h1>My First JavaScript Program</h1>
    <script>
        console.log("Hello World!");
    </script>
</body>
</html>

Save the file with a .html extension (for example, index.html).
Open the HTML file in your web browser (you can simply double-click on the file in most cases).
Open the developer tools (Ctrl + Shift + I or Cmd + Option + I), and click on the "Console" tab. You should see "Hello World!" displayed there.

Congratulations! You've set up your JavaScript development environment and written your first JavaScript program.

As you continue learning JavaScript, you may want to explore more advanced development tools such as Node.js, npm, Git, and others, but this setup is more than sufficient to get started.

Basic: Use Amazon S3 Storage Classes

shunku — Thu, 30 Jun 2022 16:33:27 +0000

https://docs.aws.amazon.com/AmazonS3/latest/userguide/storage-class-intro.html

Preparation

In:

import time
from pprint import pp
import boto3
import pandas as pd

s3 = boto3.client("s3")

Standard

The default storage class. If you don't specify the storage class when you upload an object, Amazon S3 assigns the S3 Standard storage class.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="standard.txt",
    # No need to specify explicitly as it is the default
    StorageClass="STANDARD",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'J13M8VJPS3Y9PN9Z',
                      'HostId': '37QJ/X5IR87V3u8hH22QvlBIb8yLvfvBOeJVAQTzmuWlPTdq6t3lRjfIGGspD8QMuXrjJAKnISk=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': '37QJ/X5IR87V3u8hH22QvlBIb8yLvfvBOeJVAQTzmuWlPTdq6t3lRjfIGGspD8QMuXrjJAKnISk=',
                                      'x-amz-request-id': 'J13M8VJPS3Y9PN9Z',
                                      'date': 'Wed, 29 Jun 2022 16:44:58 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

response = s3.get_object(
    Bucket="<bucket_name>",
    Key="standard.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': '658A5BCR57K59K44',
                      'HostId': 'VdfkXa52iCeI1NPmffjMZqpWx+kO6S8AhQGkgiFx7HarDPSyKkuQbqI7gBuxsExG3Tgj5wdoHfM=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'VdfkXa52iCeI1NPmffjMZqpWx+kO6S8AhQGkgiFx7HarDPSyKkuQbqI7gBuxsExG3Tgj5wdoHfM=',
                                      'x-amz-request-id': '658A5BCR57K59K44',
                                      'date': 'Wed, 29 Jun 2022 16:45:21 GMT',
                                      'last-modified': 'Wed, 29 Jun 2022 '
                                                       '16:44:58 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 29, 16, 44, 58, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'Body': <botocore.response.StreamingBody object at 0x7fcccab97c70>}

Standard-IA

S3 Standard-IA — Amazon S3 stores the object data redundantly across multiple geographically separated Availability Zones (similar to the S3 Standard storage class). S3 Standard-IA objects are resilient to the loss of an Availability Zone. This storage class offers greater availability and resiliency than the S3 One Zone-IA class.

The S3 Standard-IA and S3 One Zone-IA storage classes are designed for long-lived and infrequently accessed data. (IA stands for infrequent access.) S3 Standard-IA and S3 One Zone-IA objects are available for millisecond access (similar to the S3 Standard storage class). Amazon S3 charges a retrieval fee for these objects, so they are most suitable for infrequently accessed data.

The S3 Standard-IA and S3 One Zone-IA storage classes are suitable for objects larger than 128 KB that you plan to store for at least 30 days. If an object is less than 128 KB, Amazon S3 charges you for 128 KB. If you delete an object before the end of the 30-day minimum storage duration period, you are charged for 30 days.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="standard_ia.txt",
    StorageClass="STANDARD_IA",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'GVSAQ9S2FHN7TQA8',
                      'HostId': 'FuzDS5MQ8Zr6I5ko/Ohe0cV1fvecsp4Dqc8cT1nWcOVVBDA57fGP1dpfJGnMfNWUPwjqFAdBatI=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'FuzDS5MQ8Zr6I5ko/Ohe0cV1fvecsp4Dqc8cT1nWcOVVBDA57fGP1dpfJGnMfNWUPwjqFAdBatI=',
                                      'x-amz-request-id': 'GVSAQ9S2FHN7TQA8',
                                      'date': 'Wed, 29 Jun 2022 16:46:48 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'STANDARD_IA',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

response = s3.get_object(
    Bucket="<bucket_name>",
    Key="standard_ia.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'DSD9YCBCXS1ZSRZW',
                      'HostId': 'hXzkL/oNFPyJVcJptr4d1dDJGB/4kDfwhSHKii6uOjevLcS6RertaAmC/VtdQSL4vBm/FwQuxy8=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'hXzkL/oNFPyJVcJptr4d1dDJGB/4kDfwhSHKii6uOjevLcS6RertaAmC/VtdQSL4vBm/FwQuxy8=',
                                      'x-amz-request-id': 'DSD9YCBCXS1ZSRZW',
                                      'date': 'Wed, 29 Jun 2022 16:47:07 GMT',
                                      'last-modified': 'Wed, 29 Jun 2022 '
                                                       '16:46:48 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'STANDARD_IA',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 29, 16, 46, 48, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'StorageClass': 'STANDARD_IA',
 'Body': <botocore.response.StreamingBody object at 0x7fcccab97610>}

Intelligent-Tiering

S3 Intelligent-Tiering is an Amazon S3 storage class designed to optimize storage costs by automatically moving data to the most cost-effective access tier, without performance impact or operational overhead.

S3 Intelligent-Tiering automatically stores objects in three access tiers: a Frequent Access tier, an Infrequent Access tier, and a Archive Instant Access tier. Objects that are uploaded or transitioned to S3 Intelligent-Tiering are automatically stored in the Frequent Access tier. S3 Intelligent-Tiering works by monitoring access patterns and then moving the objects that have not been accessed in 30 consecutive days to the Infrequent Access tier. With S3 Intelligent-Tiering, any existing objects that have not been accessed for 90 consecutive days will automatically move to the Archive Instant Access tier.

After you activate one or both of the archive access tiers, S3 Intelligent-Tiering automatically moves objects that haven’t been accessed for 90 consecutive days to the Archive Access tier, and after 180 consecutive days of no access, to the Deep Archive Access tier.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="intelligent_tiering.txt",
    StorageClass="INTELLIGENT_TIERING",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': '5NC8JCZT7KG36ASK',
                      'HostId': 'oxzjT7+8fQ2DfbjnTxXTVMfDQ+hy+9/KnkqGFB0+7Vfl6iAmCz0B2argnI1u0xRw0Jj2lctm5uk=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'oxzjT7+8fQ2DfbjnTxXTVMfDQ+hy+9/KnkqGFB0+7Vfl6iAmCz0B2argnI1u0xRw0Jj2lctm5uk=',
                                      'x-amz-request-id': '5NC8JCZT7KG36ASK',
                                      'date': 'Wed, 29 Jun 2022 16:48:21 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'INTELLIGENT_TIERING',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

response = s3.get_object(
    Bucket="<bucket_name>",
    Key="intelligent_tiering.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'GEZ6XBD3C97JX909',
                      'HostId': 'zxLVlqrL+/hVFZlHeA9qW2iUL63u2pdQoLozL++XArtiwbYEWQ2hxlkd4nnQqUn4GeGdoxxFW2k=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'zxLVlqrL+/hVFZlHeA9qW2iUL63u2pdQoLozL++XArtiwbYEWQ2hxlkd4nnQqUn4GeGdoxxFW2k=',
                                      'x-amz-request-id': 'GEZ6XBD3C97JX909',
                                      'date': 'Wed, 29 Jun 2022 16:50:34 GMT',
                                      'last-modified': 'Wed, 29 Jun 2022 '
                                                       '16:48:21 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'INTELLIGENT_TIERING',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 29, 16, 48, 21, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'StorageClass': 'INTELLIGENT_TIERING',
 'Body': <botocore.response.StreamingBody object at 0x7fcccac90a00>}

View Archive Status

https://docs.aws.amazon.com/AmazonS3/latest/userguide/intelligent-tiering-managing.html

You can also use a HEAD object request to view an object's archive status. If an object is stored using the S3 Intelligent-Tiering storage class and is in one of the archive tiers, the HEAD object response shows the current archive tier. It does this using the x-amz-archive-status header.

In:

response = s3.head_object(
    Bucket="<bucket_name>",
    Key="intelligent_tiering.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'D733NADSQ2YJR58R',
                      'HostId': 'ruglFtSr4XacdaSe94y4tqy7oN5ypkiyNLtcTIeYBclsGLb52irxIwyYIBy1dGsveM/CgZ02DL0=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'ruglFtSr4XacdaSe94y4tqy7oN5ypkiyNLtcTIeYBclsGLb52irxIwyYIBy1dGsveM/CgZ02DL0=',
                                      'x-amz-request-id': 'D733NADSQ2YJR58R',
                                      'date': 'Thu, 30 Jun 2022 14:31:33 GMT',
                                      'last-modified': 'Wed, 29 Jun 2022 '
                                                       '16:48:21 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'INTELLIGENT_TIERING',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 29, 16, 48, 21, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'StorageClass': 'INTELLIGENT_TIERING'}

This object is not in archive tiers, so x-amz-archive-status header is not present.

One Zone-IA

The S3 Standard-IA and S3 One Zone-IA storage classes are designed for long-lived and infrequently accessed data. (IA stands for infrequent access.) S3 Standard-IA and S3 One Zone-IA objects are available for millisecond access (similar to the S3 Standard storage class). Amazon S3 charges a retrieval fee for these objects, so they are most suitable for infrequently accessed data.

The S3 Standard-IA and S3 One Zone-IA storage classes are suitable for objects larger than 128 KB that you plan to store for at least 30 days. If an object is less than 128 KB, Amazon S3 charges you for 128 KB. If you delete an object before the end of the 30-day minimum storage duration period, you are charged for 30 days.

S3 One Zone-IA — Amazon S3 stores the object data in only one Availability Zone, which makes it less expensive than S3 Standard-IA. However, the data is not resilient to the physical loss of the Availability Zone resulting from disasters, such as earthquakes and floods. The S3 One Zone-IA storage class is as durable as Standard-IA, but it is less available and less resilient.

S3 One Zone-IA — Use if you can re-create the data if the Availability Zone fails, and for object replicas when setting S3 Cross-Region Replication (CRR).

All of the storage classes except for S3 One Zone-IA are designed to be resilient to the physical loss of an Availability Zone resulting from disasters.

You can also change the storage class of an object that is already stored in Amazon S3 to any other storage class by making a copy of the object using the PUT Object - Copy API. However, you can't use PUT Object - Copy to copy objects that are stored in the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage classes. You also can't transition from S3 One Zone-IA to S3 Glacier Instant Retrieval.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="one_zone_ia.txt",
    StorageClass="ONEZONE_IA",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'G4EYJFGHZCZDYKV8',
                      'HostId': 'tHSWH64lUTevuHjufn8jKZeQOP/avAhP7ErOoAXprCS7WMNt7uRQnM/6HC9QkLu3ntt8Iw74GPQ=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'tHSWH64lUTevuHjufn8jKZeQOP/avAhP7ErOoAXprCS7WMNt7uRQnM/6HC9QkLu3ntt8Iw74GPQ=',
                                      'x-amz-request-id': 'G4EYJFGHZCZDYKV8',
                                      'date': 'Thu, 30 Jun 2022 14:41:51 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'ONEZONE_IA',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

response = s3.get_object(
    Bucket="<bucket_name>",
    Key="one_zone_ia.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'TTEDEDV69REP6NW2',
                      'HostId': 'LFm0aD18YX9xs+1JRgAhEBqlcDuzNkQq7zod60gOqP/oNWoF2RmIk8B+asnsCcShItsu1JsDjpc=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'LFm0aD18YX9xs+1JRgAhEBqlcDuzNkQq7zod60gOqP/oNWoF2RmIk8B+asnsCcShItsu1JsDjpc=',
                                      'x-amz-request-id': 'TTEDEDV69REP6NW2',
                                      'date': 'Thu, 30 Jun 2022 14:42:16 GMT',
                                      'last-modified': 'Thu, 30 Jun 2022 '
                                                       '14:41:51 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'ONEZONE_IA',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 30, 14, 41, 51, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'StorageClass': 'ONEZONE_IA',
 'Body': <botocore.response.StreamingBody object at 0x7fcccb1b4d60>}

Glacier Instant Retrieval

The S3 Glacier Instant Retrieval, S3 Glacier Flexible Retrieval, and S3 Glacier Deep Archive storage classes are designed for low-cost data archiving. These storage classes offer the same durability and resiliency as the S3 Standard and S3 Standard-IA storage classes.

S3 Glacier Instant Retrieval — Use for archiving data that is rarely accessed and requires milliseconds retrieval. Data stored in the S3 Glacier Instant Retrieval storage class offers a cost savings compared to the S3 Standard-IA storage class, with the same latency and throughput performance as the S3 Standard-IA storage class. S3 Glacier Instant Retrieval has higher data access costs than S3 Standard-IA.

You must first restore the S3 Glacier Flexible Retrieval and S3 Glacier Deep Archive objects before you can access them. (S3 Standard, RRS, S3 Standard-IA, S3 One Zone-IA, S3 Glacier Instant Retrieval, and S3 Intelligent-Tiering objects are available for anytime access.)

You can also change the storage class of an object that is already stored in Amazon S3 to any other storage class by making a copy of the object using the PUT Object - Copy API. However, you can't use PUT Object - Copy to copy objects that are stored in the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage classes. You also can't transition from S3 One Zone-IA to S3 Glacier Instant Retrieval.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="glacier_instant_retrieval.txt",
    StorageClass="GLACIER_IR",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'C54NWKFS5AKTFFPQ',
                      'HostId': 'ePd7XvtCE3uLoX22+linjtjvj+jJnUEcDv7UkynmXwXPKfF80AP6br4M9iW3V7jmZSfM8BnVqj8=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'ePd7XvtCE3uLoX22+linjtjvj+jJnUEcDv7UkynmXwXPKfF80AP6br4M9iW3V7jmZSfM8BnVqj8=',
                                      'x-amz-request-id': 'C54NWKFS5AKTFFPQ',
                                      'date': 'Thu, 30 Jun 2022 15:06:59 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'GLACIER_IR',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

response = s3.get_object(
    Bucket="<bucket_name>",
    Key="glacier_instant_retrieval.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'MYP5YPXE20HCJTVW',
                      'HostId': '6vqSDBk6AISEB2329uX1d++KRK29ht3+XRarXyLZE9VnSzvIyAH7F9NAAnHgWciNDsqnMnlOLHg=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': '6vqSDBk6AISEB2329uX1d++KRK29ht3+XRarXyLZE9VnSzvIyAH7F9NAAnHgWciNDsqnMnlOLHg=',
                                      'x-amz-request-id': 'MYP5YPXE20HCJTVW',
                                      'date': 'Thu, 30 Jun 2022 15:07:01 GMT',
                                      'last-modified': 'Thu, 30 Jun 2022 '
                                                       '15:06:59 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'GLACIER_IR',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 30, 15, 6, 59, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'StorageClass': 'GLACIER_IR',
 'Body': <botocore.response.StreamingBody object at 0x7fcccb2977f0>}

Glacier Flexible Retrieval

The S3 Glacier Instant Retrieval, S3 Glacier Flexible Retrieval, and S3 Glacier Deep Archive storage classes are designed for low-cost data archiving. These storage classes offer the same durability and resiliency as the S3 Standard and S3 Standard-IA storage classes.

S3 Glacier Flexible Retrieval — Use for archives where portions of the data might need to be retrieved in minutes. Data stored in the S3 Glacier Flexible Retrieval storage class has a minimum storage duration period of 90 days and can be accessed in as little as 1-5 minutes using expedited retrieval. The retrieval time is flexible, and you can request free bulk retrievals in up to 5-12 hours. If you have deleted, overwritten, or transitioned to a different storage class an object before the 90-day minimum, you are charged for 90 days.

You can set the storage class of an object to S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive in the same ways that you do for the other storage classes as described in the section Setting the storage class of an object. However, the S3 Glacier Flexible Retrieval and S3 Glacier Deep Archive objects are not available for real-time access. You must first restore the S3 Glacier Flexible Retrieval and S3 Glacier Deep Archive objects before you can access them. (S3 Standard, RRS, S3 Standard-IA, S3 One Zone-IA, S3 Glacier Instant Retrieval, and S3 Intelligent-Tiering objects are available for anytime access.)

When you choose the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage class, your objects remain in Amazon S3. You can't access them directly through the separate Amazon S3 Glacier service.

You can also change the storage class of an object that is already stored in Amazon S3 to any other storage class by making a copy of the object using the PUT Object - Copy API. However, you can't use PUT Object - Copy to copy objects that are stored in the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage classes.

When setting up a replication configuration, you can set the storage class for replicated objects to any other storage class. However, you can't replicate objects that are stored in the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage classes.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="glacier_flexible_retrieval.txt",
    StorageClass="GLACIER",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'YZAEKQWGQG1XENG6',
                      'HostId': '33LiHFlKWt243wusVugnvHSHwHxp9EmNXOoVDp2SN+we/Q5N9HAk4Opog/1hvJXQM4mzZhn6KoY=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': '33LiHFlKWt243wusVugnvHSHwHxp9EmNXOoVDp2SN+we/Q5N9HAk4Opog/1hvJXQM4mzZhn6KoY=',
                                      'x-amz-request-id': 'YZAEKQWGQG1XENG6',
                                      'date': 'Thu, 30 Jun 2022 15:24:06 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'GLACIER',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

try:
    response = s3.get_object(
        Bucket="<bucket_name>",
        Key="glacier_flexible_retrieval.txt",
    )
except Exception as e:
    response = e.response
pp(response)

Out:

{'Error': {'Code': 'InvalidObjectState',
           'Message': "The operation is not valid for the object's storage "
                      'class',
           'StorageClass': 'GLACIER'},
 'ResponseMetadata': {'RequestId': '5F42BZ1SZC6TQW4M',
                      'HostId': '0mDQbSuaCGaNlW4csgWcVViwDSH+Pqc8h3taAq6jgmlNnkY9GfziEV6VyudUVdiMNY+lia48FC8=',
                      'HTTPStatusCode': 403,
                      'HTTPHeaders': {'x-amz-request-id': '5F42BZ1SZC6TQW4M',
                                      'x-amz-id-2': '0mDQbSuaCGaNlW4csgWcVViwDSH+Pqc8h3taAq6jgmlNnkY9GfziEV6VyudUVdiMNY+lia48FC8=',
                                      'content-type': 'application/xml',
                                      'transfer-encoding': 'chunked',
                                      'date': 'Thu, 30 Jun 2022 15:24:10 GMT',
                                      'server': 'AmazonS3'},
                      'RetryAttempts': 0},
 'StorageClass': 'GLACIER'}

As stated in the document, I cannot download the object directly.

Restore

In:

response = s3.restore_object(
    Bucket="<bucket_name>",
    Key="glacier_flexible_retrieval.txt",
    RestoreRequest={
        "Days": 1,
        "GlacierJobParameters": {"Tier": "Expedited"},
    },
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'B0MQGSJX7BEQARH7',
                      'HostId': 'G7OXNdXgVGHKmzR++fKyEkb6uWd1wRWf5TrqM8+X7eq0am4MH3XUhIBu2SJvTYASy490dgUVYIw=',
                      'HTTPStatusCode': 202,
                      'HTTPHeaders': {'x-amz-id-2': 'G7OXNdXgVGHKmzR++fKyEkb6uWd1wRWf5TrqM8+X7eq0am4MH3XUhIBu2SJvTYASy490dgUVYIw=',
                                      'x-amz-request-id': 'B0MQGSJX7BEQARH7',
                                      'date': 'Thu, 30 Jun 2022 15:24:19 GMT',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0}}

Try to download

In:

responses = []
for i in range(360):
    try:
        response = s3.get_object(
            Bucket="<bucket_name>",
            Key="glacier_flexible_retrieval.txt",
        )
    except Exception as e:
        response = e.response
    responses.append(
        {
            "status": response["ResponseMetadata"]["HTTPStatusCode"],
            "date": response["ResponseMetadata"]["HTTPHeaders"]["date"],
        }
    )
    time.sleep(1)
df = pd.DataFrame.from_dict(responses)
print(df[df.status == 403].tail(1).T)
print(df[df.status == 200].head(1).T)

Out:

60
status                            403
date    Thu, 30 Jun 2022 15:25:41 GMT
                                   61
status                            200
date    Thu, 30 Jun 2022 15:25:43 GMT

Request to restore: Thu, 30 Jun 2022 15:24:19 GMT
Restored: Thu, 30 Jun 2022 15:25:43 GMT

I used Expedited tier for restoring, so it took about 1.5 min.

Glacier Deep Archive

The S3 Glacier Instant Retrieval, S3 Glacier Flexible Retrieval, and S3 Glacier Deep Archive storage classes are designed for low-cost data archiving. These storage classes offer the same durability and resiliency as the S3 Standard and S3 Standard-IA storage classes.

S3 Glacier Deep Archive — Use for archiving data that rarely needs to be accessed. Data stored in the S3 Glacier Deep Archive storage class has a minimum storage duration period of 180 days and a default retrieval time of 12 hours. If you have deleted, overwritten, or transitioned to a different storage class an object before the 180-day minimum, you are charged for 180 days.

S3 Glacier Deep Archive is the lowest cost storage option in AWS. Storage costs for S3 Glacier Deep Archive are less expensive than using the S3 Glacier Flexible Retrieval storage class. You can reduce S3 Glacier Deep Archive retrieval costs by using bulk retrieval, which returns data within 48 hours.

You can set the storage class of an object to S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive in the same ways that you do for the other storage classes as described in the section Setting the storage class of an object. However, the S3 Glacier Flexible Retrieval and S3 Glacier Deep Archive objects are not available for real-time access. You must first restore the S3 Glacier Flexible Retrieval and S3 Glacier Deep Archive objects before you can access them. (S3 Standard, RRS, S3 Standard-IA, S3 One Zone-IA, S3 Glacier Instant Retrieval, and S3 Intelligent-Tiering objects are available for anytime access.)

When you choose the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage class, your objects remain in Amazon S3. You can't access them directly through the separate Amazon S3 Glacier service.

You can also change the storage class of an object that is already stored in Amazon S3 to any other storage class by making a copy of the object using the PUT Object - Copy API. However, you can't use PUT Object - Copy to copy objects that are stored in the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage classes.

When setting up a replication configuration, you can set the storage class for replicated objects to any other storage class. However, you can't replicate objects that are stored in the S3 Glacier Flexible Retrieval or S3 Glacier Deep Archive storage classes.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="glacier_deep_archive.txt",
    StorageClass="DEEP_ARCHIVE",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'R4R72F9Q2G9SM6VG',
                      'HostId': 'MiLEX5uVPZVA6MMsUSvC6Cpr8gmwm32+4COjBsoyna3YTd8qzu0hK0P8d5/AoiIH4yNSHHYPznE=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'MiLEX5uVPZVA6MMsUSvC6Cpr8gmwm32+4COjBsoyna3YTd8qzu0hK0P8d5/AoiIH4yNSHHYPznE=',
                                      'x-amz-request-id': 'R4R72F9Q2G9SM6VG',
                                      'date': 'Thu, 30 Jun 2022 16:02:59 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'DEEP_ARCHIVE',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

try:
    response = s3.get_object(
        Bucket="<bucket_name>",
        Key="glacier_deep_archive.txt",
    )
except Exception as e:
    response = e.response
pp(response)

Out:

{'Error': {'Code': 'InvalidObjectState',
           'Message': "The operation is not valid for the object's storage "
                      'class',
           'StorageClass': 'DEEP_ARCHIVE'},
 'ResponseMetadata': {'RequestId': 'FKEEHHMPNSJM40S6',
                      'HostId': 'BSHJyfecWLWAXV6IdeoPVeGHc1MiRSMOt2F8N3xP7lGg98oB5g66FqN/aM3d6sPSSVIhRRp2+Is=',
                      'HTTPStatusCode': 403,
                      'HTTPHeaders': {'x-amz-request-id': 'FKEEHHMPNSJM40S6',
                                      'x-amz-id-2': 'BSHJyfecWLWAXV6IdeoPVeGHc1MiRSMOt2F8N3xP7lGg98oB5g66FqN/aM3d6sPSSVIhRRp2+Is=',
                                      'content-type': 'application/xml',
                                      'transfer-encoding': 'chunked',
                                      'date': 'Thu, 30 Jun 2022 16:03:49 GMT',
                                      'server': 'AmazonS3'},
                      'RetryAttempts': 0},
 'StorageClass': 'DEEP_ARCHIVE'}

Restore

In:

response = s3.restore_object(
    Bucket="<bucket_name>",
    Key="glacier_deep_archive.txt",
    RestoreRequest={
        "Days": 1,
        "GlacierJobParameters": {"Tier": "Standard"},
    },
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'RMK3RSDYX8K67YF6',
                      'HostId': 'BHulkmJEPFzZ3CxNZKHZimaM/b3T3RNh/0lfGr3GY8MFbbSVEVVh8KASLIPvDlvTo3hJn3qlRd4=',
                      'HTTPStatusCode': 202,
                      'HTTPHeaders': {'x-amz-id-2': 'BHulkmJEPFzZ3CxNZKHZimaM/b3T3RNh/0lfGr3GY8MFbbSVEVVh8KASLIPvDlvTo3hJn3qlRd4=',
                                      'x-amz-request-id': 'RMK3RSDYX8K67YF6',
                                      'date': 'Thu, 30 Jun 2022 16:04:36 GMT',
                                      'content-length': '0',
                                      'server': 'AmazonS3'},
                      'RetryAttempts': 0}}

To download this object, I must wait about 12 hours because I used Standard tier for restoring.

Reduced Redundancy

Reduced Redundancy — The Reduced Redundancy Storage (RRS) storage class is designed for noncritical, reproducible data that can be stored with less redundancy than the S3 Standard storage class.

We recommend that you not use this storage class. The S3 Standard storage class is more cost effective.

For durability, RRS objects have an average annual expected loss of 0.01 percent of objects. If an RRS object is lost, when requests are made to that object, Amazon S3 returns a 405 error.

S3 Standard, RRS, S3 Standard-IA, S3 One Zone-IA, S3 Glacier Instant Retrieval, and S3 Intelligent-Tiering objects are available for anytime access.

Upload

In:

response = s3.put_object(
    Body=open("/tmp/test.txt", mode="rb").read(),
    Bucket="<bucket_name>",
    ContentType="text/plain",
    Key="reduced_redundancy.txt",
    StorageClass="REDUCED_REDUNDANCY",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'VWATQ8R24WMM18EH',
                      'HostId': 'Ji1YRB32KJJRNO4vpEWJzGiEm3Mw5rbt6JYLEFlG2/NAdydglDRCt7BzKaz3+OpJvIbID95VjKM=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'Ji1YRB32KJJRNO4vpEWJzGiEm3Mw5rbt6JYLEFlG2/NAdydglDRCt7BzKaz3+OpJvIbID95VjKM=',
                                      'x-amz-request-id': 'VWATQ8R24WMM18EH',
                                      'date': 'Thu, 30 Jun 2022 16:14:29 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'REDUCED_REDUNDANCY',
                                      'server': 'AmazonS3',
                                      'content-length': '0'},
                      'RetryAttempts': 0},
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"'}

Download

In:

response = s3.get_object(
    Bucket="<bucket_name>",
    Key="reduced_redundancy.txt",
)
pp(response)

Out:

{'ResponseMetadata': {'RequestId': 'WX660QWG24QQRJAE',
                      'HostId': 'G8avj3zKBw2DO4pdsrScc3W1KVeO4C6yIQjcvfbOWevAbkVxlKmo4YM9UxZfacwqd4w3Yg4NxUY=',
                      'HTTPStatusCode': 200,
                      'HTTPHeaders': {'x-amz-id-2': 'G8avj3zKBw2DO4pdsrScc3W1KVeO4C6yIQjcvfbOWevAbkVxlKmo4YM9UxZfacwqd4w3Yg4NxUY=',
                                      'x-amz-request-id': 'WX660QWG24QQRJAE',
                                      'date': 'Thu, 30 Jun 2022 16:14:59 GMT',
                                      'last-modified': 'Thu, 30 Jun 2022 '
                                                       '16:14:29 GMT',
                                      'etag': '"02bcabffffd16fe0fc250f08cad95e0c"',
                                      'x-amz-storage-class': 'REDUCED_REDUNDANCY',
                                      'accept-ranges': 'bytes',
                                      'content-type': 'text/plain',
                                      'server': 'AmazonS3',
                                      'content-length': '16'},
                      'RetryAttempts': 0},
 'AcceptRanges': 'bytes',
 'LastModified': datetime.datetime(2022, 6, 30, 16, 14, 29, tzinfo=tzutc()),
 'ContentLength': 16,
 'ETag': '"02bcabffffd16fe0fc250f08cad95e0c"',
 'ContentType': 'text/plain',
 'Metadata': {},
 'StorageClass': 'REDUCED_REDUNDANCY',
 'Body': <botocore.response.StreamingBody object at 0x7fcccb1328b0>}