[JavaScript] replaceAll (ES2021), at (ES2022)

 

1. replaceAll

replace 는 첫번째 키워드만 바꿀 수 있지만

replaceAll 은 문자열의 모든 키워드를 바꿀 수 있다.

const str = "You are the best of the best";

const str_1 = str.replaceAll('best', 'worst');
// "You are the worst of the worst"

const str_2 = str.replace('best', 'worst');
// "You are the worst of the best"

 

 

문자열은 불변(immutable) 타입이기 떄문에 문자열 자체를 바꿀 수 없다.

대신, replace() 같은 메서드로 원본을 직접 수정하지 않고, 새로운 문자열을 반환해 사용한다.

이때, let 으로 선언한 문자열은 재할당이 가능해서 같은 변수에 새 문자열을 할당할 수 있지만,

const 로 선언한 문자열은 재할당이 불가능해서 새로운 변수를 선언해야 한다.

 

const str = "hello";
const newStr = str.replace("h", "y");

console.log(str);     // "hello" → 원본 안 바뀜!
console.log(newStr);  // "yello"


let greeting = "hi there";
greeting = greeting.replace("hi", "hello");

console.log(greeting); // "hello there"

 

그러면 여기서 궁금한 점이 생긴다.

let 변수는 새로운 문자열을 덮어써서 변수 값을 바꾸는 방식으로 작동한다.

하지만 문자열은 불변 타입이라, 원본 문자열 자체는 변경되지 않는다.

그렇다면, 덮어씌워진 원본 문자열은 어디로 갈까??

 

위의 예시에서 greeting 변수는

"hi there" 를 가리키던 참조(reference)를 잃고,

"hello there" 라는 새로운 문자열을 가리키게 된다.

이때 잃어버린 "hi there" 의 참조는 가비지 컬렉터 (Garbage Collector) 에 의해

자바스크립트 엔진은 필요없다고 판단하면 자동으로 메모리에서 삭제된다.

 

1. "hi there" → 메모리에 저장됨
2. greeting.replace(...) 실행 → "hello there"라는 새로운 문자열이 만들어짐
3. greeting은 이제 "hello there"를 가리킴
4. 더 이상 "hi there"를 가리키는 변수가 없으면, JavaScript가 메모리에서 치워버림 🧹

 

 

2. at

array.at(index)

배열이나 문자열에서 특정 위치의 값을 가져온다.

음수 인덱스를 지원한다.

 

const last1 = arr[arr.length - 1];	// 기존 문법
const last2 = arr.at(-1);

 

 

배열의 마지막 요소를 가져올 때 더 간단하게 가져올 수 있다.

 

 

// 배열
const numbers = [10, 20, 30, 40, 50];

console.log(numbers.at(0));   // 10  (첫 번째 요소)
console.log(numbers.at(-1));  // 50  (마지막 요소)
console.log(numbers.at(-2));  // 40  (뒤에서 두 번째 요소)

// 문자열
const greeting = "hello";

console.log(greeting.at(1));   // 'e'
console.log(greeting.at(-1));  // 'o'