불변성이란 / this /

불변성

메모리에 이미 저장된 값을 변경하지 않습니다.

불변성을 유지한다는 것은 함수 외부의 상태에 액세스해도 메모리에 이미 할당된 값이 변경되지 않는다는 것을 의미합니다.

ex) 전역변수를 사용하지 않는다

불변성을 이해하려면 call-by-value와 call-by-reference에 대해 알아야 합니다.

불변 유형 및 값에 의한 호출

• 문자열, 숫자, 부울다음과 같은 기본 데이터 유형을 사용하는 변수 , 모두 값별 호출 방법을 사용하며 변경할 수 없습니다.
  
  
• 변수가 함수에 인자로 전달된다는 것은 변수의 값을 그대로 복사하여 함수에 전달하는 방식을 의미합니다.
  
  
• 따라서 원래 변수와 인자로 전달된 함수는 서로 다른 메모리에 저장되기 때문에 특정 함수가 인자로 받은 변수를 변경하더라도 원래 변수는 영향을 받지 않는다.
  
  
• 프리미티브 타입은 불변이므로 동일한 메모리 영역에서 값을 변경할 수 없으며, 변수에 할당할 때 완전히 새로운 메모리 값을 참조한다.
  
  
  • 아래 예에서 이름 변수에 hello라는 값을 할당하면 값이 메모리에 할당됩니다.
    
    
  • newName은 명명된 메모리를 동일하게 참조합니다.
    
    
  • 이름에 hi를 지정하면 새 메모리 참조가 지정됩니다.
    
    
  • 따라서 name 값이 변경되더라도 newName은 영향을 받지 않습니다.
    
    

let name="hello";
let newName = name;
name="hi";

console.log(name); // hi
console.log(newName); // hello

참조로 호출

• 배열, 객체와 같은 객체는 참조별 호출 방법을 사용하며 변경 가능한 값입니다.
  
  (변하기 쉬운)
• 변수를 함수 인자로 전달할 때 참조에 의한 호출은 값이 복사되어 새로운 메모리 위치에 저장되는 값에 의한 호출 방법과 달리 메모리 위치의 주소를 참조하는 방법을 말합니다.
  
  , 변수를 통과할 때까지 전달된 쇼입니다.
  
  
• 따라서 특정 함수에서 매개변수로 전달된 배열에 요소가 추가되거나 삭제되면 원래 배열의 값이 함께 변경되는 현상을 분수 불변성(fractional immutability)이라고 합니다!
  
• 다음의 경우 y는 x와 동일한 메모리 참조 값을 가리킵니다.
  
  따라서 x의 주소를 참조하므로 x의 이름을 변경하면 y의 값도 변경됩니다.
  
  그리고 x와 y는 동일한 메모리 참조를 가지므로 x === y는 참 값을 생성합니다.
  
  

let x = {
	name: 'hello'
};
let y = x

x.name="hi";
console.log(y.name) // hi
console.log(x === y) // true

불변성을 유지해야 하는 이유

• 상태를 임의로 보거나 변경하면 현재 프로그램이 어떻게 실행되고 있는지 이해하기 어려워집니다.
  
  그리고 이로 인해 예기치 않은 오류가 발생합니다.
  
  
• 상태 변경을 추적하기 쉽습니다.
  
  

불변성을 보존하는 방법

• 다음과 같이 새 객체를 반환하는 메서드 사용 B. 스프레드 연산자, 맵, 필터, 슬라이스, 리듀서 등
  • push 및 splice 메서드는 원래 배열을 변경합니다.
    
    
• 항상 라이브러리 사용

그만큼?

• 자신이 속한 개체 또는 생성할 인스턴스를 가리키는 자체 참조 변수입니다.
  
  
• 이것은 기본적으로 창입니다
• 개체의 메서드가 호출되면 내부적으로 수정되지만 일반 함수의 경우 기본적으로 창입니다.
  
  

var obj = {
	a: function() {console.log(this)},
}
obj.a(); // obj

var a2 = obj.a; // obj의 a 메서드를 a2에 꺼내왔기 때문에, 더이상 obj의 메서드가 아님
a2(); // window

• 바인딩, 호출 및 적용 메서드는 객체를 참조합니다.
  
  

var obj2 = { c: 'd' };
function b() {
  console.log(this);
}
b(); // Window
b.bind(obj2).call(); // obj2
b.call(obj2); // obj2 
b.apply(obj2); // obj2

• 생성자 함수
  • new로 호출하지 않고 그대로 호출하면 일반 함수가 되므로 이것이 윈도우를 가리킨다.
    
    
  • new가 추가되면 생성자(Person 자신)가 생성한 인스턴스가 됩니다.
    
    

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function() {
  console.log(this.name, this.age);
}

Person('Name', 25);
console.log(window.name, window.age); // Name, 25

var person = new Person('Hello', 30);
person.sayHi(); // Hello, 30

• 이벤트가 발생할 때, 예를 들어. B. 이벤트 리스너 또는 jQuery, 이것은 내부적으로 변경됩니다.
  
  
  • 내부 함수가 호출되면 창으로 설정됩니다.
    
    따라서 이 문제를 해결하려면 이것을 다른 변수에 저장하거나 화살표 함수를 사용하십시오.
  • 화살표 함수는 윈도우가 아닌 부모 함수의 this를 this로 받습니다.
    
    

$('div').on('click', function() {
  console.log(this); // <div>
  function inner() {
    console.log('inner', this); // inner Window
  }
  inner();
});

// 변수에 this 저장하기
$('div').on('click', function() {
  console.log(this); // <div>
  var that = this;
  function inner() {
    console.log('inner', that); // inner <div>
  }
  inner();
});

// 화살표 함수 사용하기
$('div').on('click', function() {
  console.log(this); // <div>
  const inner = () => {
  	console.log('inner', that); // inner <div>
  }
  inner();
});

프로토타입이란 무엇입니까?

참조

• 불변성: https://evan-moon.github.io/2020/01/05/what-is-immutable/

Immutable, 불변 상태를 유지하는 방법

이번 포스트에서는 순수함수 함수형 프로그래밍에서 중요한 개념이 무엇인지에 대해 이야기하려고 합니다.

사실 순수함수를 설명할 때 불변성에 대한 이야기가 한 번쯤은 등장한다.

evan-moon.github.io

• 응답의 불변성: https://velog.io/@badahertz52/%EC%B0%B8%EC%A1%B0%ED%83%80%EC%9E%85%EA%B3%BC-React%EC%9D%98- %EB%B6%88%EB%B3%80%EC%84%B1

저게 뭐에요 https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

www.zerocho.com