Learn Javascripts From Beginner Perspective

this post will guide you through the fundamentals of Javascripts, including what is EcmaScripts, why you might to choose it, and how to get started EcmaScripts instead of Javascripts

Table of contents

Javascripts

javascript is scripting language which we can run code without compile first because scripting language using Interpreter for translate code. For now, javascript not only in browser for make website to be interactive. but, javascript can run in server using Node JS

History of Javascript

JavaScript was created in 1995 by Brendan Eich, then an engineer at Netscape, with the goal of bringing more life to the static web pages of the time. Originally named LiveScript, it was soon rebranded as JavaScript, aligning it with the Java programming language as part of a marketing strategy, despite the two languages having very different designs and purposes. JavaScript quickly became a cornerstone technology of the web, alongside HTML and CSS, enabling developers to create rich, interactive user experiences.

How does javascript work?

Let’s break down how JavaScript works in a simpler way. Imagine you’re in a kitchen ready to make a meal. in this analogy, making the meal is like running a JavaScript program.

1. The Recipe (JavaScript Code): Your recipe is like the JavaScript code. It’s a set of instructions that you need to follow to get your desired outcome, which, in this case, is a delicious meal (or a running application).

2. The Chef (JavaScript Engine): the chef are like the JavaScript engine. Just as a chef reads and interprets a recipe to know what to do, the JavaScript engine reads and interprets your JavaScript code. Different kitchens might have chefs with different skills or ways of cooking (just like different browsers have different JavaScript engines, such as V8 for Chrome or SpiderMonkey for Firefox), but they all aim to create a meal (run the program) according to the recipe (code).

3. Preparing Ingredients (Parsing the Code): Before you start cooking, you need to prepare your ingredients, which is similar to how the JavaScript engine parses your code. Parsing breaks down and understands each line of your code, just like how you need to measure out and chop up your ingredients before cooking.

4. Cooking (Executing the Code): Now, it’s time to start cooking, which is like executing the JavaScript code. As you follow the recipe, step by step, the JavaScript engine runs through the code, line by line, performing the instructions specified. Sometimes, you might need to adjust your cooking method on the fly to ensure the meal turns out right, similar to how a JavaScript engine might optimize code execution for better performance.

5. Dinner Is Served (Output): Once you’ve finished cooking, you can serve the meal. In JavaScript terms, this is the output of your program. Whether it’s displaying something on a webpage, accepting user input, or sending data to a server, this is the result of the JavaScript engine running your code.

6. Cleaning Up (Garbage Collection): After cooking and eating, you need to clean up. JavaScript engines have a process called garbage collection that cleans up memory that’s no longer needed. Just as you wouldn’t leave dirty dishes lying around because it would attract pests and create a mess, a JavaScript engine removes unused data to prevent the program from using more memory than it needs, keeping everything running smoothly.

after you understand how javascript work. you can learn javascript from basic. here’s the list:

1. Mdn
2. W3Schools
3. Geeks For Geeks

EcmaScripts

ECMAScript is the standardized scripting language specification on which JavaScript is based.

EcmaScripts Versions

The standard has gone through several versions, each adding features and improvements:

• ES1 (1997): The first edition.
• ES2 (1998): Minor editorial changes.
• ES3 (1999): Added regular expressions, better string handling, new control statements, try/catch error handling, and more.
• ES4: Was abandoned in favor of ES3.1, which eventually became ES5.
• ES5 (2009): Introduced “strict mode,” JSON support, enhanced array manipulation methods, property getters and setters, and more. This version significantly improved JavaScript usability and security.
• ES6/ES2015: A major update with many new features, including class declaration, modules, template literals, arrow functions, promises, and many new syntactic sugar features, significantly modernizing the language.
• ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, and beyond: These versions introduced features incrementally, such as async/await (ES2017), spread/rest operators, BigInt (ES2020), optional chaining (ES2020), and logical assignment operators (ES2021).

How to convert from Javascript to EcmaScripts

now i will demonstrate how to convert from javascript to EcmaScript using express js.

1. if in your local laptop / pc don’t have node js. you must download and install it first. you can download in Node Js Website or u can use NVM Node Version Manager. after install, you can check node js successfully installed in your local laptop / pc or not using node -v like this:
2. open your terminal and make empty folder with type mkdir js-ecmascript then type cd js-ecmascript. after that, you can type yarn init or npm init for create empty file called package.json. what is package.json ? package.json is core to the Node.js ecosystem and is a fundamental part of understanding and working with Node.js, npm, and even modern JavaScript. after file package.json created, you must copy paste from image in below to your package.json after you copy paste, don’t forget to yarn install or npm install
3. create folder src and inside folder src create file index.js. after that copy paste code below to your index.js
4. try run it using yarn start or npm start. you will find error like image below: why error? because in line 1 and line 9, you using import and export. these 2 features only available in ES6 and above. so, there is two options. change your code to ES5 like code below: or you still want using ES6? if you want still using ES6, you have 2 options:

• add type: module in your package.json
• or add file .babelrc in your root project and copy paste code below: what is Babel? Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. so, with Babel you can using all feature ES6 and above.

5. try run it again with yarn start or npm start
6. voila, your code running successfully!

Conclusion

in This post, you have been learn what is javascript, ecmascript, how to convert javascript to ecmascript. in next post, i will make learn react from beginner perspective and i think i will gonna make each part from basic. so, stay tune!