Observable Tutorials
Modern Javascript Tutorials
md`# Modern Javascript Tutorials`
two_ways_create_obj = {
let user1 = new Object(); // "object constructor" syntax
let user2 = {}; // "object literal" syntax
return user1 === user2;
}
delete_property = {
let user = { // an object
name: "John", // by key "name" store value "John"
age: 30 // by key "age" store value 30
};
delete user.age;
return user;
}
long_key_name = {
let user = {
name: "John",
age: 30,
"likes birds": true // multiword property name must be quoted
};
return user;
}
bracket_key = {
let user = {};
// set
user["likes birds"] = true;
return user;
}
end_comma_easy_addMoveRemove = {
let user = {
name: "John",
age: 30,
}
}
variable_key = {
let fruit = "apple";
let bag = {
[fruit]: 5, // the name of the property is taken from the variable fruit
};
return bag.apple; // 5 if fruit="apple"
}
same_above = {
let fruit = "apple";
let bag = {};
// take property name from the fruit variable
bag[fruit] = 5;
return bag.apple;
}
variable_key_combined = {
let fruit = 'apple';
let bag = {
[fruit + 'Computers']: 5 // bag.appleComputers = 5
};
return bag.appleComputers;
}
key_name_reserved = {
let obj = {
for: 1,
let: 2,
return: 3
};
return obj.for + obj.let + obj.return; // 6
}
proto_not_key = {
let obj = {};
obj.__proto__ = 5;
return obj.__proto__; // [object Object], didn't work as intended
}
func_create_obj = {
function makeUser(name, age) {
return {
name: name,
age: age
// ...other properties
};
}
let user = makeUser("John", 30);
return (user.name); // John
}
shorthand_create_obj = {
function makeUser(name, age) {
return {
name, // same as name: name
age // same as age: age
// ...
};
}
let user = makeUser("John", 30);
return (user.name); // John
}
obj_shorthand = {
let name = "Ken";
let user = {
name, // same as name:name
age: 30
};
return user;
}
no_such_property = {
let user = {};
return user.noSuchProperty === undefined; // true means "no such property"
}
check_property_existence = {
let user = { name: "John", age: 30 };
// return "age" in user; // true, user.age exists
return "blabla" in user; // false, user.blabla doesn't exist
}
variable_string_property = {
let user = { age: 30 };
let key = "age";
return ( key in user ); // true, takes the name from key and checks for such property
}
in_check_property_existence_better = {
let obj = {
test1: undefined,
test2: null,
};
// return obj.test1; // it's undefined, so - no such property?
// return "test1" in obj; // true, the property does exist!
return "test2" in obj; // true, the property does exist!
}
for_in_loop = {
let user = {
name: "John",
age: 30,
isAdmin: true
};
let count = 0;
for (let key in user) {
count++;
yield Promises.delay(1000, md`count: ${count}, key: ${key}, value: ${user[key]}`); // name, age, isAdmin
}
}
num_ordered_obj = {
let codes = {
"49": "Germany",
"41": "Switzerland",
"44": "Great Britain",
// ..,
"1": "USA"
};
let idx = 0;
for (let code in codes) {
idx++;
yield Promises.delay(1000, md` index : ${idx}, key : ${code}`); // 1, 41, 44, 49
}
yield codes; // return won't work with yield
}
creation_order_obj = {
let user = {
name: "John",
surname: "Smith"
};
user.age = 25; // add one more
// non-integer properties are listed in the creation order
let idx = 0;
for (let prop in user) {
idx++;
yield Promises.delay(1000, md` index : ${idx}, key : ${prop}`);
}
yield user;
}
break_num_ordered_obj = {
let codes = {
"+49": "Germany",
"+41": "Switzerland",
"+44": "Great Britain",
// ..,
"+1": "USA",
};
let idx = 0;
for (let code in codes) {
idx++;
yield Promises.delay(1000, md` index : ${idx}, key : ${code}`); // 1, 41, 44, 49
}
yield Promises.delay(1000, codes); // return won't work with yield
}
primitive_copied_value_duplidate = {
let message = "Hello!";
let phrase = message;
message = "Hello, world!";
return md`message : ${message}; phrase : ${phrase}`;
}
obj_copied_reference_no_duplicate = {
let user = { name: 'John' };
let admin = user;
yield Promises.delay(1000, md`user.name : ${user.name}`);
admin.name = 'Pete'; // changed by the "admin" reference
yield Promises.delay(1000, md`user.name : ${user.name}`); // 'Pete', changes are seen from the "user" reference
}
reference_comparison = {
let a = {};
let b = a; // copy the reference
yield Promises.delay(1000, md`a == b : ${a == b}` ); // true, both variables reference the same object
yield Promises.delay(1000, md`a === b : ${a === b}` );
}
same_property_diff_obj = {
let a = {};
let b = {}; // two independent objects
return md`a == b : ${a == b}`;
}
const_variable_obj_mutable = {
const user = {
name: "John"
};
user.age = 25; // (*)
return md`user.age : ${user.age}`; //25
}
const_variable_obj_fixed = {
const user = {
name: "John"
};
// Error (can't reassign user)
user = {
name: "Pete"
};
}
clone_obj = {
let user = {
name: "John",
age: 30
};
let clone = {}; // the new empty object
// let's copy all user properties into it
for (let key in user) {
clone[key] = user[key];
}
// now clone is a fully independent clone
clone.name = "Pete"; // changed the data in it
// alert( user.name ); // still John in the original object
return `user.name: ${user.name}; clone.name: ${clone.name}`;
}
clone_obj_ObjectAssign = {
let user = { name: "John" };
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
// copies all properties from permissions1 and permissions2 into user
Object.assign(user, permissions1, permissions2);
// now user = { name: "John", canView: true, canEdit: true }
return user;
}
overwritten_existed_property = {
let user = { name: "John" };
// overwrite name, add isAdmin
Object.assign(user, { name: "Pete", isAdmin: true });
// now user = { name: "Pete", isAdmin: true }
return user;
}
clone_without_loop = {
let user = {
name: "John",
age: 30
};
let clone = Object.assign({}, user);
return clone;
}
subObj_referenced_objAssign = {
let user = {
name: "John",
sizes: {
height: 182,
width: 50
}
};
let clone = Object.assign({}, user);
// user and clone share sizes
user.sizes.width++; // change a property from one place
return `clone.sizes.width : ${clone.sizes.width}, user.sizes === clone.sizes : ${user.sizes === clone.sizes} )`; // true, same object; // 51, see the result from the other one
}
cloneDeep_lodash = {
let user = {
name: "John",
sizes: {
height: 182,
width: 50
}
};
let clone = _.cloneDeep(user);
// user and clone share sizes
user.sizes.width++; // change a property from one place
return `user.sizes.width : ${user.sizes.width}, clone.sizes.width : ${clone.sizes.width}, user.sizes === clone.sizes : ${user.sizes === clone.sizes} )`; // true, same object; // 51, see the result from the other one
}
_ = require("lodash")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
