2025년 Javascript 개발자가 알아야 할 기능 소개

자바스크립트는 현재진행형으로 끊임없이 발전하고 개선되고 있어요.
이로 인해 기존 코딩 방식을 고수한다면 시대에 뒤 떨어지고 효율성이 떨어지는 코드를 작성하게 될 것 입니다. 대부분의 개발자가 아직 사용해보지 못한 몇가지 신규 기능을 소개해 드릴게요!

#1 반복자 도우미 (Iterator helpers)

arr.slice(10, 20).filter(el => el < 10).map(el => el + 5)

자바스크립트를 개발하다보면 위와같은 형태의 반복자를 자주 활용 했을것 같아요.
하지만 위 방법은 각 변환마다 새로운 배열을 할당하게 되므로 매우 비효율적입니다.

때문에 최근 JS가 Iterator 메서드를 도입하게 되었는데요, 대부분의 매서드는 arr 메서드와 동일한 기능을 수행하지만 효율성은 더 높아지게 됩니다.

Iterator.prototype.drop() === Array.prototype.slice(n)
Iterator.prototype.take()이 === Array.prototype.slice(0, n)
Iterator.prototype.some() === Array.prototype.some()
Iterator.prototype.every() === Array.prototype.every()
Iterator.prototype.filter() === Array.prototype.filter()
Iterator.prototype.find() === Array.prototype.find()
Iterator.prototype.flatMap() === Array.prototype.flatMap()
Iterator.prototype.forEach() === Array.prototype.forEach()
Iterator.prototype.map() === Array.prototype.map()
Iterator.prototype.reduce() === Array.prototype.reduce()
Iterator.prototype.toArray(). 생성된 값으로 배열을 생성합니다.

위 예시로 든 배열반복자를 반복자 메서드를 활용하면 아래와 같이 나타낼 수 있으며 임시 배열을 생성할 필요가 없어지면서 효율적인 코드를 생성할 수 있게 됩니다.

단, 위 메서드는 새로운 기능으로 브라우저 호환성에 유의해주세요!

arr.values().drop(10).take(10).filter(el => el < 10).map(el => el + 5).toArray()

#2 배열 at() 메서드

우리는 그동안 배열의 마지막 요소를 반환하기 위한 코드로 arr[arr.length - 1] 와 같은 코드를 사용해 왔습니다. 하지만 at() 메서드를 알고나서는 더이상 배열의 길이값을 가져올 필요가 없어요! 마지막 요소부터 시작하는 음수 인덱싱을 지원하는 at을 활용해서(arr.at(-1)) 으로 마지막 요소를 가져올 수 있어요!

#3 Promise.withResolvers()

Promise 확인자를 다른곳에서 사용하기 위해 아래와 같은 코드는 작성했었나요?

let resolve, reject;
const promise = new Promise((resolver, rejector) => {
	resolve = resolver;
	reject = rejector;
});

이제는 아래와같은 코드로 깔끔하게 사용 할 수 있게 되었어요!

const { promise, resolve, reject } = Promise.withResolvers();
// promise사용 후 resolve, reject는 나중에 사용해요!

#4 String.prototype.replace() / String.prototype.replaceAll() 콜백

익숙한 JS 매서드이죠? 하지만 두 번째 매개변수에 콜백을 전달할 수 있다는 사실을 알 고 계셨나요?

let counter = 0;
console.log("NUMBER, NUMBER, NUMBER".replaceAll("NUMBER", (match) => match + "=" + (++counter)))
// NUMBER=1, NUMBER=2, NUMBER=3

위 메서드를 활용하면 여러개의 교체작업을 한번에 수행 할 수 있게 돼요!

#5 변수 교환

혹시 프로젝트에서 아래와같이 변수를 교환하고 계셨나요~?

let a = 1, b = 2;
console.log(a, b); // 1, 2
const temp = a;
a = b;
b = temp;
console.log(a, b); // 2, 1

이제는 이렇게 깔끔하게 사용해보세요!

let a = 1, b = 2;
console.log(a, b); // 1, 2
[a, b] = [b, a];
console.log(a, b); // 2, 1

Reference

https://waspdev.com/articles/2025-04-06/features-that-every-js-developer-must-know-in-2025#promise_withresolvers