DEV Community

loading...
Cover image for Some JavaScript Principles you should know.

Some JavaScript Principles you should know.

shaharafat profile image Md. Shah Arafat ・3 min read

In this blog, I will discuss some core JavaScript concepts. If you are new to the JavaScript world, then you must have a clear idea about that topic. I will try to explain those very clear and concisely.

Types

There are 7 primitive data types in JavaScript. Those are:

  • Number
  • String
  • Boolean
  • null
  • undefined
  • Big int
  • Symbol

and 2 structural data types:

  • Object
  • Function

No other types? In JavaScript, there are no other fundamental value types other than the ones we have just enumerated.​ The rest are all objects!

For example, even arrays, dates and regular expressions fundamentally ​are​ objects in JavaScript.

Expressions

An expression is a valid set of literals, variables, operators, and expressions that evaluates to a single value.

0 // 0

1 + 1 // 2

'Hello' + ' ' + 'World' // 'Hello World'

{ answer: 42 } // { answer: 42 }

Object.assign({}, { answer: 42 }) // { answer: 42 }

answer !== 42 ? 42 : answer // 42
Enter fullscreen mode Exit fullscreen mode

Each example shown above is an expression. Every line represents some value.

Hoisting

In JS hoisting is a behaviour, where all variable declared with the var keyword and all functions defined with function declaration is moved to the top of the program.

So that if you use a function before functions declaration, it will not throw any error.

greeting('Programmer'); // Programmer

// functions declaration
function greeting(name){
  console.log(name);
}
Enter fullscreen mode Exit fullscreen mode

This program will run perfectly, though you used the function before the declaration. But JS hoisting moves the function on top of all code. Like:

// functions declaration
function greeting(name){
  console.log(name);
}

greeting('Programmer');
Enter fullscreen mode Exit fullscreen mode

That's why it is perfectly working.

Remember, Hoisting happens for function declaration. If you define a function by functions expression. It will give you an error.

In the case of a variable, when we declare a variable with the var keyword, JavaScript will hoist the variable to the top of the program. But, its value will not be assigned before we reach the line where we assigned the value.

console.log(name); // undefined

var name = 'John Doe';

console.log(name); // 'John Doe'
Enter fullscreen mode Exit fullscreen mode

If you run this, you will not get any error. Instead, it will print undefined. Because of hoisting, variable declaration moved to the top but the value was not assigned. So, the value is undefined. After reaching the line where the value was assigned then the value is visible as the value of that variable.

From ES6 variable declaration with let and const does not have any hoisting issue. We will discuss that later.

Global Block Binding

When we declare a variable with the var keyword, it changes the global object. For the browser, it is a window object.

var RegExp = 'Regular Expression';

console.log(window.RegExp === RegExp); // true
Enter fullscreen mode Exit fullscreen mode

It's a big issue because we are mutating the global object. In the example above it 'RegExp' variable change the global 'RegExp', Which is unexpected.

Here let and const comes into the picture. If we declare a variable using let and const, it will never mutate the global object.

let RegExp = 'Regular Expression';

console.log(window.RegExp === RegExp); // false
Enter fullscreen mode Exit fullscreen mode

Block Bindings in For loop

for (var i = 0; i < 5; i++){
  console.log(i); // 0 1 2 3 4 
}

console.log(i) // 5
Enter fullscreen mode Exit fullscreen mode

In the example above, I defined the variable 'i' with var keyword. after loop execution complete, the variable 'i' is visible outside the block or for loop. But we don't want that. Here let keyword comes to the rescue.

for (let i = 0; i < 5; i++){
  console.log(i); // 0 1 2 3 4 
}

console.log(i) // i is not defined.
Enter fullscreen mode Exit fullscreen mode

Here the value of the variable exists only inside the for loop. so, below the loop, we will get an error.

Arrow Functions

Arrow function is a new way of writing functions in JavaScript.
Syntax:

const func = (param1, param2, ...) => {
  // ....
}
Enter fullscreen mode Exit fullscreen mode

The syntax is very simple, right? If you have only one parameter, then you do not need to use a brace for the parameter and you can directly return a value without using the second bracket.

const func = x => x * x;

func(2); // returns 4
Enter fullscreen mode Exit fullscreen mode

Remember, when we define an arrow function expression. It's not hoisted. It's an expression, not a declaration. Function declarations are hoisted, not function expressions.
That's why we need to write the function before we use it. Another thing is arrow function doesn't have its own this.

With all that being said, I highly recommend you keep learning JavaScript. Trust me it's a very powerful and impressive language.

Thank you for reading my blog. Feel free to connect on Linkedin and Twitter

Discussion (11)

Collapse
blindfish3 profile image
Ben Calder

Good article in general; but the point on Global block binding is misleading. var is sometimes tied to the current scope; so is not always added to the window object:

var foo = "foo"; // global
if(true) {
  var poo = "poo"; // leaks from scope
  let moo = "moo"; // scoped
}

function myFunction() {
    var bar = "bar"; // scoped
};
console.log(window.foo); // foo
console.log(window.poo); // poo
console.log(window.moo); // undefined
console.log(window.bar); // undefined
Enter fullscreen mode Exit fullscreen mode

The reason it has been superseded by let (and const where appropriate) is because it leaks from some scopes and this was a common source of bugs.

Collapse
matgott profile image
matgott

Hi man! Great article. I'm gona make a disclaimer if you allow me :)

I understand that we need to simplify things to make easier to learn for people. But in my experiencie with "hoisting" and "let and const" I think is better said that they are hoisting to but have a different behavior.

Its ok not explain why hoisting exists (related to how the execution context of JS works) that is an advance topic. BUTTT, for me was tricky after learn what hoisting is and read everywhere that "const and let aren't hoisted" and at the end that isn't true.

Just an opinion based on my experience, which doesn't mean that its a totally true.

Thanks for your amazing post !

Collapse
shaharafat profile image
Md. Shah Arafat Author

Yah. That was my lack of knowledge. let and const both are hoisted but we can't access it before declaration because of TDZ. Learnt something new. Thanks man.

Collapse
vishal2369 profile image
Vishal2369

It was informative.

Collapse
shaharafat profile image
Md. Shah Arafat Author

Thanks, It's a big appreciation for me.

Collapse
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com

I liked 'Block Bindings in For loop' most.

Collapse
amnkhan profile image
Al Amin Khan

Thanks for the article. Were can i get these technical informations in details? Any book suggestions?

Collapse
shaharafat profile image
Md. Shah Arafat Author • Edited

You can search on MDN (Mozilla Developer Network) by topic name. If you need book suggestions, then I will suggest you to read Elequent JS or JavaScript The Definitive Guide.

Collapse
lukeshiru profile image
LUKE知る

Nice article! For the "Global Block Binding" examples, it might be better to use globalThis instead of window, so the example applies to any JS environment.

Collapse
aalphaindia profile image
Pawan Pawar

Keep sharing!

Collapse
semirteskeredzic profile image
Semir Teskeredzic • Edited

Great insight indirectly on scopes throughout the article. Nice one!

Forem Open with the Forem app