loading...
Cover image for Lesser-Known JavaScript Tricks

Lesser-Known JavaScript Tricks

bhagatparwinder profile image Parwinder πŸ‘¨πŸ»β€πŸ’» Updated on ・2 min read

JavaScript with Parwinder (40 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 38 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply

Constructor brackets are optional

const newDate = new Date(); // valid
const myClass = new MyClass(); // valid

const anotherDate = new Date; // Also valid
const myClass = new MyClass; // You bet this is valid

The only time you would need those brackets is if a constructor expects arguments.

With statement

🚨with statement is not recommended, and it is forbidden in ES5 strict mode.

with statement extends the scope chain for a statement. with will add up all properties of an object passed in the scope chain.

const person = {
    name: "Parwinder",
    age: 33,
    work: "Software Architect"
}

with (person) {
    console.log(`Hi, I am ${name}, and I am ${ age } years old. I work as a ${work}.`);
    // Hi, I am Parwinder, and I am 33 years old. I work as a Software Architect.
}

Function arguments

Every function (except arrow functions) has an arguments array-like object that contains the value of all arguments passed to the function.

function foo(a, b, c) {
  console.log(arguments[0]); // 1
  console.log(arguments[1]); // 2
  console.log(arguments[2]); // 3
}

foo(1, 2, 3);

arguments have two properties:

  1. arguments.callee: the function being invoked
  2. arguments.callee.caller: the function that has invoked the current function

🚨Just like the with statement above, callee and caller are forbidden in ES5 strict mode.

Pure object

A pure object has no functions in its prototype.

const x = {};

This creates an object, but the prototype will have a constructor and methods like hasOwnProperty, isPrototypeOf, and toString.

const x = Object.create(null);

create(null) generates an object with no prototype! 🀯

Removing duplicates from an array

const arr = [1, 1, 1, 1, 2, 3, 4, 5, 6, 7, 6, 6, 6, 7, 8, 9];
const arrWithoutDuplicates = [...new Set(arr)];
console.log(arrWithoutDuplicates); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

The key property of a set is having unique values. Once we have the Set from an array, we can use the spread(...) operator to spread it into an empty array.

Optional Chaining

Whenever you access a nested object property where you do not know if the sub object exists or not, you end up doing this:

const nestedObject = {
    name: "Parwinder",
    details: {
        age: 33,
        cars: {
            first: "jeep",
            second: "tesla",
            accessories: {
                x: 200,
                y: 300
            }
        }
    }
}

if (nestedObject &&
    nestedObject.details &&
    nestedObject.details.cars &&
    nestedObject.details.cars.accessories) {
    console.log(nestedObject.details.cars.accessories.x); // 200
}

Optional chaining eliminates the clutter. With optional chaining you can do:

const nestedObject = {
    name: "Parwinder",
    details: {
        age: 33,
        cars: {
            first: "jeep",
            second: "tesla",
            accessories: {
                x: 200,
                y: 300
            }
        }
    }
}

console.log(nestedObject?.details?.cars?.accessories?.x); // 200

🚨 Optional Chaining has made it to the ES2020/ES11 Specifications! Check it out here: https://tc39.es/ecma262/2020/

JavaScript with Parwinder (40 Part Series)

1) What is Javascript? 2) Where can I run JavaScript? 3 ... 38 3) Types in JavaScript 4) What are objects in JavaScript? 5) Reference vs Value 6) Arrays in JavaScript 7) Array Methods in JS 8) Array Instance Methods 9) Array Instance Methods II 10) Functions in JavaScript 11) Type of Functions in JavaScript 12) Scope in JavaScript 13) Hoisting in JavaScript 14) Closures in JavaScript 15) Debugging in JavaScript: Console Methods 16) The new Keyword in JavaScript 17) JavaScript: Type Conversion 18) JavaScript: While Loop 19) JavaScript: Do While Loop 20) JavaScript: For Loop 21) Lesser-Known JavaScript Tricks 22) Events & Event Handling 23) Event Bubbling 24) Event Capturing 25) JS: Switch Statement Explained 26) Arrow Function: Basics 27) this Keyword in JavaScript 28) Arrow functions & this keyword 29) Callback Functions & Callback Hell 30) Strict Mode in JavaScript 31) Optional Chaining 32) Timers & Intervals 33) Arrow Function and The new, arguments & super Keyword! 34) Promises: Introduction 35) Promises: Chaining, Error Handling & Operators 36) New Promise Methods: allSettled & any 37) Async/Await: Introduction 38) Async/Await: Common Mistakes 39) Async/Await: Error Handling 40) Truly Understand Bind, Call & Apply

Posted on by:

bhagatparwinder profile

Parwinder πŸ‘¨πŸ»β€πŸ’»

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide
 

Every function has an arguments array-like object that contains the value of all arguments passed to the function.

Note that arrow functions do not have an arguments object.

 

This is such an oversight from me. Thanks for catching it. I wrote a full blog post on arrow functions and how they behave differently with this, new and arguments. I missed it here. I'll update.

Thanks for reading β™₯️

 

That thing with arguments[] array was new to me! Thanks :). dev.to is a really refreshing breeze after StackOverflow experience.

 

I'm glad you discovered something new! Keeps me motivated to write. Thanks for reading β™₯️

 

🚨At the time of writing, optional chaining is in Stage 4 (Draft) of the new ES standard, and it will most likely make it to the final spec. 🀞

Optional Chaining made it into ES2020, and it's implemented in all major browsers now (caniuse.com/#feat=mdn-javascript_o...)!

 
 

Idk how those pages get updated, but there's no doubt it made it into ES2020: 2ality.com/2019/12/ecmascript-2020...

TC39 is the committee that handles ES proposals and specifications.

That being said your article does lead to what I was eventually looking for

tc39.es/ecma262/2020/

Looks like it is in the final document. I will update the post. Thanks for the awesome feedback β™₯️

Yeah I know about TC39, I just meant that I don't know at what point on the process those specific pages get updated; I would have thought it would be after ES2020 is finalized and released, but apparently not