누군가 일찍 가르쳐 주었으면 하는 🚀 15가지 자바스크립트 트릭

JavaScript is full of small features that can make your code cleaner, shorter, and easier to maintain.

Here are 15 JavaScript tricks I use almost every week while building web applications with Next.js and React.

Hopefully, you’ll find at least a few that make your coding life easier.

1. Remove Duplicate Values

const numbers = [1, 2, 2, 3, 4, 4, 5];

const unique = [...new Set(numbers)];

console.log(unique);
// [1,2,3,4,5]

Enter fullscreen mode Exit fullscreen mode

2. Optional Chaining

Instead of writing:

if (user && user.address && user.address.city) {
  console.log(user.address.city);
}

Enter fullscreen mode Exit fullscreen mode

Use:

console.log(user?.address?.city);

Enter fullscreen mode Exit fullscreen mode

Much cleaner and safer.

3. Nullish Coalescing Operator

const username = null;

console.log(username ?? "Guest");

Enter fullscreen mode Exit fullscreen mode

Output:

Guest

Enter fullscreen mode Exit fullscreen mode

Unlike ||, this only replaces null or undefined.

4. Object Destructuring

Instead of:

const name = user.name;
const age = user.age;

Enter fullscreen mode Exit fullscreen mode

Write:

const { name, age } = user;

Enter fullscreen mode Exit fullscreen mode

5. Swap Variables

Old way:

let a = 10;
let b = 20;

const temp = a;
a = b;
b = temp;

Enter fullscreen mode Exit fullscreen mode

Modern JavaScript:

[a, b] = [b, a];

Enter fullscreen mode Exit fullscreen mode

6. Copy Objects

const newUser = {
  ...user,
};

Enter fullscreen mode Exit fullscreen mode

No loops required.

7. Merge Objects

const user = {
  name: "John",
};

const details = {
  age: 25,
};

const result = {
  ...user,
  ...details,
};

console.log(result);

Enter fullscreen mode Exit fullscreen mode

8. Remove Falsy Values

const arr = [0, "", false, "Hello", undefined, 5, null];

const clean = arr.filter(Boolean);

console.log(clean);

Enter fullscreen mode Exit fullscreen mode

Output:

["Hello",5]

Enter fullscreen mode Exit fullscreen mode

9. Flatten Arrays

const arr = [[1], [2], [3]];

console.log(arr.flat());

Enter fullscreen mode Exit fullscreen mode

Output:

[1,2,3]

Enter fullscreen mode Exit fullscreen mode

10. Dynamic Property Names

const key = "email";

const user = {
  [key]: "[email protected]",
};

console.log(user);

Enter fullscreen mode Exit fullscreen mode

11. Convert Object into Array

const user = {
  name: "John",
  age: 25,
};

console.log(Object.entries(user));

Enter fullscreen mode Exit fullscreen mode

Output:

[
  ["name", "John"],
  ["age", 25],
];

Enter fullscreen mode Exit fullscreen mode

12. Promise.all()

Instead of waiting one request after another:

await getUsers();
await getPosts();
await getComments();

Enter fullscreen mode Exit fullscreen mode

Run everything together:

await Promise.all([
  getUsers(),
  getPosts(),
  getComments(),
]);

Enter fullscreen mode Exit fullscreen mode

Much faster.

13. Get the Last Element

Instead of:

arr[arr.length - 1];

Enter fullscreen mode Exit fullscreen mode

Use:

arr.at(-1);

Enter fullscreen mode Exit fullscreen mode

Cleaner and easier to read.

14. Generate a UUID

const id = crypto.randomUUID();

console.log(id);

Enter fullscreen mode Exit fullscreen mode

Example:

4c5d7d67-2a58-4b76-a52d-5b43c672b16f

Enter fullscreen mode Exit fullscreen mode

Perfect for temporary IDs.

15. Use const by Default

Instead of writing:

var total = 100;

Enter fullscreen mode Exit fullscreen mode

Use:

const total = 100;

Enter fullscreen mode Exit fullscreen mode

Only use let when the value needs to change.

Avoid var in modern JavaScript.

🎯 Bonus Tip

Use Prettier and ESLint in every JavaScript project.

Good formatting and linting save hours of debugging and make your code much easier to maintain.

Final Thoughts

JavaScript continues to evolve, and even small language features can significantly improve the quality of your code.

These tricks may seem simple individually, but together they help write cleaner, more maintainable, and less error-prone applications.

If you have a favorite JavaScript trick that isn’t on this list, share it in the comments. I’d love to learn something new!

Happy Coding! 🚀

Tags:

#javascript #webdev #programming #beginners