{"id":5001,"date":"2021-09-15T04:45:40","date_gmt":"2021-09-15T04:45:40","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5001"},"modified":"2021-09-15T05:23:53","modified_gmt":"2021-09-15T05:23:53","slug":"es6-next-gen-js-some-examples","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/","title":{"rendered":"ES6 Next-gen-js – Some Examples"},"content":{"rendered":"

Declaring Variable<\/h2>\n

Earlier were using var <\/strong>to declare variables. But in ES6 new keywords got introduced – Let and Const<\/strong>. Const is used to declare a constant (whose value would not be changed throughout).<\/p>\n

Creating Function<\/h3>\n

Before function keyword was used to declare the function as –
\nfunction myFunc(){
\n \t\/\/code
\n}<\/code>
\nBut now, we can replace it with modern way of writing as –<\/strong>
\nConst myFunc = () => {
\n \t\/\/code
\n}<\/code><\/p>\n

Where myFunc is the function name and in round brackets we can pass the required arguments.
\nIn the case of a single argument we can omit round brackets () \u2013<\/strong>
\nConst myFunc = name => {
\n \t\/\/code
\n}<\/em>
\nconst func=name=>{
\n alert(\"My name is - \"+ name);
\n }
\n func(\"xyz\");<\/code><\/p>\n

In case of a function having a return statement only we can omit curly brackets {} and return keyword \u2013
\nBelow I am showing the comparison of writing code in different ways.<\/p>\n\n\n
Const myFunc = number => {
\n return number*2
\n}
\nConsole.log(myFunc(2));\n<\/td>\n		const myFunc = number => number*2;
\nalert(myFunc(4));<\/td>\n<\/tr>\n<\/table>\n

Export and Import<\/h3>\n

If we have to export things from one js file to another js file then we use imports and exports
\nIf we have a file as person.js and we export as \u201cexport default person\u201d<\/strong> at the end of the file. Then in import, we do not care about what to import by default everything will be available to us if we import anything from the file.<\/p>\n

But we can’t use default and export multiple things.
\nFor exporting multiple things –
\nexport const clean=()=>{\u2026}
\nexport const baseData = 10;<\/em><\/p>\n

in one file – let say utility.js
\nThen while importing we need to specify what we are importing specifically this variable or function from that file
\nAs \u2013 import {baseData} from utility.js
\n Import {clean} from utility.js
\n<\/em><\/p>\n

Note \u2013 These are called \u201cnamed exports\u201d and name goes in curly brackets.
\nWe can also set alias like import {baseData as bd} from utility.js<\/strong>
\nOr we can import everything as * and bundle it in alias \u2013 import * as all from utility.js
\nClass
\nClass className{}<\/em>
\nExtends keyword to inherit<\/p>\n

Note –<\/em><\/strong> If we have constructor methods<\/a> implemented we need to use the \u201csuper\u201d keyword in the child class constructor.
\nFor example \u2013
\nclass Human{
\n constructor(){
\n this.gender = \"female\";
\n }
\n printGender(){
\n alert(this.gender);
\n }
\n}
\nclass Person extends Human{
\n constructor(){
\n super();
\n this.name = \"xyz\";
\n }
\n printName(){
\n alert(this.name);
\n }
\n}
\nconst obj = new Person();
\nobj.printName();
\nobj.printGender();
\n<\/code><\/p>\n

In new-generation js we can directly assign properties a value hence we can omit use of constructor function.<\/strong>
\nclass Humans{
\n gender = \"female\";
\n printGender=()=>{
\n alert(this.gender);
\n }
\n}
\nconst obj1 = new Humans();
\nobj1.printGender();
\nclass Humans{
\n gender = \"female\";
\n printGender=()=>{
\n alert(this.gender);
\n }
\n}
\nclass Persons extends Humans{
\n name = \"xyz\";
\n printName=()=>{
\n alert(this.name);
\n }
\n}
\nconst obj1 = new Persons();
\nobj1.printGender();
\nobj1.printName();<\/code><\/p>\n

Spread and Rest Operator (\u2026)<\/strong>
\nBoth operators are denoted by three dots (\u2026)
\nSpread operator is used to split up array elements or object properties
\nconst oldArray = [1,2,3];
\n const newArray = [...oldArray,4,5];
\n console.log(newArray);
\n<\/code>
\noldArray splits as all single elements and then we added more elements. It’s the same as defining an array for the 1st time using square brackets.
\nRest Operator is used to merge a list of function arguments into an array. If the number of arguments are not known to us.
\nconst sortArgs = (...args) => args.sort();
\nconsole.log(sortArgs(10, 67, 23, 60));<\/code>
\nWe can give any number of arguments here.<\/p>\n

Destructuring<\/h3>\n

Easily extract array elements or object properties and store them in variables.
\nconst arr = [1,2,3];
\n[first, second] = arr;
\nconsole.log(first, second)<\/code><\/p>\n

Reference and Primitive Type<\/h3>\n

Reference Type – Array and Objects are reference types because while copying, they don\u2019t copy the value instead they copy the pointer pointing towards that variable.
\nFor example<\/em>
\nconst person ={
\n name: \"xyz\"
\n}
\nconst other = person;
\nconsole.log(other)<\/code><\/p>\n

Output<\/h3>\n

{name: “xyz<\/em>“}<\/strong><\/p>\n

Here we copy \u201cperson\u201d into another variable, but if we change a person’s name value, the other’s name value will also be changed because it points to the same pointer.
\nFor example<\/strong>
\nconst person ={
\n name: \"xyz\"
\n}
\nconst other = person;
\nperson.name = \"abc\"
\nconsole.log(other)<\/code><\/p>\n

Output<\/h3>\n

{name: “abc<\/em>“}<\/strong><\/p>\n

Primitive Type – Number, Strings, Floats etc. are primitive types.<\/p>\n

Copy Reference Type<\/h3>\n

We will use the \u201cspread operator\u201d.
\nFor example\u2013<\/strong>
\nconst person ={
\n name: \"xyz\"
\n}
\nconst other = {
\n ...person
\n}
\nperson.name = \"abc\"
\nconsole.log(other)
\nconsole.log(person)<\/code><\/p>\n

Output<\/h3>\n

{name: “xyz<\/em>“}<\/strong>
\n{name: “abc<\/em>“}<\/strong><\/p>\n

Map Array Function<\/h3>\n

Map is an inbuilt function, itself iterates all elements and performs a function on every element.
\nFor example \u2013<\/strong>
\nconst number = [1, 2, 3]\nconst doubleNum = number.map(num=> num*2);
\nconsole.log(number)
\nconsole.log(doubleNum)<\/code><\/p>\n

Output<\/h3>\n

(3) [1, 2, 3]<\/em><\/strong>
\n(3) [2, 4, 6]<\/em><\/strong><\/p>\n

If you need to prove your skills in the .NET framework, get .NET certified on StudySection. StudySection provides .NET certification exam<\/a> for beginners as well as experts in the .NET framework. This .NET certification can improve your resume\u2019s success rate.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Declaring Variable Earlier were using var to declare variables. But in ES6 new keywords got introduced – Let and Const.<\/p>\n","protected":false},"author":1,"featured_media":5002,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[714,713],"acf":[],"yoast_head":"\nES6 next-gen-js - some examples - StudySection Blog<\/title>\n<meta name=\"description\" content=\"Earlier were using var to declare variables. But in ES6 new keywords got introduced - Let and Const. Const is used to declare a constant.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ES6 next-gen-js - some examples - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"Earlier were using var to declare variables. But in ES6 new keywords got introduced - Let and Const. Const is used to declare a constant.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-15T04:45:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-15T05:23:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/09\/ES6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"ES6 Next-gen-js – Some Examples\",\"datePublished\":\"2021-09-15T04:45:40+00:00\",\"dateModified\":\"2021-09-15T05:23:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\"},\"wordCount\":612,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"ES6\",\"js\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\",\"url\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\",\"name\":\"ES6 next-gen-js - some examples - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-09-15T04:45:40+00:00\",\"dateModified\":\"2021-09-15T05:23:53+00:00\",\"description\":\"Earlier were using var to declare variables. But in ES6 new keywords got introduced - Let and Const. Const is used to declare a constant.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ES6 Next-gen-js – Some Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ES6 next-gen-js - some examples - StudySection Blog","description":"Earlier were using var to declare variables. But in ES6 new keywords got introduced - Let and Const. Const is used to declare a constant.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/","og_locale":"en_US","og_type":"article","og_title":"ES6 next-gen-js - some examples - StudySection Blog","og_description":"Earlier were using var to declare variables. But in ES6 new keywords got introduced - Let and Const. Const is used to declare a constant.","og_url":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-09-15T04:45:40+00:00","article_modified_time":"2021-09-15T05:23:53+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/09\/ES6.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"ES6 Next-gen-js – Some Examples","datePublished":"2021-09-15T04:45:40+00:00","dateModified":"2021-09-15T05:23:53+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/"},"wordCount":612,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["ES6","js"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/","url":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/","name":"ES6 next-gen-js - some examples - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-09-15T04:45:40+00:00","dateModified":"2021-09-15T05:23:53+00:00","description":"Earlier were using var to declare variables. But in ES6 new keywords got introduced - Let and Const. Const is used to declare a constant.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/es6-next-gen-js-some-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"ES6 Next-gen-js – Some Examples"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":311,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5001"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5001"}],"version-history":[{"count":8,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5001\/revisions"}],"predecessor-version":[{"id":5010,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5001\/revisions\/5010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5002"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}