DEV Community: Justin Graysen

Why variables can be accessed before declaration in Javascript?

Justin Graysen — Fri, 02 Sep 2022 10:48:52 +0000

One of the most used and famous languages today without a doubt is JavaScript, nowadays it is everywhere, we can create web applications and systems, develop APIs on the back-end and create mobile applications.

Despite its popularity, many people don’t like JavaScript, mainly because some particularities of the language are very different from others.

One of the things that confused me when I started using JavaScript was the possibility of using variables or functions before their declarations and I believe that many people also find this a bit strange.

In this post I will try to explain how does this happen. 👇

Execution Context

Before we talk about variables and functions, we need to understand some concepts about the JavaScript language, the first of them will be context execution.

In JavaScript a fundamental unit of execution are functions, we use them all the time, to calculate something, perform side effects (like changing the UI), reuse code or to make code easier to understand. We also know that a function can call another function, which in turn can call another function, and so on…

When a function calls another function, the code execution must go back to the position where it was called from, i.e:

When calling the dialog function we will call another function (in this case hello), when the hello function is finished executing, we need to go back to where it was called, i.e., inside the dialog function and continue execution.

But, have you ever wondered how the JavaScript engines keep track of all these functions running and returning to specific positions in the code?

In JavaScript there are two main types of code: global and function.

Global code

This code is defined outside of all functions, i.e. they are loose in our JavaScript.

Function code

This code is defined inside the functions.

When our code is being executed by JavaScript engines, each statement is executed over a certain execution context and as we have two types of code, we also have two types of contexts: global execution context **and **function execution context.

The most significant difference between them is that there is only one global execution context, it is created when JavaScript starts its execution. While for each function invocation a new function execution context is created.

Thus, it is through these contexts that JavaScript can handle pauses, executions and callbacks.

We know that JavaScript is based on a single thread execution model, that is, only one piece of code can be executed at a time. Therefore, every time a function is invoked, the current execution context is paused and a new function execution context is created, from which the code will be evaluated. After the function has performed its task, that is, its code has been executed, the execution context of that function is usually discarded and the previous execution context is restored.

So it is necessary to keep both contexts tracked, that is, we need one running execution context and another context that is paused. The easiest way to implement this functionality would be through stacks, called execution context stacks.

Lexical Environment

Now that we understand a little more about how execution contexts work, let’s take a look at the lexical environment.

Consider the following example:

In this case, we know that by calling the console.log function a new execution context will be created, but how does the log function get the value of the variable name?

This process is called identifier resolution, basically the idea is to find out which variable a given identifier refers to, the execution context does this through the lexical environment.

A lexical environment is an internal JavaScript mechanism to keep track of the mapping of identifiers to specific variables, going back to the previous code:

The lexical environment is consulted when the variable name is accessed, that is, in the console.log declaration.

Lexical environments are an internal implementation of the JavaScript scopes mechanism, and people generally refer to them as scopes.

Generally a lexical environment is associated with a specific code structure, it can be associated with a function, a block of code or a catch (part of try/catch) and each structure can have its own identifier mapping.

Types of variables in Javascript

In JavaScript we can use three reserved words to define variables: var, let and const. They differ in two aspects: mutability and their relationship to the lexical environment.

Mutability

If we categorize the variable declaration by the mutability aspect, we can put const on one side and var/let on the other.

All variables defined with const are immutable, that is, their value can only be set once. On the other hand, all variables defined with var or let can have their values changed as many times as needed.

Lexical environment

The three types of variable definitions (var, let and const) can also be categorized by their relationship to the lexical environment (by their scope), we can put var on one side and let/const on the other.

Using var

When we use the var definition type, the variable is defined in the nearest function or global lexical environment (blocks are ignored). Let’s take a look at the following example:

What can be strange with JavaScript, and confuses a lot of people coming from other languages, is that we can access variables defined in block code outside of these blocks.

This is because when we declare variables with the reserved word var they are registered in the nearest function or global lexical environment, regardless of block scopes.

Using let and const

Because of this odd behavior, in the ES6 version of JavaScript two new variable declaration types let and const have been added.

Unlike var, they define variables in the *nearest lexical environment *(it can be a block, a loop, a function, or global).

Making a few changes to the previous code:

In this example, you can't access the text variable outside of the for loop and you can't access the message variable outside of the function hello. Because, in both cases, it's not in their lexical environment.

Registering identifiers in the lexical environment

One of the principles of the JavaScript language is to be easy to use, so we don’t specify function return types, parameter types, variable types, and so on… And you already know that JavaScript code is executed line by line, so let’s take a look at the following example:

If code is executed line by line, how can we call the hello function before its declaration? The execution of JavaScript code occurs in two phases:

The first phase is activated when a new lexical environment is created, in this phase no code is executed, but, the JavaScript engine visits and registers all variables and functions declared in the current lexical environment.
In the second phase, JavaScript execution occurs after the first phase was performed, this behavior depends on the variable declaration type (var, let and const) and the environment type (global, function or block).

Let's take a look at another example:

In this example it will be logged undefined in our console, because the first step will be to scan and register the identifier for each variable with the initial value undefined. The value of the variable will be set to the second one when the code execution is actually done.

This is because variables of type var can have their values undefined and be accessed before their declaration.

Note: If the variables were defined with let or const, JavaScript will throw a ReferenceError saying that we cannot access variables before they are declared.

Conclusion

In this article we saw why variables of type var can be accessed before their declarations and how declaration functions can be called before their definitions.

We also saw some interesting JavaScript concepts such as: execution contexts, lexical environments, scopes, identifier resolution and identifiers.

Thanks for reading! Follow me in this platform to read more development content. Have a great day, see you soon! 👋

15 tips to improve as a Javascript developer

Justin Graysen — Thu, 01 Sep 2022 17:50:09 +0000

In this article I’ll show you 15 excellent tips to master the JavaScript language. We'll learn coding shortcuts, features that few people know and some "tricks" that can be very useful for JS programmers in general.

Warning: Not all tips will please everyone. The intention is to show interesting possibilities, but knowing when is the best time to use each of them is up to the programmer (taking into account code readability, for example).

Today’s tips increase in difficulty, so if you find some tip too easy, keep reading and it will get harder (or not, you may already master what I'll teach today 😅).

1. Null and undefined evaluation

One of the things that we soon learn in JavaScript is that not everything is what it seems to be and that there are many ways that a variable can cause you problems in a dynamic language like this. A very common test that can be done is to check if a variable is null or undefined, or even "empty", as the example below:

let username;
if (name !== null || name !== undefined || name !== '') {
   userName = name;
} else {
   userName = "";

A simpler way to do the same evaluation would be:

let userName = name || "";

If you don't believe it, please test it out!

2. Array definition

So you have to create an Array object and then populate it with its elements, right? Your code will probably look something like this:

let a = new Array(); 
a[0] = "s1"; 
a[1] = "s2"; 
a[2] = "s3";

How about doing the same thing in just one line?

let a = ["s1", "s2", "s3"]

Pretty nice, huh!

Warning: I know this tip's simpler but bare with me, it may help some folks starting from other programming languages

3. Ternary Operator

The famous "one-line if/else", the ternary operator is already an old acquaintance for many programmers of C-like languages like Java and C#. It exists in JS as well and can easily transform blocks of code like this:

let big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}

In this:

let big = x > 10 ? true : false;

Or even simpler:

let big = x > 10;

But does it work with function calls as well? If I have two different functions and I want to call one in case the if is true and one in case the if is false, typically you would do something like this:

function x() { console.log('x') };
function y() { console.log('y') };

let z = 3;
if (z == 3) {
    x();
} else {
    y();
}

But, hold on to your chair…you can do the same function call using ternary:

function x() { console.log('x') };
function y() { console.log('y') };

let z = 3;
(z==3 ? x : y)(); // Shortcut

Also worth an honorable mention are the ifs that test whether a variable is true, where some programmers still do it that way:

if (likeJs === true)

When they can just do it like this:

if (likeJs)

4. Declaring variables

Yes, even the declaration of variables has its quirks. Although this is not exactly a secret, you still see a lot of programmers making declarations like this:

let x;
let y;
let z = 3;

When they could do this:

let x, y, z = 3;

5. Using RegExp

Regular Expressions are a great tool to create elegant and powerful code when it comes to textual analysis and validation, and data extraction in the case of some types of web crawlers.

You can learn more on how to use regular expressions in these links:

6. charAt() shorcut

So you want to select just one character from a string, at a specific position, right? I bet the first thing that comes to your mind is to use the charAt function, like below:

"string".charAt(0);

But get this, you get the same result by remembering that analogy of the String being an array of chars:

"string"[0]; // Returns 's'

7. Powers of base 10

This is just a leaner notation for Base-10 exponential numbers or the famous numbers full of zeros. For those of you who are close to mathematics, you won’t be too surprised to see one of these, but a number 10,000 can easily be replaced in JS by 1e4, that is, 1 followed by 4 zeros, as below:

for (let i = 0; i < 1e4; i++) {

8. Template Literals

This semantic feature is unique to ECMAScript version 6 or higher and greatly simplifies reading string concatenations in variable sets. For example, the concatenation below:

const question = “My number is “ + number + “, ok?”

This one is simple, and you have probably done worse concatenations. As of ES6, we can do this concatenation using template literals:

const question = `My number is ${number}, ok?`

9. Arrow Functions

Arrow Functions are shortened ways to declare functions. Yes, more ways to do the same thing that have worked since the first version of JavaScript. For example, below is a sum function:

function sum(n1,n2){
   return n1 + n2;
}

We can also declare this function like this:

const sum = function(n1,n2){
   return n1+n2;
}

But using arrow functions:

const sum = (n1,n2) => n1 + n2;

10. Argument Destructuring

This tip is for those functions that are full of parameters and you decided to replace all of them with one object. Or for those functions that really require a configuration object as parameter.

So far no problem, after all who has never experienced this? The problem is having to keep accessing the object that was passed by parameter followed by each property we want to read, right? Like this:

function init(config){
   const s = config.s;
   const t = config.t;
   return s + t;// or config.s + config.t
}

init({s: "1", t: "2"});

The argument destructuring feature serves precisely to simplify this and at the same time help code readability by replacing the previous statement with this one:

function init({s, t}){
   return s + t;
}

init({s: 1, t: 2});

And to top it off, we can still add default values in properties of our parameter object:

function init({s = 10, t = 20}){
   return s + t;
}

init({s: 1});

This way, the value of s will be 1, but the value of t will default to this property, which will be 20.

11. Key-Value Names

A very addictive feature is the abbreviated way of assigning properties to objects. Imagine you have a person object that has a name property that is going to be assigned via a name variable. It would look like this:

const name = "Joseph"
const person = { name: name }

// { name: "Joseph" }

While you can do it like this:

const name = "Joseph"
const person = { name }

// { name: "Joseph" }

That is, if your variable has the same name as the property, you don’t need to call it, just pass the variable. The same is true for multiple properties:

const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }

12. Map

Consider the following array of objects:

const animals = [
    {
        "name": "cat",
        "size": "small",
        "weight": 5
    },
    {
        "name": "dog",
        "size": "small",
        "weight": 10
    },
    {
        "name": "lion",
        "size": "medium",
        "weight": 150
    },
    {
        "name": "elefante",
        "size": "large",
        "weight": 5000
    }
]

Now imagine that we want to take just the names of the animals to add to another array. Normally we would do this:

let animalNames = [];

for (let i = 0; i < animals.length; i++) {
    animalNames.push(animals[i].name);
}

But with Map, we can do this:

let animalNames = animais.map((animal) => {
    return animal.nome;
})

Note that map expects a function by parameter with at most three arguments:

The first is the current object (as in a foreach)
The second is the index of the current iteration
The third is the entire array

Obviously this function will be called once for each object in the animal array.

13. Filter

What if we want to iterate through the same array of animal objects as in the previous tip, but this time returning only those whose size is “small”?

How would we do that with regular JS?

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
       smallAnimals.push(animals[i])
    }
}

However, using the filter operator, we can do this in a much less verbose and clearer way:

let smallAnimals = animais.filter((animal) => {
    return animal.size === "small"
})

Filter expects a function by parameter with the argument that is the object of the current iteration (as in a foreach) and it should return a boolean indicating whether this object will be part of the return array or not (true indicates that it passed the test and will be part of it).

14. Reduce

Another important feature of Javascript it the reduce. It allows us to do grouping and calculations on top of collections in a very easy and powerful way. For example, if we wanted to add up the weight of all the animals in our array of animal objects, how would we do it?

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight;
}

But with reduce we can do this instead:

let totalWeight = animals.reduce((total, animal) => {
    return total += animal.weight;
}, 0)

Reduce expects a function by parameter with the following arguments:

The first is the current value of the accumulator variable (at the end of all iterations, it will contain the final value)
The second argument is the object of the current iteration
The third argument is the index of the current iteration
The fourth argument is the array with all objects that will be iterated

This function will be executed once on each object in the array, returning the aggregated value at the end of its execution.

Conclusion

What about you? Do you have any other tips to add to the list? Leave it in the comments!

Thanks for reading! Follow me in this platform to read more development content. Have a great day, see you soon! 👋

Best 4 IDEs for Javascript to use in 2022: pros and cons

Justin Graysen — Tue, 23 Aug 2022 15:48:00 +0000

To increase your productivity when coding Javascript, I brought this selection of IDEs that will help you a lot!

JS is the most popular language for web development. It integrates well with CSS and HTML, which together can make incredible applications. A language as popular as this must have a lot of IDEs and editor available, right?

But this high numbers of tools can be confusing for new developers. There are many options and functionalities. So, to help you choose the best one, check out this article and find the best Javascript IDE for you.

What is an IDE?

An IDE (Integrated Development Environment) is a software that allows you to code with many extra features instead of just typing lines of code. With IDEs, you can edit, modify, debug, execute and test your code.

IDEs come with many extra features, like automatic text completion, that increases your coding speed and productivity. In this article, I curated a list of the best 4 free IDEs, all of which are in the top 10 most used IDEs according to a GitHub research.

Differences between IDEs and code editors

Using an IDE is preferred over code editors because of the IDE’s ability to debug the code. Furthermore, IDEs have support for ALM systems (Application Lifecycle Management).

In short, an IDE can provide the following benefits:

A code editor (that shows you syntax errors while typing)
Debugger (to find errors in the code)
Compiler and interpreter
Automatic compilation (creating script to automate many tasks, like documentation for example)
Syntax highlighting
Quick access to class or function definition
Shortcuts to execute commands
Easy-to-use user interface
Many code libraries
Automatic code completion
Support to different programming languages
Cloud development
Mobile development

However, today the difference between source code editors and IDEs is blurred, since there are code editors that have slowly started to offer similar functionality to the IDEs.

How to choose a Javascript IDE

To make a good choice, you need to be clear about what is important to you and to the project you will be working on.

Do you code alone or in larger teams? What types of functionality are on your most relevant list? Do you prefer an open source IDE or not?

We have already talked about the pros of using an IDE, but what about the cons? Are there any? Yes. Basically, because they are complex and heavy software, they demand a lot from the hardware (they need a lot of memory both to be installed and to run).

So depending on your working conditions it might be better to use a code editor, which are usually lighter (and free) programs.

The IDE should save you time so that you can study more and become more creative.

The following lists of pros and cons of the IDEs were compiled based on the opinions of some novice and experienced developers, as well as the specifications described by the maintainers of each software.

Many of their functionalities are the same, especially the basic ones such as syntax highlighting, debugging, extension by plugins, refactoring, etc. The question here will be the quality vs. usability that each offers.

Visual Studio Code

Company: Microsoft
Platforms: Windows, Linux, Mac
**Open source: **Yes
Languages*:* more than 30 languages, like Java, JavaScript, C#, C++, PHP, SQL, R, Python, TypeScript, JSON, XML etc.

Pros:

ASP.NET 5 and Node.js, plus great WSL integration
Good debugger
Support for a terminal inside the window
Syntax highlighting
Works directly with Github
Good auto-completion (IntelliSense)
Comes practically zeroed when downloaded, which makes it lightweight!

Cons:

Minimalist, may not be suitable for very large projects
To support a language not supported natively, you have to look for extensions in the store and configure them manually
Debugging tools could be better
Interface can scare beginners.

*Download VS Code*

Eclipse

Company: IBM/Eclipse Foundation
Platforms: Windows, Linux, Mac, Solaris
Open source: Yes
Languages: initially it was built for Java only, but today it works well with JavaScript, C, C++, PHP, Python, Kotlin, and more.

Pros:

Great project management (Application Lifecycle Management)
Almost all packages support Git integration
Editable syntax highlighting
High-level debugging
Good auto-completion
Programming in several languages like Java, JavaScript, PHP, C, C++, C#, Ruby, Phyton, Haskel, Cobol, and many others
Flexible environment because it is modular
Ability to integrate JUnit
Remote debugging (when using JVM)

Cons:

Some beginners may be scared by the amount of possibilities
Some plugins will not always work very well, so choose the most well established ones in the community
Many of the changes need a reboot to work

*Download Eclipse*

Atom

Company: Github
Platforms: Windows, Linux, Mac
Open source: Yes
Languages: JavaScript

Pros:

Highly integrated with Github
Great for large, complex projects
Automatic error search
Easy to install new plugins
Permanent display of all project files
Fast code window splitting
Has more than 2000 packages and 600 themes for customization (the search can be done inside the IDE)
Good auto-completion
Accepts collaborative work on a project’s files

Cons:

It takes some time getting your plugins and configuration sorted
It’s a browser-based app (runs on Electron), and is a bit slow to load and sometimes to respond

*Download Atom*

NetBeans

Company: Oracle
Platforms: Windows, Linux, Mac, BSD, Solaris
Open source: Yes
Languages: initially built for Java only, but today it works well with JavaScript, PHP, Python, HTML5, CSS3 and more.

Pros:

Syntax highlighting
Optimal refactoring
Automatic error search
Intuitive interface (drag and drop function)
Dynamic and static libraries
Remote development capability
Supports multiple compilers, including CLang / LLVM, Cygwin, GNU, MinGW and Oracle Solaris Studio
Integrated issue tracking with Jira and Bugzilla
Ability to search for tasks, save searches, update and resolve tasks in its log repository

Cons:

Needs a lot of memory, so can get slow on some machines or large projects
Annoying pop-ups

*Download Netbeans*

Conclusion

That’s it for today. Now we know some of the most popular IDEs for Javascript! I hope this article helped you start your journey with programming.

Thanks for reading! Follow me in this platform to read more developer content. Have a great day, see you soon! 👋

Top 12 Javascript books to read in 2022

Justin Graysen — Mon, 22 Aug 2022 20:29:29 +0000

If you've already learned HTML and CSS and now want to learn a programming language, I recommend that you learn JavaScript.

JavaScript is one of the leading names when it comes to front-end development. Moreover, it is one of the best programming languages to learn. There are several ways to learn Javascript, among them are books.

Books are a great way to learn almost anything, including programming languages. So, here is the list of the 12 best JavaScript books for developers of any skill level, including those new to programming.

1. JavaScript: The Definitive Guide

JavaScript is the programming language of the web and is used by more software developers today than any other programming language. For nearly 25 years this best seller has been the go-to guide for JavaScript programmers. The seventh edition is fully updated to cover the 2020 version of JavaScript, and new chapters cover classes, modules, iterators, generators, Promises, async/await, and meta programming. You’ll find illuminating and engaging example code throughout.

Link to Amazon

2. You Don’t Know JS Book Series

It seems like there’s never been as much widespread desire before for a better way to deeply learn the fundamentals of JavaScript. But with a million blogs, books, and videos out there, just where do you START? Look no further!The worldwide best selling ‘You Don’t Know JS’ book series is back for a 2nd edition: ‘You Don’t Know JS Yet’. All 6 books are brand new, rewritten to cover all sides of JS for 2020 and beyond.’Get Started’ prepares you for the journey ahead, first surveying the language then detailing how the rest of the You Don t Know JS Yet book series guides you to knowing JS more deeply.

Link to Amazon

3. Eloquent Javascript

JavaScript lies at the heart of almost every modern web application, from social apps like Twitter to browser-based game frameworks like Phaser and Babylon. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications.
This much anticipated and thoroughly revised third edition of Eloquent JavaScript dives deep into the JavaScript language to show you how to write beautiful, effective code. It has been updated to reflect the current state of Java¬Script and web browsers and includes brand-new material on features like class notation, arrow functions, iterators, async functions, template strings, and block scope. A host of new exercises have also been added to test your skills and keep you on track.

Link to Amazon

4. Effective JavaScript

In order to truly master JavaScript, you need to learn how to work effectively with the language’s flexible, expressive features and how to avoid its pitfalls. No matter how long you’ve been writing JavaScript code, Effective JavaScript will help deepen your understanding of this powerful language, so you can build more predictable, reliable, and maintainable programs. Author David Herman, with his years of experience on ECMA's JavaScript standardization committee, illuminates the language’s inner workings as never before — helping you take full advantage of JavaScript’s expressiveness.
Reflecting the latest versions of the JavaScript standard, the book offers well-proven techniques and best practices you’ll rely on for years to come.

Link to Amazon

5. Secrets of the JavaScript Ninja

More than ever, the web is a universal platform for all types of applications, and JavaScript is the language of the web. If you’re serious about web development, it’s not enough to be a decent JavaScript coder. You need to be ninja-stealthy, efficient, and ready for anything. This book shows you how.

Link to Amazon

6. JavaScript Patterns

What’s the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you’re an experienced developer looking to solve problems related to objects, functions, inheritance, and other language-specific categories, the abstractions and code templates in this guide are ideal — whether you’re using JavaScript to write a client-side, server-side, or desktop application.
Written by JavaScript expert Stoyan Stefanov — Senior Yahoo! Technical and architect of YSlow 2.0, the web page performance optimization tool — JavaScript Patterns includes practical advice for implementing each pattern discussed, along with several hands-on examples.
You’ll also learn about anti-patterns: common programming approaches that cause more problems than they solve\nExplore useful habits for writing high-quality JavaScript code, such as avoiding globals, using single var declarations, and more
Learn why literal notation patterns are simpler alternatives to constructor functions. Discover different ways to define a function in JavaScript. Create objects that go beyond the basic patterns of using object literals and constructor functions
Learn the options available for code reuse and inheritance in JavaScript\nStudy sample JavaScript approaches to common design patterns such as Singleton, Factory, Decorator, and more.

Link to Amazon

7. The Principles of Object-Oriented JavaScript

If you’ve used a more traditional object-oriented language, such as C++ or Java, JavaScript probably doesn’t seem object-oriented at all. It has no concept of classes, and you don’t even need to define any objects in order to write code. But don’t be fooled — JavaScript is an incredibly powerful and expressive object-oriented language that puts many design decisions right into your hands.
In The Principles of Object-Oriented JavaScript, Nicholas C. Zakas thoroughly explores JavaScript’s object-oriented nature, revealing the language’s unique implementation of inheritance and other key characteristics. You’ll learn:
• The difference between primitive and reference values
• What makes JavaScript functions so unique\n–The various ways to create objects
• How to define your own constructors\n–How to work with and understand prototypes
• Inheritance patterns for types and objects
The Principles of Object-Oriented JavaScript will leave even experienced developers with a deeper understanding of JavaScript. Unlock the secrets behind how objects work in JavaScript so you can write clearer, more flexible, and more efficient code.

Link to Amazon

8. JavaScript and JQuery: Interactive Front-End Web Development

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway). Programming books can be intimidating, so we wanted to create a book that taught readers how to use JavaScript in a gentler, more visual way. And importantly, we did not want to assume that the reader had any experience of programming beyond the ability to create a web page in HTML and CSS. (After all, many kinds of people are creating websites these days, and not all of us come from a programming background.)
So, if you have ever struggled to get a script working on your web pages, want a better idea of how to customize scripts, or want to write your own scripts from scratch, this book was written for you.We can’t promise to remove the unfamiliar terms that programmers use, but we do tell you what they mean (with the aid of visual examples and diagrams) so that JavaScript won’t seem like a foreign language any more.

Link to Amazon

9. Beginning JavaScript

Beginning JavaScript 5th Edition shows you how to work effectively with JavaScript frameworks, functions, and modern browsers, and teaches more effective coding practices using HTML5.
This new edition has been extensively updated to reflect the way JavaScript is most commonly used today, introducing you to the latest tools and techniques available to JavaScript developers. Coverage includes modern coding practices using HTML5 markup, the JSON data format, DOM APIs, the jQuery framework, and more.
Exercises with solutions provide plenty of opportunity to practice, and the companion website offers downloadable code for all examples given in the book. Learn JavaScript using the most up to date coding style. Understand JSON, functions, events, and feature detection.
Utilize the new HTML5 elements and the related API. Explore new features including geolocation, local storage, and more. JavaScript has shaped the Web from a passive medium into one that is rich, dynamic, and interactive. No matter the technology on the server side, it’s JavaScript that makes it come alive in the browser. To learn JavaScript the way it’s used today, Beginning JavaScript, 5th Edition is your concise guide.

Link to Amazon

10. Speaking JavaScript

Like it or not, JavaScript is everywhere these days — from browser to server to mobile — and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position.
Speaking JavaScript helps you approach the language with four standalone sections. First, a quick-start guide teaches you just enough of the language to help you be productive right away. More experienced JavaScript programmers will find a complete and easy-to-read reference that covers each language feature in depth.

Link to Amazon

11. Programming JavaScript Applications

Take advantage of JavaScript’s power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flexible and resilient code that’s easier — yes, easier — to work with as your code base grows. JavaScript may be the most essential web programming language, but in the real world, JavaScript applications often break when you make changes.
With this book, author Eric Elliott shows you how to add client- and server-side features to a large JavaScript application without negatively affecting the rest of your code. Examine the anatomy of a large-scale JavaScript application. Build modern web apps with the capabilities of desktop applications. Learn best practices for code organization, modularity, and reuse. Separate your application into different layers of responsibility. Build efficient, self-describing hypermedia APIs with Node.js. Test, integrate, and deploy software updates in rapid cycles. Control resource access with user authentication and authorization. Expand your application’s reach through internationalization

Link to Amazon

12. Professional JavaScript for Web Developers

Professional JavaScript for Web Developers is the essential guide to next-level JavaScript development. Written for intermediate-to-advanced programmers, this book jumps right into the technical details to help you clean up your code and become a more sophisticated JavaScript developer. From JavaScript-specific object-oriented programming and inheritance, to combining JavaScript with HTML and other markup languages, expert instruction walks you through the fundamentals and beyond.
At 1200 pages, this book is the most comprehensive JavaScript reference available anywhere. This new fourth edition has been updated to cover through ECMAScript 2019; new frameworks and libraries, new techniques, new APIs, and more are explained in detail for the professional developer, with a practical focus that helps you put your new skills to work on real-world projects.

Link to Amazon

Conclusion

That’s it for today. I hope some of these books can help you start your journey with programming.

Thanks for reading! Follow me in this platform to read more development content. Have a great day, see you soon! 👋

What is GitHub and how to use it?

Justin Graysen — Sun, 21 Aug 2022 19:57:00 +0000

GitHub is a platform for hosting source code and files with version control using Git. It is similar to a collaborative social platform where programmers and businesses post their projects for code development.

Why do we need GitHub?

The world of information technology is getting more and more crowded, new technologies are coming out in droves and at an impressive speed. People, to develop applications and programs capable of handling and controlling these technologies, are increasingly in demand.

With all this competition and diversity, how do you stand out in this environment? In some professions, it is common for professionals to have a portfolio to promote their work.

For example, musicians and singers promote their songs on SoundCloud or YouTube. But what about programmers? Where could they display their programs and code? That’s where GitHub comes in!

However, there is no way to understand GitHub without talking about Git, so to understand where Git came from, from GitHub, let’s talk briefly about it.

What is Git?

Git is a file version control repository, used for source code version control and collaborative development.

It was created in 2005 by Linus Torvalds, creator of the Linux kernel, to host the Linux source code and allow collaboration in its development, since the old company that hosted its code, BitKeeper, wanted to charge for its services.

How to install Git?

Git can be installed in Linux/Debian platforms using the following command:

sudo apt-get install git

In other platforms like Windows or Mac, you can download through these links:

The importance of GitHub

GitHub, launched in 2008, is a web version of Git.

The projects on GitHub are mostly open source, but it is possible to make your code private, available only to a few people or by creating teams.

GitHub has already become one of, if not the largest code store in the cloud.

What is GitHub for?

Never forget: Git and GitHub are different things.

You can have Git for version control only on your local computer. GitHub is used when you want to share your code or put it in the cloud. GitHub has all the features of Git, and has many extra features listed below:

Documentation
Issue tracking
Wikis
Pull requests with commenting and code review
Commit history
Email notifications and emojis
GitHub Pages: small websites can be made.

How to use GitHub?

Let’s start tutorial on how to use GitHub. First, you need to create your personal account or a team account on the official GitHub page.

It is completely free for personal and team repositories, with some more advanced paid plans for teams and companies. After creating your account, use the platform’s Hello World guide to learn how to create your first repository, open branches and open a pull request.

What is a repository?

A repository is a space in which all the files of a specific project are stored.

Each project has its own repository and you can access it with a unique URL.

What is a fork?

“Forking” is when you create a new project based on another project that already exists. This is a feature that greatly encourages the development of programs and projects among the community or among teams in general.

Say you find a project on GitHub that you would like to contribute to, you can split the repository, make the desired changes, and release the revised project as a new repository.

What is a pull request?

Imagine that you have forked a repository, done a good review on the project, and want it to be acknowledged by the original developers. You can do this by creating a Pull Request.

The authors of the original repository can see your work and then choose whether or not to accept it into the official project. Whenever you make a pull request, GitHub provides an excellent way for you and the main project maintainer to communicate with each other.

GitHub is also a social network

GitHub also allows projects to grow exponentially with the social use of the tool. Each user on GitHub has their own profile as in any social network, ideal for showing their work and contributions in other projects.

Project revisions can be discussed publicly, favoring public debate and knowledge sharing. GitHub favors networking among developers and can boost your career.

Nothing gets a recruiter’s attention more than a GitHub that is popular and active with the community.

What to put in your GitHub?

After creating your account, you have may this question: what to put there?

To sum it up in one word: EVERYTHING!

That personal or college project that you think is useless may contain some programming concept or technique that a company is looking for.

Did you take a complementary programming course where you had to develop a project? Post it on GitHub. Do you have a personal project under development, post it too.

Not only will your code be visible to the world, but people can also help you develop it.

If you are already a programmer and develop for a company, you will probably not be able to publish your code. In this case create simple projects with the technology and methodology you are using and post them on GitHub, describing everything you have done.

GitHub's README

An important element of your projects that does not always get enough attention is the README file.

The README is the first impression of your work. Always have one at the root of the project. A good README is one that contains a good description of the purpose, where and how to use it, list of features, dependencies to work with. Examples of use will be a plus.

Remember that the README is meant to be a summary, not a documentation of the project. For documentation, you can use GitHub’s own Wiki.

Using licenses

Don’t forget to set a license for your project. You may miss opportunities if you do not have a license defined. The Choose a License website can help you define which license to adopt.

To apply a license to your project just create a file with the name LICENSE and paste the exact license content into it. Change it only if the license has spaces to be filled in with your data.

GitHub will automatically identify the license and add a small icon of it at the top of your project. If this does not happen, please revise the file.

Conclusion

That’s it for today. Now you know a little more about GitHub and how it works, don't forget to explore it and try things out on your own, because as the saying goes: "practice makes perfect".

Thanks for reading! Follow me in this platform to read more development content. Have a great day, see you soon! 👋

DEV Community: Justin Graysen

Why variables can be accessed before declaration in Javascript?

Execution Context

Global code

Function code

Lexical Environment

Types of variables in Javascript

Mutability

Lexical environment

Registering identifiers in the lexical environment

Conclusion

15 tips to improve as a Javascript developer

1. Null and undefined evaluation

2. Array definition

3. Ternary Operator

4. Declaring variables

5. Using RegExp

6. charAt() shorcut

7. Powers of base 10

8. Template Literals

9. Arrow Functions

10. Argument Destructuring

11. Key-Value Names

12. Map

13. Filter

14. Reduce

Conclusion

Best 4 IDEs for Javascript to use in 2022: pros and cons

What is an IDE?

Differences between IDEs and code editors

How to choose a Javascript IDE

Visual Studio Code

Eclipse

Atom

NetBeans

Conclusion

Top 12 Javascript books to read in 2022

1. JavaScript: The Definitive Guide

2. You Don’t Know JS Book Series

3. Eloquent Javascript

4. Effective JavaScript

5. Secrets of the JavaScript Ninja

6. JavaScript Patterns

7. The Principles of Object-Oriented JavaScript

8. JavaScript and JQuery: Interactive Front-End Web Development

9. Beginning JavaScript

10. Speaking JavaScript

11. Programming JavaScript Applications

12. Professional JavaScript for Web Developers

Conclusion

Top 10 programming books to read in 2022

10. Soft Skills: The software developer’s life manual

9. Cracking the Coding Interview

8. Design Patterns

7. The Clean Coder

6. The Mythical Man-Month

5. Working Effectively with Legacy Code

4. Refactoring

3. Head First Design Patterns

2. Clean Code

1. The Pragmatic Programmer

Conclusion

What is GitHub and how to use it?

Why do we need GitHub?

What is Git?

How to install Git?

The importance of GitHub

What is GitHub for?

How to use GitHub?

What is a repository?

What is a fork?

What is a pull request?

GitHub is also a social network

What to put in your GitHub?

GitHub's README

Using licenses

Conclusion