[JavaScript] ECMAScript 2024 -- ES2024

▶▷ 서론◁◀

• ES6만 있는 줄 알았는데 ES5부터 해서 ES2016부터 지금 ES2024까지 있다는 사실
• 참고로 2009년은 ES5, 2015년은 ES6이고 2016부터는 ES7이 아닌 ES2016, ES2017, ..., ES2024 이렇게 명칭이 바뀐다.
• 앞으로 ES2024부터 거꾸로 거슬러 올라가면서 새로 나온 특징에 대해서 살펴볼 생각이다.

---

▶▷ 목차 ◁◀

1. (Object, Map)  groupBy
2. (Temporal)  PlainDate, PlainTime, PlainMonthDay, Plain YearMonth

---

▶▷ 1. (Object, Map)  groupBy◁◀

• Object.groupBy()
• Map.groupBy()

Object.groupBy()와 Map.groupBy()는 JavaScript에서 배열의 요소를 그룹화하는 메서드다. 두 메서드는 콜백 함수에서 반환된 문자열 값을 기준으로 요소를 그룹화하며, 원본 배열을 변경하지 않는다. 각 메서드의 결과는 다르며, 다음과 같이 구분된다:

 

1. Object.groupBy()

• 설명: Object.groupBy() 메서드는 배열의 요소를 콜백 함수가 반환하는 문자열 값에 따라 그룹화하여 객체로 반환한다.
• 특징:
  • 반환된 객체는 키-값 쌍으로 구성된다.
  • 반환된 객체와 원본 객체는 같은 요소를 참조하므로, 요소의 변경은 양쪽에 반영된다.

예제:

const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];

function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}

const result = Object.groupBy(fruits, myCallback);
console.log(result);
// 출력:
// {
//   ok: [
//     {name: "apples", quantity: 300},
//     {name: "bananas", quantity: 500}
//   ],
//   low: [
//     {name: "oranges", quantity: 200},
//     {name: "kiwi", quantity: 150}
//   ]
// }

 

2. Map.groupBy()

• 설명: Map.groupBy() 메서드는 배열의 요소를 콜백 함수가 반환하는 문자열 값에 따라 그룹화하여 Map 객체로 반환한다.
• 특징:
  • 반환된 결과는 Map 객체로, 키-값 쌍으로 구성된다.
  • Map 객체는 객체보다 더 다양한 키를 가질 수 있으며, 순서가 유지된다.
  • 원본 요소의 변경은 Map에서도 반영된다.

예제:

const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];

function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}

const result = Map.groupBy(fruits, myCallback);
console.log(result);
// 출력: Map {
//   "ok" => [
//     {name: "apples", quantity: 300},
//     {name: "bananas", quantity: 500}
//   ],
//   "low" => [
//     {name: "oranges", quantity: 200},
//     {name: "kiwi", quantity: 150}
//   ]
// }

 

3. Object.groupBy()와 Map.groupBy()의 차이점

특징	Object.groupBy()	Map.groupBy()
반환 타입	JavaScript 객체 ({})	Map 객체
키 타입	문자열 또는 Symbol만 가능	모든 타입의 키 사용 가능
순서 유지	키의 삽입 순서가 보장되지 않음	키의 삽입 순서가 보장됨
요소 접근	점(.) 또는 대괄호([]) 표기법으로 접근	.get() 메서드로 요소 접근
사용 목적	기본적인 키-값 저장에 적합	더 다양한 키와 효율적 데이터 검색
변경	원본 객체와 반환된 객체 모두 변경 반영	원본 데이터의 변경이 반영됨

 

4. 객체의 참조

설명:

• Object.groupBy()나 Map.groupBy() 같은 메서드를 사용할 때, 그룹화된 결과 객체에 포함된 요소들은 원본 배열이나 객체의 요소를 참조한다. 즉, 반환된 객체 안의 요소를 변경하면 원본 객체의 해당 요소도 변경된다. 반대로 원본 객체의 요소를 변경하면 반환된 객체에 그 변경 사항이 반영된다.

예제:

// 원본 배열
const fruits = [
  { name: "apples", quantity: 300 },
  { name: "bananas", quantity: 500 },
  { name: "oranges", quantity: 200 }
];

// 그룹화된 결과
const result = Object.groupBy(fruits, ({ quantity }) => quantity > 200 ? "high" : "low");

// 반환된 객체의 요소를 수정
result.high[0].quantity = 350; // 'apples'의 수량을 350으로 변경

// 원본 배열도 반영됨
console.log(fruits[0].quantity); // 출력: 350

요약

 

• 반환된 객체의 요소와 원본 객체의 요소는 같은 메모리 참조를 가지기 때문에, 둘 중 하나를 변경하면 다른 쪽도 영향을 받는다.
• 이로 인해, 반환된 객체의 요소에 대한 변경이 원본 객체에도 반영되고, 그 반대의 경우도 마찬가지다.
• 이렇게 원본 객체와 반환된 객체가 동일한 요소를 참조하여 변경이 양쪽에 동기화되는 동작을 참조 동작이라고 부를 수 있다.

 

---

▶▷ 2. (Temporal)  PlainDate, PlainTime, PlainMonthDay, PlainYearMonth◁◀

• Temporal.PlainDate()
• Temporal.PlainTime()
• Temporal.PlainMonthDay()
• Temporal.PlainYearMonth()

const plainDate = Temporal.PlainDate(2024, 5, 1);
console.log(plainDate.toString()); // 출력: 2024-05-01

const plainTime = new Temporal.PlainTime(10, 30);
console.log(plainTime.toString()); // 출력: 10:30:00

const plainMonthDay = new Temporal.PlainMonthDay(5, 1);
console.log(plainMonthDay.toString()); // 출력: 05-01

const plainYearMonth = new Temporal.PlainYearMonth(2024, 5);
console.log(plainYearMonth.toString()); // 출력: 2024-05

---