Here are the slides and resource links for my Jumping Into JavaScript talk at WordCamp Sacramento.
I want to apologize to those who attended for the shortened talk. I wanted to do some demos at the end of using build tools and React within WordPress, but I packed a bit too much intro JS content in the beginning.
Slides
Resources & Suggested Reading
- You Don’t Know JavaScript – A great book for getting started in JS. Free on GitHub
- My CodePen explaining variable scope
- Understanding JavaScript this Keyword – A nice writeup explaining
thisin simpler terms - MDN this Operator Documentation – The Mozilla docs on
this - Async and Await Explained with Diagrams and Examples – I didn’t get into details on Async/Await, but I’ve found this post to a good explainer that also covers Promises and how Async/Await helps build on and improve them.
- MDN async Function Documentation – Mozilla docs explaining async functions
- Building JavaScript – Learn to quickly use
@wordpress/scriptsfor a zero-configuration build process for writing modern JavaScript - My Demo Plugin – I didn’t get to this, but I was going to show some examples of using
@wordpress/scriptsand React via@wordpress/elementwithin the WordPress admin. This repo contains a few examples.
Hoisting
One of the audience members asked a question about hoisting in JavaScript. It was something I considered discussing but ended up removing before the talk because I knew I was already going to be tight on time.
The distinction is that in PHP, functions/classes can be used before they are declared within the same file. If you’re including an additional file which uses a class or function, then they need to be declared before that file gets included. However, variables must always be declared/assigned before use.
It’s a bit different in JS where variables must be both declared and assigned. They can be declared later in the script, and they will be hoisted up to the beginning. You can define a variable before it’s declared, but it must be defined before it is used.
Here is a CodePen with some examples of how it works in JavaScript that might be easier to follow.