immutable

원본이 불변한다 - immutable

---

Array.from()

• 객체인 array의 내용만 복사해서 담아줌. 서로 다른 두 array가 탄생함.
• 배열을 만들고 초기화까지 하는 내장 함수.

var a = [1, 2];
var b = Array.from(a);
//Array.from은 내용은 같지만 둘이 완전 다른 새로운 배열이 만들어진다. 
console.log(a, b, a===b);
// [1, 2] [1, 2] true
// a와 b는 내용이 같을 뿐 완전히 다름.

• 아래처럼 원하는 길이만큼의 배열을 만들 수도 있다.
• 첫번째 인자에 {lenght: 원하는 배열의 길이} 객체를, 두번째 파라미터로 원하는 값을 반환하는 콜백함수를 넘겨줄 수 있다. 
• 콜백함수의 인자는 (현재 값, index)를 인자로 사용한다.

const count = Array.from({ length: 4 }, (v, i) => i);
console.log(count)
//[ 0, 1, 2, 3 ]

Array.from()을 사용해서 리액트에서 state의 값을 바꿀 수 있다.

var newContents = Array.from(this.state.contents);
newContents.push({ id: this.max_content_id, title: _title, desc: _desc })
this.setState({
	contents:newContents
});

 

• 위 코드는 아래 코드와 같다. 리액트에서 state를 원본의 변화 없이 복사본을 이용해서 변경할 수 있다.

var _contents = this.state.contents.concat(
	{ id: this.max_content_id, title: _title, desc: _desc }
);
this.setState({
	contents:_contents
});

---

Object.assign()

• Object.assign()도 Array.from()과 마찬가지로 값만 복사하고 다른 두 객체를 만들 수 있다.

var a = {name:"duck"};
var b = Object.assign({},a);

console.log(a, b, a===b);
//{name:"duck"} {name:"duck"}, false

• 첫번째 인자에 값을 넣어서 array의 concat처럼 이용할 수 있다.

var a = {name:"duck"};
var b = Object.assign({left:1, right:2},a);

console.log(a, b, a===b);
//{ name: 'duck' } { left: 1, right: 2, name: 'duck' } false