JavaScript 💻
| Based on | ES5 | ES6 |
|---|---|---|
| Release | 2009 | 2015 |
| Data types | string, number, boolean, null, and undefined | string, number, boolean, null, undefined and symbol |
| Variables | var | let and const |
| Performance | nice | better |
| Support | wide range of communities | wide but lesser than ES5 |
| Arrow Functions | both function and return keywords | don't require the function keyword to define the function |
I wanted to understand why it is more useful to use ES6 and I decided to ask ChatGPT this question. Although I didn't fully understand some of its answers, I realized that ES6 has a lot more features and is easier to use. Below you can find ChatGPT's answers.
ES6 (ECMAScript 2015) offers several advantages over ES5:
- Improved Syntax: ES6 introduces concise and readable syntax features.
- Enhanced Variable Handling: ES6 provides better control over variable scope.
- Built-in Modules: ES6 has a built-in module system for better code organization.
- Arrow Functions: ES6 offers a more concise syntax for writing functions.
- Class Syntax: ES6 introduces a class syntax for object-oriented programming.
- Promises and Async/Await: ES6 simplifies asynchronous programming.
- Improved Iteration: ES6 provides better iteration capabilities.
Choosing ES6 improves code readability, modularity, and developer productivity
Arrow functions are mostly look like this. But there is of course different ways, for example I used arrow function in my routings.
const functionName = (parameter1, parameter2) => { // function body };
In my routings I used dynamic data for each handlebars document.
I used only const to declare, create or import.
in a function
Scope refers to the visibility and accessibility of objects, variables and functions in a particular part of the code. There are 2 types of scope in JavaScript:
- Global Scope: Variables declared in the global scope are accessible throughout the entire codebase.
- Local Scope: Variables declared inside a function and local variables inside a function are given more priority than global variables.
Hoisting means that variable and function declarations are moved to the top of their containing scope. This allows you to use them before they are actually written in your code. It's like JavaScript automatically lifts these declarations to the top. Assignments or initializations are not being hoisted, only the declarations.
I will consider here some of the rules that I used. If you want to learn more about my coding principles, you can check my Coding Standarts document
- Using comments properly
- Semantic HTML
- Structured CSS
- Staying consistent
- Meaningful names as file names and as variable/property names
- Using root
I am using Montserrat as my main typography but I also have a back-up font named Annie Use Your Telescope.
font-family: 'Annie Use Your Telescope', cursive;
font-family: 'Montserrat', sans-serif;
I am also using Sigmar for my h1, h2 and h3 but I also have the same back-up font named Annie Use Your Telescope.
font-family: 'Annie Use Your Telescope', cursive;
font-family: 'Sigmar', cursive;
I used :roots for colors. That made my work more consistent and it makes more readable code. You can check my Coding Standarts document
I made a responsive app/website, users can use it on any technological device. I used some ways to make it responsive.
- I used @media with min-width.
- I used for width and height viewport height(vh) and viewport width(vw)
<noscript> is a saver for this problem. If JavaScript is not working properly, it shows the user a message.
`{{!-- The fallback error message if JavaScript is disabled --}}`
`<noscript>`
`<p>Your browser has JavaScript disabled. Please enable JavaScript to view the content.</p>`
`</noscript>`
I am not sure if this is a good example of client-side JavaScript but I used a library named Axios. Axios is a promise-based HTTP client library for making AJAX requests in JavaScript.