DEV Community: Dahye Ji

How to access to dynamically created DOM elements - Event delegation/Event bubbling/Event propagation

Dahye Ji — Wed, 29 Jun 2022 17:08:18 +0000

While I was working on my project, I needed to get an access to elements that are created dynamically. Because I wanted to implement social media app that user can create posts, edit and delete. But I faced a problem. Because dynamically created elements can't be selected the way I did normally. If I was going to select a DOM element, I would use either querySelector or getElementById and something like that. Then I will add an event listener to interact. But because they are dynamically created, it does not exist in the html in the beginning. It gets created by JavaScript and gets added after.
So you will find an error saying that element doesn't exist.
Or this will throw an error of addEventListener of null.

When the user enters to the website it will download, read, execute files like html, css and JavaScript. But on page load, dynamically created DOM elements are not there yet. It will be created and be seen when the browser receives the data from API/server or when user writes a new post(because the post only gets created when there’s data) and that's after the initial page load.

Then how can I select those elements so that I can interact with them?
I solved this problem with event delegation. I wasn't really sure how to work with this when I only learnt the theory.
But it became more clear how it works when I actually used this to solve the issue I had.

Event Propagation / Event Delegation / Event Bubbling

What is Event Propagation?
"Event Propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive its target and what happens to it afterward."(https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php)

Event Delegation - is a special way to handle events, in which an event handler of the parent of an element handles events for that element. This is a way of taking advantage of event bubbling.
Document events or document element events bubble up the DOM tree and they trigger event handlers of its ancestors. For example, if an event happens by clicking <li>, a child node of <ul>, this event will be propagated to <ul>, the parent node which means parent node can detect the events that happened to their children. (And also, child node can detect the event that happened to their parents as well.)
So, the event bubbling provides alternative way to handle events.

The image below shows you how event propagate -
click on <td> inside a table, taken from the specification:

Source -https://javascript.info/bubbling-and-capturing

The standard DOM Events describes 3 phases of event propagation:
Capturing phase – the event goes down to the element.
Target phase – the event reached the target element.
Bubbling phase – the event bubbles up from the element.

So, the event propagates through the DOM tree, which means we can catch the target within the DOM tree not only the selected target.
But if you want to stop event being propagated, then use event.stopPropagation()

How I solved my issue using event delegation.

// 이벤트 위임 - 상위요소에 이벤트를 주면 하위요소까지 다 접근 가능!
const app = document.querySelector("#app");
// 모달 버튼 & 좋아요 클릭 핸들링 
let commentClickedIndex;
let isMyComment = false;
const handleDomClick = (event) => {
  const clickedBtn = event.target;
  if(clickedBtn.classList.contains("setting-logout-btn")){
    openModal(clickedBtn);
  } else if(clickedBtn.classList.contains("post-edit-btn")){
    openModal(clickedBtn);
  } else if(clickedBtn.classList.contains("comment-edit-btn")) {   
    const buttons = document.querySelectorAll(".comment-edit-btn");
    const index = [...buttons].indexOf(clickedBtn)
    commentClickedIndex = index;
    commentAuthorId = commentsListArr[index].author._id;
    // 클릭한 댓글이 내가 쓴 댓글인 경우
    if(commentAuthorId === userId) {
      isMyComment = true;
      openModal(clickedBtn);
    } else {
      isMyComment = false;
      openModal(clickedBtn);
    }
  } else if(clickedBtn.id === "likebtn") {
    applyLike(clickedBtn);
  }

}
app.addEventListener("click", handleDomClick)

The code above is some part that used for my project. I wanted to be able to add events to different elements inside my app since I created what's inside "app" dynamically. so I used event listener to the most outer element which is an *app then checked if it contains certain class to know what that element is exactly, to do specific things for each element.

** There are exceptions for event bubbling.

The following document element events don't bubble up: focus, blur, scroll, load/unload and mouse event(mouseenter, mouseleave)

Using Git / GitHub for beginners (Collaborating on GitHub for a team project)

Dahye Ji — Tue, 22 Feb 2022 10:14:59 +0000

I've been working for a team project lately and I faced some problems while working because it was the first time working with other people for me and also I didn't know how to use Git/GitHub for a team project. I am sure there are or will be some people might struggle like I did. So I thought it would be good to share what I've learnt.
So, here are a few things I learnt about.

What is branch? How do I make my own branch to work on?

So, if you haven't worked with other people or if you are not so familiar wit GitHub, you might not have worked on a branch. That was exactly me. I was just pushing my code, all of them to main branch. However, if you are working on a team project, you definitely will be working on your or specific branch depends on what you do. In our project, we made a branch for each person and depending on a function or for improvement, we created new branches and worked there.
The reason that we do this is because if we work on the same branch, the code that I write will effect on other people's code but if we work on different branches, they don't effect on other branches and lots of people can work for one project together at the same time and later we can merge those changes on to the main branch.
Important Always check which branch you are on before commit or push to avoid pushing your code to the main directly or to wrong branch.

git commands

// Create branch
$ git branch <branchname>

// E.g - Create a branch named feature#10
$ git branch feature#10

// Check current branch
$ git branch

// Change branch
$ git checkout <branchname>

// e.g) Go to a branch named feature#10
$ git checkout feature#10
(Switched to branch 'feature#10')

// Create and checkout to that branch at once
$ git checkout -b <branchname>

// e.g) Create a branch named issue5 and go to a branch 
$ git checkout -b issue5

// Delete branch
$ git branch -d <branchname>

What does it mean when somebody tells me to send a pull request?

If you send a pull request, GitHub lets other people know about changes you've pushed to a branch so you and your teammates can review and discuss about those changes.
Creating a pull request is very easy.
When you push a new code to a branch, a message appears like this.

Click the Compare & pull request button!

Then you can choose from which branch you’d like to merge to a main branch.
Check if it’s selected right branch(the branch you worked on)
Also you can leave a message about changes you've made or a comment that you want your teammates to read.
When it’s done, click the Create pull request button down below on the right-hand corner.

If you see this page, this means you’ve created your pull request! and your teammates will get the notification and will see the comment you left with your pull request.
Also, if you have an authority to merge, you will be able to merge by clicking Merge pull request as well.

How can I apply those changes if things are added or something changes on main branch while I am working on other branch?

When I tried to commit and push my code to the branch I was working, it didn't work. The reason it didn't work was because someone merged their code to the main branch and something has changed from the main code that I had on local branch(what I currently have on my computer). So I tried to pull the main code but it said "Already up to date"
However, there were definitely changes. I found this solution by searching and this was the blog post that helped me to understand.
rebase vs merge

As it's name itself, rebase means re-base. It changes the base of the branch. So when you write the command git rebase main, it moves the base of the main that has older code to the most recent main which is recently updated main on GitHub.

git commands

$ git rebase main

Article ot read: Merging vs. Rebasing by Atlassian

I tried to send pull request / merge but github says there are conflicts and I don't know how to fix this.

Then why conflicts happens?

Conflicts generally arise when two people have changed the same lines in a file, or if one developer deleted a file while another developer was modifying it. In these cases, Git cannot automatically determine what is correct. ... Git will mark the file as being conflicted and halt the merging process.
Source

So, this happened me as well. I tried to send the pull request and got a message like this
Source - GitHub
When you click Resolve conflicts button,

You will be sent to a page like above and you can see codes that are repeated and things with conflicts.
You can manually change/edit the code there and when you are done, click Mark as resolved button on the right-hand side on the top.
This changes will be applied and you will see the checked icon in green like below image.

When you solve those conflicts then you can send pull request like you did before!

Applying changes when I delete file

When you type git command git add . this will add all the changes to the stage(staging is what you are doing before commit. You cannot commit without staging. So, you have to add the file(do the staging) that you changed or created whatever that you'd like to commit and push to the branch. Then you can go to the next step which is git commit). However, I didn't wanted to add all the changes and I was adding those changes one by one by using command git add <filename> since I wanted to stage a few selected files only.

Adding a file

// e.g) if you'd like to add a file named "modal.js" that is in the components directory,
$ git add /components/modals.js

But this doesn't include changes about deleted file and I wanted to add that as well. This command will add that as well.

Include deletion to the stage (deletion will be staged which deletes the file from the branch)

$ git add -u

Also I sometimes mistyped and wanted to cancel git add or commit that I made.

undo git add or git commit that was made.

// cancel all staging. this will delete everything from staging area.
$ git add *

// delete specific file from staging area
$ git reset HEAD <filename>

// undo git commit
$ git reset HEAD^

// change commit message before it's pushed (when it's still in local)
$ git commit -amend
// after it's edited, click esc and type :wq (this will save and close the tab)

// you can check the current status - which files or directories are staged or committed.
$ git status

How to sync(update) forked repository with the original repository to keep it up to date?

My team project was at my teammate's GitHub so I wanted to have it on my GitHub as well. So I forked the repository it didn't change the code from the time that I forked. I wanted to sync and update it to the latest version we had.

First, clone the forked project and go to the folder(directory) where the project is.

$ git clone <forked repo url>
$ cd <directory(folder) where the cloned project is>
// for example if it's in the project folder
// cd project

Next, add git remote to the original repo

$ git remote add upstream <original repo url>

If you added the remote, check if it's applied correctly.

$ git remote -v

Now, you have to get the latest updates from upstream repo which is the original repo

$ git fetch upstream

Then merge this latest version to my forked repo

$ git merge upstream/main

Lastly, push the updates to my GitHub, then my forked repo will be updated to the lated version.

$ git push

Errors I dealt with in Next.js - styled components, pages, types

Dahye Ji — Thu, 23 Dec 2021 14:53:32 +0000

1. Warning : Props 'className' did not match Server: ' ' Client: ' '

I wanted to add styled components so I installed styled-components

yarn add styled-components

and added this code below in package.json

  "resolutions": {
    "styled-components": "^5"
  }

(The code above was recommended if you use a package manager like yarn that supports the "resolutions" package.json field)
and then I imported styled-components and used it.

import styled from "styled-components";

export const StyledLink = styled.a`
  border: none;
  padding: 0.8rem 1.4rem;
  margin: 1rem;
  cursor: pointer;
  background-color: #2b2b2b;
  color: white;
  border-radius: 2rem;
  font-weight: 600;
  &:hover {
    background-color: #fc4961;
  }
`

like these and but then I got an error saying Warning : Props 'className' did not match Server: ' ' Client: ' ' what it means is it literally doesn't match the className in Server side and in Client side. So, Next.js does SSR first and then CSR partially. The class name doesn't match when it renders and that's why it happened. So to solve this problem, I installed babel-plugin-styled-components

yarn add --dev @types/styled-components babel-plugin-styled-components

and added babelrc in the root of project directory. Then added this code below

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "babel-plugin-styled-components",
            {
                "fileName": true,
                "displayName": true,
                "pure": true
            }
        ]
    ]
}

But then I found that I can import { ServerStyleSheet } from 'styled-components';
I think I might have to redo it.
Links I read:
https://stackoverflow.com/questions/51791163/warning-prop-classname-did-not-match-when-using-styled-components-with-seman
https://sumini.dev/guide/004-nextjs-typescript-styled-components/
https://velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98

Then I got another Error... It was okay when I checked my code through live server but when I deployed them, It kept failing.

2. Build optimization failed: found page without a React Component as default export in pages/styledComponent/styles

But I didn't carefully read those error massages. Only read those lines marked in red and was wondering why it kept failed.

I read the messages line by line then found these Build optimization failed: found page without a React Component as default export in
pages/styledComponent/styles

Link that helped my problem: https://stackoverflow.com/questions/65598753/cant-build-react-next-project-found-page-without-a-react-component-as-default/65598867
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
My styled-components file was within pages directory... which it shouldn't have been. So I moved it to other directory and it worked fine.

3. Error: Do not use the HTML `<a>` tag to navigate to /beers/ale/. Use Link from 'next/link' instead.

I used <a> tags to link pages and had this problem. So I checked Next.js documentation and added Links like this way

import { NextPage } from "next";
import Link from "next/link";

const BeerPage: NextPage = () => {
    return (
        <div>
            <h1>Beers Page</h1>
            <p>
                <Link href="beers/ale">
                    <a>Ale</a>
                </Link>
            </p>
            <p>
                <Link href="beers/stouts">
                    <a>Stouts</a>
                </Link>
            </p>
            <p>
                <Link href="beers/red-ale">
                    <a>Red Ale</a>
                </Link>
            </p>
        </div>
    )
}

4. Warning: passHref is missing.

Then I had these messages when I deployed.

I didn't like the long code repeating and also didn't like the messages so I looked up documentation again... so I wanted to add passHref so that I can get rid of those messages.
https://nextjs.org/docs/messages/link-passhref

import Link from "next/link";
import { StyledLink } from "./styles";
import styled from "styled-components";

const NavLink = ({ href, name }) => {
    return (
        <Link href={href} passHref>
            <StyledLink>{name}</StyledLink>
        </Link>
    )
}

export default NavLink;

Then I had red lines on href and name and that was because they didn't have types.
So, I added types and imported in NavLink

export interface Links {
    href: string,
    name: string,
}

I solved problems I had but I wanted to make code simpler and using NavLink, depending on links I wanted to change styling as well. So This is how refactored my code.

NavLink.tsx

import Link from "next/link";
import { StyledLink } from "./styles";
import styled from "styled-components";
import { Links } from "../types/Links";

const StyledLink2 = styled(StyledLink)`
    &:hover {
        background-color: #2b8aff;
    }
`

const NavLink = ({ href, name, bgColor }: Links) => {
    if (bgColor === "blue") {
        return (
            <Link href={href} passHref>
                <StyledLink2>{name}</StyledLink2>
            </Link>
        )
    }
    return (
        <Link href={href} passHref>
            <StyledLink>{name}</StyledLink>
        </Link>
    )
}

export default NavLink;

I wanted to give null value to bgColor for some Links so I added type null in Links

export interface Links {
    href: string,
    name: string,
    bgColor: string | null
}

index.tsx (Beers page directory)

import { Menu, Container } from "../../components/styles";
import NavLink from "../../components/NavLink";

const BeerPage: NextPage = () => {
    return (
        <div>
            <Menu>Beers🍺</Menu>
            <Container>
                <NavLink href={"/beers/ale"} name={"Ale"} bgColor="blue" />
                <NavLink href={"/beers/stouts"} name={"Stouts"} bgColor="blue" />
                <NavLink href={"/beers/red-ale"} name={"Red Ale"} bgColor="blue" />
            </Container>
        </div >
    )
}

export default BeerPage;

index.tsx (Wine page directory)

import type { NextPage } from "next";
import { Menu, Container } from "../../components/styles";
import NavLink from "../../components/NavLink";


const WinePage: NextPage = () => {
  return (
    <div>
      <Menu>Wines🍷</Menu>
      <Container>
        <NavLink href={"/wines/port"} name={"Port"} bgColor={null} />
        <NavLink href={"/wines/reds"} name={"Reds"} bgColor={null} />
        <NavLink href={"/wines/rose"} name={"Rose"} bgColor={null} />
        <NavLink href={"/wines/sparkling"} name={"Sparkling"} bgColor={null} />
        <NavLink href={"/wines/whites"} name={"White"} bgColor={null} />
        <NavLink href={"/wines/dessert"} name={"Dessert"} bgColor={null} />
      </Container>
    </div >
  )
}

export default WinePage;

I did bgColor="" first and it worked without error but it didn't feel right.. so I changed it to {null} after reading some stuffs on stackoverflow. It said to give either null or undefined value if I wanted to pass empty props.

These are how they look like now.
Wines
Beer

*I might be wrong for some stuff since I am totally new to Typescript and Next.js. Alslo the code will be refactored as well.
Feel free to let me know if you find errors or things that I shouldn't do!

Getting started with Next.js

Dahye Ji — Wed, 22 Dec 2021 17:34:31 +0000

Things to be done before starting.

Download Node.js (https://nodejs.org/en/)
Download XCode (Mac Only, https://developer.apple.com/xcode/)
Create GitHub account(https://github.com/)
Create Vercel account (https://vercel.com/)

node -v

You can check the version of you node. If it's not recently one, download a new one.

sudo corepack enable

and this will download yarn.(I'm using Mac)

yarn create next-app wine.likelion.com --typescript
// yarn create next-app { project name here } --typescript 
// if you add --typescript at the end, it means that I am going to use typescript

When it's all downloaded, check if it works

cd wine.likelion.com // to directory I will work
yarn dev

Pages

I think I used router when I used React but there are pages in Next.js
If you make a directory(folder) or file inside Pages directory, they work like Router.
This was the first page I created.

import type { NextPage } from "next";

// NextPage type (because it's typescript, you should specify types)
const WinePage: NextPage = () => {
    return (
        <div>
           <h1>Wine</h1>
        </div>
    )
}

export default WinePage;

Documentation - Page in Next.js

package.json

When you create next-app, you have package.json file in the directory.
It's JSON format and it records important metadata about a project which is required before publishing and also defines functional attributes of a project that it uses to install dependencies, run scripts, and identify the entry point to the package.

scripts: Scripts are a great way of automating tasks related to your package, such as simple build processes or development tools. Using the "scripts" field, you can define various scripts to be run as yarn run <script>. eg) dev > yarn dev or build > yarn build
dev > Development mode, not optimised, it skips error sometimes
build > Production mode, it's to create a product that will be deployed
start > Start production server, used to test in real environment
- ** works only it does yarn build** then yarn start
lint > spell, syntax check with ESLINT

About package.json

Error I had after updating MacOS to Monterey from Big Sur

Dahye Ji — Sun, 19 Dec 2021 14:02:37 +0000

I had an error when I updated to Big Sur as well. Because my bash didn't work and had to use zsh.
This time my git command didn't work.

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

This was what I saw from my terminal.
Link that solved my problem: https://stackoverflow.com/questions/52522565/git-is-not-working-after-macos-update-xcrun-error-invalid-active-developer-pa

I had to use these commands

sudo xcode-select --reset
xcode-select --install

Then then error message's gone. However when I tried to git clone something.. I got another message saying this...

So, I pressed enter(return key).
Then you will see long agreement doc.

Just keep pressing space until you see this

Okay... so I typed the command

sudo xcodebuild -license

then type your password. Then you will see another long agreement doc

and at the end you will see things like above.
Type anything but cancel.
Then it's done.
If there's someone updated from Big Sur to Monterey and had the same issue, I hope this is helpful!

Unit testing with Jasmine / getting started with TDD

Dahye Ji — Thu, 16 Dec 2021 14:59:45 +0000

TDD(Test-Driven Development)

Test-Driven Development (TDD) is a software development process relying on software requirements being converted to test cases before software is fully developed, and tracking all software development by repeatedly testing the software against all test cases. This is as opposed to software being developed first and test cases created later. (from wikipedia)

Unit Test

Unit test is a way of testing a unit. Unit means the smallest piece of code that can be logically isolated in a system. In most programming languages, that can be function / method or property.

TDD Approach - Red, Green, Refactor

Test-driven development (TDD) is an approach to software development where you write tests first, then use those tests to drive the design and development of your software application.

Red: think about what you want to develop, This is where you fail from your tests. The purpose of this phase is to write tests that informs the implementation of a feature. The test will only pass when the its expectations are met.
Green: think about how to make your tests pass. This is where you implement code to make your test pass. The goal is to find a solution, without worrying about optimizing your implementation.
Refactor: think about how to improve your existing implementation. In the refactor phase, you are still "in the green." You can begin thinking about how to implement your code better or more efficiently. If you want to think about refactoring your implementation code, you can think about how to accomplish the same output with more descriptive or faster code.

Article about Red, Green, Refactor

Getting started with Jasmine

Jasmine: https://jasmine.github.io/
These are files that's downloaded from Jasmine.

And these are filed that I created to start with.

Those files that include "spec" in their name are for test. Other two are files that will be deployed.

from the file I downloaded, it had a file name SpecRunner.html

 <link rel="shortcut icon" type="image/png" href="lib/jasmine-3.10.1/jasmine_favicon.png">
 <link rel="stylesheet" href="lib/jasmine-3.10.1/jasmine.css">

 <script src="lib/jasmine-3.10.1/jasmine.js"></script>
 <script src="lib/jasmine-3.10.1/jasmine-html.js"></script>
 <script src="lib/jasmine-3.10.1/boot0.js"></script>
 <!-- optional: include a file here that configures the Jasmine env -->
 <script src="lib/jasmine-3.10.1/boot1.js"></script>

I copied and pasted these lines at the bottom of head tag in my TDD.spec.html file and changed the route correctly according to mine.

TDD.spec.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-3.10.1/jasmine_favicon.png">
    <link rel="stylesheet" href="jasmine/lib/jasmine-3.10.1/jasmine.css">

    <script src="jasmine/lib/jasmine-3.10.1/jasmine.js"></script>
    <script src="jasmine/lib/jasmine-3.10.1/jasmine-html.js"></script>
    <script src="jasmine/lib/jasmine-3.10.1/boot0.js"></script>
    <!-- optional: include a file here that configures the Jasmine env -->
    <script src="jasmine/lib/jasmine-3.10.1/boot1.js"></script>
</head>


<body>
    <!-- This html file is for the test (To check test result) You can check the test result when you open this in browser -->
    <!-- This file below is for the test -->
    <script src="tddTest.js"></script> 
    <!-- This file below is for unit test -->
    <script src="tddTest.spec.js"></script>
</body>

</html>

Note. You must include "spec" in the name for test file so that Jasmine will recognise it as a test file.

tddTest.spec.js

// Test units will be written here. function it() will be used a lot.
// This file is spec file of tddTest.js

describe("this is jasmine test", () => {
  // this is test unit
  it("function for addition", () => {
    let num = 10;

    // it, expect, toBe are functions used in jasmine. (Because of library, you can simply type the name of these function and use!)

    // expect: This will pass the result of function
    // toBe: it's a function checking if my expectation meats the result 
    // plusOne inside expect()is a function/code to test 
    expect(plusOne(num)).toBe(num + 1);
  });
});

This is Red stage from TDD Approach

The error got caused is because I have this expect(plusOne(num)).toBe(num + 1); code in tddTest.spec.js but function plusOne was never defined. If you open TDD.spec.html using live server,
You can see what's exactly wrong on the test page using Jasmine.

tddTest.js

function plusOne(num) {
  return num + 1;
}

So I wrote a function plusOne in tddTest.js
Now go to TDD.spec.html using live server

and this green page appears.
It's written just to see how Jasmine work so it's very short code but this is how you do the testing. You will go back and forth from red to green and green to red every time you add a new line of code to test and to write a code to make it pass.

TDD.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-3.10.1/jasmine_favicon.png">
    <link rel="stylesheet" href="jasmine/lib/jasmine-3.10.1/jasmine.css">

    <script src="jasmine/lib/jasmine-3.10.1/jasmine.js"></script>
    <script src="jasmine/lib/jasmine-3.10.1/jasmine-html.js"></script>
    <script src="jasmine/lib/jasmine-3.10.1/boot0.js"></script>
    <!-- optional: include a file here that configures the Jasmine env -->
    <script src="jasmine/lib/jasmine-3.10.1/boot1.js"></script>
</head>

<body>
    <!-- TDD.html, tddTest.js are only file will be deployed -->
    <script src="tddTest.js"></script>  
   <!-- spec files are for testing. These won't be pushed but in some teams/companies they will have their main branch and dev branch. Usually those tests file would got o dev branch but will NEVER go to the main -->
    <!-- <script src="tddTest.spec.js"></script> -->
</body>

</html>

I created four files for unit test here.

TDD.spec.html
tddTest.spec.js
tddTest.js
TDD.html

But like what I've mentioned above, spec files are made to do the test and they will not be pushed.
*These are way to short to refactor so I will probably write another example to explain the refactoring stage.

Things to consider

Writing test code takes much more time of course, so if the project needs to be finished urgently, it might not be the best case to use.
TDD is a good way to develop. However, test code is written by human as well and we can still make mistakes. There will be things that we didn't consider enough so writing test code doesn't mean that the code written are perfect. Doing TDD is to have structured code that's easy to maintain and refactor.

jQuery, Ajax, Axios

Dahye Ji — Wed, 15 Dec 2021 14:58:59 +0000

jQuery

jQuery is JavaScript library.
jQuery CDN: https://code.jquery.com/

You can check from the latest version. If you click one of the links, you can get the CDN link for jQuery. I used minified for jQuery 3.x
Copy and paste the link inside the head tag in html file(and it should be above your css link). Because it's read from top to bottom - if your css link is above the jQuery link, your css might not work like you expected.

 <!-- jQuery CDN: https://code.jquery.com/ -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>

jQuery documentation

Read Documentation: https://api.jquery.com/
You can find anything you'd like to do with jQuery if you use search box. It shows you how to use jQuery with examples.

Selector

You can select elements with id, class and tag name like you do in css but you should use dollar sign and parentheses $()
For example, if you'd like to select an element with id name "item", $("#item"). If the element has class "box", then $(".box") and for h2 tag, $("h2").
(If it was javascript you have to write like document.querySelector("#item") or document.getElementByID("item") which is very long.)

.parent(): gets the ancestors of each element in the current set of matched elements, optionally filtered by a selector. Usage eg) $('.items').parent().css('backgroundColor', 'blue');
.children(): gets the children of each element in the set of matched elements, optionally filtered by a selector. Usage eg) $('.ul2').children('li:gt(5)').css('color', 'blue').css('backgroundColor', 'red')
.siblings() gets the siblings of each element in the set of matched elements, optionally filtered by a selector.

Using jQuery

.html(): is used to set an element's content. It's to write html.
.css(): as a setter, jQuery modifies the element's style property. For example, $("#mydiv").css("color", "green") is equivalent to document.getElementById("mydiv").style.color = "green".
.attr(): a convenient way to set the value of attributes
val(): allows you to pass an array of element values

jQuery filter

:eq: equal( = ) $("li").eq(2).css("color", "blue" ); means change color to blue for li element on the index 2.
:lt: little ( < ), stands for the less-than sign $("li:lt(2)") means li elements that have smaller index than 2.
:gt: greater ( > ), stands for the greater-than sign $("li:gt(4)").css( "backgroundColor", "yellow"); means change background color to yellow for li elements that have greater index than 4.
:not(selector): $("input:not(:checked)+span").css("backgroundColor", "yellow"); means change background color to yellow for the span that is next to input not checked.
:even: even elements in that set.
:odd: odd elements in that set.
:first: the first element in that set.
:last: the last element in that set

// example
$( "li" ).filter(":nth-child(2n)").css("backgroundColor", "red" );

filter by attribute

attributeContains - input[name*="name"]: It will select an element if the selector's string appears anywhere within the element's attribute value. Usage eg) $("input[name*='man']").val("has man in it!");
attributeEquals - input[name="value"]: Selects elements that have the specified attribute with a value exactly equal to a certain value. Usage eg) $("input[value='Hot Fuzz']").next().text("Hot Fuzz");

child filter

:first-child: first-child selector can match more than one. one for each parent. This is equivalent to nth-child(1).
:last-child: selects all elements that are the last child of their parent. last-child selector can match more than one. one for each parent.
:nth-child(2): implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1
:nth-child(even): even number indexed elements
:nth-child(odd): odd number indexed elements

content filter

:contains(text): select all elements that contain the specified text. Usage eg) $("div:contains('shop')").css("text-decoration", "underline");
:empty: removes all child nodes of the set of matched elements from the DOM. Usage eg) $(".hello").empty();
:has(selector): selects elements which contain at least one element that matches the specified selector

class attribute

.addClass() : adds the specified class(es) to each element in the set of matched elements.
.removeClass() : remove a single class, multiple classes, or all classes from each element in the set of matched elements.
.toggleClass() : add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.
.hasClass() : determine whether any of the matched elements are assigned the given class.

editing with jQuery

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("#div1").remove();
$('ul').after('<h2>The end!</h2>');
$('ul').before('<h2>Start!</h2>')
$("div").addClass("important");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");

$("p").css("background-color");
$("p").css("backgroundColor","yellow");
// You can use - and camelCase but it's good to use one fixed.

effects with jQuery

$("p").hide();
$("p").show();
$("p").toggle();
$("#div1").fadeIn();
$("#div1").fadeOut();
$("#div1").fadeToggle();
$("#div3").fadeIn(3000);

jQuery practice

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- https://code.jquery.com/ -->
    <!-- 3점대 minified 사용함 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        // 문사가 다 준비되면 실행.
        $(function () { // 이것을 주석처리하면 실행이 안됩니다.
            //html이 다 로드되지 않은 상태이기 떄문에 그렇습니다.
            $('box').fadeOut(3000).fadeIn(3000);
        })
    </script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }

        .box2 {
            width: 100px;
            height: 100px;
            opacity: 0.3;
            background-color: red;
        }
    </style>
</head>

<body>
    <h1 id="one">jQuery 실습</h1>
    <p>hello</p>
    <button class="btn1">클릭해!!</button>
    <p class="실습">jQuery 실습을 하고 있습니다.</p>
    <img>
    <br>
    <textarea name="메모장" id="메모장" cols="30" rows="10"></textarea>
    <button class="btn2">메모장 내용 경고창으로 출력</button>
    <p id="p3">hello world</p>
    <!-- 
        1. li items 부모를 찾아 background-color를 파란색으로 버꿔주세요.
        2. items 2번째 색을 빨간색으로 바꿔주세요.
        3. ul2의 자식인 li요소를 선택하여 1번부터 3번까지 color를 녹색으로 바꿔주세요.
        4. ul2의 자식인 li요소를 선택하여 7번부터 10번까지 color를 파란색, background-color를 빨간색으로 바꿔주세요.
     -->
    <div class="wrapper">
        <h1 class="title">TITLE</h1>
        <ul>
            <li class="items">item1</li>
            <li class="items">item2</li>
            <li class="items">item3</li>
        </ul>
    </div>
    <!-- ul>li{hello}*10 -->
    <ul class="ul2">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <div id="div1">Hello world!</div>
    <div class="one blue">hello world</div>
    <div class="two blue">hello world</div>
    <p class="blue">hello world</p>
    <div class="three">hello</div>
    <div class="three blue">hello</div>
    <div class="box">hello world</div>
    <div class="box2">hello world</div>
    <button class="btn3">눌러봐요!</button>
    <script>
        // document.getElementById('one').innerHTML = "!!!";
        // class는 . 아이디는 #
        $('#one').text('hello jquery');
        // $('p').hide(); // display: none 됨
        $('.btn1').click(function () {
            alert('클릭했네요?');
        });
        // $('.실습').text('<strong>실습</strong>중이에요');
        $('.실습').html('<strong>실습</strong>중이에요');
        $('.실습').css('color', 'red');
        $('.실습').css('backgroundColor', 'blue');

        // camelCase is used in jQuery
        $('img').attr('src', '../html/img/a.jpg',);
        $('img').attr('data-name', '프로필').attr('data-hello', 'world');
        $('img').css({ 'width': '400px', 'height': '280px' });

        $('.btn2').click(function () {
            let 메모장값 = $('#메모장').val();
            $('#메모장').val('값을 입력하세요.');
            alert(메모장값);
        });
        $('#p3').css('color', 'red').css('backgroundColor', 'blue');

        $('.items').parent().css('backgroundColor', 'blue');
        $('.items').eq(1).css('color', 'red');
        // $('.ul2 > li:lt(3)').css('color', 'green');
        // $('.ul2').children('li:lt(3)').css('color', 'green');
        $('.ul2:nth-child(n+3)').css('color', 'green')
        // $('.ul2 > li:gt(5)').css('color', 'blue').css('backgroundColor', 'red');
        $('.ul2').children('li:gt(5)').css('color', 'blue').css('backgroundColor', 'red')

        // append는 마지막에 추가됨 
        // 홑따옴포, 쌍타옴표는 JSON에서만 주의하면 되고 아무거나 사용해도 되긴함.(보통 회사 컨벤션에 맞게 사용)
        // ul 복수개를 잡음!
        $('ul').append("<li>hello world end</li>");
        // append는 앞에 추가됨  (ul의 자식에 추가)
        $('ul').prepend("<li>hello world start</li>");
        // after는 ul 다음에 추가
        $('ul').after("<h2>끝!</h2>");
        $('ul').before("<h2>시작</h2>");
        // this removes the element
        // $('#div1').remove()
        $('#div1').addClass('important');
        $('.one, .two, p').removeClass('blue');
        // toggle은 없으면 생기고 있으면 없어지게
        $('.three').toggleClass('blue');
        // 모달창에서 사용한 사례가 있음
        $('.box').fadeOut(3000).fadeIn(3000);
        https://electronic-moongchi.tistory.com/75
        $('.box').click(function () {
            $(this).stop();
        });
        // div 클릭했을 때 안 보이게 하기
        // dom이 준비되면 실행해라!
        $(function () {
            $('.box').click(function () {
                $(this).hide();
            });
        });
        //JQuery - animate
        //버튼 클릭했을 때 변화주기
        $('.btn3').click(function () {
            $('.box2').animate({
                width: '300px',
                height: '300px',
                opacity: 1,
            }, 'slow');
        });

        $(".box2").hover(function () {
            $(this).css("background-color", "yellow");
        }, function () {
            $(this).css("background-color", "blue");
        });

        $('.box2').mouseenter(function () {
            alert("You entered!");
        });
        $('.box2').mouseleave(function () {
            alert("Bye! You now leaved");
        });
    </script>

</body>

</html>

hover()

<div id="box"></div>

// hover - change color(when hover, background color to yellow, when it's not hover than blue)
$("#box").hover(function(){
  $(this).css("background-color", "yellow");
}, function(){
  $(this).css("background-color", "blue");
});

mouse event

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
$("#p1").mouseleave(function(){
    alert("Bye! You now leaved p1!");
});

jQuery plugins

jQuery UI (Progressbar, Selectmenu, etc)
jQuery Validation
jQuery Lightbox
Bootstrap

Ajax (Asynchronous Javascript and XML)

Find more about Ajax

  $('#btn_data').click(function () {
            $('#data').load('https://testtest/main/data/data.json');
        });

        $('#btn_data2').click(function () {
            $("#data2").load('https://testtest/main/index.html h1');
        });

        $('#btn_data3').click(function () {
            $("#data3").load('https://testtest/main/index.html h1', function (responseText, statusText, xhr) {
                console.log(responseText);
                console.log(statusText);
                console.log(xhr);
                console.log(xhr.status);
            }
            );
        });

        $('#btn_data4').click(function () {
            //$.ajax({route, sync status, things to do when it succed})
            //$.ajax({url:'route', async: false, success:function(result){}})
            $.ajax({
                url: 'https://testtest/main/index.html',
                async: true,
                success: function (result) {
                    $("#data4").html(result);

                }

            });
        });

Axios

Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and node.js with the same codebase). On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.

const url = 'https://raw.githubusercontent.com/paullabkorea/coronaVaccinationStatus/main/data/data.json';
        axios.get(url).then((response) => { console.log(response) });

https://axios-http.com/docs/intro
Learn about Axios

(I learnt about Ajax and Axios briefly, will write detailed post when I learn node.js later)

Try...catch, Asynchronous JavaScript - promise, async, await, event loop ...

Dahye Ji — Tue, 14 Dec 2021 14:58:52 +0000

Destructuring assignment

Destructuring assignment is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Destructuring assignment -mdn

let arr = ["Hailey", "Ji"]
let [firstName, surname] = arr;

console.log(firstName); // Hailey
console.log(surname); // Ji
// using destructuring assignment,
// arr[0] was assigned to first name
// arr[1] was assigned to surname

let arr2 = [20, ["Haily", "Ji"]];
let [age, [firstName, surname]] = arr2;

console.log(age); // 20
console.log(firstName); // Hailey
console.log(surname); // Ji

let user = {};
[user.name, user.surname] = "Hailey Ji".split(' ');

console.log(user.name); // Hailey;
console.log(user.surname); // Ji
console.log(user)
// {name: 'Hailey', surname: 'Ji'}


let a = [[1, 2], [3, 4], [5, 6]];

for (let [i, j] of a){
    console.log(i, j);
}
// 1 2
// 3 4
// 5 6

More about destructuring assignment -javascript.info

try...catch

When executing JavaScript code, different errors can occur.
try...catch statement marks a block of statements to try and specifies a response should an exception be thrown.
The try statement allows you to define a block of code to be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.

try {
  alert('Start of try runs');  // (1) <--
  lalala; // error, variable is not defined!
  alert('End of try (never reached)');  // (2)
} catch (err) {
  alert(`Error has occurred!`); // (3) <--
}

At above code, the first and third alerts will be executed only. The second alert won't be executed because lalala is not defined variable which occurs an error. Therefore, the second will be skipped and then go to catch and will execute the third alert.

let json = "{ bad json }";

try {
  let user = JSON.parse(json); // <-- error occurs here
  alert( user.name ); // this code will never run

} catch (error) {
  // when error occurs, try execution is stopped, and control flows to the beginning of catch.
  console.log( "There was an error with data." );
  console.log(error.name ); // this way you can check the error
  console.log(error.message ); // and error message
  console.error(error) // this throw error on console(it's used a lot to check the error)
}

JavaScript has many built-in constructors for standard errors: Error, SyntaxError, ReferenceError, TypeError and others.

let error = new Error(message);
// or
let error = new SyntaxError(message);
let error = new ReferenceError(message);


// *** For built-in errors (not for any objects, just for errors), the name property is exactly the name of the constructor. And message is taken from the argument

let error = new Error("Something happened!");

alert(error.name); // Error
alert(error.message); // Something happened!

let json = '{ "age": 30 }'; // incomplete data

try {
  let user = JSON.parse(json); // <- no error
  if (!user.name) {
    throw new SyntaxError("Incomplete data - no name");
    // SyntaxError with the given message, will generate error message the same way as JavaScript would generate it itself.
  }
  alert(user.name);
} catch (err) {
  alert("JSON Error: " + err.message); // JSON Error: Incomplete data - no name
}

try...catch...finally

If finally exists, in runs always no matter what.

try {
   ... try to execute the code ...
} catch (err) {
   ... handle errors ...
} finally {
   ... execute always ...
}


try {
  alert('try block');
  if (confirm('Make an error?')) BAD_CODE();
} catch (err) {
  alert('catch');
} finally {
  alert('finally');
}

How to use try...catch

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

function readUser(json) {
  let user = JSON.parse(json);

  if (!user.age) {
    throw new ValidationError("No field: age");
  }
  if (!user.name) {
    throw new ValidationError("No field: name");
  }

  return user;
}

// using try..catch and readUser
try {
  let user = readUser('{ "age": 25 }');
} catch (err) {
  if (err instanceof ValidationError) {
    alert("Invalid data: " + err.message); // Invalid data: No field: name
  } else if (err instanceof SyntaxError) { // (*)
    alert("JSON Syntax Error: " + err.message);
  } else {
    throw err; // throw unknown error. (**)
  }
}

More about try..catch -javascript.info

Promise

Promise is like a promise that you make that you don't know when you are going to call it but will call it no matter what.
There are only success(completion) and failure for the result.
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
A Promise is in one of these states:

pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.

// example
let promise = new Promise(function(resolve, reject) {
  // the function is executed automatically when the promise is constructed

  setTimeout(() => resolve("done"), 1000); // after 1 second signal that the job is done with the result "done"
});
console.log('hello world');
console.log(promise);

As you can see above, Promise {} became Promise {: 'done'} after 1000ms.

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("Done!"), 3000);
});

console.log('hello world');
promise.then(resolve => console.log(resolve));
console.log('hello world2');

// hello world
// hello world2
// Done!

new Promise((resolve, reject) => {...code...})
  .then(...code...)
  .then(...code...)
  .finally(...code...)
  .catch(...code...); // <-- can handle error at .catch

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**) // result is 1 here.
  console.log(result); // 1
  return result * 2;
}).then(function(result) { // (***)  // result is 2 here.
  console.log(result); // 2
  return result * 2;
}).then(function(result) { // result is 4 here
  console.log(result); // 4
  return result * 2;
});

// 1
// 2
// 4


let p = new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 10000); // (*)
}); // runs in 10s
console.log('hello world'); // it gets executed right away
let p2 = p.then(function(result) { // (**)
  console.log(result); // 1
  return result * 2;
}); // when above code gets executed, then receive result and then run the code.
console.log('hello world2'); // it gets executed right away
let p3 = p2.then(function(result) { // (***)
  console.log(result); // 2
  return result * 2;
}); // when above code gets executed, then receive result and then run the code.
console.log('hello world3'); // it gets executed right away
let p4 = p3.then(function(result) {
  console.log(result); // 4
  return result * 2;
});

// hello world
// hello world2
// hello world3
// 1
// 2
// 4

A Promise object serves as a link between the executor and the consuming functions, which will receive the result or error. Consuming functions can be registered (subscribed) using methods .then, .catch and .finally.

.then : then will be executed when previous code is resolved.

new Promise(function(resolve, reject) {
  setTimeout(() => reject('error'), 1000); // reject
}).then(function(result) { // it won't run because of reject, this will be skipped and go to .catch
  console.log(result + ' : Done well!'); 
  return result + 'one';
}).catch(function(result) { // result is error
  console.log(result + ' : Error occurred!'); 
  return result + 'two';
}).then(function(result) { // receive errortwo as result
  console.log(result + ' : Done well!'); 
  return result + 'three';
});

// error : Error occurred!
// errortwo : Done well!

Promise - finally

new Promise((resolve, reject) => {
  /* do something that takes time, and then call resolve/reject */
})
  // runs when the promise is settled, doesn't matter successfully or not
  .finally(() => stop loading indicator)
  // so the loading indicator is always stopped before we process the result/error
  .then(result => show result, err => show error)

new Promise((resolve, reject) => {
  setTimeout(() => resolve("result"), 2000)
})
  .finally(() => alert("Promise ready"))
  .then(result => alert(result)); // <-- .then handles the result

About Promise -javascript.info
Promise chaining

fetch

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.

fetch('https:/fetch-example.com/data.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        console.log(json);
        return json    
    })

// 위에서 전국 1차 접종 퍼센트만 뽑아보기
fetch('https:/fetch-example.com/data.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국'));
        return
    })


fetch('https:/fetch-example.com/data.json')
    .then(function(response) {
        console.log(1);
        return response.json();
    })
    .then(function(json) {
        console.log(2);
        console.log(json);
        return json
    })
    .then(function(json) {
        console.log(3);
        console.log(json.filter(s => s['시·도별(1)'] === '전국').map((obj) => obj["1차 접종 퍼센트"]));
        return
    })

About fetch

HTTP status codes

1xx informational response – the request was received, continuing process
2xx successful – the request was successfully received, understood, and accepted
3xx redirection – further action needs to be taken in order to complete the request
4xx client error – the request contains bad syntax or cannot be fulfilled
5xx server error – the server failed to fulfil an apparently valid request (https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)

async, await

An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

async function f() {
  return 100;
}
f().then(alert); // 100
async function f() {
  return 100;
}
f().then(function(result) { // (**) // receive 100 as result
  console.log(result); // 1
  return result * 2; // 100 * 2. result = 200 
}).then(function(result) { // (***) // recieve 200 as result
  console.log(result); // 2
  return result * 2; // 200 * 2. result = 400 
}).then(function(result) { // recieve 400 as result
  console.log(result); // 4
  return result * 2; // 400 * 2. result = 800 
});
// 100
// 200
// 400

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });
  let result = await promise; // wait until the promise resolves (*)
  console.log(result); // "done!"
}

f();

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 3000)
  });
  let result = await promise; // it waits until promise is resolved (*)
  console.log(result); // "done!"
    return 100
}
f().then(function(result) { // (**)
  console.log(result); // 1
  return result * 2;
}).then(function(result) { // (***)
  console.log(result); // 2
  return result * 2;
}).then(function(result) {
  console.log(result); // 4
  return result * 2;
});
// 100
// 200
// 400

Event loop

Great video to watch to understand Event loop and asynchronous JavaScript

call stack / stack

JavaScript has single thread runtime which means it has a single call stack. So it can do one that at a time.
and stack is like haystack. A horse will start eating what's on the bottom. For stacks, the latest pushed item is received first, that’s also called LIFO (Last-In-First-Out) principle.

You can implement this by using push and pop with Array/Object. The push method will add any object to the top of the stack and the pop method will remove it.

Queue

For queues, we have FIFO (First-In-First-Out).
A queue is one of the most common uses of an array.
enqueue—This operation is responsible for inserting or pushing a new element to the queue.
dequeue—This operation is responsible for removing the oldest element from the queue.
At some point during the event loop, the runtime starts handling the messages on the queue, starting with the oldest one. To do so, the message is removed from the queue and its corresponding function is called with the message as an input parameter. As always, calling a function creates a new stack frame for that function's use.
The processing of functions continues until the stack is once again empty. Then, the event loop will process the next message in the queue (if there is one).

heap

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.

Event loop -mdn

JavaScript - Getter, Setter, Class...

Dahye Ji — Thu, 09 Dec 2021 20:49:39 +0000

Property flags

Until now, a property was a simple “key-value” pair to us. But an object property is actually a more flexible and powerful thing.
Object properties, besides a value, have three special attributes (so-called “flags”)

writable – if true, the value can be changed, otherwise it’s read-only.
enumerable – if true, then listed in loops, otherwise not listed.
configurable – if true, the property can be deleted and these attributes can be modified, otherwise not.

By using Object.getOwnPropertyDescriptor(), you can check property flags

let user = {
    name: 'Lilly'
};

Object.defineProperty(user, "name", {
    writable: false
});

user.name = "Pete";

user.name; // it's not changed because we set writable: false previously.
// 'Lilly'

Find out about property flags

Prototype

Read this: About Proto Type

Getter

get syntax binds an object property to a function that will be called when that property is looked up
Use this to get values from object

let user = {
    name: "John",
    surname: "Smith",

    get fullName() {
        return `${this.name} ${this.surname}`;
    }
};
console.log(user.fullName);
// John Smith

Setter

set syntax binds an object property to a function to be called when there is an attempt to set that property.
Use this to set values to object

let user = {
    name: "John",
    surname: "Smith",

    get fullName() {
        return `${this.name} ${this.surname}`;
    },

    set fullNameSet(value) {
        [this.name, this.surname] = value.split(" ");
    }
};

user.fullNameSet = "Hailey Ji";
console.log(user.name);
// Hailey
console.log(user.surname);
// Ji

// closure
const user = (function () {
  let name = "Hailey";
  let surname = "Ji";
  return {
    fullname: function() {
      return `${name} ${surname}`;
    }
  };
}());

user.fullname();
// 'Hailey Ji'
user.name;
// undefined
user.surname;
// undefined

Class

Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are not shared with ES5 class-like semantics.
Classes are in fact "special functions",and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

Class : is like a factory that make items.
Instance : is like a item that's produced from factory.

class MyClass {
  // you can write different kind of methods
  constructor() { ... }; // don't use ,(comma) in class, use ;(semicolon)
  method1() { ... };
  method2() { ... };
  method3() { ... };
  ...
}

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// How to use:
let user = new User("John");
user.sayHi(); 
console.log(typeof User);
// ‘function’ 

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

console.log(typeof User); // class is type of function

// to be precise, it's more like function constructor 
console.log(User === User.prototype.constructor); // true

// method declared in class is saved in User.prototype
console.log(User.prototype.sayHi); // alert(this.name);

// currently there are two method in prototype, constructor and sayHi(what we created)
console.log(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

** code within the class body's syntactic boundary is always executed in strict mode.
More about Class


class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name}is running with speed of ${this.speed} speed.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stopped.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name}is hidden!`);
  }

  stop() {
    super.stop(); // this calls 'sto'p of parent Class and stops.
    this.hide(); // it hides.
  }
}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // white Rabbit is running speed of 5
rabbit.stop(); // White Rabbit stooped. White Rabbit id hidden!

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date;
  }
}

// how to use
let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("CSS", new Date(2019, 0, 1)),
  new Article("JavaScript", new Date(2019, 11, 1))
];

articles.sort(Article.compare);

alert( articles[0].title ); // CSS

Private class features

Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself.

class CoffeeMachine {
  #waterLimit = 200;

  #checkWater(value) {
    if (value < 0) throw new Error("value for water cannot be negative.");
    if (value > this.#waterLimit) throw new Error("water value goes over the water limit.");
  }

}

let coffeeMachine = new CoffeeMachine();

// cannot reach to private from outside.
coffeeMachine.#checkWater(); // Error
coffeeMachine.#waterLimit = 1000; // Error

Class is to create specific objects and there are properties and methods inside Class.

instanceof

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.

class Rabbit {} 
let rabbit = new Rabbit();
 // is rabbit instance of Rabbit?

console.log(rabbit instanceof Rabbit); // true    

let arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

    class Animal {}
class Rabbit extends Animal {}

let rabbit = new Rabbit();
console.log(rabbit instanceof Animal); // true

// rabbit.__proto__ === Rabbit.prototype
// rabbit.__proto__.__proto__ === Animal.prototype
// true

Polyfill

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
for instance, Babel includes a polyfill that includes a custom regenerator runtime and core-js.

JavaScript does not support overloading. JavaScript supports overriding.

What is overloading? In some programming languages, function overloading or method overloading *is the ability to create multiple functions of the same name with different implementations. *

function sum(x, y) {
  return x + y;
}

function sum(x, y, z) {
  return x + y + z;
}

sum(1,2)
// NaN

sum(1,2,3)
// 6

In most languages, sum(1,2) and sum(1,2,3) both will work.
However, it doesn't work in JavaScript as you can see.
From above code only function available is sum(x,y,z)
Because the second sum function's overridden the first one.
Overloading works depending on the parameters that are passed.
And in the languages that support overloading, you need to declare the types of variable and parameters. However, you don't do that in JavaScript so it doesn't support overloading.

overloading vs overriding in JavaScript

underscore in variable name

In some places, it's used to mark variable/function as private. (so that you know you shouldn't touch those variables)

JavaScript Basic - reduce(), sort() and other methods, JSON...

Dahye Ji — Wed, 08 Dec 2021 13:52:57 +0000

repeat()

repeat() is a method that constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

let str = 'abcde';
str.repeat()  // if it's empty it returns empty string
// ''
str.repeat(2);
// 'abcdeabcde'

let str2 = 'world ';
console.log(`hello : ${str3.repeat(3)}`);
// hello : World World World

Array.from()

Array.from() is static method creates a new, shallow-copied Array instance from an array-like or iterable object.

Array.from('a', repeat(10));
// ['a','a','a','a','a','a','a','a','a','a']
Array.from(str.repeat(10));
// ['a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e', 'a', 'b', 'c', 'd', 'e']
Array.from('abc');
// ['a', 'b', 'c']
Array(10) // this doesn't take any memory because it's empty
// [empty x 10] // they are empty arrays
let emptyArray = Array(10);
emptyArray[5]
// undefined
emptyArray[3] = undefined;
// undefined
emptyArray;
// [empty x 3,, undefined, empty x 6]

fill()

fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

// it was 0 but gave value 10 using map
Array(100).fill(0).map((value) => 10);

// this console.log 100 of undefined in array
Array(100).fill(0).map((value) => console.log(value));

// this takes lots of memory
Arr(100).fill(0).map((value,index,arr) => arr);

// increase by 1 
Array(100).fill(0).map((value, index) => index+1);

// increase by **2 (from 0)
// default value of fill() is zero so if () is empty it 's the same is fill(0)
Array(100).fill().map((value, index) => (index*1)**2);

// increase by **2 (from 1)
Array(100).fill().map((value, index) => (index+1)**2);
Array(100).fill(1).map((value, index) => (value+index)**2);

Don't forget to wrap if there are multiple things to be calculated

2**3**2;
// 512
(2**3)**2;  // this is what I wanted
// 64

Math.pow()

Math.pow() function returns the base to the exponent power, as in base^exponent.

Math.pow(9, 3);
// 729

(2**3)**2;
// 64
Math.pow(Math.pow(2,3),2); // (2^3)^2 // (2*2*2)*(2*2*2)
// 64

split()

split() is a method divides a String into an ordered list of substrings, puts these substrings into an array, and returns the array. The division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.

// syntax
split()
split(separator)
split(separator, limit)

let str = 'I watched a movie called "The Grand Budapest Hotel" last night';

str.split(' ', 2);
// ['I', 'watched']

const words = str.split(' ');
console.log(words[3]);
// movie

const chars = str.split('');
console.log(chars[8]);
// d

const strCopy = str.split();
// console.log(strCopy);
// ['I watched a movie called "The Grand Budapest Hotel" last night']


'.'.split('.');
// ['', '']
'.'.repeat(9).split('.');
// ['', '', '', '', '', '', '', '', '', '',]
let str = "I am Hailey"
str.split(' ');
// ['I', 'am', 'Hailey']

let str = "I am Hailey.J"
str.split(' ');
// ['I', 'am', 'Hailey.J']
str.split('.');
// ['I am Hailey', 'J ']
str.split(/\s/) //split by space
// ['I', 'am', 'Hailey.J']
str.split('');
// ['I', '', 'a', 'm', '', 'H', 'a', 'i', 'l', 'e', 'y', '.', 'J']'

'12367'.split('');
// ['1', '2', '3', '6', '7']
'12367'.split('').forEach(x => x)
// undefined // forEach doesn't return the value, it only execute the function.
let a = '12367'.split('');
a;
// ['1', '2', '3', '6', '7']
a.map(x => parseInt(x)); // string to number
// [1, 2, 3, 6, 7]

'12367'.split('').map(x => parseInt(x)).forEach(x => console.log(x));
// 1
// 2
// 3
// 6
// 7

let sum = 0;
'12367'.split('').map(value => parseInt(value)).forEach(value => sum += value);
sum;
// 19

'12367'.split('').map(value => parseInt(value));
// [1, 2, 3, 6, 7]
'12367'.split('').map(value => value + value);
// ['11', '22' '33', '66', '77']

let sum = 0;
[1, 2, 3, 6, 7].forEach(value => sum += value);
// 19

'12367' was string but using .split(''), it's split strings and through map, it's iterated
'12367' was string but it becomes an array after using .split(''), so you can use map() or forEach()

Difference between map() and forEach()

map(): returns array of callback function (it doesn't effect or change the original array)
forEachO): doesn't return value and it just execute the provided callback function once for each array element.

let array1 = [1, 3, 6];

array1.map(num => console.log(num * 2));
// 2
// 6
// 12
let map1 = array1.map(num => num * 2);
console.log(map1);
// [2, 6, 12]

array1.forEach(num => console.log(num * 2));
// 2
// 6
// 12
let forEach1 = array1.forEach(num => num * 2);
console.log(forEach1);
//undefined

toString(), toLcaleString(), toTimeString(), toISOString()

toString(): returns a string representing the object
toLocaleString(): returns a string with a language
toTimeString(): returns the time portion of a Date object in human readable form in English.sensitive representation of this date.
toISOString(): returns a string in simplified extended ISO format (ISO 8601), which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively)

about "new"

let today = new Date('2021/12/7/12:00');
// "new" creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

today;
// Tue Dec 07 2021 12:00:00 GMT+0900 (한국 표준시)
today.toString();
// 'Tue Dec 07 2021 12:00:00 GMT+0900 (한국 표준시)'
today.toLocaleDateString();
// '2021. 12. 7.'
today.toLocaleString();
// '2021. 12. 7. 오후 12:00:00'
today.toLocaleString('ko-KR');
// '2021. 12. 7. 오후 12:00:00'
today.toLocaleString('en-US');
// '12/7/2021, 12:00:00 PM'
today.toTimeString();
// '12:00:00 GMT+0900 (한국 표준시)'
today.toISOString();
// '2021-12-07T03:00:00.000Z'
today.toISOString().slice(0,10);
// '2021-12-07'
today.toISOString().slice(0,4);
// '2021'
today.toISOString().slice(5,7);
// '12'
today.toISOString().slice(8,10);
// '07'

today.toISOString().slice(0,10).split('-');
// ['2021', '12', '07']
today.toISOString().slice(0,10).split('-').map(value => parseInt(value));
// [2021, 12, 7]

lang code: http://www.lingoes.net/en/translator/langcode.htm

Instead of above code, you can use instance methods of Date

// let today = new Date()
let date = new Date('2013-08-03T02:00:00Z');
let year = date.getFullYear();
let month = date.getMonth()+1;
let dt = date.getDate();

About Date

Math.ceil(), Math.floor(), Math.round(), Math.PI

Math.ceil(): always rounds a number up to the next largest integer.
NOTE Math.ceil(null) returns integer 0 and does not give a NaN error.
Math.floor() returns the largest integer less than or equal to a given number.
Math.round() returns the value of a number rounded to the nearest integer.
Math.PI: represents the ratio of the circumference of a circle to its diameter, approximately 3.14159:

Math.ceil(9.5);
// 10
Math.ceil(9.2);
// 10
Math.ceil(-9.2);
// -9
Math.floor(0.3);
// 0
Math.floor(0.9);
// 0
Math.floor(-9.2);
// -10
Math.round(3.5);
// 4
Math.round(3.6);
// 4
Math.round(3.4);
// 3
Math.PI;
// 3.141592653589793

Math.max(), Math.min()

Math.max() returns the largest of the zero or more numbers given as input parameters, or NaN if any parameter isn't a number and can't be converted into one.
Math.min() returns the lowest-valued number passed into it, or NaN if any parameter isn't a number and can't be converted into one.

Math.max();
// -Infinity
Math.min();
// Infinity
Math.max(1,2,3,4);
// 4
Math.max([1,10, 2, 7]); 
// NaN
Math.max(...[1, 10, 2, 7]); // use spread operator!
// 10
Math.max.apply(null, [1, 2, 10, 6, 7]);
// 10

About spread operator

reduce()

reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.
syntax

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum += current, 0); // the number after current here which is 0 -> it's like starting value if it is 2, it returns 17 not 15
console.log(result);
// 15
// 0 + 1 = 1 (because it gave the  initial value 0 so it starts from 0) and current num(item) = 1
// 1 + 2 = 3
// 3 + 3 = 6
// 6+ 4 = 10
// 10 + 5 = 15

let result = arr.reduce((sum, current) => sum += current);
console.log(result);
// 15

// you can write about code using forEach this way
let arr = [1, 2, 3, 4, 5]
let sum =0
arr.forEach(i=> sum += i)
console.log(sum)
// 15

let multiply = arr.reduce((sum, current) => sum *= current); // sum here is accumulator
console.log(multiply);
// 120

Number.EPSILON

Number.EPSILON property represents the difference between 1 and the smallest floating point number greater than 1.
This is effectively the maximum possible rounding error for floating point numbers.

0.3+0.6;
// 0.8999999999999999
Number.MAX_SAFE_INTEGER;
// 9007199254740991
Number.MAX_SAFE_INTEGER;
// 9007199254740991
Number.EPSILON;
// 2.220446049250313e-16

Bigint

BigInt is a primitive wrapper object used to represent and manipulate primitive bigint values — which are too large to be represented by the number primitive.
A BigInt value, also sometimes just called a BigInt, is a bigint primitive, created by appending n to the end of an integer literal, or by calling the BigInt() constructor (but without the new operator) and giving it an integer value or string value.

9007199254740991 + 1;  
// 9007199254740992
9007199254740991 + 2; // the number is incorrect
// 9007199254740992
9007199254740991 + 3
// 9007199254740994
9007199254740991 + 4 // the number is incorrect
// 9007199254740996

9007199254740991n + 4n; // Bigint using 'n' to the end of an integer. This way, it calculates the big numbers correctly
// 9007199254740995n

flat()

flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

// flat(depth)

[1, 2, 3, 4, [1, 2, 3]].flat();
// [1, 2, 3, 4, 1, 2, 3]
[1, 2, 3, 4, [1, 2, 3]].flat(1);
// [1, 2, 3, 4, 1, 2, 3]
[1, 2, 3, 4, [1, 2, 3]].flat(2);
// [1, 2, 3, 4, 1, 2, 3]
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat();  // default value is one. one depth
// [1, 2, 3, 4, 1, 2, Array(3)]
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat();
// [1, 2, 3, 4, 1, 2, Array(3)]
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat(2);
// [1, 2, 3, 4, 1, 2, 1, 2, 3]
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat().flat();
// [1, 2, 3, 4, 1, 2, 1, 2, 3]
[1, 2, 3, 4, [1, 2, [1, 2, 3]]].flat(Infinity);
// [1, 2, 3, 4, 1, 2, 1, 2, 3]

"use strict" / strict mode

About strict mode

function test() {
 x = 10
}
test()
console.log(x)
// 10
x;
// 10

How come above code works? Why does it console.log(x) and how can I access to it?
Because x is value declared inside function and it's not supposed to be accessed from outside.
Then how can I make it unable to do it and throw an error?
by using strict mode: 'use strict' or "use strict"

Now you can't access to it.
About "use strict"

this

practice

let hotel = [{
  'name' : 'one hotel',
  'location' : 'Gangnam, Seoul',
  'price' : {'A':50000, 'B':30000, 'C':15000},
  'rooms' : 50,
  'reservation' : 25,
  'left rooms' : function(){return this.rooms - this.reservation}
},{
  'name' : 'two hotel',
  'location' : 'Mapo, Seoul',
  'price' : {'A':100000, 'B':60000, 'C':30000},
  'rooms' : 100,
  'reservation' : 30,
  'left rooms' : function(){return this.rooms - this.reservation}
},{
  'name' : 'three hotel',
  'location' : 'Gangnam, Seoul',
  'price' : {'A':80000, 'B':50000, 'C':30000},
  'rooms' : 120,
  'reservation' : 80,
  'left rooms' : function(){return this.rooms - this.reservation}
}];
// assigned function to left rooms because the value will be dynamically updated.

hotel[0];
// {name: 'one hotel', location: 'Gangnam, Seoul', price: {…}, rooms: 50, reservation: 25, …}
hotel[0]['left rooms']();
// 25
hotel[0]['left rooms']; // it's because of function
// ƒ (){return this.rooms - this.reservation}
hotel[0]['reservation'] = 49;
// 49
hotel[0]['left rooms']();
// 1

JSON(JavaScript Object Notation)

JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON.
JSON is a text format for storing and transporting data. It can't be called or constructed, and aside from its two method properties, it has no interesting functionality of its own.

let student = {
    name: 'Hailey',
    age: 20,
    isAdmin: false,
    courses: ['html', 'css', 'js'],
    hobby: null
};

let json = JSON.stringify(student);

json;
// '{"name":"Hailey","age":20,"isAdmin":false,"courses":["html","css","js"],"hobby":null}'

JSON.stringify("test")
// '"test"'

let user = {
    name: 'John',
    age: 25,
    roles: {
        isAdmin: false,
        isEditor: true,
    }
};

console.log(JSON.stringify(user, null, 4));
//{
    "name": "John",
    "age": 25,
    "roles": {
        "isAdmin": false,
        "isEditor": true
    }
}

JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.
JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

let numbers = "[0, 1, 2, 3]";

numbers = JSON.parse(numbers);
// [0, 1, 2, 3]
numbers[1]
// 1

JSON generator

JSON generator: https://json-generator.com/

sort()

let data = [20, 10, 1, 2, 3, 6, 4, 22, 33, 11];

// Ascending
data.sort(function(a,b) {
    if(a > b) {
        return 1;
    }
    if(a < b) {
        return -1;
    }
    return 0;
})
// [1, 2, 3, 4, 6, 10, 11, 20, 22, 33]


//Descending
data.sort(function(a,b) {
    if(a < b) {
        return 1;
    }
    if(a > b) {
        return -1;
    }
    return 0;
})
// [33, 22, 20, 11, 10, 6, 4, 3, 2, 1]

JavaScript Basic - this, closure, Math.random(), DOM...

Dahye Ji — Mon, 06 Dec 2021 19:15:58 +0000

arr2 = [2, 3, 4, 5]; // assigning to array
arr1 = [1, 2, 3, 4];

arr3 = arr1; // now arr3 and arr1 are referencing the same array
arr3[3] = 0;  // this change even the referenced array that's stored in arr1 (because they are getting the reference from the same thing)

arr1;
// [1, 2, 3, 0]

** Array/Object are reference type! If you assign array to new variable, it is not copying the array to the new variable but it's referencing it.

let str = 'welcome';

str;
// 'welcome'

str[0]
// 'w'

str[0] = 'v'
// 'v'

str;
// 'welcome'

string is primitive type. When you assign a variable that stores a primitive value to another, the value stored in the variable is created and copied into the new variable.

JavaScript uses prototype-based programming, which is a type of object oriented programming. Prototypes are a way of reusing behaviors by cloning existing objects instead of doing class based inheritance. (https://en.wikipedia.org/wiki/Prototype-based_programming)

Number, String, Boolean, undefined, null, Symbol are primitive type and Array, object and function are object/reference type.

Object

Object is instance of class in Object oriented programming. Javascript is prototype based - object oriented language. (which doesn't need class) However, Class has adopted in ES6.
Everything that consists of JavaScript is "Object" (except the primitive value, everything else is object)
Object is one or more of set of properties and properties have key-value pair.

Literal

JavaScript literals: literals are constant values that can be assigned to the variables that are called literals or constants. JavaScript literals are syntactic representations for different types of data like numeric, string, boolean, array, object, function etc data...

Instance

let myString = new String('hello world');

myString is an instance that's pointing String here. myString here is also called as 'Object'
Object is called instance and instance also can be called object. Because when the Function constructor is creating object, object at that point is called instance.
Instance is a created result of Function constructor.
'hello world' from above code can be called as object literal/string/primitive value/instance...etc

Function constructor

function User(name) {
    this.name = name;
    this.isAdmin = false;
}
let user = new User('Violet');
console.log(user.name); // Violet
console.log(user.isAdmin); // false

let user = new User('Hailey');
user.name;
// 'Hailey'

About function() constructor

this

When function or object executes the code, it points where the function or object is being executed. this points the execution context.

function aboutThis() {
    console.log(this); // console.log this to see what it is
}
aboutThis();  // call function
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}
undefined
// window

About the code above - this points window here. this points an object that calls function. window is running in global and the function aboutThis() is called in window. therefore, this points window.

let myObj = {
  val1:100,
  func1: function() { 
    console.log(this)
 }
}
myObj.func1();
// { val1: 100, func1: f}

there is function func1 inside object called myObj.

Then why console.log(this) prints {val1: 100, func1: f} ? it's because {val1: 100, func1: f} itself is myObj.

/ * this */
function sayName(){
  console.log(this.name);
}

let name = 'Hero'; // globally declared variable name
// so this means window.name === "Hero"

let peter = {
  name : 'Peter Parker',
  sayName : sayName
}

let bruce = {
  name : 'Bruce Wayne',
  sayName : sayName
}

sayName();
peter.sayName(); 
// Peter Parker
bruce.sayName();
// Bruce Wayne

Take a look at apply(), call(), bind() as well.

Closure

Scope is like effective range for variable(think about scope of sniper's rifle). let and const are block scoped. Global scope is like open space, you can access from anywhere.
I wrote about scope before. check

closure is like a space that's shut down/ cannot access.

function myFunction() {
 var val1 ="hello"; // This area inside of function is closure space
}

function myFunction() {
 var val1 ="hello”;
return val1; 
}

function myFunction() {
var val1 ="hello";
return 10;
}

myFunction();
// 10

// If you'd like to take a value out of function, make it to return. You can take the value that's returned.

// You can also return object in function.

function myFunction() {
var val1 ="hello";
return { getVal1 : function(){} } 
}

function myFunction() {
var val1 ="hello";
return { getVal1 : function(){
          return val1; } 
  } 
}

// to access the value where it's in a place that's not allowed to access,
you can assign function to object and return

let result = myFunction();
result.getVal1();
// 'hello'

Why is there closure?
It's to avoid variables getting mixed and being polluted. Also, to keep it safe.

You can return object as well.
Something to read
More about closure

DOM basic

Document Object Model - about DOM
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web
The Document Object Model (DOM) is a programming interface for web documents.
It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

How to access DOM tree

using document object, you can access to html document.

DOM practice

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
        }

        .circle {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: black;
            margin-bottom: 50px;
        }

        .btn-cont {
            display: flex;
        }

        button {
            /* padding: 16px 0; */
            width: 90px;
            height: 42px;
            display: flex;
            margin: 10px;
            align-items: center;
            justify-content: center;
            background-color: black;
            color: white;
            font-weight: 600;
            border-radius: 14px;
            border: 1px solid black;
            box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }

        button:active {
            transform: scale(0.98);
        }

        .circle.red-bg {
            background-color: #ff324e;
        }

        .circle.yellow-bg {
            background-color: #ffff56;
        }

        .circle.green-bg {
            background-color: #55d600;
        }
    </style>
</head>

<body>
    <div>
        <div class="container">
            <div class="circle"></div>
            <div class="btn-cont">
                <button class="red-btn">RED</button>
                <button class="yellow-btn">YELLOW</button>
                <button class="green-btn">GREEN</button>
            </div>
        </div>
    </div>
    <script>
        const circle = document.querySelector(".circle");
        const btnRed = document.querySelector(".red-btn");
        const btnYellow = document.querySelector(".yellow-btn");
        const btnGreen = document.querySelector(".green-btn");

        // refactored code
        let btnArr = [btnRed, btnYellow, btnGreen];
        btnArr.forEach((item) => {
            item.addEventListener("click", () => {
                // circle.classList.remove("red-bg", "yellow-bg", "green-bg");
                circle.classList = "circle";
                if (item.className === "red-btn") {
                    console.log("cllicke")
                    circle.classList.add("red-bg");
                } else if (item.className === "yellow-btn") {
                    circle.classList.add("yellow-bg");
                } else {
                    circle.classList.add("green-bg");
                }

            })
        })
        // btnRed.addEventListener("click", function () {
        //     circle.classList.remove("yellow-bg", "green-bg");
        //     circle.classList.add("red-bg");
        // })

        // btnYellow.addEventListener("click", function () {
        //     circle.classList.remove("red-bg", "green-bg");
        //     circle.classList.add("yellow-bg");
        // })

        // btnGreen.addEventListener("click", function () {
        //     circle.classList.add("green-bg");
        //     circle.classList.remove("red-bg", "yellow-bg");

        // })

    </script>
</body>

</html>

JavaScript Basic - Hoisting, IIFE, Filter(), Map(), Map, Set...

Dahye Ji — Sat, 04 Dec 2021 14:53:23 +0000

Hoisting***

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

var a = "first";
var b = "second";
var c = "third";
var d;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
// first
// second
// third
// undefined

'd' is undefined because there is no value assigned to it here.

var a = "first";
var b = "second";
var c = "third";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
var d = "fourth";
// first
// second
// third
// undefined

However here, 'd' has a value assigned to it but it's still undefined. WHY? It's because it only takes declarations and take them to the top of the document.

var a = "first";
var b = "second";
var c = "third";

d = "fourth"

console.log(d);

var d;

// fourth

Here, it console.log 'd' because when we declared variable, it gets hoisted to the top and because we also assigned a value to it before console.log() happens.
So it sees this as a valid code. This is what we call 'Hoisting'
Declarations in JS get hoisted. (Declaration happens first then saved in the memory after).

+ Let's see what happens with function as well.

console.log(add1(10, 20));
console.log(add2(10, 20));

// The function below goes all the way up because of hoisting!

function add1(x, y) {
  return x + y;
}

Because it's read from top to bottom in JavaScript, you might think the console.log() won't be executed. Because it's written before the function. However, the function add1(x,y) goes to the top because of hoisting and console.log() will be executed.
Named function in the same way as a variable gets taken out of the code and get placed to the top or hoisted to the top of the file. So we can use it at any point inside our code.

console.log(multiply(10, 20));
let multiply = function (a, b) {
  return a * b;
};

// Uncaught ReferenceError: multiply is not defined (error)

But if you use function expression like above code (assign function to variable), only the variable will go to the top because of hoisting(read what I wrote above. It takes variables to the top only not the values). So, the function won't go up.(won't hoist the function in this case because it's assigned to variable as a value). Therefore, the console.log() won't be executed. It's the same with arrow function.

console.log(multiply(10, 20));

const multiply = (a, b) => a * b;

This also gets an error because arrow function works like function expression above.
Video that helps to understand Hoisting
About hosting on MDN

How we avoid hoisting?

Don't create variables out in the root of file as long as it's unnecessary and instead, put them inside function if you are going to use the variables inside the function.

Then, how do we avoid function being hoisted?

So it's where it comes 'anonymous function'. Anonymous function doesn't have a name attached to it. So, the way we do it is by creating variable and assigning it to the function.


const sayA = function() {
  let a = 20;
  return a;
} 

console.log(sayA());

console.log(sayA());

const sayA = function() {
  let a = 20;
  return a;
} 
// if you move the function to below, like this then you can check that it gets an error. because the browser doesn't know if there is a function because it's not named function.

IIFE(Immediately Invoked Function Expression)

IIFE is a function that runs as soon as it is defined(like its name).
Syntax

(function () {
  statements
})();

You just have to wrap the function with '()' -parentheses to create IIFE.

Pros using IIFE

Self(auto)-invocation (It runs as soon as it's defined)
It's function scope. (function or variable defined inside IIFE, cannot be accessed outside the IIFE block)
It's memory efficient.

// Anonymous IIFE.
(function () {
    let a = 1;
    let b = 2;
    return a+ b;
}, ());
// It a code that starts the first.
// Usually use this when there is code that needs to be start as soon as it renders.

// Named IIFE
(function foo() {
  let a = 3;
  let b = 5;
  return a * b;
}());

// This does NOT work
foo(); // ReferenceError: foo is not defined

Call by value / Call by reference

When you call function and pass argument to it, it doesn't pass the original value itself but pass copied version of the value as function. Thus, when the value get changed within the function, it doesn't affect the original value.

let x = [10, 20, 30];

function test(a) {
  // 'a' is parameter
  // when 'a' received the value, it gets the copy of address of x value
  // 'a' points [10, 20, 30]
  a[0] = 10000;
}
test(x); // 'x' is argument
x;
//[(10000, 20, 30)];


let x = 10;
function test(a) { // 'x' points 10
  a = 10000; // but 'a' points 10000
}
test(x); // x is argument
x;
// 10
// 'x' points 10 so it returns 10

///

Video for better understanding: JavaScript Value vs Reference Types

map()

map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Example

let array = [1, 4, 9, 16];
let valueOne = array.map((x) => x * 2);

array;
//[ 1, 4, 9, 16]
valueOne;
// [2, 8, 18, 32]


function square(x) {
  return x ** 2;
}
valueTwo = array.map(square);
// [1, 16, 81, 256]
array;
// [1, 4, 9, 16]
valueTwo;
// [1, 16, 81, 256]

Using map() with object

let data = [
  {
    class: 1,
    number: 1,
    name: "Chloe",
    "test result": 91,
  },
  {
    class: 1,
    number: 2,
    name: "James",
    "test result": 70,
  },
  {
    class: 1,
    number: 3,
    name: "Kate",
    "test result": 64,
  },
  {
    class: 1,
    number: 4,
    name: "Mark",
    "test result": 89,
  },
  {
    class: 1,
    number: 5,
    name: "Jenny",
    "test result": 100,
  },
];

data.map((num) => num["test result"]);
// [91, 70, 64, 89, 100]
// 0: 91
// 1: 70
// 2: 64
// 3: 89
// 4: 100

let sum = 0;
data.map((x) => x["test result"]).forEach((y) => (sum += y));
sum;
// 414

Using map() with array

let array = [1, 2, 3, 4];
let result = [];
let data = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

let newData = data.map((a) => a.map((n) => n * 2));
newData;
// [Array(3), Array(3), Array(3)]
// 0: [2, 4, 6]
// 1: [8, 10, 12]
// 2: [14, 16, 18]

More about map()

filter()

filter() method creates a new array with all elements that pass the test implemented by the provided function.

const words = [
  "good",
  "nice",
  "magnificent",
  "awesome",
  "spectacular",
  "amazing",
  "cool",
];

const result = words.filter((word) => word.length > 7);
console.log(result);
// ['magnificent', 'spectacular']


let x = [2, 6, 5, 4, 8, 5, 4, 3, 2, 9];
// numbers that are greater than 5 from array x
const result = x.filter((num) => num > 5);
result;
// [6, 8, 9]

Method chaining

Method chaining is the mechanism of calling a method on another method of the same object. This ensures a cleaner and readable code. Method chaining uses this keyword in the object's class to access its methods. In javascript, the this keyword refers to the current object in which it is called

'1001001010'.replace('1', '#').replace('0', ' ')
// '# 01001010'
'1001001010'.replace(/1/g, '#').replace(/0/g, ' ')
// '#  #  # # 's

// let array = [1, 4, 9, 16]

// method chaining inside map()
// square root: Math.sqrt()
array.map(Math.sqrt);
// [1, 2, 3, 4]


array.map(Math.sqrt).map((x) => x ** 3);
//(4) [1, 8, 27, 64]
array;
// (4) [1, 4, 9, 16]
array.map((x) => x ** 0.5);
// (4) [1, 2, 3, 4]

method chaining practice

let userInfo = [
  {
    id: "jjang",
    pw:
      "5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5",
    gender: "male",
    phone: "010-5004-0000",
    email: "hojun1@gmail.com",
    "joined date": "2020-12-02",
    location: "125.242.161.149",
  },
  {
    id: "jjang2",
    pw:
      "5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5",
    gender: "male",
    phone: "010-5004-0000",
    email: "hojun2@gmail.com",
    "joined date": "2021-12-02",
    location: "125.242.161.149",
  },
  {
    id: "jjang3",
    pw:
      "5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5",
    gender: "female",
    phone: "010-5004-0000",
    email: "hojun3@gmail.com",
    "joined date": "2021-12-02",
    location: "125.242.161.149",
  },
  {
    id: "jjang4",
    pw:
      "5dbfbded05f34de754e8f265448be17934580556b488c0461fd12d211a87aaa5",
    gender: "female",
    phone: "010-5004-0000",
    email: "hojun4@gmail.com",
    "joined date": "2020-12-02",
    location: "125.242.161.149",
  },
];

// filter male only
userInfo.filter((el) => el.gender === "male");

// filter user who's male and joined in 2021
userInfo.filter(
  (el) => el.gender === "male" && el["joined date"].split("-")[0] === "2021");

// filter who's id is "jjang"
// userInfo.filter((el) => el.id === "jjang");
userInfo.find((user) => user.아이디 === "jjang");
// find stops when it finds the one looking for (good for memory efficiency)

** When id or password doesn't match
Do not let the user know "ID doesn't match" or "PW doesn't match". Because if you do, then you are letting someone know which one isn't matching. This is not good for security.
Instead, do it like "ID or PW don't match" so the person who sees this doesn't know which one isn't matching exactly.(This is for security reason)

more practice

let blogs = [
  {
    id: 1,
    title: "title1",
    content: "content1",
    section: "daily life",
  },
  {
    id: 2,
    title: "title2",
    content: "content2",
    section: "hobby",
  },
  {
    id: 3,
    title: "title3",
    content: "content3",
    section: "web development",
  },
  {
    id: 4,
    title: "title4",
    content: "content4",
    section: "web development",
  },
];

let sectionName = "web development";
let data = "web development" ? blogs.filter((el) => el.section === sectionName) : blogs;

data;
// [{…}, {…}]
// 0: {id: 3, title: 'title3', content: 'content3', section: 'web development'}
// 1: {id: 4, title: 'title4', content: 'content4', section: 'web development'}

// when there is error or can't find, you should show a message saying you can't find or return all the contents

Object

let obj = {
  keyA: "value of A",
  keyB: "value of B",
};

Object.entries(obj);
// [Array(2), Array(2)]
// 0: (2) ['keyA', 'value of A']
// 1: (2) ['keyB', 'value of B']

Object.keys(obj);
// ['keyA', 'keyB']
// 0: "keyA"
// 1: "keyB"

Object.values(obj);
// ['value of A', 'value of B']
// 0: "value of A"
// 1: "value of B"

Object.is(0, -0);
// false

for (let i of obj) {
  console.log(i);
}
// Uncaught TypeError: obj is not iterable.
// You cannot iterate object in JS. You can do that only with for...in

for (let i in obj) {
  console.log(i);
}
// keyA
// keyB

Object.entries()
Object.keys()
Object.values()

Map & Set

The Map() constructor creates Map objects.

Till now, we’ve learned about the following complex data structures:

Objects are used for storing keyed collections.
Arrays are used for storing ordered collections.

Map

Map is a collection of keyed data items, just like an Object. But the main difference is that _**Map allows keys of any type.

Methods of Map

new Map(): creates the map.
map.set(key, value): stores the value by the key.
map.get(key): returns the value by the key, undefined if key doesn’t exist in map.
map.has(key): returns true if the key exists, false otherwise.
map.delete(key): removes the value by the key.
map.clear(): removes everything from the map.
map.size: returns the current element count.(length)

let map = new Map();

map.set('1', 'str1');   // a string key
map.set(1, 'num1');     // a numeric key
map.set(true, 'bool1'); // a boolean key

// remember the regular Object? it would convert keys to string
// Map keeps the type, so these two are different:
console.log(map.get(1)); // 'num1' // using index
console.log(map.get('1')); // 'str1' // using key

console.log(map.size); // 3

As you can see above, unlike objects, keys are not converted to strings. Any type of key is possible.

NOTE: map[key] isn’t the right way to use a Map
Although map[key] also works, e.g. we can set map[key] = 2, this is treating map as a plain JavaScript object, so it implies all corresponding limitations (only string/symbol keys and so on).
So we should use map methods: set, get and so on.

Iteration over Map

For looping over a map, there are 3 methods:

map.keys() – returns an iterable for keys,
map.values() – returns an iterable for values,
map.entries() – returns an iterable for entries [key, value], it’s used by default in for..of.

Set

A Set is a special type collection – "set of values" (without keys), where each value may occur only once.

Method of Set

new Set(iterable): creates the set, and if an iterable - object is provided (usually an array), copies values from it into the set.
set.add(value): adds a value, returns the set itself.
set.delete(value): removes the value, returns true if value existed at the moment of the call, otherwise false.
set.has(value): returns true if the value exists in the set, otherwise false.
set.clear(): removes everything from the set.
set.size: is the elements count.

The main feature is that repeated calls of set.add(value) with the same value don’t do anything. That’s the reason why each value appears in a Set only once.

For example, we have visitors coming, and we’d like to remember everyone. But repeated visits should not lead to duplicates. A visitor must be "counted" only once.
Set is just the right thing for that:

let set = new Set();

let hana = { name: "Hana" };
let lilly = { name: "Lilly" };
let hailey = { name: "Hailey" };

// visits, some users come multiple times
set.add(hana);
set.add(lilly);
set.add(hailey);
set.add(lilly);
set.add(hailey);
//Set(3) {{…}, {…}, {…}}

// set keeps only unique values
console.log(set.size);
// 3

for (let user of set) {
 console.log(user.name);
}
// Hana
// Lilly
// Hailey

Iteration over Set

We can loop over a set either with for..of or using forEach

let set = new Set(["blue", "black", "white"]);

for (let value of set) console.log(value);
// blue
// black
// white

// the same with forEach:
set.forEach((value, valueAgain, set) => {
  console.log(value);
});
// blue
// black
// white

practice map

let m = new Map();

m.set("first", "one");
m.set("second", "two");
m.set("third", "three");

m; 
// Map(3) {'first' => 'one', 'second' => 'two', 'third' => 'three'}
// [[Entries]]
// 0: {"first" => "one"}
// 1: {"second" => "two"}
// 2: {"third" => "three"}

m.get("first");
// 'one'
m.get("second");
// 'two'
m.get("third");
// 'three'

m.keys();
// MapIterator {'first', 'second', 'third'}
// [[Entries]]
// 0: "first"
// 1: "second"
// 2: "third"

m.set("first", "one!!");
// Map(3) {'first' => 'one!!', 'second' => 'two', 'third' => 'three'}
// [[Entries]]
// 0: {"first" => "one!!"}
// 1: {"second" => "two"}
// 2: {"third" => "three"}

m.values();
// MapIterator {'one!!', 'two', 'three'}
// [[Entries]]
// 0: "one!!"
// 1: "two"
// 2: "three"

let n = new Number(5);
n;
//Number {5}
n = 5;
n;
// 5

let a = new Array([1, 2, 3]);

a;
// [Array(3)]

typeof a;
// 'object' // let a = new Array([1, 2, 3]);
typeof n;
// 'number' // assigned number, n = 5;

typeof m;
// 'object' // let m = new Map();

m.has("first");
// true
m.delete("first");
// true
m;
// Map(2) {'second' => 'two', 'third' => 'three'}

m;
// Map(2) {'second' => 'two', 'third' => 'three'}
for (let i of m) {
  console.log(i);
}
//(2) ['second', 'two']
//(2) ['third', 'three']

// You can't iterate object with for of but m is object created with new Map() and it's iterable as you can see above.


let obj1 =  {
  keyA: "value of A",
  keyB: "value of B",
};
Object.entries(obj1);

Object.length(obj1)
// Uncaught TypeError: Object.length is not a function

Object.keys(obj1).length;
// 2

m.size; // it's to find out the length 
// 2

m.entries();
// MapIterator {'second' => 'two', 'third' => 'three'}

let temp = new Map([
  [1, 10],
  [2, 20],
  [3, 30],
  [4, 40],
]);

temp;
// Map(4) {1 => 10, 2 => 20, 3 => 30, 4 => 40}

temp.size;
// 4 

let temp = new Map(Object.entries(obj1));

temp;
// Map(2) {'keyA' => 'value of A', 'keyB' => 'value of B'}
temp.size;
// 2

let mm = new Map();
mm.set("one", 1);
// Map(1) {'one' => 1}
mm.set("two", { one: 1, two: 2 });
// Map(2) {'one' => 1, 'two' => {…}}
// [[Entries]]
// 0: {"one" => 1}
// 1: {"two" => Object}

mm;
// Map(2) {'one' => 1, 'two' => {…}}
// [[Entries]]
// 0: {"one" => 1}
// key: "one"
// value: 1
// 1: {"two" => Object}
// key: "two"
// value:
// one: 1
// two: 2

mm.set([1, 2, 3], "three");
// Map(3) {'one' => 1, 'two' => {…}, Array(3) => 'three'}
// [[Entries]]
// 0: {"one" => 1}
// 1: {"two" => Object}
// 2: {Array(3) => "three"}

practice set

let s = new Set("abcdeeeeeeeee");
console.log(s);
// {'a', 'b', 'c', 'd', 'e'}
console.log(s.size);
// 3 5

s.add("f");
// Set(6) {'a', 'b', 'c', 'd', 'e', …}[[Entries]]0: "a"1: "b"2: "c"3: "d"4: "e"5: "f" size: 6[[Prototype]]: Set
// Set is not an ordered abstract data structure.

s.delete("b");
//true
s;
// Set(5) {'a', 'c', 'd', 'e', 'f'}
s.has("c");
// true
s.size;
// 5
s.forEach((i) => console.log(i));
// a
// c
// d
// e
// f

let a = new Set("abc");
let b = new Set("cde");

a;
// Set(3) {'a', 'b', 'c'}
b;
// Set(3) {'c', 'd', 'e'}

// Intersection
[...a].filter((value) => b.has(value));
// ['c']
a | b;
// 0
a & b;
// 0
a || b;
// Set(3) {'a', 'b', 'c'}[[Entries]]0: "a"1: "b"2: "c"size: 3[[Prototype]]: Set
a && b;
// Set(3) {'c', 'd', 'e'}
a + b;
// '[object Set][object Set]'

let union = new Set([...a].concat(...b));

union;
// Set(5) {'a', 'b', 'c', 'd', 'e'}
[...a, ...b];
// (6) ['a', 'b', 'c', 'c', 'd', 'e']

more about Map & Set

Spread

let numbers = [0, 1, 2];
let newNum = 12;
numbers = [...numbers, newNum];

numbers;
// [0, 1, 2, 12]

Rest

function checkRest(x, y, z) { 
 console.log(x, y, z);
}

let numbersArr = [0, 1, 2];

checkRest(numbersArr);
// [0, 1, 2]
checkRest(...numbersArr);
// 0, 1, 2


function restFunc(v, w, x, y, z) {
    console.log(v,w,x,y,z);
 }

let arr = [0, 1];
restFunc(-1, ...arr, 2, ...[3]);
// -1 0 1 2 3

more about spread & rest

DEV Community: Dahye Ji

How to access to dynamically created DOM elements - Event delegation/Event bubbling/Event propagation

Event Propagation / Event Delegation / Event Bubbling

How I solved my issue using event delegation.

** There are exceptions for event bubbling.

Using Git / GitHub for beginners (Collaborating on GitHub for a team project)

What is branch? How do I make my own branch to work on?

git commands

What does it mean when somebody tells me to send a pull request?

How can I apply those changes if things are added or something changes on main branch while I am working on other branch?

git commands

I tried to send pull request / merge but github says there are conflicts and I don't know how to fix this.

Then why conflicts happens?

Applying changes when I delete file

Adding a file

Include deletion to the stage (deletion will be staged which deletes the file from the branch)

undo git add or git commit that was made.

How to sync(update) forked repository with the original repository to keep it up to date?

Errors I dealt with in Next.js - styled components, pages, types

1. Warning : Props 'className' did not match Server: ' ' Client: ' '

2. Build optimization failed: found page without a React Component as default export in pages/styledComponent/styles

3. Error: Do not use the HTML <a> tag to navigate to /beers/ale/. Use Link from 'next/link' instead.

4. Warning: passHref is missing.

NavLink.tsx

index.tsx (Beers page directory)

index.tsx (Wine page directory)

Getting started with Next.js

Pages

package.json

Error I had after updating MacOS to Monterey from Big Sur

Unit testing with Jasmine / getting started with TDD

TDD(Test-Driven Development)

Unit Test

TDD Approach - Red, Green, Refactor

Getting started with Jasmine

TDD.spec.html

tddTest.spec.js

tddTest.js

TDD.html

Things to consider

jQuery, Ajax, Axios

jQuery

jQuery documentation

Selector

Using jQuery

jQuery filter

filter by attribute

child filter

content filter

class attribute

editing with jQuery

effects with jQuery

jQuery practice

hover()

mouse event

jQuery plugins

Ajax (Asynchronous Javascript and XML)

Axios

Try...catch, Asynchronous JavaScript - promise, async, await, event loop ...

Destructuring assignment

try...catch

try...catch...finally

How to use try...catch

Promise

Promise - finally

fetch

HTTP status codes

async, await

Event loop

call stack / stack

Queue

heap

JavaScript - Getter, Setter, Class...

Property flags

Prototype

Getter

Setter

Class

Private class features

instanceof

3. Error: Do not use the HTML `<a>` tag to navigate to /beers/ale/. Use Link from 'next/link' instead.