JavaScript was is and will always be the first language of choice for developing front-end of any web application. We all know it. No matter what framework you choose (React or Angular ) you would always need to know few JavaScript concepts and methods to make your life a lot easier. {I prefer react though} In this post I will be writing about 1.  JavaScript Arrays and Array Methods 2. Promises, Async Functions & Chaining 3.  Rest and Spread Operators There are some other concepts like Closures , generators , proxies and destructuring etc … but I personally believe that if you master the above 3 concepts, 40 % of your job as a front-end developer is done (provided you know how JavaScript and V8 Engine works). So without wasting time let’s get started. Arrays and its methods Arrays are no strange data structures to any programmer but the fact that it provides native methods like and to operate on them is something that makes it interesting . map() filter() reduce() sort() Lets look at arrays with the help of a coding example. { x*x};
square( ) square_of_number = { x*x};
square_of_number( ) square = x*x
square( ) greater = { (x>y){ .log( );} .log( );}
greater( , ); arr = [ , , , , ]; square = x*x; even = x% == ; callback_function = { accumulater + currentvalue;} starting_value = ; arr.map(square) arr.filter(even); arr.reduce(callback_function,starting_value) ( ) function square x return 9 // output 81 // dynamic javascript function let ( ) function square x return 7 // output 49 //  another way of writing it using arrow functions ... let ( )=> x 5 // output 25 let ( ) => x,y if return console ` is greater` ${x} return console ` is greater` ${y} 5 7 // output 7 is greater // arrays and array methods  ... const 1 2 3 4 5 const ( )=> x // function to find square const ( )=> x 2 0 // function to find number being even const ( )=> accumulater,currentvalue return const 0 // array methods // output's new array as [1,4,9,16,25] // output [false, true, false, true, false] // output 15 The code is pretty much self explanatory. So i will skip the explanation part of the above code. But if you still feel something is missing or wrong , do ping me on twitter. Promises, Async Functions and Chaining We make Promise to people to complete a task. Right !! Same thing happens in Javascript. Javascript promise to complete/execute a function successfully but sometimes it does and sometimes it does not ie. It fails !! So, a promise in JavaScript is basically an object for a given task that takes 1 callback function (generally an asynchronous function like or other networking etc …) as an argument with a and parameters. fetch() resolve reject Chaining is used to make use of this response object and execute it in the chain of sequences once, it is being fetched from an async function. See it in the code for better understanding. callback_function = { (True){resolve( );} {reject( ( ));}}; promise = (callback_function); callbackmethod_for_success = .log(result);
callbackmethod_for_error = .log(error);
promise.then(callbackmethod_for_success,callbackmethod_for_error); url = ; fetch(url).then(callbackmethod_for_success,callback_method_for_error); fetch(url).then(callbackmethod_for_success).catch(callback_method_for_error) (url) => { { response = fetch(url); .log( response.text());} (err){ .log( , err);}}; // creating a promise ... const ( )=> resolve,reject if 'everything worked' else Error 'nothing worked' const new Promise // chaining method ... ( )=> result console ( )=> error console // Remember fetch method for accessing the api's itself is a promise so u can write like ... const 'www.google.com/v1/some_api_call' // FYI .. this is not a real api ... // or you can do something like -- // async function similar to above but in a different way .. async try const await console await catch console 'fetch failed' If you are looking to fetch data from an API, feel free to check out my other post about . API Rest and Spread operators [ 3 dots ( … ) ] Rest parameter collects all remaining elements into an array. whereas , Spread operator allows iterables ( / / ) to be  expanded into single . arrays objects strings argument/element arr = [ , , , , ]; sum = { total_sum= ; ( arr_items args){total_sum+=arr_items;} total_sum;} 
sum(...arr) extended_arr = [...arr, , , , , ]; .log(extended_arr); // rest operator const 1 2 3 4 5 const ( ) => ...args let 0 for let of return // output 15 // spread operater const 6 7 8 9 10 console // output [1,2,3,4,5,6,7,8,9,10] Everything in JavaScript is an object - ie. (Data type , functions and classes) and the way to use one object with another to complete a task is something which makes the Javascript (as a language) interesting and powerful. Interesting Fact: That's it for this story. Thank you for taking your time and reading it. I hope you liked it. Stay Happy and Keep Coding.

Chain

Fetch

Google

Twitter

JavaScript Essentials (Concepts + Code) Frontend Development For Beginners

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

7 Programming Concepts Everyone Should Know (With Code)

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Frontend Projects to Take Your Coding Skills to the Next Level

7 Programming Concepts Everyone Should Know (With Code)

10 Things Every Beginner Should Know When Learning Javascript And React

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps