JavaScript ES6+ : Array Feature Improvements

Follow me on twitter @jaymanpandya

Array.from() convert Objects, Node-lists to Arrays, so that you can use all the Array functions to iterate through the data.

        <ul class="facilityDetails">
            <li>Olympic Size Pool</li>
            <li>Kids Friendly</li>
            <li>Life Guard</li>

            //This will return NodeList
            const facilityDetails = document.querySelectorAll('.facilityDetails li');

            //Using Array.from() will convert it to an Array
            const facilityDetailsArray = Array.from(document.querySelectorAll('.facilityDetails li'));

Array.of() allows you to pass arguments in the function which will be converted to an array.

    function listAllAmenities(){
        // This will print an Object
        // This will print an array
    listAllAmenities('Olympic Size Pool', 'Kids Friendly', 'Life Guard');

.find() lets you find items in an array and .findIndex() lets you find the index of items in an array

const assets = [
        "assetId" : "SWMP001",
        "capacity" : "25 pax",
        "associatedWith" : "Club Oasis"

        "assetId" : "SWMP002",
        "capacity" : "10 pax",
        "associatedWith" : "Club Onyx"

        "assetId" : "SWMP003",
        "capacity" : "18 pax",
        "associatedWith" : "Club Jira"

//Will return the item in the Array
const asset = assets.find(asset => asset.assetId === "SWMP001");

//Will return the position of the item in the Array
const assetIndex = assets.findIndex(asset => asset.assetId === "SWMP003");


some() lets check whether the condition is true some of the items in an array

const childrenOnly = [3, 12, 9, 34, 99];

const findSomeChildren = childrenOnly.some(child => child <= 18);

every() lets check whether the condition is true every item in an array

const childrenOnly = [3, 12, 9, 34, 99];

const findSomeChildren = childrenOnly.every(child => child <= 18);

Peace ✌️

I am an UI designer with a flair for front-end development that makes any brand shine at what they do best. I am right now building amazing products for our clients both Indian and International at Interactive Digital Labs. I am part of the Design and Marketing Teams for Make WordPress and has spoken at local camps on Gutenberg as well as the importance of user experience. I am not intimidated by markup, languages, or tools: HTML to CSS, wireframing to prototyping, JavaScript to agile development, and design programs including Sketch, Adobe XD, Figma, Photoshop, Illustrator, InDesign etc. I love languages, and not just programming either. I speak English, Hindi, Marathi, and Gujarati. When I am not taking courses to improve my skills, I am trying new food, dabbling in filmmaking and photography, and running and cycling. Say hi to me on Twitter here @jaymanpandya.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.