Artwork

Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers에서 제공하는 콘텐츠입니다. 에피소드, 그래픽, 팟캐스트 설명을 포함한 모든 팟캐스트 콘텐츠는 Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers 또는 해당 팟캐스트 플랫폼 파트너가 직접 업로드하고 제공합니다. 누군가가 귀하의 허락 없이 귀하의 저작물을 사용하고 있다고 생각되는 경우 여기에 설명된 절차를 따르실 수 있습니다 https://ko.player.fm/legal.
Player FM -팟 캐스트 앱
Player FM 앱으로 오프라인으로 전환하세요!

New to JavaScript — ES2022

38:41
 
공유
 

Manage episode 302344399 series 1469447
Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers에서 제공하는 콘텐츠입니다. 에피소드, 그래픽, 팟캐스트 설명을 포함한 모든 팟캐스트 콘텐츠는 Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers 또는 해당 팟캐스트 플랫폼 파트너가 직접 업로드하고 제공합니다. 누군가가 귀하의 허락 없이 귀하의 저작물을 사용하고 있다고 생각되는 경우 여기에 설명된 절차를 따르실 수 있습니다 https://ko.player.fm/legal.

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below: https://a0.to/syntax.

Show Notes

04:50 - Regex indicies

  • New d flag in a regex
  • https://regex101.com/
  • This will tell you the indexes (indicies) of the regex matches
  • Handy if you need to highlight or replaces matches in a string
  • We can ask for the start and end positions of each matched capture group

07:16 - Class updates

  • Private fields
  • Properties and Methods to be kept private
  • Prefix them with a #
  • =Helpful for internal state and methods which should not be accessed directly or at all by external
  • In React how we have __INTERNTAL_NEVER USE THIS
class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works

09:07 - Class fields

  • This may seem super old because we have been polyfilling it forever
  • Right now if you want an instance field on a class, you need to declare it in the constructor
  • Now we can just declare them inside the class

10:36 - Static fields and methods

  • As above can also be static with the static keyboard
  • Works for methods too
    • Explain what a static method is

13:17 - Top level await

  • So handy in modules. Need to pull in some data? Simple.

15:19 - Ergonomic brand checks for private fields

  • Used for checking if a private field on a class exists using the in keyword

16:00 - .at() method

  • Strings and arrays - we can use square brackets to reference items of the array
  • Super handy for grabbing the last item of an array
// 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B
  • Why not use array[-1]?
  • We used to use slice(-1)
  • What about indexOf?

21:34 - Handy hasOwn method

24:51 - Class static block

Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
  continue reading

750 에피소드

Artwork
icon공유
 
Manage episode 302344399 series 1469447
Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers에서 제공하는 콘텐츠입니다. 에피소드, 그래픽, 팟캐스트 설명을 포함한 모든 팟캐스트 콘텐츠는 Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers 또는 해당 팟캐스트 플랫폼 파트너가 직접 업로드하고 제공합니다. 누군가가 귀하의 허락 없이 귀하의 저작물을 사용하고 있다고 생각되는 경우 여기에 설명된 절차를 따르실 수 있습니다 https://ko.player.fm/legal.

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Auth0 - Sponsor

Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below: https://a0.to/syntax.

Show Notes

04:50 - Regex indicies

  • New d flag in a regex
  • https://regex101.com/
  • This will tell you the indexes (indicies) of the regex matches
  • Handy if you need to highlight or replaces matches in a string
  • We can ask for the start and end positions of each matched capture group

07:16 - Class updates

  • Private fields
  • Properties and Methods to be kept private
  • Prefix them with a #
  • =Helpful for internal state and methods which should not be accessed directly or at all by external
  • In React how we have __INTERNTAL_NEVER USE THIS
class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works

09:07 - Class fields

  • This may seem super old because we have been polyfilling it forever
  • Right now if you want an instance field on a class, you need to declare it in the constructor
  • Now we can just declare them inside the class

10:36 - Static fields and methods

  • As above can also be static with the static keyboard
  • Works for methods too
    • Explain what a static method is

13:17 - Top level await

  • So handy in modules. Need to pull in some data? Simple.

15:19 - Ergonomic brand checks for private fields

  • Used for checking if a private field on a class exists using the in keyword

16:00 - .at() method

  • Strings and arrays - we can use square brackets to reference items of the array
  • Super handy for grabbing the last item of an array
// 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B
  • Why not use array[-1]?
  • We used to use slice(-1)
  • What about indexOf?

21:34 - Handy hasOwn method

24:51 - Class static block

Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
  continue reading

750 에피소드

Wszystkie odcinki

×
 
Loading …

플레이어 FM에 오신것을 환영합니다!

플레이어 FM은 웹에서 고품질 팟캐스트를 검색하여 지금 바로 즐길 수 있도록 합니다. 최고의 팟캐스트 앱이며 Android, iPhone 및 웹에서도 작동합니다. 장치 간 구독 동기화를 위해 가입하세요.

 

빠른 참조 가이드