📙ES6 문법공부
📁String.replaceAll
String.replace() 메서드의 사용법과 동일하다. String.replace()는 첫 번째로 일치하는 문자열만 바꿔주지만, String.replaceAll()은 모든 문자열에 적용된다.
const str1 = "Hello World";
console.log(str1.replaceAll("l", "~")); // "He~~o Wor~d"📂String.replace
String.replace()는 문자열에서 특정 부분을 다른 문자열로 교체하는 메서드이다. 문자열에서 첫 번째로 일치하는 부분만 교체한다.
str.replace(searchValue, newValue);searchValue는 찾을 값으로, 문자열 또는 정규 표현식이 들어간다. 이때, 정규 표현식은 문자열에서 패턴을 찾고, 일치 여부를 확인하거나, 치환, 분리등을 할 수 있는 도구이다.
newValue는 교체할 값으로, 문자열 또는 함수가 들어간다.
newValue에 콜백함수가 들어간 예제
const str = "I have 2 apples and 3 oranges.";
const newStr = str.replace(/\d+/g, (match) => `(${match})`);
console.log(newStr); // "I have (2) apples and (3) oranges."str 문자열에서 숫자가 하나 이상 연속된 부분(\d+)을 찾아낸다. g는 searchValue에 일치하는 모든 문자열이 변경되게 한다. 콜백함수는 searchValue에 일치된 문자열을 인자로 받으며 교체할 문자열을 반환한다.
🗂️String.replace 사용한 예제1
const str1 = "Hello World";
console.log(str1.replace(/l/, "~")); // "He~lo World"정규표현식을 사용해서 String.replace() 메서드를 호출하면 첫 번째로 일치하는 문자 'l'만을 교체한다.
console.log(str1.replace(/l/g, "~"));
// "He~~o Wor~d"정규표현식에 g 플레그를 사용하면, searchValue에 일치하는 모든 문자열이 변경된다.
🗂️String.replace 사용한 예제2 (특수기호 교체)
const str1 = "I'm [Mike]. This is Tom's [Car].";
console.log(str1.replaceAll("[", "~").replaceAll("]", "~")); // I'm ~Mike~. This is Tom's ~Car~."
console.log(str1.replace(/\[/g, "~").replace(/\]/g, "~")); // I'm ~Mike~. This is Tom's ~Car~."정규 표현식에서 특수 문자 앞에는 역슬레쉬()를 붙여줘야 한다. String.replaceAll() 메서드가 String.replace()보다 가독성이 좋다.
📁Logical assignment Operators
자바스크립트에는 세 가지의 논리 할당 연산자가 있다.
📂OR 논리 할당 연산자 (||=)
function add(num1, num2) {
num1 = num1 || 0;
num2 ||= 0; // 축약 형태
console.log(num1 + num2);
}
console.log(add()); // 0왼쪽 값이 Falsy인 경우, 오른쪽 값을 할당한다. 이때 Falsy란 false, 0, null, undefined, NaN, ''을 말한다.
📂AND 논리 할당 연산자 (&&=)
function add(num1, num2) {
num1 = num1 && 0;
num2 &&= 0; // 축약 형태
console.log(num1 + num2);
}
console.log(add()); // 0왼쪽 값이 Truthy인 경우, 오른쪽 값을 할당한다. 이때, Truthy란 true로 간주되는 값을 말한다.
📂NULL 논리 할당 연산자 (??=)
let num = 0;
let a = num || 3;
console.log(a); // 3
let b = num ?? 3;
console.log(b); // 0왼쪽 값이 null 또는 undefined인 경우, 오른쪽 값을 할당한다.
📁Numeric separators
Numeric separators은 숫자 구분자이다.
let billion = 1_000_000_000 // 10억
console.log(billion) // 1000000000일상생활에서는 숫자의 세 자리마다 쉼표를 써서, 읽기 쉽게 만든다.
하지만, 자바스크립트에서는 숫자 사이에 쉼표를 넣는 것이 허용되지 않는다. 따라서, 언더스코어(_)를 구분자로 사용한다. 쉼표 대신 언더스코어(_)를 써주면 실제 사용되는 값은 구분자가 없는 숫자로 사용된다.
📁WeakRef
WeakRef는 Weak Reference의 약자로, 약한 참조라는 뜻이다. 'MDN' 문서를 참조하면 가능한 쓰지 말라고 되어있다.
약한 참조는 객체가 아직 메모리에 남아 있는지 확인하기 위한 도구이다.
WeakRef() 생성자 함수를 호출하여, 약한 참조를 하는 WeakRef 객체가 생성된다. WeakRef 객체는 생성자 함수의 인자로 넘겨준 변수가 가리키는 객체를 약한 참조한다.
deref()로 WeakRef 객체가 약한 참조하는 객체를 참조 가능하다. 객체가 가비지 컬렉션으로 제거되지 않았다면 해당 객체를 반환한다. 제거되었다면 undefined를 반환한다.
자바스크립트에는 가비지 컬렉터가 있다. 사용하지 않는 객체를 메모리에서 해제해주는 작업을 자동으로 해준다. 다시말해, 객체가 참조되고 있으면 메모리에서 제거되지 않는다. 다만, 참조되고 있지 않은 객체는 가비지 컬렉션의 대상이 된다. 가비지 컬렉션의 대상이 되면 언제든지 객체가 없애지고, 메모리가 회수될 수 있다.
let user = {name: 'Mike', age: 30};
const weakUser = new WeakRef(user);
user = null;
const timer = setInterval(() => {
const wUser = weakUser.deref();
if(wUser) {
console.log(wUser.name);
} else {
console.log('제거 되었습니다.');
clearInterval(timer);
}
}, 1000);WeakRef() 생성자 함수를 통해서 WeakRef 객체를 만든다. 이때, WeakRef 객체는 생성자 함수의 인자로 넘겨준 user 변수가 가리키는 객체를 약한 참조한다.
user = null;통해서 객체의 강한 참조를 끊었다. 강한 참조를 끊은 즉시 user 객체가 참조하던 객체는 약한 참조를 제외하고는 더 이상 참조되지 않으므로 가비지 컬렉션의 대상이 된다.
deref()를 호출하면 WeakRef 객체가 약한 참조하는 객체를 참조 가능하다. 다시말해, user 변수가 null을 가리키기 전에 강한 참조를 하던 객체에 접근한다. 가비지 컬렉터는 메모리가 부족해지거나 엔진이 필요하다고 판단할 때 비로소 메모리에서 가비지 컬렉션의 대상 객체를 제거한다. 가비지 컬렉션이 완료되어 객체가 메모리에서 제거되었다면, undefined를 반환한다.
📝가비지 컬럭션 vs 가비지 컬렉터 용어차이
- 가비지 컬렉션: 불필요한 메모리를 회수하는 작업을 뜻함.
- 가비지 컬렉터: 불필요한 메모리를 회수하는 주체를 뜻함.
💡WeakRef 객체를 캐시에 저장한 예시
class MyCache {
constructor() {
this.cache = {};
}
add(key, obj) {
this.cache[key] = new WeakRef(obj);
}
get(key) {
let cacheRef = this.cache[key].deref();
if(cacheRef) {
return cacheRef;
} else {
return false;
}
}
}obj가 가리키는 객체를 약한 참조하는 WeakRef 객체를 생성한다. 그리고, 해당 객체를 캐시에 넣어서, get() 메서드를 호출할 때마다 약한 참조하여 특정 객체가 아직 메모리에 남아있는지 확인할 수 있다.
this.cache[key] = obj;obj 변수가 null을 가리키게 되어도, 캐시가 강한 참조를 유지하고 있다면 해당 객체는 가비지 컬렉션의 대상이 되지 않는다. 하지만, WeakRef 객체를 사용한다면, 객체가 더 이상 강한 참조를 받지 않을 때 가비지 컬렉션의 대상이 될 수 있게 한다.
참고
- ES2021 자바스크립트에 추가된 새로운 기능 강의: https://youtu.be/CvKSR94D0QE?si=p_Cq-Ne7viXA6V_M
