--- title: JavaScript Refresher : Master ES6, Array Methods,... description: Discussion about "JavaScript Refresher : Master ES6, Array Methods, Async/Await & Import/Export in 2025" on daily.dev - join the developer community canonical: https://daily.dev/posts/javascript-refresher-master-es6-array-methods-async-await-import-export-in-2025-qygxknwls twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: JavaScript Refresher : Master ES6, Array Methods, Async/Await & Import/Export in 2025 | daily.dev og:description: Discussion about "JavaScript Refresher : Master ES6, Array Methods, Async/Await & Import/Export in 2025" on daily.dev - join the developer community og:url: https://daily.dev/posts/javascript-refresher-master-es6-array-methods-async-await-import-export-in-2025-qygxknwls og:image: https://api.daily.dev/og/posts/QygxkNwlS.png og:image:alt: JavaScript Refresher : Master ES6, Array Methods, Async/Await & Import/Export in 2025 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # JavaScript Refresher : Master ES6, Array Methods, Async/Await & Import/Export in 2025 **[Abhishek Shrivastav](https://daily.dev/sources/mgjkq5yleln1wbzrddjfd)** · [@abhishrivastav](https://daily.dev/abhishrivastav) · 4 upvotes · 0 comments ## Content # JavaScript Refresher Part 2: Master ES6, Array Methods, Async/Await & Import/Export in 2025 Hey there, coder! 👋 If you’re brushing up on JavaScript or getting ready to dive into React, you’re in the right place. Welcome to **Part 2 of our JavaScript Refresher Series**! In this guide, we’ll explore **modern JavaScript features** like ES6, array methods, async/await, and import/export—the essentials every developer needs. Whether you’re a beginner or need a quick recap, I’ve got you covered with simple explanations and practical examples. When I started learning JavaScript, these concepts felt tricky. But once they clicked, coding became so much easier! 😎 Let’s break it all down in a beginner-friendly way, and don’t miss my **Hindi video tutorial** for live coding examples! 📺 **Watch the full tutorial**: [JavaScript Refresher Part 2 – YouTube](https://youtu.be/vgEiz91BD1U) --- ## 😓 Why Do You Need This Refresher? JavaScript is the backbone of web development, especially for frameworks like React. But let’s be real—keeping up with modern JavaScript can feel overwhelming. ES6? Async/await? Array methods? Import/export? It’s a lot! 😩 That’s why I created this guide to explain these concepts in a way that feels like a friend teaching you over chai. ☕ By the end, you’ll feel confident using these features in your projects. Let’s dive in! **Focus Keyword**: JavaScript Refresher --- ## 🔹 1. ES6 Features: Making JavaScript Easier ES6 (ECMAScript 2015) brought tons of cool features to JavaScript. Let’s start with two super useful ones: **default parameters** and **template literals**. ### Default Parameters Ever wished your function could have a backup value if someone forgets to pass an argument? That’s what **default parameters** do! ```javascript function greet(name = "Coder") { console.log(`Hello, ${name}!`); } greet(); // Hello, Coder! greet("Code Ki Pathshala"); // Hello, Code Ki Pathshala! ``` > **Think of it like**: If you don’t tell the chef what sauce you want, they’ll use the default one! ### Template Literals Template literals (using backticks \`) make strings super easy to work with. You can add variables directly inside them with `${}`. ```javascript const name = "Code Ki Pathshala"; const message = `Hi, ${name}! Welcome to modern JavaScript!`; console.log(message); // Hi, Code Ki Pathshala! Welcome to modern JavaScript! ``` --- ## 🔹 2. Spread & Rest Operators: The Magic of `...` The `...` operator is like a Swiss Army knife—it does two jobs: **spread** and **rest**. Let’s see how. ### Spread Operator: Spread the Love The **spread operator** lets you “spread” an array or object into individual pieces. ```javascript const fruits = ["apple", "banana"]; const moreFruits = [...fruits, "mango", "orange"]; console.log(moreFruits); // ["apple", "banana", "mango", "orange"] const user = { name: "Code Ki Pathshala" }; const updatedUser = { ...user, age: 22 }; console.log(updatedUser); // { name: "Code Ki Pathshala", age: 22 } ``` > **Think of it like**: Unpacking a bag of fruits to add more! ### Rest Operator: Collect the Rest The **rest operator** collects multiple arguments into an array. ```javascript function addNumbers(...numbers) { return numbers.reduce((sum, num) => sum + num, 0); } console.log(addNumbers(1, 2, 3, 4)); // 10 ``` > **Shortcut**: Spread = unpack, Rest = pack. --- ## 🔹 3. Array Methods: Your Data Superpowers JavaScript’s **array methods** are like tools in a toolbox—they make working with arrays super easy. Here are the ones you’ll use all the time: ### 3.1 `map()`: Transform Everything `map()` creates a new array by applying a function to every element. ```javascript const numbers = [1, 2, 3]; const doubles = numbers.map(num => num * 2); console.log(doubles); // [2, 4, 6] ``` > **Use case**: Turn a list of prices into discounted prices! ### 3.2 `filter()`: Pick What You Want `filter()` creates a new array with only the elements that pass a test. ```javascript const ages = [15, 18, 22, 16, 30]; const adults = ages.filter(age => age >= 18); console.log(adults); // [18, 22, 30] ``` > **Use case**: Show only products in stock from a list. ### 3.3 `find()`: Grab the First Match `find()` returns the first element that matches your condition. ```javascript const users = [{ id: 1, name: "A" }, { id: 2, name: "Code Ki Pathshala" }]; const user = users.find(u => u.id === 2); console.log(user); // { id: 2, name: "Code Ki Pathshala" } ``` > **Use case**: Find a user by their ID in a database. ### 3.4 `some()` & `every()`: Check Conditions - `some()`: Returns `true` if at least one element passes a test. - `every()`: Returns `true` if all elements pass a test. ```javascript const numbers = [2, 4, 5, 6]; console.log(numbers.some(n => n % 2 !== 0)); // true (5 is odd) console.log(numbers.every(n => n % 2 === 0)); // false (not all are even) ``` > **Use case**: Check if any/all items in a cart are on sale. ### 3.5 `includes()`, `indexOf()`, `findIndex()`: Search Made Easy ```javascript const fruits = ["apple", "banana", "mango"]; console.log(fruits.includes("banana")); // true console.log(fruits.indexOf("mango")); // 2 console.log(fruits.findIndex(f => f === "apple")); // 0 ``` > **Use case**: Check if a product exists in a list or find its position. --- ## 🔹 4. Async/Await: Make Async Code Simple Dealing with APIs or data fetching? **Async/await** makes it feel like writing regular code. ```javascript async function getPost() { try { const response = await fetch("https://jsonplaceholder.typicode.com/posts/1"); const post = await response.json(); console.log(post.title); } catch (error) { console.error("Oops, something went wrong:", error); } } getPost(); ``` > **Think of it like**: Ordering food online—you wait for it to arrive, but you can do other stuff in the meantime! --- ## 🔹 5. Import/Export: Organize Your Code Modern JavaScript lets you split your code into **modules** for reusability. ### Named Exports ```javascript // math.js export const add = (a, b) => a + b; export const multiply = (a, b) => a * b; // app.js import { add, multiply } from './math.js'; console.log(add(2, 3)); // 5 console.log(multiply(2, 3)); // 6 ``` ### Default Exports ```javascript // greet.js export default function sayHello(name) { return `Hello, ${name}!`; } // app.js import sayHello from './greet.js'; console.log(sayHello("Code Ki Pathshala")); // Hello, Code Ki Pathshala! ``` > **Why it matters**: Modules keep your code clean and reusable, especially in big projects like React apps. --- ## ✅ Key Takeaways for Beginners - **ES6 Features**: Use default parameters and template literals to write cleaner code. - **Spread/Rest**: Spread unpacks arrays/objects; Rest collects arguments. - **Array Methods**: Use `map`, `filter`, `find`, `some`, `every`, and more to handle data like a pro. - **Async/Await**: Fetch data easily without messy promises. - **Import/Export**: Organize your code into reusable modules. --- ## 🎥 Watch the Hindi Tutorial for Live Coding Want to see these concepts in action? I’ve created a **beginner-friendly Hindi tutorial** where I code all these examples live and explain them step-by-step. 📺 **Check it out**: [JavaScript Refresher Part 2 – YouTube](https://youtu.be/vgEiz91BD1U) > 🗣️ *"JavaScript ab itna tough nahi lagta—ye tutorial dekh ke sab clear ho gaya!"* --- ## 💡 My JavaScript Journey When I started with JavaScript, these modern features felt like a puzzle. Spread operator? Async/await? It was overwhelming! But after practicing with real examples (like the ones above), it all made sense. Now, I use these features in every project, and they save me so much time. If you’re a beginner, these skills will make you a better React developer! 😄 --- ## 🛠️ Practice Tips for Beginners 1. **Try It Out**: Create a small project using `map` and `filter` to display a list of items. 2. **Play with Async/Await**: Fetch data from a free API like [JSONPlaceholder](https://jsonplaceholder.typicode.com/). 3. **Use Modules**: Split your code into files and practice importing/exporting functions. 4. **Watch the Video**: Follow along with my [YouTube tutorial](https://youtu.be/vgEiz91BD1U) to see it all in action. --- ## 📌 Let’s Keep Learning! Mastering these JavaScript features will set you up for success in React and beyond. Whether you’re building a portfolio or a full-blown web app, these skills are your foundation. Got questions? Drop them in the comments on daily.dev or join our [Discord community](https://discord.gg/7CSqvrp3) to chat with other coders. Let’s make JavaScript fun and easy together! 🚀 --- ## 🔗 More Resources - **Deepen Your JS Knowledge**: Check out my [JavaScript Refresher Part 1](https://youtu.be/qlrhzLCj_bA) for basics. - **Official Docs**: Explore [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) for JavaScript details. - **React Prep**: Learn [React Basics](https://codekipathshala.com/react-js-tutorial-hindi) on my site. - **All Tutorials**: Visit [codekipathshala.com](https://codekipathshala.com) for more Hindi guides. --- ## 🙌 Join the Code Ki Pathshala Community I share **JavaScript and React tutorials, tips, and projects** (in Hindi) for beginners on my website and YouTube. They’re made to be simple, practical, and fun! 👉 **Visit**: [codekipathshala.com](https://codekipathshala.com) 👉 **Subscribe**: [YouTube Channel](https://www.youtube.com/channel/UCHvLK07jwb0kDLPR1tbX6JQ) Happy coding, and let’s build awesome things together! 😄 --- ### 🔖 Tags `JavaScript`, `ES6`, `array methods`, `async await`, `import export`, `JavaScript refresher`, `ReactJS tutorial`, `code ki pathshala`, `JavaScript 2025`, `JavaScript for beginners` --- [View this post on daily.dev](https://daily.dev/posts/javascript-refresher-master-es6-array-methods-async-await-import-export-in-2025-qygxknwls) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/javascript-refresher-master-es6-array-methods-async-await-import-export-in-2025-qygxknwls","headline":"JavaScript Refresher : Master ES6, Array Methods, Async/Await \u0026 Import/Export in 2025","text":"Discussion about \"JavaScript Refresher : Master ES6, Array Methods, Async/Await \u0026 Import/Export in 2025\" on daily.dev - join the developer community","url":"https://daily.dev/posts/javascript-refresher-master-es6-array-methods-async-await-import-export-in-2025-qygxknwls","datePublished":"2025-09-20T09:58:24.229Z","dateModified":"2025-09-20T09:58:24.229Z","author":{"@type":"Person","name":"Abhishek Shrivastav","url":"https://daily.dev/abhishrivastav","image":"https://media.daily.dev/image/upload/s--pOsLcOdP--/f_auto/v1748502257/avatars/avatar_mGJKq5yleln1wbZRDDjfd?_a=BAMClqUq0","description":"A Full Stack web developer","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":380}},"image":"https://media.daily.dev/image/upload/s--kOOFZGH_--/f_auto/v1758362304/posts/QygxkNwlS?_a=BAMAK+ZW0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/mgjkq5yleln1wbzrddjfd","name":"Abhishek Shrivastav"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Abhishek Shrivastav","item":"https://daily.dev/sources/mgjkq5yleln1wbzrddjfd"},{"@type":"ListItem","position":3,"name":"JavaScript Refresher : Master ES6, Array Methods, Async/Await \u0026 Import/Export in 2025"}]} ```