새롭지만 잘 알려지지 않은 JavaScript API 및 기능

 .groupBy()

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

.toSorted()

The method of instances is the copying version of the method. It returns a new array with the elements sorted in ascending order.toSorted()Arraysort()

const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]

<dialog>: The Dialog element

The The HTML element represents a modal or non-modal dialog box or another interactive component, such as a dismissible alert, inspector, or subwindow.<dialog>

The HTML element is used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page.<dialog>

JavaScript should be used to display the element. Use the method to display a modal dialog and the method to display a non-modal dialog. The dialog box can be closed using the method or using the method when submitting a that is nested within the element. Modal dialogs can also be closed by pressing the Esc key.<dialog>.showModal().show().close()dialog<form><dialog>

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

<search>: The generic search element

The HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.<search><search>

<search>
  <label>
    Find and filter your query
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    Exact matches only
  </label>

  <section>
    <h3>Results:</h3>
    <ul id="results">
      <!-- search result content -->
    </ul>
    <output id="no-results">
      <!-- no results content -->
    </output>
  </section>
</search>

This example demonstrates potential DOM content when dynamically including JavaScript search functionality in a web application. When search functionality is implemented entirely with JavaScript, if no form is submitted, neither a element nor a submit is required. For semantics, the element is included to contain the search and filtering capabilities.<form><button><search>

.findLast()

The method of instances iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function. If no elements satisfy the testing function, is returned.findLast()Arrayundefined

const array1 = [5, 12, 50, 130, 44];

const found = array1.findLast((element) => element > 45);

console.log(found);
// Expected output: 130

.with()

The method of instances is the copying version of using the bracket notation to change the value of a given index. It returns a new array with the element at the given index replaced with the given value.with()Array

Creating a new array with a single changed element

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]

With the method, you can update a single element in an array and then apply other array methods.with()

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6).map((x) => x ** 2)); // [1, 4, 36, 16, 25]

The method creates and returns a new array. It reads the property of and then accesses each property whose key is a nonnegative integer less than . As each property of is accessed, the array element having an index equal to the key of the property is set to the value of the property. Finally, the array value at is set to .with() length this length this index value

const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
  3: 3, // ignored by with() since length is 3
};
console.log(Array.prototype.with.call(arrayLike, 0, 1));
// [ 1, undefined, 4 ]

Use “await” at the top level of a module

from mdnThe await operator is used to wait for a Promise and get its fulfillment value.

const getUserInfo = () => {
  return new Promise((rs) => {
    setTimeout(() => {
      rs({
        name: 'fatfish'
      })
    }, 2000)
  })
}
// If you want to use await, you must use the async function.
const fetch = async () => {
  const userInfo = await getUserInfo()
  console.log('userInfo', userInfo)
}

fetch()
// SyntaxError: await is only valid in async functions
const userInfo = await getUserInfo()
console.log('userInfo', userInfo)

In fact, after ES13, we can use await at the top level of a module, which is a really happy new feature for developers. That’s great.

const getUserInfo = () => {
  return new Promise((rs) => {
    setTimeout(() => {
      rs({
        name: 'fatfish'
      })
    }, 2000)
  })
}

const userInfo = await getUserInfo()
console.log('userInfo', userInfo)

Use “#” to declare private properties

In the past, we used "_" To represent private properties, but it is not secure and may still be modified externally.

class Person {
  constructor (name) {
    this._money = 1
    this.name = name
  }

  get money () {
    return this._money
  }
  set money (money) {
    this._money = money
  }
  showMoney () {
    console.log(this._money)
  }
}

const p1 = new Person('fatfish')

console.log(p1.money) // 1
console.log(p1._money) // 1
p1._money = 2 // Modify private property _money from outside
console.log(p1.money) // 2
console.log(p1._money) // 2

We can use “#” to implement truly secure private properties

class Person {
  #money=1
  constructor (name) {
    this.name = name
  }
  get money () {
    return this.#money
  }
  set money (money) {
    this.#money = money
  }
  showMoney () {
    console.log(this.#money)
  }
}
const p1 = new Person('fatfish')
console.log(p1.money) // 1
// p1.#money = 2 // We cannot modify #money in this way
p1.money = 2
console.log(p1.money) // 2
// Uncaught SyntaxError: Private field '#money' must be declared// in an enclosing classconsole.log(p1.#money)

Easier to set member variables for classes

class Person {
  constructor () {
    this.age = 1000
    this.name = 'fatfish'
  }

  showInfo (key) {
    console.log(this[ key ])
  }
}
const p1 = new Person()
p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

Now you can use the following way, which is really more convenient to use.

class Person {
  age = 1000
  name = 'fatfish'
  showInfo (key) {
    console.log(this[ key ])
  }
}

const p1 = new Person()
p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

FileReader API

https://12daysofweb.dev/2023/filereader-api/