JavaScript의 가변성 및 불변성

경험이 가장 풍부한 개발자가 새 변수에 간단하게 분배하지 않고spread 조작부호를 사용해서 그룹을 복제하는 것을 자주 듣습니다.이는 특정 데이터 유형이 JavaScript의 참조 유형인 것과 관련이 있으므로 가변적입니다.JavaScript의 가변성과 불변성 개념은 오류를 피하기 위해 이해하는 데 매우 중요하다.JavaScript의 가변성과 불변성의 개념을 심도 있게 살펴보겠습니다.

JavaScript의 기원 유형 및 참조 유형

JavaScript 변수에 할당된 데이터는 두 가지 유형으로 나눌 수 있습니다. 즉, 기본 유형과 참조 유형입니다.JavaScript는 두 데이터 유형을 서로 다르게 처리합니다.그것들이 어떻게 구별되는지 이해하기 위해서는 기본 유형과 인용 유형 간의 차이를 먼저 알아야 한다.

기본 유형

기본 유형은 JavaScript의 간단한 원자 블록입니다.기본 유형은 항상 다른 객체에 대한 참조가 아닌 변수의 값을 통해 저장되고 액세스됩니다.JavaScript에는 다음과 같은 6가지 기본 유형이 있습니다.

정의되지 않음

비어 있음

부울 값

번호

문자열

기호

참조 유형

인용 유형은 간단한 원자값이 아니라 그것들에게 분배된 여러 속성으로 구성된 대상이다.그것들은 변수에 분배된 독립된 값이 아니라 참고로 메모리에 저장된다.JavaScript에는 다음 세 가지 참조 유형이 있습니다.

객체

어레이

기능

기본 형식과 인용 형식은 메모리에 어떻게 저장합니까

기원 형식과 인용 형식이 메모리에 저장되는 방식은 서로 다른 기초이다.몇 가지 예를 들어 기억을 어떻게 다른 방식으로 활용하는지 이해해 보자.

기원 유형에 따라 구분된 메모리 이용률

앞에서 말한 바와 같이 기본 유형은 메모리에 분배된 변수의 단일 원자값으로 저장된다.이 예를 살펴보겠습니다.

let name = 'john';
let name2 = name;

위의 예를 보십시오. 변수 이름을 만들고 값을 부여했습니다. john이제 JavaScript는 메모리의 단일 원자 값으로 저장됩니다.현재, 만약 내가 새로운 변수 name2 를 만들고 그 값 name 을 부여한다면, 자바스크립트는 계속 메모리에 새로운 공간을 만들고 변수 이름에 값 name2 을 부여할 것이다.변수name2에 분배된 새 값은 변수name와 완전히 독립되어 인용이 없습니다.

참조 유형별 메모리 사용률

기원 유형과 달리 인용 값은 메모리에 저장된 대상과 대상에 대한 인용이지 메모리의 전용 위치가 아니다.다음 예제에서는 JavaScript가 메모리에 참조 유형을 저장하는 방법에 대해 자세히 설명합니다.

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

person라는 변수는 name와 age 대상을 포함하는 person 대상을 포함할 것이다.현재 나는 계속해서 person2라는 변수를 만들고 그것을 같은 person 대상에게 분배할 것이다.원시 유형에 비해 일이 달라지기 시작한 부분이다.이 예에서 JavaScript는 person2 객체를 person 객체에 대한 참조로 저장합니다.

만약 이 그림을 보면, 이 자바스크립트가 실제로 메모리의 같은 대상을 가리키는 것을 발견할 수 있을 것이다.값으로 새 변수를 만들었지만, 이 변수는 우리가 이전에 만든 같은 사람의 대상을 인용했을 뿐입니다.

JavaScript의 중원어 및 참조 유형에 대한 불변성 및 변덕성 이해

JavaScript의 원어와 인용 유형을 이미 잘 알고 있기 때문에, 우리는 JavaScript의 가변성과 불변성의 개념을 쉽게 이해할 수 있다.가변적인 것은 변경하거나 추가할 수 있지만, 가변적인 것은 변경하거나 추가할 수 없는 것을 의미한다.JavaScript의 원어 값은 어떤 내용도 추가할 수 없고 재분배만 가능하기 때문에 JavaScript의 모든 원어 값은 변할 수 없습니다.우리 하나의 예로 한번 봅시다.

let name = 'john';
let name2 = name;

console.log(name);
console.log(name2);

/*
 * john
 * john 
 */

let name2 = 'doe';

console.log(name);
console.log(name2);

/*
 * john
 * doe 
 */

이전의 원어 형식 예시를 확장해서, 두 변수의 값인 name과 name2 를 컨트롤러에 출력해서 무엇을 얻었는지 봅시다.예상한 바와 같이 이 두 변수는 모두 값john을 되돌려준다.이제 name2를 doe에 재배치한 다음 두 변수의 값을 콘솔에 다시 인쇄합니다.JavaScript에서 onlyname2의 값을 doe에 재분배했지만 변수name는 바뀌지 않았습니다.이것은 자바스크립트가 이 두 변수를 각각 처리한 것을 나타낸다. 비록 name2 처음에 변수 name 에서 복사된 것이지만.이는 JavaScript의 원어 값(이 경우 문자열)이 변경될 수 없음을 증명합니다.
인용 형식에 대해 같은 예시를 복제해 봅시다.이전 예에서부터 person와 person2 대상의 값을 컨트롤러에 인쇄해서 무엇을 얻었는지 봅시다.

let person = {
    name: 'john',
    age: 22,
};

let person2 = person; 

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'john',
* age: 22,
* }
*/

우리는 컨트롤러에 인쇄된 두 대상이 같은 속성을 가지고 있는 것을 보았다.현재, 나는 person2 대상의 속성을 변경하고, 그것들을 다시 컨트롤러에 인쇄할 것이다.

let person2.name = 'doe'; 

console.log(person);
console.log(person2);

/*
* {
* name: 'doe',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/

JavaScript도 사람을 바꾼 것을 볼 수 있다person2.person2 대상은 인용person 대상을 통해 만들어졌기 때문이다.참조 유형을 사용하면 JavaScript가 동일한 객체에 대한 참조를 작성하고 객체가 가변적으로 유지됩니다.객체는 가변적이므로 변경하거나 새 속성을 추가할 수 있습니다.

아나운서

확장 조작부호는 ES6에 도입된 (ES6에 대한 더 많은 정보) 로, 대상을 안전하게 복제하고, 이전의 대상을 인용하는 것이 아니라, 대상의 새로운 실례를 만들 수 있습니다.하나의 대상을 복제하고 변수 대상을 저장하는 새로운 실례를 보여 줍니다.

let person = {
    name: 'john',
    age: 22,
};

let person2 = {...person};
let person2.name = 'doe';

console.log(person);
console.log(person2);

/*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/

같은 person 대상을 예로 들면, 이번에는 변수에 직접 분배하지 않고,spread 조작부호를 사용하여 그것을 복제합니다.복제할 대상 앞에 세 개의 점…을 접두사로 붙여서spread 연산자를 사용하고 문자 대상 문법으로 봉인할 수 있다.이 방법으로 JavaScript는 새 객체를 작성하여 변수person2에 저장합니다.person2의 속성을 변경해 보겠습니다.나는 이름을 doe로 바꿀 것이다.이제 이 두 대상을 콘솔에 인쇄해서 무엇을 얻을 수 있는지 봅시다.봐라, 이번에 우리는 person2 대상의name 속성만 변경했을 뿐 person 대상의name 속성은 변경하지 않았다.이것은 person2spread 조작부호를 사용하여 새 대상으로 만들고 저장하는 것이지 person 대상으로 인용하는 것이 아니기 때문이다.
PS: 광범위한 JavaScript cheatsheet을 만들었습니다.다양한 JavaScript 객체에 대해 각 속성과 메서드를 쉽게 참조할 수 있습니다.