Skip to content

Instantly share code, notes, and snippets.

@bgschiller

bgschiller/spread-operator.html

Created August 24, 2018 03:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bgschiller/728c9d91336bccd86dc3ab99e58893c9 to your computer and use it in GitHub Desktop.
Save bgschiller/728c9d91336bccd86dc3ab99e58893c9 to your computer and use it in GitHub Desktop.
Download ZIP
Spread and this exercises
Raw
spread-operator.html
<style>
.small {
font-size: 8px;
margin-bottom: 40px;
}
</style>
<body>
<h1>Spread operator</h1>
<p class="small">(not just for PB&amp;J)</p>
<h2>All the action is in the console</h2>
</body>
<script type="application/javascript">
function one() {
var obj = {
a: 1,
b: 2,
};
var objAgain = obj;
objAgain.c = 3;
console.log('obj is', obj);
// -> ???
}
function two() {
var obj = {
a: 1,
b: 2,
};
var objCopy = { ...obj };
objCopy.d = 4;
console.log('obj', obj);
// -> ???
}
function three() {
var left = {
apples: 12,
bananas: 14,
coconuts: 8,
};
var right = {
grapes: 4,
hamburgers: 9,
};
var together = {
...left,
...right,
};
console.log('together', together);
// -> ???
}
function four() {
var east = {
lobsters: 3,
peaches: 5,
apples: 10,
};
var west = {
salmon: 5,
blueberries: 18,
apples: 20,
};
var together = {
...east,
...west,
};
console.log('together', together);
// -> ???
}
function four_point_five() {
var east = {
lobsters: 3,
peaches: 5,
apples: 10,
};
var west = {
salmon: 5,
blueberries: 18,
apples: 20,
};
var together = {
...west, // east *then* west
...east,
};
console.log('together', together);
// -> ???
}
function five() {
var up = [ 1, 2, 3, 4 ];
var down = [ 5, 6, 7, 8 ];
var juntos = [ ...up, ...down ];
console.log('juntos', juntos);
// [ [1, 2, 3, 4], [5, 6, 7, 8] ]
// [ 1, 2, 3, 4, 5, 6, 7, 8 ]
// -> ???
}
function five_point_five() {
var up = [ 1, 2, 3, 4 ];
var down = [ 5, 6, 7, 8 ];
var juntos = [ up, down ];
console.log('juntos', juntos);
// [ [1, 2, 3, 4], [5, 6, 7, 8] ]
// [ 1, 2, 3, 4, 5, 6, 7, 8 ]
// -> ???
}
function five_point_five_point_five() {
var up = [ 1, 2, 3, 4 ];
var down = [ 5, 6, 7, 8 ];
var juntos = [ ...up, down ];
// [ 1, 2, 3, 4, [ 5, 6, 7, 8 ] ]
// [ [1, 2, 3, 4], 5, 6, 7, 8 ]
// [ [1, 2, 3, 4], [ 5, 6, 7, 8 ] ]
console.log('juntos', juntos);
// -> ???
}
function six() {
var first = [ 'tomato', 'potato' ];
var second = [ 'cabbage', 'radish' ];
var together = [ ...first, 'zucchini', ...second ];
// [ 'tomato', 'potato', 'zucchini', 'cabbage', 'radish' ]
// [ ['tomato', 'potato'], 'zucchini', ['cabbage', 'radish'] ]
console.log('together', together);
}
function seven() {
var solo = [ 1, 2, 3 ];
var again = [ ...solo, ...solo, ...solo ];
// [ 1, 2, 3 ]
// [ 1, 2, 3, 1, 2, 3, 1, 2, 3 ]
console.log('again', again);
}
function eight() {
function print_spread_args(...args) {
console.log('args is', args);
}
print_spread_args(1, 2, 3);
// args is 123
// args is [ 1, 2, 3 ]
// args is 1, 2, 3
// args is { 0: 1, 1: 2, 2: 3 }
// -> ???
}
function nine() {
function print_spread_args(...args) {
console.log('args is', args);
}
print_spread_args([1,2,3]);
// args is 123
// args is [ 1, 2, 3 ]
// args is [[ 1, 2, 3 ]]
// args is { 0: 1, 1: 2, 2: 3 }
}
function ten() {
function print_spread_args(...args) {
console.log('args is', args);
}
print_spread_args([1,2,3], [4, 5, 6]);
// [[1,2,3],[4,5,6]]
// [1,2,3,4,5,6]
}
function eleven() {
// function print_spread_args(first, ...middle, last) {
// console.log(
// 'first is', first,
// 'middle is', middle,
// 'last is', last,
// );
// }
print_spread_args(1, 2, 3, 4, 5);
// -> ???
// first is 1 middle is [2, 3, 4] last is 5
// first is [1] middle is [2, 3, 4] last is [5]
// crash!
}
function twelve() {
function print_spread_args(first, ...rest) {
console.log(
'first is', first,
'rest is', rest,
);
}
print_spread_args(1, 2, 3, 4);
// -> ???
// first is 1 middle is [2, 3, 4]
// first is [1] middle is [2, 3, 4]
// crash!
}
</script>
Raw
what-is-this.html
<style>
.small {
font-size: 8px;
margin-bottom: 40px;
}
</style>
<body>
<h1>What is this?</h1>
<p class="small">(baby don't hurt me, don't hurt me, no more)</p>
<h2>All the action is in the console</h2>
</body>
<script type="application/javascript">
function whatIsThis(tag) {
console.log(`${tag}:`,'"this" is', this);
}
function one() {
whatIsThis('normal function call');
// -> ???
// normal function call: "this" is Window
// normal function call: "this" is normal function call
//
}
function two() {
var obj = {
a: 1,
b: 2,
'whatIsThis': whatIsThis,
};
obj.whatIsThis('obj.whatIsThis');
// -> ???
// [ 1, 2 ]
// obj, which is { a: 1, b: 2, whatIsThis: (the function here) }
// Window
}
function two_point_five() {
var obj = {
'a': 1,
'b': 2,
'whatIsThis': whatIsThis,
nested: {
'c': 3,
'd': 4,
'whatIsThis': whatIsThis,
},
};
obj.nested.whatIsThis('nested');
// -> ???
// { c: 3, d: 4, whatIsThis: f }
// { a: 1, b: 2, nested: { c: 3, d: 4, whatIsThis: f } }
// { a: 1, b: 2, whatIsThis: f }
// Window
}
function two_point_five_point_five() {
var obj = {
'a': 1,
'b': 2,
'whatIsThis': whatIsThis,
nested: {
'c': 3,
'd': 4,
'whatIsThis': whatIsThis,
},
};
obj.whatIsThis('carrots');
// -> ???
// { c: 3, d: 4, whatIsThis: f }
// { a: 1, b: 2, whatIsThis: f, nested: { c: 3, d: 4, whatIsThis: f } }
// { a: 1, b: 2, whatIsThis: f }
// Window
}
function three() {
var obj = {
a: 1,
b: 2,
whatIsThis: whatIsThis,
};
var func = obj.whatIsThis;
func('captured func');
// -> ???
// { a: 1, b: 3, whatIsThis: f }
// Window
// whatIsThis (the function)
}
function three_point_five() {
var obj = {
a: 1,
b: 2,
whatIsThis: whatIsThis,
};
obj['whatIsThis']('potatoes');
// -> ???
// { a: 1, b: 3, whatIsThis: f }
// Window
// whatIsThis (the function)
}
function four() {
var lst = [ 1, 2, 3 ];
lst.whatIsThis = whatIsThis;
lst.whatIsThis('lst.whatIsThis');
// -> ???
// Window
// [ 1, 2, 3 ]
}
function five() {
var arr = [ 'apple', 'banana', whatIsThis ];
arr[2]('arr[2] call');
// -> ???
// ['apple', 'banana', f]
// whatIsThis (the function)
// Window
}
function six() {
whatIsThis.call(42, 'call on 42');
// -> ???
// Window
// whatIsThis (the func)
// Error!
// 42
}
function seven() {
var obj = { a: 'apple', b: 'banana' };
whatIsThis.call(obj, 'call on obj');
// -> ???
// { a: 'apple', b: 'banana' }
// Window
// ['apple', 'banana']
}
function eight() {
document.body.addEventListener('click', whatIsThis);
// -> ???
// Window
// the click event
// body (the html element)
}
function nine() {
document.body.addEventListener('click', function() {
whatIsThis('tomatoes');
});
// -> ???
// Window
// the click event
// body (the html element)
}
function ten() {
function wrapper() {
whatIsThis('inside wrapper');
}
wrapper.call('101 dalmations');
// -> ???
// Window
// '101 dalmations'
// wrapper
}
function eleven() {
whatIsThis.call(this, 'given from parent');
// -> ???
// Window
// eleven (the func)
// whatIsThis (the func)
// 'given from parent'
}
function twelve_point_one() {
'use strict';
whatIsThis('strictly');
// Window
// Error!
// 'strictly'
// 'use strict'
// twelve_point_one
// whatIsThis
// null
// undefined
}
function twelve() {
'use strict';
console.log('in twelve', this);
whatIsThis.call(this, 'given from parent (strict)');
// -> ???
// Window
// Error!
// undefined
}
function thirteen() {
var obj = { a: 1, b: 2 };
document.body.addEventListener(
'click',
whatIsThis.bind(obj),
);
// Window
// document.body
// { a: 1, b: 2 }
}
function fourteen() {
var obj = { a: 1, b: 2 };
var arr = [ 'apples', 'bananas' ];
document.body.addEventListener(
'click',
whatIsThis.bind(obj).bind(arr),
);
// [ 'apples', 'bananas' ]
// { a: 1, b: 2 }
// [{a: 1, b: 2}, [ 'apples', 'bananas' ]]
// Error!
}
function fifteen() {
var func;
function wrapper() {
// this == 'brown cow' (because of how we call it)
func = () => {
console.log('what now?', this);
};
}
wrapper.call('brown cow');
// ^ that's all setup.
func()
// -> ???
// Window
// 'brown cow'
// func
}
function sixteen() {
document.body.addEventListener(
'click',
function() {
console.log('what about here?', this);
},
);
}
function seventeen() {
document.body.addEventListener(
'click',
() => {
console.log('what about here?', this);
},
);
// body
// 'what about here?'
// Window
// Error!
}
function eighteen() {
var func = () => {
console.log('this in func', this);
};
func.call(15);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment