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

😓 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!

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 ${}.

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.

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.

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.

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.

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.

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.

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

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.

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

// 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

// 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

🗣️ “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

Try It Out: Create a small project using map and filter to display a list of items.
Play with Async/Await: Fetch data from a free API like JSONPlaceholder.
Use Modules: Split your code into files and practice importing/exporting functions.
Watch the Video: Follow along with my YouTube tutorial 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 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 for basics.
Official Docs: Explore MDN Web Docs for JavaScript details.
React Prep: Learn React Basics on my site.
All Tutorials: Visit 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
👉 Subscribe: YouTube Channel

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

JavaScript Refresher : Master ES6, Array Methods, Async/Await & Import/Export in 2025