7. (no) Strings (attached)
var name = 'Monika';
console.log('My name is ' + name);
let name2 = 'Monika';
console.log(`My name is ${name2}`);
var str = 'Template strings providen' +
'syntactic sugar forn' +
'constructing strings.';
let str2 = `Template strings provide
syntactic sugar for
constructing strings.`
Variable Bindings
Multiline Strings
8. Strings
const headline = 'Yahoo products are beautiful.'
headline.startsWith('Yahoo')
// true
headline.endsWith('beautiful')
// true
headline.includes('products')
// true
headline.includes('.')
// false
headline.repeat(2);
//Yahoo products are beautiful.Yahoo products are beautiful.
More
awesomeness!
9.
10. Arrays
var divsArray = [].slice.call(document.querySelectorAll('div'));
divsArray.forEach(function(node) {
console.log(node);
});
let divs = document.querySelectorAll('div');
Array.from(divs).forEach(node => {
console.log(node);
});
var names = ["Monika", "Seth", "Nikhil", "Mallika"];
var res = names.filter(function (name) {
return name === "Monika"; }
)[0];
let names2 = ["Monika", "Seth", "Nikhil", "Mallika"];
let res2 = names.find(function (name) {
return name === "Monika"; }
);
Array like
Find one element
11.
12. Function Shorthand
var fun = function() {
console.log('Yay!')
};
let fun2 = () => console.log('Yay!');
var nums = [1,2,3,4,5];
var numsPlus2 =
nums.map(function(num) {
return num + 2;
});
var nums2 = [1,2,3,4,5];
var nums2Plus2 = nums.map(num => num + 2);
Usage
Awesomeness
15. Function Parameters - default
function f(x, y) {
if (!y) {
y = 1;
}
return x * y;
}
function f(x, y) {
// y is 12 if not passed (or passed as undefined)
if (typeof y === 'undefined') {
y = 1;
}
return x * y;
}
function f(x, y=1) {
return x * y;
}
16. Function Parameters - Spread...
var nums = [9,10,2];
Math.max(...nums);
var nums = [9,10,2];
Math.max(nums);
var nums = [9,10,2];
Math.max.apply(null, nums);
17. Function Parameters - Rest...
function join(sep, ...nums) {
return nums.join(sep);
}
function join(sep) {
var args = [].slice.call(arguments, 1);
return args.join(sep);
}
join(':', 1, 2, 3);
join(':', 1, 2);
18.
19. Object (of my affection) - Destructuring
const { user, post } = this.props;var user = this.props.user,
post = this.props.post;
function fun({x, y, z=100}) {
return x + y + z;
}
fun({x:3, y:2}); // 105
function fun(data) {
return data.x + data.y;
}
fun({x:3, y:2});
function fun({x,y}) {
return x + y;
}
fun({x:3, y:2});
Destructuring with
default params
20. Objects Literals Extension
var obj = {
// defining prototype on object creation
__proto__: theProtoObj,
// shortcut for ‘handler: handler’
handler,
// shortcut for methods - 'toString: function() {}'
toString() {
// base class method call with 'super'
return 'd ' + super.toString();
},
// dynamic property names
[ 'prop_' + (() => 42)() ]: 42
};
21.
22. (Very) Class(ey)
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}
23. Class Inheritance
var Rectangle = function (id, x, y, width, height) {
Shape.call(this, id, x, y);
this.width = width;
this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
24.
25. Promise (me, you will come back..)
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
console.log('Done after 1000 sec');
});
26. var request = require('request');
var url1='http://httpbin.org/', url2=url1, url3=url1, url4=url1;
function foo(finalCallback) {
request.get(url1, function(err1, res1) {
if (err1) { return finalCallback(err1); }
request.post(url2, function(err2, res2) {
if (err2) { return finalCallback(err2); }
request.put(url3, function(err3, res3) {
if (err3) { return finalCallback(err3); }
request.del(url4, function(err4, res4) {
// let's stop here
if (err4) { return finalCallback(err4); }
finalCallback(null, "whew all done");
})
})
})
})
}
// use that function somewhere
foo(function(err, message) {
if (err) {
return console.log("error!", err);
}
console.log("success!", message);
});
var Promise = require('bluebird');
var request = Promise.promisifyAll(require('request'));
var url1='http://httpbin.org/', url2=url1, url3=url1, url4=url1;
function foo() {
return request.getAsync(url1)
.then(function(res1) {
return request.postAsync(url2);
}).then(function(res2) {
return request.putAsync(url3);
}).then(function(res3) {
return request.delAsync(url4);
}).then(function(res4) {
return "whew all done";
});
}
// use that function somewhere
foo().then(function(message) {
console.log("success!", message);
}).catch(function(err) {
console.log("error!", err);
});
Promise
27. var Promise = require('bluebird');
var request = Promise.promisifyAll(require('request'));
var url1='http://httpbin.org/', url2=url1, url3=url1,
url4=url1;
async function foo() {
var res1 = await request.getAsync(url1);
var res2 = await request.getAsync(url2);
var res3 = await request.getAsync(url3);
var res4 = await request.getAsync(url4);
return "whew all done";
}
// use that function somewhere
foo().then(function(message) {
console.log("success!", message);
}).catch(function(err) {
console.log("error!", err);
});
Async/ Await - Glimpse