Created
December 12, 2017 18:42
-
-
Save ChuckJonas/966e506a351efd207eb532487c9f2a3a to your computer and use it in GitHub Desktop.
Spread Operator and Immutables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* MERGING */ | |
interface Foo{ | |
kungfoo: string | |
} | |
interface ExtraFooy extends Foo{ | |
tofu: string; | |
} | |
interface Bar{ | |
cliffBar: string; | |
} | |
type FooyBar = ExtraFooy & Bar; | |
let fu: Foo = { | |
kungfoo: 'pow!' | |
} | |
//use merge syntax to create an instance of Extra Fooy. Can specify extra fooys props inline | |
let extraFooy: ExtraFooy = ; //use spread operator | |
//use merge syntax to create an instance of Foobar | |
let fooybar: FooyBar = ; //use spread operator | |
/* WORKING WITH IMMUTABLES */ | |
//= Object mutations | |
interface Immutable { | |
readonly name: string; | |
readonly doesntChange: ImmutableChild; | |
readonly changes: ImmutableChild; | |
} | |
interface ImmutableChild{ | |
readonly name: string; | |
} | |
let immut: Immutable = { | |
name: 'abc', | |
doesntChange: { | |
name: 'dont need to change this' | |
}, | |
changes: { | |
name: 'change-this-abc' | |
} | |
}; | |
//update immut: | |
// 1: Set name: '123 | |
// 2: Set "changes.name" to 'changed-this-123': | |
let updatedImmut = ;//use spread operator here | |
console.log(immut !== updatedImmut ? 'pass' : 'fail') | |
console.log(immut.changes !== updatedImmut.changes ? 'pass' : 'fail') | |
console.log(immut.doesntChange == updatedImmut.doesntChange ? 'pass' : 'fail') | |
//= Array mutations | |
let arr1 = [1, 2, 3] | |
//add '4' to end | |
// let arr2 = ; | |
console.log(arr1 !== arr2 ? 'pass' : 'fail') | |
console.log(arr2[3] == 4 ? 'pass' : 'fail') | |
//remove second element | |
// let arr3 | |
console.log(arr2 !== arr3 ? 'pass' : 'fail') | |
console.log(arr3.length === 3 ? 'pass' : 'fail') | |
//insert 2.5 into second position | |
// let arr4 | |
console.log(arr3 !== arr4 ? 'pass' : 'fail') | |
console.log(arr4[1] === 2.5 ? 'pass' : 'fail') | |
let letterArr = ['a', 'b', 'c'] | |
// concat letterArr to end of arr4 | |
//let arr5 | |
console.log(arr4 !== arr5 ? 'pass' : 'fail') | |
//= Dictionary mutations | |
let dictionary = { | |
"one": '1', | |
"two": '2', | |
"three": '3' | |
} | |
// update the value of "two" to equal "too" | |
// let updatedDictionary = | |
// console.log(dictionary !== updatedDictionary ? 'pass' : 'fail') | |
// console.log(updatedDictionary['two'] == 'too' ? 'pass' : 'fail') | |
/* DESTRUCTURING */ | |
interface IProps { | |
title: string, | |
style: string, | |
className: string, | |
removeMe: string; | |
removeMe2: string; | |
} | |
let prop: IProps = { | |
title: 'abc', | |
style: 'green', | |
className: 'error', | |
removeMe: 'get me outta here', | |
removeMe2: 'and me' | |
} | |
//use destructing to create a new object without removeMe & removeMe2 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* MERGING */ | |
interface Foo{ | |
kungfoo: string | |
} | |
interface ExtraFooy extends Foo{ | |
tofu: string; | |
} | |
interface Bar{ | |
cliffBar: string; | |
} | |
type FooyBar = ExtraFooy & Bar; | |
let fu: Foo = { | |
kungfoo: 'pow!' | |
} | |
//use merge syntax to create an instance of Extra Fooy. Can specify extra fooys props inline | |
let extraFooy: ExtraFooy = {...fu, ...{tofu: 'eehhh'}} | |
//use merge syntax to create an instance of Foobar | |
let fooybar: FooyBar = { ...extraFooy, ...{ cliffBar: 'peanuts' } }; | |
/* WORKING WITH IMMUTABLES */ | |
//= Object mutations | |
interface Immutable { | |
readonly name: string; | |
readonly doesntChange: ImmutableChild; | |
readonly changes: ImmutableChild; | |
} | |
interface ImmutableChild{ | |
readonly name: string; | |
} | |
let immut: Immutable = { | |
name: 'abc', | |
doesntChange: { | |
name: 'dont need to change this' | |
}, | |
changes: { | |
name: 'child-abc' | |
} | |
}; | |
//update name & "changes" name. replace abc with 123 | |
let updatedImmut = { ...immut, ...{name: '123', changes: {...immut.changes, ...{name:'child-123'}}} } | |
console.log(immut !== updatedImmut ? 'pass' : 'fail') | |
console.log(immut.changes !== updatedImmut.changes ? 'pass' : 'fail') | |
console.log(immut.doesntChange == updatedImmut.doesntChange ? 'pass' : 'fail') | |
//= Array mutations | |
let arr1 = [1, 2, 3] | |
//add '4' to end | |
// let arr2 = ; | |
console.log(arr1 !== arr2 ? 'pass' : 'fail') | |
console.log(arr2[3] == 4 ? 'pass' : 'fail') | |
//remove second element | |
// let arr3 | |
console.log(arr2 !== arr3 ? 'pass' : 'fail') | |
console.log(arr3.length === 3 ? 'pass' : 'fail') | |
//insert 2.5 into second position | |
// let arr4 | |
console.log(arr3 !== arr4 ? 'pass' : 'fail') | |
console.log(arr4[1] === 2.5 ? 'pass' : 'fail') | |
let letterArr = ['a', 'b', 'c'] | |
// concat letterArr to end of arr4 | |
//let arr5 | |
console.log(arr4 !== arr5 ? 'pass' : 'fail') | |
//= Dictionary mutations | |
let dictionary = { | |
"one": '1', | |
"two": '2', | |
"three": '3' | |
} | |
// update the value of "two" to equal "too" | |
// let updatedDictionary = | |
// console.log(dictionary !== updatedDictionary ? 'pass' : 'fail') | |
// console.log(updatedDictionary['two'] == 'too' ? 'pass' : 'fail') | |
/* DESTRUCTURING */ | |
interface IProps { | |
title: string, | |
style: string, | |
className: string, | |
removeMe: string; | |
removeMe2: string; | |
} | |
let prop: IProps = { | |
title: 'abc', | |
style: 'green', | |
className: 'error', | |
removeMe: 'get me outta here', | |
removeMe2: 'and me' | |
} | |
//use destructing to get removeMe and removeMe2 out of prop | |
const { removeMe, removeMe2, ...rest } = prop; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment