February 5th 2018
Hello! At the ES6 course by Wes Bos I learned about destructuring. Destructuring allows us to extract data from objects, array, maps, sets into their own variables. If for example you have nested data you can get it much faster.
const { first, last } = person;
You can also rename properties when destructuring:
const { twitter:tweet, facebook:fb }
Also set defaults
const setting = { width: 300, color: 'black'}//height, fontSize
const { width = 100, height = 100 , color = 'blue', fontSize = 25} = settings;
If something is not in the object we can set defaults, if it is in the objects it wins over the default.
Very useful when passing a settings object to a function.
Arrays:
Instead of curly braces you use square brackets.
const [ name, id, website ] = details;
... - rest operator, gives us the rest of an array, which are not defined.
const team = ['Wes', 'Harry', 'Sarah', 'Keegan', 'Riker'];
const [ captain, assistant, ...players ] = team;
You can swap variables immediately, create an array and destructure in the opposite array
[inRing, onSide] = [onSide, inRing]
You can destructure the object in the function or you can put the argument of a function in curly brackets and set default values.
In the CSS grid course we made an image gallery.
And at the Web Development Bootcamp I continued to learn about jQuery.
jQuery - events include:
click()
keypress()
on()
jQuery can wraparound Vanilla JS
$("button").click(function(){
$(this).css("background","pink");
});
$("button").click(function(){
var text = $(this).text();
console.log("You clicked " + text);
});
we can retrieve the text of the button with $(this)
keypress()
$("input").keypress(function(event){
if(event.which === 13) {
alert("You hit Enter");
}
});
We capture the pressing of the key with the "event" and use it
.on()-allows us to specify the event
$("h1").on("click", function(){
$(this).css("color", "purple");
});
With the help of this only the clicked item changes.
Cheers!