DEV Community: off.tokyo

HTTP status codes explained for beginners

off.tokyo — Sat, 26 Jun 2021 05:01:42 +0000

What is an HTTP status code?

Strictly speaking, the status code of an HTTP response
A three-digit numeric code that indicates the meaning of the response from the server
Indicates whether a specific HTTP request has been successfully completed

HTTP response

Response messages can be divided into three main types of information

-Status lines
-HTTP response headers
-HTTP response body

The status code is in the first line of the header

The status code is in the first line of the header, in the status line.

HTTP/1.1 200 OK
Date: Sat, 22 Feb 2020 08:09:30 GMT
Content-Type: application/json; charset=utf-8
Connection: keep-alive
Server: nginx
ETag: "e287c729017cc9785487098b6b103af6"
Cache-Control: max-age=0, private, must-revalidate
X-UA-Compatible: IE=Edge,chrome=1
X-Runtime: 0.003487

The status line contains a protocol and a text phrase as well as the status code discussed here.

HTTP/1.1 200 OK

Protocol: HTTP/1.1
Status code: 200
Text phrase: OK

The header is further subdivided, but not in this case.

Status codes are divided into five classes

100s = information response
200s = success response
300s = Redirect
400s = Client error
500s = Server error

Below is an extract of a summary of typical status codes.

Number 100 Information response

Indicates that processing is continuing.
The client can either continue with the request or follow the server's instructions to update the protocol and resend
The 100s are not often used as there is no definition of a 1xx number in the HTTP/1.0 convention

100 Continue 

The server has not rejected the request. The client can continue the request.

101 Switching Protocols 

The server is requesting a protocol switch.

200 units Successful response

The most common status code returned on success
The requested operation was successful and the specified data was successfully retrieved.
GET: the body contains the resource
PUT, POST: The body contains the result of the operation

201 Created

POST, PUT: The request was successful and the resource was created
In the case of POST, the URI is included in the Location header of the response
New user registration, image upload, DB table addition, etc.
The body often contains the newly created resource, but it doesn't have to contain anything in particular.

202 Accepted

The request has been accepted, but has not yet been processed.
Returned when there is asynchronous processing to be done on the server side, such as file format conversion, push notification requests, batch processing, etc.

204 No Content

Returned when the response body is empty.
Returned when data is deleted using DELETE
Returned when the form content has been submitted using POST, but the screen has not been updated.
If the data was updated correctly with PUT or PATCH
Some people think it shouldn't be used for anything other than DELETE.

205 Reset Content

Returned when the user agent screen is reset.
As 204, no response body.

300 Multiple Choices Redirect

300 Multiple Choices

Indicates that there are multiple responses to a request.
The user agent or user is presented with HTML that links to the choices and the user chooses one of them.

301 Moved Permanently

The URL of the requested resource has been permanently changed.
such as a website move or a redirect from HTTP to HTTPS.
The Location header indicates the URL to move to.

302 Found

The URL of the requested resource has been temporarily changed.
The destination URL is shown in the Location header.
In practice, this is more likely to be used for 303, which has been redefined as 307 and is now deprecated.

303 See Other

Indicates that the requested resource can be retrieved at a different URI.
The Location header indicates the URL to go to.
Used to redirect to a result page in response to a POST from a browser form.

307 Temporary Redirect

Temporary Redirect
This is a redefinition of the 302 due to rampant misuse.
The Location header shows the URL to which the user is redirected.
User agents should not change the HTTP method they use.

308 Permanent Redirect

Permanent Redirects
Redefined due to rampant non-standard usage of 301.
The Location header indicates the URL to go to.
User agents must not change the HTTP method they use.

400 Client Error

400 Bad Request

Bad request
A bad client request, e.g. using a method that is not defined, or with incorrect parameters.
Also used when no other status code is available to indicate a proper client error.

401 Unauthorized

Authentication errors
Wrong ID or password on a page that requires login.
The request does not contain the required Authorization header.
Token expired, corrupted or otherwise invalid.

403 Forbidden

Authorization error
The client is not authorised to access the site, for example, because it is not authorised, and the response from the server is rejected
Used when the server can only be accessed from a specific IP address.
Unlike the 401, the client is still identified.

404 Not Found

The requested resource does not exist.
One of the most common error status codes found on the web.
More information is needed to determine if the URI itself does not exist, or if the resource to be retrieved does not exist.
Sometimes a 404 is returned instead of a 403 to hide the existence of the resource from unauthorized clients.

405 Method Not Allowed

HTTP method not allowed although endpoint exists.
If you try to use POST with a search API that is accessible via GET
If the API prohibits DELETE of a resource.

408 Request Timeout

The request did not complete within the specified time.
Commonly used by Chrome, Firefox and other browsers that use the HTTP pre-connect feature to speed up browsing.
Occurs when the connection speed of the line is slow.

409 Conflict

Occurs when there is a resource conflict
When you try to register a user with an already existing email address or the same ID.
If you try to delete a non-empty directory or rename a resource to one that is already in use.

410 Gone

When the requested content has been permanently removed from the server and there is no forwarding address.
Unlike 404, this means that the content once existed but no longer exists.
Intended for use in limited-time promotions.
APIs that handle user information and return 410 may be considered problematic from the perspective of protecting personal information (the information that the user has deleted is retained ≈ the user has not completely deleted).

413 Payload Too Large

Indicates that the request header or body exceeds the limit set by the server.
The server will either close the connection or send an error message to the server (e.g. if the file upload exceeds the allowed size).
The server will close the connection or return a Retry-After header.

414 URI Too Long

The URI requested by the client is longer than the server can handle.
The server will close the connection or return a Retry-After header.

415 Unsupported Media Type

The server does not support the media type (Content-Type) of the requested data, and the server rejected the request.
XML was sent to an API that only accepts JSON requests, or an attempt was made to upload an image that is not in a supported image format.

429 Too Many Requests

Returned when the number of accesses exceeds the allowed limit.
New status code defined in RFC 6585 in 2012.
A large number of requests have been sent that exceed the rate limit within a certain time period (e.g. an API request limit of 60 requests per minute).

500 Server Error

500 Internal Server Error

Some kind of error occurred on the server side and the response is not normal. -The error message "Something went wrong" is often returned and cannot be resolved by the client. -It is also used when there is no other appropriate error code. -You may be able to find the cause by looking at the server's error log

502 Bad Gateway

-There is a problem with the gateway or proxy.
-The server acting as the gateway has received an invalid response.

503 Service Unavailable

-The server is not ready to process the request.
-The server is down due to temporary heavy traffic or maintenance.
-In the case of maintenance, the Retry-After header can include an estimated restart time (in seconds).

504 Gateway Timeout

-The server acting as the gateway did not receive a response within the specified time.
-This can be a temporary DNS anomaly due to site migration etc.

505 HTTP Version Not Supported

-The server does not support the version of the HTTP protocol requested.
-The current protocol is HTTP/2.
-HTTP/2 Overview | Web Fundamentals | Google Developers

reference

Explanation of HTTP status codes

How to get the id of a dynamic route with Nextjs getServerSideProps

off.tokyo — Sat, 26 Jun 2021 01:08:12 +0000

Things to do

Normally, in order to get the id 1 in Next.js dynamic routing (post/1), you can write the following to get the value.

const { id } = router.query;

How do I get this in getServerSideProps?

export async function getServerSideProps(context) {

You can do the following to get it.


export async function getServerSideProps(context) {
  const { id } = context.query;

Reference.

Dynamic routing with getServerSideProps in Nextjs

How to get the id of dynamic routing with getServerSideProps in Nextjs

How to validate with react-datepicker

off.tokyo — Wed, 16 Jun 2021 02:31:05 +0000

Using react-datepicker, you can easily create a datepicker.

In this article, I'll show you how to validate with react-datepicker.

Specifically, let's consider a situation where you need to enter your date of birth, for example, when registering user information for a web service.

The idea is to use a validation to tell the user that they must be at least 15 years old to register.

How to validate with react-datepicker

First, suppose we have a DatePicker component like the one below, and we use the argument maxDate.

If you have a DatePicker component like the one below, you can use the argument "maxDate" to make it impossible to set a date before ●●●●.

<DatePicker
selected={startDate}
onChange={handleChange}
maxDate={TimeValidation}
/>

Now, let's look at TimeValidation and see what happens.

By specifying 15 years ago (5475 days ago) from today's date, you can only select dates from earlier dates.

For example, if the year is 2021, only people born before 2006 will be able to enter their date of birth.

const initialDate = new Date();

const TimeValidation = initialDate.setDate(initialDate.getDate() - 5475);

That's it.

There are many other arguments that can be used in react-datepicker, so please look into them.

I refer to the following article.

React Datepicker and Timepicker Component with Validation using react-datepicker Example Application datepicker-using-react-datepicker/)

How to validate with react-datepicker off.tokyo

How to register image verification in Stripe Connect | Identity verification for child accounts | Node.js

off.tokyo — Sun, 06 Jun 2021 09:40:08 +0000

Web media for tech lovers | off.tokyo

I started to make a service for skill-sharing in 2020, but it was completely neglected.

But I've recently started developing it again.

It seems that my passion for the market of person-to-person trading hasn't been crushed yet.

Well, that's not really the point...

A lot of code was stuck, and the Stripe area wasn't working anymore.

What I'm trying to do is a C2C service that allows you to verify a user's identity when transferring sales to their account.

I need to verify the identity of the user.

We need the address, the real name, the driver's license and so on.

In this article, we'll show you how to create an image of your driver's license.

Create an image

Create a file

const file = await stripe.files.create({
  purpose: 'dispute_evidence',
  file: {
    data: fp,
    name: 'file.jpg',
    type: 'application/octet-stream',
  },
});

First, we need to send an image file to the server, so we create an image like the one above.

It's like sending an image file, such as a driver's license, to an api, and then using the returned id, hitting another api to request identity authentication.

If you hit the api as above, the id will be returned in the response, so use this.


{
  "id": "file_19yVPOfwefwefwefwefweO",
  "object": "file",

We will use the id, so please save it in a variable somewhere.

Register an identity.

Update an account

This is the main topic of this article, so here's the actual code I wrote.

async function UpdateAccounts(
  stripe_user_id,
  HEAD_ID_STRIPE_IMG, 
  BACK_ID_STRIPE_IMG
) {
  try {
    const account = await stripe.accounts.update(
      stripe_id_get_edit_connect_user,
      {
        individual: {
          verification:{document:{front: HEAD_ID_STRIPE_IMG, back: BACK_ID_STRIPE_IMG } }, 
        },
      },
    );
    console.log("アカウント")
    console.log(account)
  } catch (err) { 
    console.log("エラー");
    console.log(err);
  }
}

Call the above function.

Pass the id of the image file you've just created and the Stripe Connect user's account id as arguments.

We won't be discussing Stripe Connect user accounts in this article.

So, since this is an individual transaction, we'll pass in the id of the image as a string, as described in the individual section.

By the way, this object can also contain an address and a name.

You can find out more about these parameters in the official documentation.

If you hit api in this state, there are only optional parameters in the api definition, so if the object is correct, the api should pass.

Check with Stripe

Now, let's check it out on the Stripe dashboard.

As you can see in the image below, if the dentity document and identity document back are provided, then

I think that the id of the image is correctly sent to the Stripe api.

After that, you can wait for a while to see if your personal information is correctly authenticated or not.

web media for tech lovers | off.tokyo

When using WordPress on Amazon Lightsail, you should be careful about server corruption.

off.tokyo — Sat, 05 Jun 2021 12:46:29 +0000

off.tokyo, the web media for high-tech lovers

Amazon Lightsai has the ability to get WordPress up and running in an instant for about $3.5/month.

There are no cumbersome contracts, no admin screens, and no contracts because you can turn off the instance as soon as it is no longer needed.

It's very convenient and cheap, and I've used it quite a bit to set up multiple WordPress media.

I've been using Amazon Lightsail for a long time now, but I'm thinking that running WordPress on Amazon Lightsail is a bad idea if you're not careful about the risk of the server breaking.

I've been using Amazon Lightsail for a while now, and I've found it to be a great solution for my needs.

I'm not sure if this is a good idea, but I'm sure it's a good idea.

If you keep rebooting the instance over and over again, it will finally break and stop running.

Then you can't even connect to SSH, and you're out of luck.

I've only used Lollipop and X server so far, so I don't know much about other servers, but

I've only used Lollipop and X server so far, and I don't know much about the other servers, but they have their advantages and disadvantages: Lollipop is cheap but heavy, X server is high performance but expensive.

But since both servers did not have the disadvantage of dying and breaking and losing data, I underestimated the risk of such server breakage.

I've ruined one site in the past because of it.

After all, mazon lightsail is cheap, light, and easy to set up, and I'm so used to it that I can't be bothered to go with another service.

I think I'll continue to use it in the future if it doesn't break too much in normal use (I don't know), but

I'm not sure if I'll continue to use it in the future if it doesn't break too much, but I'm sure I will.

If your server breaks and you can't get your instance up, it's over.

How to receive images with the node.js API | fetch , React

off.tokyo — Tue, 01 Jun 2021 08:18:41 +0000

How to receive images with the node.js API | fetch , React - off.tokyo, the web site for high-tech enthusiasts

what i did

The front side is built with React, and the form data is sent to the api by post using JavaScript fetch.

Then, the api receives the form data and saves the data to the server.

To edit the user's information, imagine that the user has to register his name and driver's license (back and front) with the service, and look at the code.

node.js console.log

In the following log, the form data created on the front side is received by post to get the data contained in the request.

At first, I couldn't get the image in the body of the request, so I looked at the log of various requests, and found that the files contained image data.

console.log("use_info")
console.log(JSON.parse(req.body.use_info))

console.log("img_head")
console.log(req.files.img_head)

console.log("img_backkうううううう")
console.log(req.files.img_back)

Front-side implementation fetch

This is the code to post the user's name and image to the api on the front side.

The user data and image data are added by using FormDate and appending to it.

var userData = new FormData()
userData.append('use_info', JSON.stringify(Formdata))
userData.append('img_head', Formdata.fileBack["0"])
userData.append('img_back', Formdata.fileBack["0"])

fetch(`${API_URL}/edit_connect_user`, {
method: 'POST',
body: userData
})

Server-side logs

The following code is the log of the form data thrown from the front side by post.

I think it contains the user's name and image data like this.

use_info
{
firstName: 'Pamyu Pamyu ',
lastName: 'Kyary',
userid: 'fekw020'
}
img_head
{
name: 'img_head.png',
data: ,
size: 9808,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'c28358700f3c94f841c7f7fad50596da',
mv: [Function: mv]
}
img_backk
{
name: 'img_backk.png',
data: ,
size: 9808,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'c28358700f3c94f841c7f7fad50596da',
mv: [Function: mv]
}

How to receive images with the node.js API | fetch , React - off.tokyo, the web site for high-tech enthusiasts

What is logical deletion and physical deletion?

off.tokyo — Mon, 17 May 2021 07:47:57 +0000

What is logical deletion and physical deletion? | off.tokyo

What is logical deletion?

Logical deletion is the process of not actually deleting the data,

but setting a column called "flag" to make it appear as if the data has been deleted to the user.

For example, if you have a tweets table

For example, if you have a tweets table, you can add a boolean column called deleted_flag to the table.

In this state, the default value of the deleted_flag column is null.

In this way, when a user presses the delete button of a tweet,

the deleted_flag will be set to 1, and the tweet will be treated as deleted.

Physical Deletion

A physical deletion is an actual deletion in SQL,

and is also deleted from the database.

Therefore, you can't restore or refer to the deleted data.

Advantages of Logical Deletion

As mentioned in the previous example,

it only acts as if the data has been deleted, so it is possible to restore the data immediately.

Another advantage of logical deletion is that it is faster than physical deletion.

Disadvantages of logical deletion

You don't want to create NUll data in the database.

(I think this can be solved somehow, though.)

It is necessary to add a flag condition when

performing a narrowed search with a where clause.

About redux-saga/effects put, call, take, select

off.tokyo — Sun, 16 May 2021 00:52:59 +0000

This time I used call, fork, put, take, and select.

call: Wait for the promise to finish. The argument should be a function that returns a promise.
fork: Start another task. The argument can be an asynchronous function starting with *function*.
put: Dispatch an action.
take: wait for an action, an event to occur, and take as argument a string that is not a function of the action, but an action.type.
select: select data from a state, taking a function that takes a state as an argument.

When importing, use


import { call, fork, put, take, select } from 'redux-saga/effects'.

Write something like

Here is a sample code



function* callSample(){
    const { result, err } = yield call(getData) 
    if(result){
        console.log(result)
    } else {
        console.error(err)
    }
}

const getData = () => {
    return axios.get('./get')
        .then( res => {
            const result = res
            return {result} 
        })
        .catch( err => {
            return {err}
        })
}

If you give an argument to a function that returns a promise in call, it looks like this


function* callSample2(){
    const data = {
      name: 'hoge',
      password:'huga'
    }
    const {responce, err} = yield call(postData(data))
}
const postData = (data) => {
    return axios('./post')
        .then( () => { /*something*/ }
        .catch( () => { /*something*/ }
}

The fork is a branch of the root task, and the process is written.


//fork sample
export default function* rootSaga(){
    yield fork(forkSample)
}
function* forkSample(){
   //processing
}

Put is used to dispatch actions according to the results of other asynchronous processes.


//put sample
function* putSample(){
    const { result, err } = yield call(getData) 
    if(result){
        yield put(get(result))
    } else {
        console.log(err)
    }
}

Take will be executed when dispatched from elsewhere.



function* takeSample(){
    while(true) {
        const action = yield take("ADD")
    }
}



function* selectSample() {
        const state = yield select(getState)
    }
}


const getState = (state) => ( state )

About CSS Grid Layout

off.tokyo — Sun, 09 May 2021 00:57:36 +0000

The 2017 macOS and iOS updates include a version of Safari that implements the CSS Grid Layout Module,

which is finally available in all modern browsers.

It's a very flexible and intuitive way to represent grids. In today's post, I'd like to study this again.

(Note that this article is based on a Japanese article and only the necessary points have been translated.

https://qiita.com/morishitter/items/738488290451555d913c

Defining the Grid

When you want an element to be laid out in a grid, you need to specify display: grid or display: inline-grid for its parent element.

This parent element is called the grid container, and the child elements to be grid-layout are called grid items.

The grid container can have the properties grid-template-column and grid-template-row.

Each of these specifies the size of the grid in columns and rows, in terms of the number of columns and rows.

Example: A grid with 3 rows and 5 columns

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Properties that can be specified for the grid container

grid-gap

To be precise, grid-gap is a short-hand for grid-column-gap and grid-row-gap.

It specifies the margin between columns and rows between grid items.

Example: 10px margin for columns, 15px margin for rows

.container {
  grid-gap: 10px 15px;
}

justify-items, align-items, justify-content, align-content

These are the same properties used in Flexbox layouts. They are not part of the Flexbox specification,

but are part of the Box Alignment Module, which can also be used for grid containers.

These properties are used to align grid items, and are not new to CSS Grid, so their usage is omitted.

grid-template-areas

This property allows you to give a name to a grid item. You don't need to learn how to use it.

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

The way it is written is very weird

. is specified for an empty grid.

Properties that can be specified for grid items

This section describes the properties that can be specified for grid items,

which are children of the grid container. Note that float, clear, and vertical-align do not apply to grid items.

grid-column, grid-row

grid-template-column and grid-template-row define the grid, and it is these properties that determine which elements are placed where.

To be precise, grid-column is the shorthand for grid-column-start and grid-column-end, and grid-row is the shorthand for grid-row-start and grid-row-end.

There is also grid-area, which is a shorthand for grid-column and grid-row, but it's easier to just use grid-column and grid-row.

These properties specify gridlines (sometimes called Line-based Placement).

grid-column specifies the start and end lines of a column, grid-row specifies the start and end lines of a row.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
}

.item-a {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item-b {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

justify-self, align-self

This was also present in the Flexbox layout. This property aligns the specified grid items.

An aside

"Grids" have always been possible using <table> tags, floats, display: inline-block, display: table, Flexbox, etc. However, with the creation of the CSS Grid specification, it is now possible to create grids without using a preprocessor mixin or a grid framework. However, there is now a specification for grids called CSS Grid, which allows you to create grids without using a preprocessor mixin or a grid framework. In my opinion, the biggest benefit of using CSS Grid is that you can write display: grid to represent a grid and put your design intent into your code. Also, it's easier to remember CSS Grid properties if you are aware of which properties are for the grid container and which are for the grid items, as in the case of Flexbox.

Incidentally, there is also a value called display: subgrid, which is used to turn a grid item into a grid container and its children into a grid layout, but this has been moved to the Level 2 specification and is currently not implemented outside of Firefox. In the future, it is better to use CSS Grid to represent grids, and Flexbox for layout within components.

source

https://off.tokyo/blog/about-css-grid-layout/

Writing Iterator and Generator using JavaScript

off.tokyo — Sat, 01 May 2021 04:29:33 +0000

source : Writing Iterator and Generator using JavaScript | off.tokyo

Iteration is the foundation of programming. The degree to which a programming language helps you iterate makes a big difference in your programming comfort.

JavaScript has been a lagging language when it comes to iteration. However, with the introduction of Iterator and Generator, this is about to change.

Iterator

Itreable and Iterator

In JavaScript, an object that can be iterated over is called an iterable, and typical examples of iterables are Arrays and Maps. A typical example of an Iterable is an Array or Map, which is iterable because it has multiple values.

An Iterable object has an Iterator, which can be obtained with IterableSymbol.iterator.

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

Iterator has only one method, next(), which can be used to retrieve the next value in an Iterable.

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

The value obtained by next() is an object that is {value: the next value, done: whether it has finished or not}.

By checking the value of value, we can get the value of Iterable.

By checking the value of value, we can get the value of the Iterable, and by checking the value of done, we can get the value of the bool to see if the iteration has finished or not.

In other words, the above code can be rewritten using a loop as follows

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

let next = iterator.next();
while(!next.done) {
  console.log(next.value); // 1 2 3
  next = iterator.next();
}

Iterator is a smart way to write iterations.

However, this is still cumbersome. Therefore, javaScript provides a simpler way to write Iterator iteration.

The for-of statement

The for-of statement is the easiest way to handle an Iterable.

Rather than explaining it in words, it will be easier to understand if you look at the code first.

const array = [1, 2, 3];

for(const val of array) {
  console.log(val); // 1 2 3
}

Creating your own Iterators and Iterables

It is also possible to create your own Iterators and Iterables.

Creating an Iterator is as simple as implementing a next() method that returns {value, done}.

Iterable is also a simple matter of implementing Symbol.iterator.

For example, let's consider implementing the range() function.

The functions to create an Iterator and an Iterable look like the following

function createRangeIterator(end) {
  let currentValue = 0;
  const iterator = new Object();

  iterator.next = () => {
    const value = currentValue++;
    const done = currentValue > end;
    const result = done ? {done: done} : {value: value, done: done};
    return result;
  };
  
  return iterator;
}

function range(end) {
  const iterable = new Object();
  iterable[Symbol.iterator] = () =>  createRangeIterator(end);
  
  return iterable;
}

for(const val of range(3)) {
  console.log(val); // 0 1 2
}

Since the Iterator mechanism is simple, it is easy to create your own.

Generator

Generator function and yield return

Even though the Iterator mechanism itself is simple, the actual implementation is quite lengthy. Of course, there are excellent programmers who can read and write this code easily, but it is difficult for most people to do so.

The Generator provides a very easy way to work with Iterators and Iterables, allowing you to automatically iterate over them with simple code.

To use the Generator, use function* instead of function, and yield instead of return. To use Generator, use function* instead of function,

and yield instead of return. This is all you need to complete the Generator. Here, the function defined by function* is called the Generator function.

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

for(const val of generator()) {
  console.log(val); // 1 2 3
}

The Generator function returns a Generator object.

The Generator object is an Iterable and an Iterator object.

The generator object is both an Iterator and an Iterator object, and can be used as an Iterator, such as generator.next().value, or as an Iterable, such as using for-of to retrieve a value.

When next() is called, the Generator function will stop and return the yielded value each time it is yielded.

When next() is called again, it resumes function execution and proceeds to the next yield.

The Generator behaves like an Iterator by repeating this process.

yield* to yield an Iterable

You can also use yield* instead of yield to automatically yield the contents of an Iterable one by one.

function* generator() {
  yield* [1, 2, 3];
}

for(const val of generator()) {
  console.log(val); // 1 2 3
}

Saving the Context

yield and yield* preserve the context of the function. This means that the values of variables in the function will be preserved. As a concrete example, you can write a generator like the following

function* generator() {
  for(let i=0; i< 3; i++) {
    yield i;
  }
}

for(const val of generator()) {
  console.log(val); // 0 1 2
}

By using this, for example, the previous range function can be easily written as follows

function* range(end) {
  for(let i=0; i < end; i++) {
    yield i;
  }
}

for(const val of range(3)) {
  console.log(val); // 0 1 2
}

I was able to write it much more easily.

Summary

Iterable objects are Iterable
Iterable objects have an Iterator.
Iterable can be easily iterated by using for-of statement
Iterator and Iterable can be created by oneself.
Iterables can be easily created using the Generator.
Generator is both an Iterable and an Iterator
Generator is both an Iterable and an Iterator ・Yield can be used to return the next value
The generator is an Iterable and an Iterator.
The context is preserved even if the function is temporarily exited by yield.

＊This article is a summary of the Japanese article with only the main points explained in an easy-to-understand manner.

https://sbfl.net/blog/2016/08/17/javascript-iterator-generator/

Understanding JavaScript iterators

off.tokyo — Fri, 30 Apr 2021 04:24:09 +0000

source : Understanding JavaScript iterators

Iterators and generators are a big feature of ECMAScript 6 (released in June 2015 and still relatively new to JavaScript).

And It's a huge, complex system, and complicated.

So In this article, I'd like to explain iterators in a way that you can understand them step by step.

What is an Iterator Result?

An iterator is an object from which iterator results can be retrieved in order.

Specifically, an object that satisfies the following two points is called an iterator.

It must have a .next() method
When .next() is executed, it returns the iterator result.

In other words, in the following code, iterator is an iterator.

var iterator = {}; 
iterator.next = function(){
    var iteratorResult = { value: 42, done: false };
    return iteratorResult;
};

Here, in the code above, we see an iterator result called iteratorResult.

As you can see, the iterator result is an object and has the .value and .done properties.

The role of each property is as follows

The .value property is the value (item) retrieved from the iterator.
The .done property is a boolean value indicating whether or not the value has been sequentially extracted from the iterator.

What is Iterable?

An iterable is an object that has an iterator.

To be more specific, an object is said to be iterable if it satisfies the following

When the [Symbol.iterator]() method is executed, it should return an iterator.

In other words, in the following code, obj is iterable.

var iterator = {}; 
iterator.next = function(){
    var iteratorResult = { value: 42, done: false }; // イテレータリザルト
    return iteratorResult;
};

var obj = {}; 
obj[Symbol.iterator] = function(){
    return iterator;
};

An object that is iterable is also called an iterable object.

This relationship is shown in the figure below.

(Sorry for the Japanese, please just read and understand the English part.)

Create an iterable object.

As a simple example, let's create an iterable object with an iterator that can fetch the numbers 1 through 10 in order.

var obj = {}; // iterable object
obj[Symbol.iterator] = function(){
    var iterator = {}; // iterator
    var count = 1;
    iterator.next = function(){
        var iteratorResult = (count <= 10)
            ? { value: count++, done: false }
            : { value: undefined, done: true };
        return iteratorResult; // iterator result
    };
    return iterator;
};

The current value is stored in the variable count, and each time .next() is executed, the value is counted up and returned in .value.

When count exceeds 10, we set .done to true to indicate that we have finished retrieving the values in order.

Now we have an iterable object with an iterator that can fetch the numbers 1 to 10 in order.

Extract values from iterators in order

Let's extract the values from the iterator we just created in order and output them to the console.

We will use the property that .next() can be used to retrieve the iterator result.

var obj = {}; // iterable object
obj[Symbol.iterator] = function(){
    var iterator = {}; // iterator
    var count = 1;
    iterator.next = function(){
        var iteratorResult = (count <= 10)
            ? { value: count++, done: false }
            : { value: undefined, done: true };
        return iteratorResult; // iterator result
    };
    return iterator;
};

var iterator = obj[Symbol.iterator](); // get the iterator from an iterable object
var iteratorResult;
while(true){
    iteratorResult = iterator.next(); // retrieve the values in order
    if(iteratorResult.done) break; // break when finished fetching
    console.log(iteratorResult.value); // output the value to the console
}
/* 1
  1
  2
  3
  ...
  10
*/ ...

Now, we can extract the values from the iterator in order.

However, this is code that can be written in ECMAScript 5, and the way it is written is unnecessarily complicated, so You migthj don't see much benefit in it.

The reason why iterators are so useful is that you can use the for(v of iterable) syntax to get the values more easily.

Easier to extract values from iterators

A convenient syntax provided for extracting values from an iterator is for(v of iterable).

var obj = {}; // iterable object
obj[Symbol.iterator] = function(){
    var iterator = {}; // iterator
    var count = 1;
    iterator.next = function(){
        var iteratorResult = (count <= 10)
            ? { value: count++, done: false }
            : { value: undefined, done: true };
        return iteratorResult; // iterator result
    };
    return iterator;
};

for(var v of obj) console.log(v);
/*
  1
  2
  3
  ...
  10
*/ ...

This syntax, for(v of iterable), executes the following steps in order.

First, execute iterator = iterable[Symbol.iterator]() to get the iterator. ↓ Next, execute iteratorResult = iterator.next() to retrieve the iterator result. ↓ If iteratorResult.done == true, iteratorResult.done has been retrieved and quits. Otherwise, go to next. ↓ Assign v = iteratorResult.value and execute the statement (console.log(v)). ↓ Next, execute iteratorResult = iterator.next() to retrieve the iterator result.

Iterable objects prepared from official

By using for(v of iterable), It was able to write much smarter code.

However, the part that defines the iterable object is very long.

In fact, there is an iterable object that is already provided in JavaScript,

without having to define it yourself.

Related to Arrays

First, the array itself is an iterable object.

var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
for(var v of obj) console.log(v);
/*
  "A"
  "B"
  "C"
*/

To check, let's see if the array is an iterable object with the properties we have raised so far.

var obj = ["A", "B", "C"]; // iterable object
var iterator = obj[Symbol.iterator]();
console.log(typeof iterator); // "object". We are indeed getting an iterator.
console.log(iterator.next()); // { value: "A", done: false }

Arrays also have a .keys() method that allows you to get an iterator to retrieve the array keys in order.

var obj = ["A", "B", "C"]; // iterable object
for(var v of obj.keys()) console.log(v);
/*
  0
  1
  2
/* 0 1 2

Arrays also have the .entries() method, which allows you to retrieve an iterator that fetches an array of keys and values in sequence.

var obj = ["A", "B", "C"]; // iterable object
for(var v of obj.entries()) console.log(v);
/*
  [0, "A"]
  [1, "B"]
  [2, "C"]
*/ [0, "A"] [1, "B"] [2, "C"].

String

A string object is also an iterable object.

It can be used to extract characters one by one from the beginning of a string.

var str = "あいう";
for(var v of str) console.log(v);
/*
  "あ"
  "い"
  "う"
*/

To check, let's see if the string is also an iterable object with the same properties as we have mentioned so far.

var str = "あいう";
var iterator = str[Symbol.iterator]();
console.log(typeof iterator); // "object"
console.log(iterator.next()); // { value: "あ", done: false }

Iterators

The iterators provided in JavaScript are actually iterable objects in their own right.

Therefore, executing the Symbol.iterator method will return itself.

var obj = ["A", "B", "C"]; // イテラブルなオブジェクト
var iterator = obj[Symbol.iterator](); // イテレータを取得する
for(var v of iterator) console.log(v); // for-of にイテレータを渡す
/*
  "A"
  "B"
  "C"
*/

console.log(iterator === iterator[Symbol.iterator]()); // true

Generators

Generators, which are created by generator functions, are both iterable objects and iterators.

Generators are also a very rich mechanism, which will be explained in another article.

function* gfn(n){
    while(n < 100){
        yield n;
        n *= 2;
    }
}
var gen = gfn(3);
for(var v of gen) console.log(v);
/*
  3
  6
  12
  24
  48
  96
*/

Other stuff

There are also various other iterable objects.

Arguments

// Firefox 40 dose not work
function func(){
    for(var v of arguments) console.log(v);
}
func(42, "あ", true);
/*
  42
  "あ"
  true
*/

TypedArray

var view = new Uint8Array([0, 1, -1]);
for(var v of view) console.log(v);
/*
  0
  1
  255
*/

Map

var map = new Map([[0, "Zero"], [{}, "Object"], [[], "Array"]]);
for(var v of map) console.log(v);
/*
  [0, "Zero"]
  [{}, "Object"]
  [[], "Array"]
*/

Set

var set = new Set([0, {}, []]);
for(var v of set) console.log(v);
/*
  0
  {}
  []
*/

There's more! How to use iterators

We used an iterator with the syntax for(v of iterable).

Actually, there are many other ways to use iterators.

Array

[... .iterable] syntax.

From iterable, you can create an array in which the values are extracted in order and the number of elements are placed in the corresponding part.

var ary = [0, "A", false];
var str = "あいう";
var connectedAry = [...ary, ...str];
console.log(connectedAry);
/*
  [0, "A", false, "あ", "い", "う"]
*/

You can also use the syntax Array.from(iterable) to do the same thing.

var str = "あいう";
var ary = Array.from(str);
console.log(ary); // ["あ", "い", "う"]

Argument passing

The syntax is func(. .iterable) syntax.

The values are taken out of iterable in order, and the function is executed so that the number of arguments are placed in the corresponding part.

var nums = [112, 105, 121, 111];
console.log( Math.max(...nums) ); // 121
console.log( String.fromCharCode(...nums) ); // "piyo"

Split Assignment

The syntax is [a, b, c] = iterable.

The values are taken out of iterable in order and assigned to the variables on the left side in order.

var [a, b, c] = "ひよこ";
console.log(c+b+a); // "こよひ"

Map, Set, WeakMap, WeakSet

The syntax is new Map(iterable), new Set(iterable), new WeakMap(iterable), new WeakSet(iterable).
Each iterable takes a value in turn, and the keys and values can be specified.

var set = new Set("あいうあお");
console.log(set); // Set {"あ", "い", "う", "お"}

var map = new Map(["A", "B", "C"].entries());
console.log(map); // Map {0 => "A", 1 => "B", 2 => "C"}

Practical sample

This is an application of the previous content.

Output array elements one by one to the console.

var ary = [0, 5, 9, 2, 7];
for(var v of ary) console.log(v);
/*
  0
  5
  9
  2
  7
*/

Copying an array

var ary0 = [1, 2, 3];
var ary1 = [...ary0];
console.log(ary0.join() === ary1.join()); // true
console.log(ary0 === ary1); // false

Assigning the first element of an array

var ary = ["A", "B", "C"];
var [first] = ary;
console.log(first); // "A"

Assign the first character of a string

var str = "ABC";
var [first] = str;
console.log(first); // "A"

Remove duplicate values from an array

var ary = [0, 5, 9, 0, 2, 5];
var uniqueAry = [...new Set(ary)];
console.log(uniqueAry); // [ 0, 5, 9, 2 ]

Pass variable length arguments to functions without using .apply()

var nums = [112, 105, 121, 111];
console.log( Math.max(...nums) ); // 121
console.log( String.fromCharCode(...nums) ); // "piyo"

Assign the matched and partially matched characters all at once.

var [all, part] = "abcde".match(/ab(.)de/)
console.log(all, part); // "abcde", "c"

＊This article is based on the Japanese article below and has been translated into English for easier understanding.

https://qiita.com/kura07/items/cf168a7ea20e8c2554c6

Understanding Javascript window object

off.tokyo — Sun, 25 Apr 2021 05:41:23 +0000

What is the window object?

Window is the main JavaScript object root, aka the global object in a browser,

Also can be treated as the root of the document object model.

You can access it as window

What is the difference between window, screen, and document in Javascript?

In other words, in simple terms, you can use these to control your browser.

Let's actually use the browser's console to control the browser in various ways.

window.alert('hello,world');

The functions and objects prepared in advance in JavaScript are all properties of the window object.

window.document, which is used to retrieve and manipulate HTML data,

and window.location, which stores information such as URLs, are all properties of the window object.

This is because information such as HTML and URLs is information that the browser window has.

// Move to Your_Name Wiki
window.location.href('https://en.wikipedia.org/wiki/Your_Name');

Omitting the window object

The window object is handled in a special way in JavaScript,

and the window can be omitted when accessing the window object's properties.

In other words, window.alert can be written simply as alert.

alert('hello,world');

This is a special rule only for the window object, and it is a rule like this.

Here are the main objects in the properties of the "window" object.

document The document object is mainly used to retrieve and manipulate HTML documents.
location ---- URL information An object to get or change the URL information of the displayed page.

Example 1- Getting the URL

var url = location.href;
document.write(url); //=> Write out the URL of the currently displayed page

Example 2- Change the URL to the assigned value

location.href = "http://test.jp"

history --- history management The history object manages the history. The main properties are summarized below.

length : the number of pages in the history 5
back : Go back to the previous page (function without return value)
forward : Go to the next page.

For example, the usage of "history.back" ↓

// go back to the previous page
history.back();

navigator --- Browser Metadata

The navigator object is an object used to handle metadata about the browser type and version.
The most commonly used one is "navigator.userAgent".

That's how it is.

This article was adapted from this article in Japanese.

windowオブジェクト

source : Understanding Javascript window object | off.tokyo