for in is an ECMAScript1 (ES1) feature. This variant of looping appeared in the first version of JavaScript in 1997. It is a very old and not very good way to loop through iterable objects. It is not recommended to use it in modern JavaScript. It is better to use instead. for...in for...of JavaScript uses prototype inheritance, and operator will return even to inherited properties. Let's take a look at the example: in true const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(key);
}
// Output:
// a
// b
// c Everything looks fine and predictable here. But what if we add a property to the prototype of the object? Let's add a property to the prototype of : d obj obj.__proto__.d = 4
for (const key in obj) {
    console.log(key);
}
// Output:
// a
// b
// c
// d In that example, we intentionally added a property to the object's prototype. But in real life, it is not that easy to control the prototype of the object. It is possible that some libraries will add a property to the prototype of the object. And in that case, will return that property as well. for...in There are a few ways how to avoid id. The first one is using method: hasOwnProperty const obj = { a: 1, b: 2, c: 3 };
obj.__proto__.d = 4

for (const key in obj) {
    if(obj.hasOwnProperty(key)) {
        console.log(key);
    }
}

// Output:
// a
// b
// c The second one is using method: Object.keys const obj = { a: 1, b: 2, c: 3 };
obj.__proto__.d = 4
for (const key of Object.keys(obj)) {
    console.log(key);
}

// Output:
// a
// b
// c As you can see, both options are not very convenient. In the last example, I used loop. And it's quite an often case then developers confuse and loops. They do look very similar, but the result is different. My suggestion will be to use for these purposes. is a collection of key-value pairs. It is a good alternative to the object. It is more convenient to use instead of the object. Let's take a look at the example: for...of for...in for...of Map Map Map const obj = { a: 1, b: 2, c: 3 };
obj.__proto__.d = 4

const m = new Map(Object.entries(obj));

for (const key of m.keys()) {
  console.log(key)
}
// Output:
// a
// b
// c .forEach() There are quite a few array methods in JavaScript. , , , to name a few. All of them have a distinct meaning. on the other hand, is a way to iterate over an array. It cannot transform the array. It cannot return a value. It can only produce side effects. .map .reduce .find .concat forEach Also, it's not possible to break the loop and pass an async function to it. According to some researchers, it's twice as slow as loop. So, my suggestion will be to use loop instead of . for for forEach labels Probably you have never used labels in JavaScript. But if you have, you should stop using them. Labels are a way to mark a block of code. It is possible to use or to break or continue the execution of the code. But it is not recommended to use them. It is better to use loop with or instead of labels. Let's take a look at the example: break continue for break continue let str = '';

loop1:
  for (let i = 0; i < 5; i++) {
    if (i === 1) {
      continue loop1;
    }

    if (i >= 4) {
      break loop1;
    }

    str = str + i;
  }

console.log(str);
// expected output: "023" In the previous example, removing labels will not change the result. That example was pretty simple. But in real life, it is not that easy to understand the code. It can get messy really fast. Object.create() There are two types of inheritance in JavaScript. The first one is prototype inheritance. The second one is class inheritance. is a way to create an object with a specific prototype. Let's take a look at the example: Object.create const obj = { a: 1, b: 2, c: 3 };

const obj2 = Object.create(obj);

console.log(obj2.a); // 1
console.log(obj2); // {} Prototype inheritance is quite an old way of inheritance. Also, it's very convenient because you don't need to create classes, interfaces, abstract classes, etc. All you need is to have a base object and create a new object with that base object as a prototype. But that flexibility comes with a price. It can result in unpredictable object structure. Let's take a look at the example: const obj = { a: 1, b: 2, c: 3 };

const obj2 = Object.create(obj);
obj2.d = 4;

const obj3 = Object.assign({}, obj2);

console.log(obj3.d); // 4

console.log(obj3.a); // undefined
console.log(obj2.a) // 1 So it's much safer to use class-based inheritance in JavaScript. A named function using the arrow operator Arrow functions had their debut in javascript in 2015. Arrow functions are a new way to write anonymous function expressions and are similar to lambda functions in some other programming languages. Nowadays, there are a couple of ways to create an anonymous function in javascript. // traditional way
(function (a) {
  console.log(a);
});

// arrow functions
a => console.log(a); Arrow functions have much more compact syntax and therefore are more readable in cases where you need to pass anonymous functions using array methods like , , etc. map filter reduce So they are great for anonymous functions. But what if you need to create a named function? Let's take a look at the example: function foo() {
  console.log('foo')
}
const bar = () => {
  console.log('bar')
}

foo() // foo
bar() // bar Both these functions will behave in the same way, but the creation of an arrow function is a bit more clunky. There is one advantage of an arrow function. It's possible to override with another value, and for it's not possible because it's defined as constant. foo bar foo = 'not a function and this is fine';
bar = 'not a function and this is not fine'; // TypeError: Assignment to constant variable. null There is one unavoidable data type in javascript. And it is undefined. Sometimes people use and interchangeably. But that approach is not correct. In JavaScript means a full absence of anything. For example, a function that returns nothing technically will return undefined. Missing function parameters will also have as their value. null undefined undefined undefined function foo(a) {
    console.log(a);
    a++;
}

const result = foo(); // undefined

console.log(result); // undefined is a special type that also means the absence of value. But means that values were intentionally set to nothing. null null In order to use default parameters in a function, you need to use instead of . Let's take a look at the example: undefined null function func(a = 1, b = 2) {
 return a + b; 
}

console.log(func(undefined, 3)) // 4

console.log(func(null, 3)) // 3 null converted to 0 is unavoidable. It will appear every time the value is missed intentionally or by mistake. But is not. JavaScript is a very flexible language, so it's a developer's responsibility to keep the code safe. Also, it's much easier to check the value for undefined and much harder for null. Undefined null console.log(typeof undefined) // undefined
console.log(typeof null) // object Conclusion We don't have silver bullets in software development. There are always trade-offs. We have to choose the best solution for our project. But we should always keep in mind that there are better ways to do things. And we should always try to use the best practices. I welcome you all to share your thoughts and suggestions in the comments below. Thank you for reading!

Read My Stories

Hire Me

Buy Me a Coffee

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

6 Things You Should Not Do in JavaScript

Too Long; Didn't Read

Aleksei Kankov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

6 Things You Should Not Do in JavaScript

Too Long; Didn't Read

Aleksei Kankov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES