참고 | 자바스크립트에서 불변성(Immutability)이란

---

나의 풀이 1

function solution(myString, pat) {
    return [...myString].map(x => {
        if (x == "A") { 
            x = "B"
        } else { x = "A" }
    })
}

처음에 이렇게 쳤더니 자꾸 [null, null, null, null] 로 반환해서 당황스러웠다. 그래서 찾아보니 나는 map 함수 내에서 문자열을 수정하려고 시도하고 있었는데 JavaScript 내 문자열은 ⭐️불변한 데이터 유형⭐️이라서 오류가 발생하는 거라고 한다.

💡 JavaScript 불변성

변수에 값을 할당한다 = 값의 메모리 주소를 참조하는 것

let a = 'hello world!';

• hello world! 라는 값이 메모리에 생성되고, a 라는 변수가 이 메모리의 주소를 참조하도록 함.

let name = 'foo';
name = 'bar';

• foo 라는 string 타입의 값이 메모리에 생성되었고, name은 메모리에 생성된 foo의 메모리 주소를 참조한다.
• bar 라는 새로운 string 타입의 값이 새로 생성되었고, name은 다시 bar의 메모리 주소를 참조한다.

let name = 'foo';
let newName = name;
name = 'bar';

console.log(newName); // foo
console.log(name); // bar

• foo 라는 string 타입의 값이 메모리에 생성되었고, name은 메모리에 생성된 foo의 메모리 주소를 참조한다.
• newName 은 name 이 참조하는 주소 (foo의 메모리 주소)를 가리킨다.
• bar 라는 새로운 string 값이 새로 생성되었고, name은 이제 bar의 메모리 주소를 참조한다.
  => ⭐️newName은 여전히 foo를, name은 새로 참조 중인 bar를 출력하는 것.⭐️

원시 타입(primitive type)

• Boolean
• String
• Number
• Null
• undefined
• Symbol

위 데이터 타입들은 불변성 의 성질을 띈다.

나의 풀이 2

function solution(myString, pat) {
    let newString = [...myString].map(x => {
        if (x == "A") { 
            return "B"
        } else { return "A" }
    })

    return newString.join("").includes(pat) ? 1 : 0
}

• 직접적으로 x = "B" 라고 입력해서 불변한 데이터 x 를 건들이려는 오류를 내는 것 대신, 아예 새로운 문자열을 반환을 해주므로써 해결했다.

모범답안

const solution = (myString, pat) => [...myString].map(v => v === 'A' ? 'B' : 'A').join('').includes(pat) ? 1 : 0

• map() 부분도 삼항연산자로 표시해서 더 클린한 코드를 짠 것을 확인할 수 있었다.

---

🔆 자바스크립트에서는 불변성의 원칙이 있다는 것을 새롭게 알게 되었다. 사실 변수에 값을 할당한다는 것 = 값이 할당된 메모리 주소를 참조한다는 것 인 건 알고 있었지만 이런 식으로 불변성의 원리와 관계가 있는 건지는 처음 알았다.