-
Javascript ES12 문법정리JS & TS 2023. 12. 1. 16:49728x90
1. Numeric Separators
ES12에서는 숫자 구분자를 도입하여 숫자 리터럴 간에 밑줄(_)을 삽입하여 가독성을 향상할 수 있습니다. 이 기능은 코드 내에서 큰 숫자 값을 더 읽기 쉽게 만들어줍니다.
숫자 구분자 도입으로 코드 가독성이 크게 향상되며, 특히 많은 숫자 상수나 값을 다룰 때 유용합니다.
// before const billion = 1000000000; const trillion = 1000000000000; // ES12 const billion = 1_000_000_000; const trillion = 1_000_000_000_000;
2. Logical Assignment Operators
ES12에서는 논리 할당 연산자(||=, &&=,??=)를 도입하여 논리 연산과 동시에 할당을 간결하게 수행할 수 있습니다.
이러한 연산자는 논리 연산과 할당을 결합하여 코드를 간결하게 만들어주며, 표현력을 높여줍니다.
// before let x = 10; x = x || 20; // x가 거짓일 경우 20을 x에 할당 let y = 5; y = y && 15; // y가 참일 경우 15를 y에 할당 let z = null; z = z ?? 30; // z가 널리시일 경우 30을 z에 할당 // ES12 let x = 10; x ||= 20; // x가 거짓일 경우 20을 x에 할당 let y = 5; y &&= 15; // y가 참일 경우 15를 y에 할당 let z = null; z ??= 30; // z가 널리시일 경우 30을 z에 할당
3. String ReplaceAll Method
ES12에서는 문자열의 replaceAll 메서드를 도입하여 정규식을 사용하지 않고도 전역적인 문자열 교체를 간단하게 수행할 수 있습니다.
replaceAll 메서드는 문자열 내의 모든 부분 문자열을 간단하게 교체하는 더 깔끔하고 간편한 방법을 제공합니다.
// 이전 const originalString = 'Hello, Hello, World!'; const modifiedString = originalString.split('Hello').join('Hi'); const modified2String = originalString.replace(/Hello/gi, 'Hi'); // ES12 const originalString = 'Hello, Hello, World!'; const modifiedString = originalString.replaceAll('Hello', 'Hi');
4. Private Fields
ES12에서는 클래스 내에서 # 접두사를 사용하여 개인(private) 변수를 선언할 수 있는 개인 필드(private class fields)를 도입했습니다. 이러한 필드는 클래스 내부에서만 접근 가능하며, 캡슐화와 클래스 무결성을 강화합니다.
개인 필드를 사용하면 클래스 속성을 더 안전하고 명시적으로 비공개로 정의하여 코드 가독성과 유지보수성을 향상할 수 있습니다.// 이전 class MyClass { constructor() { this._privateField = 10; // 개인 필드를 나타내는 컨벤션 사용 } getPrivateField() { return this._privateField; } } // ES12 class MyClass { #privateField; constructor() { this.#privateField = 10; } getPrivateField() { return this.#privateField; } } const instance = new MyClass(); console.log(instance.getPrivateField()); // 결과: 10 console.log(instance.#privateField); // SyntaxError: Private field '#privateField' must be declared in an enclosing class
5. WeakRefs와 FinalizationRegistry
ES12에서는 WeakRefs와 FinalizationRegistry 클래스를 도입하여 개체에 대한 약한 참조를 관리하고 해당 개체가 가비지 컬렉션 될 때 콜백을 실행할 수 있습니다.
WeakRefs와 FinalizationRegistry를 사용하면 메모리를 효율적으로 관리하고 개체가 참조 불가능해질 때 정리 작업을 수행할 수 있어 JavaScript에서 메모리 관리를 향상할 수 있습니다.
// ES12 const registry = new FinalizationRegistry(heldValue => { console.log('Object has been collected:', heldValue); }); let obj = {}; registry.register(obj, 'Some value'); // 'obj'의 WeakRef 생성 let weakRef = new WeakRef(obj); obj = null; // 'obj'에 대한 강한 참조 제거 // 일정 시점에 개체가 가비지 컬렉션되고 FinalizationRegistry 콜백이 트리거됨
'JS & TS' 카테고리의 다른 글
Javascript ES14 문법정리 (0) 2023.12.15 Javascript ES13 문법정리 (0) 2023.12.04 Javascript ES11 문법정리 (2) 2023.11.24 Javascript ES10 문법정리 (2) 2023.11.08 Javascript ES9 문법정리 (2) 2023.10.16