Section 1
Preview this deck
Use concat() function: let a = [1, 2, 3, 4]; let b = [5, 6, 7, 8]; let ab = a.concat(b); The result will be [1, 2, 3, 4, 5, 6, 7, 8]
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 14, 2020
Cards (111)
Section 1
(50 cards)
Use concat() function: let a = [1, 2, 3, 4]; let b = [5, 6, 7, 8]; let ab = a.concat(b); The result will be [1, 2, 3, 4, 5, 6, 7, 8]
How to merge two arrays in one?
Use "For-In" loop: let obj = {name: "John", age: 28}; for (let key in obj) { alert(key); // to get the key alert(obj[key]); // to get the value }
How to walk over all properties in a given object?
Primitives are still primitives. JavaScript allows for a special "Object Wrapper" that provides extra methods that can be applied to the primitives. The wrapper is automatically destroyed when the function is completed. The wrappers exist for all primitive, except "null" and "undefined". Those are the most primitive types.
Explain what does it mean "primitives as object"?
There are seven data types in JavaScript: - Number - String - Boolean - Null - Undefined - Object - Symbol (new in ES6)
What datatypes JavaScript uses?
An arrow function has a more simple syntax that a function expression: let sum = (a, b) => a + b; is the same as: let sum = function (a, b) { return a + b; }
Explain arrow function. Why should we use it?
Mutable objects have properties that can be changed (mutated). Immutable objects (such as strings and numbers) cannot be changed, since they have specific memory allocation.
What is the difference between mutable and immutable objects?
Anonymous functions are typically used in callbacks or as private methods of classes.
What is a typical use of anonymous functions?
Try to walk through all properties: let obj= {} function isEmpty(obj) { for (let key in obj) { return "has keys"; } return "has no keys"; }
How to check if an object has any property?
Use a toString() function: let number = 12345 let result = number.toString(); Output: string "12345"
Convert number 12345 to string.
Unicode symbols begin with backslash and "u" character. To assign a copyright Unicode symbol to a variable, one may write: let str = "\u00a9";
How to enter a Unicode symbol into a string?
Interaction functions are: alert(message); result = prompt(title, optionalDefault); boolean = confirm(question);
What are the interaction functions?
Use a "Do-While" loop with a isFinite() function to check if it is a finite number or not. function promptNumber() { let number; do { number = prompt("Enter a number", 0); } while (!isFinite(number)); return +number; } Here "+" in return operator forces to cast variable to numerical value.
Write a function definition that asks a user to enter a number and keep prompting if it is not a number. Return the number.
Output: Number 1. True converts to number 1, false converts to number 0.
What is the output? true + false
Output: Number -1. Since you cannot "extract" from a string, everything after will be a number. Empty string converts to number 0.
What is the output? "" - 1 + 0
Think of a string as an array characters. Take the last element of the array using it's length property: let str = "Excellent"; let char = str[str.length - 1];
How to get the last character of a given string?
The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them - we put a single handler on their common ancestor. The algorithm: 1. Put a single handler on the container (parent). 2. In the handler - check the source element event.target. 3. If the event happened inside an element that interests us (child), then handle the event.
Explain event delegation.
Use "For-In" loop: let obj = {name: "John", age: 28}; let prop = "name"; let result = (prop in obj) ? "exists" : "does not exist"; Output: "exists"
How to check if a certain property exists in the given object?
Use one of the Math library functions: Math.floor() Math.ceil() Math.round() To round a number to a second decimal use toFixed() function: let number = 1.235 result = number.toFixed(2); Output: 1.24
How would you round a number?
Parse it to integer. JavaScript will try to get the number from the string if it starts with a number: let str = "100px"; alert(parseInt(str)); Outputs number 100 to the console.
What is a way to get a number from the string "100px"?
Since the last operand is a string, the compiler converts the number to string and concatenates them. The result is a string "1020".
What would be the result? let result = 10 + "20";
There are 3 ways of doing it: let str = "Excellent" 1. newStr = str.substring(1, 6); output: "xcell" take all from 1 (including) to 6 (not include) (start from 0) 2. newStr = str.substr(1, 6); output: "xcelle" take all from 1 to 6 including all (start from 0) 3. newStr = str.slice(1, 6); output: "xcell" take all from 1 (including) to 6 (not include) (start from 0) newStr = str.slice(2); output: "cellent" take all from 2 (including) and till the end (start from 0) newStr = str.slice(-2); output: "nt" take two last characters
How to get a substring from a string?
Think of a string as an array of characters. Take the second element of the array: let str = "Excellent"; let char = str[1];
How to get the second character of a given string?
Think of a string as an array. Take the first element of the array and apply toUpperCase() function. Add the rest of the string. let str = "john"; let newStr = str[0].toUpperCase() + str.slice(1); output: string "John"
Replace the first letter with a capital: john
Null is an object. Undefined means that the variable is declared but has no value. Undeclared means that the variable is referenced before it is actually exists.
What is the difference among null, undefined and undeclared?
Yes. there are no difference.
Are these the same? let user = new User(); let user = new User;
Yes. Square notation is much more powerful, since you may insert an expression inside them: let fruit = "apple"; let bag = { [fruit + 'Computers']: 5}; with dot notation you cannot use the expression: bag.appleComputers = 5;
Is there any difference in using square brackets notation or dot notation for object keys? obj.key and obj[key]
Output: String "10". The "+" sign is a concatenation. Since you are adding to a string, everything after it will be a string.
What is the output? "" + 1 + 0
No. The property will be of "undefined" type.
If property of an object does not exist, will it return an error?
Use isNaN() function or isFinite() function: let number = 123; alert (!isNaN(number)); or alert(isFinite(number)); But remember, that space or an empty string is treated as number 0.
How to check if the value is a number?
Output: String "9px". Add two numbers and concatenate them with the string.
What is the output? 4 + 5 + "px"
Yes. It returns "undefined".
If a function has no return (empty return) does it actually returns anything?
You can check the data type using "typeof" operator: let value = 12; console.log(typeof value); Output: string "number".
How to check a data type of a given value?
Use Math library: function randomNum(min, max) { return Math.floor(Math.random() * (1 + max - min) + min); } let result = randomNum(5, 15);
How to get a random number from 5 to 15?
let str = ""; if (!str) return "Empty";
How to check if a string is empty?
Use "For of" loop: let str = "Excellent"; for (let char of str) { alert(char); }
How to iterate over all characters in a given string?
Use scientific notation: let number = 1e9;
Create a number that designates one billion.
A closure is an inner function that has access to the outer function's variables: function showName(first, last) { let intro = "Your name is "; function fullName() { return intro + first + last; return fullName(); } let result = showName('John', 'Doe'); Here fullName is a closure function, that can use outer function's (showName) parameters.
What is a closure?
Function Declaration can be used anywhere in the script: function sayHello { alert("Hello"); } Function Expression is used after assignment to its variable: let sayHello = function() { alert("Hello"); }
What is the difference between Function Declaration and Function Expression?
Check if the object keys have any length: let obj = {}; let result = (Object.keys(obj).length > 0) ? "is not empty" : "is empty";
How to check if an object is empty?
Use includes() function: let str = "Excellent"; let word = "cell"; let result = str.includes(word)); result outputs "true"
How to find out if a given string has a particular word inside?
key *= 2;
What is a different notation for: key = key * 2;
Add "0" to the number and remove two last characters: let number = 9; number = ("0" + number).slice(-2); Output is a string "09".
Write a code that If a given number is less than 10 adds a "0" in front of the number.
False. Use "dictionary comparison" of strings. Compiler starts comparison from the first letter of each word. Since "a" isn't greater than "p", the expression is false.
True or False: "apple" > "pineapple";
"this" always refers to an object (usually inside a function) and contains the value of the object that invokes this function. Use "this" to access properties or methods of the object that invokes that function.
Explain "this" keyword.
To have a "deep copy" of the given object, copy each key of the object, or use Object.assign() function: let user = {name: "John", age: 28, address: { street: "Easy" }}; let userClone = Object.assign({}, user);
How to properly clone an object?
Output: Infinity You cannot divide by 0.
What is the output? 7 / 0
call() function takes comma separated parameters apply() function takes single array of arguments.
What is the difference between call() and apply()?
Output: Number 2. Since you cannot divide on a string, the string is converted to a number.
What is the output? 6 / "3"
Output: NaN. Since you cannot subtract from a string, you are getting NaN.
What is the output? "4px" - 2
Pros: Promises have a cleaner code with a possibility of chaining methods. Events can perform synchronously. Cons: Once started, a promise cannot be stopped.
What are Pros and Cons of Promises compare with callback functions?
Section 2
(50 cards)
With Date native object: let current = new Date();
How to show current time?
In JavaScript, functions are objects.
What type is a function?
Two ways: let number = 2; let result = Math.pow(number, 2); or let result = 2 ** 2;
How to write number 2 in power of 2?
We may decide to execute a function not right now, but at a certain time later. That's called "scheduling a call". There are two methods for it: setTimeout() allows to run a function once after the interval of time. setInterval() allows to run a function regularly with the interval between the runs. For instance, this code calls sayHi() after one second: function sayHi() { alert('Hello'); } setTimeout(sayHi, 1000);
What does it mean "Scheduling a function call"?
Pass the timestamp to the Date object: let date = new Date(timestamp);
How to get date from a timestamp?
Method map() uses a function, which is called repetitively for each element of the array: let result = arr.map(function(item, index, array) { // should return an array of new values instead of item }) Example: let lengths = ["Bilbo", "Gandalf", "Nazgul"] lengths.map(item => item.length) alert(lengths); Output: "5,7,6"
Explain how map() method works with arrays.
Technically, both loops can be applied to an array, but the "For-In" loop iterates over all properties, not only the numeric ones. "For-in" loops are optimized for generic objects, not arrays, and thus is 10-100 times slower. Generally, we shouldn't use "For-in" loops for arrays.
What is faster way to loop through elements of an array, "For-In" loop or "For-Of" loop?
In computer science, a "stack" means an ordered collection of elements which supports two operations: - push adds an element to the end. - pop takes an element from the end. So new elements are added or taken always from the "end". For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle.
What is a Stack data structure?
Use JSON.stringify() method: let student = { name: 'John', age: 30, isAdmin: false, courses: ['html', 'css', 'js'], wife: null }; let json = JSON.stringify(student); The resulting json string is a called JSON-encoded or serialized or stringified or marshalled object.
How to convert an object to JSON?
"var" variables are either function-wide or global. if (true) { var test = true; // use "var" instead of "let" } alert(test); // true. The variable lives after if.
What is the difference among "var", "let", and "const"?
There are two ways to create an array: let arr = new Array(); let arr = []; Almost all the time, the second syntax is used.
What is the syntax to create a new array?
Output: Number 1. Null is treated as a number 0.
What is the output? null + 1
No. It will be ignored.
Can we convert a function to JSON?
Method find() uses a function, which is called repetitively for each element of the array: let result = arr.filter( function(item, index, array) { // should return an array of items we are looking for }); Example: let users = [ {id: 1, name: "John"}, {id: 2, name: "Pete"}, {id: 3, name: "Mary"} ]; let users = users.filter(item => item.id < 3); alert(users); Output: "John,Mary".
Explain how filter() method works with arrays.
The throw operator generates an error. The syntax: throw <error object> Simple example: let json = '{ "age": 30 }'; // incomplete data try { let user = JSON.parse(json); // <-- no errors if (!user.name) { throw new SyntaxError("Incomplete data: no name"); } alert( user.name ); } catch(e) { alert( "JSON Error: " + e.message ); }
What "throw" operator is doing?
Method find() uses a function, which is called repetitively for each element of the array: let result = arr.find( function(item, index, array) { // should return true if the item is what we are looking for }); If it returns true, the search is stopped, the item is returned. If nothing found, undefined is returned. Example: let users = [ {id: 1, name: "John"}, {id: 2, name: "Pete"}, {id: 3, name: "Mary"} ]; let user = users.find( item => item.id == 1 ); alert(user.name); Output: "John".
Explain how find() method works with arrays.
Method sort() sorts the array in place. The items are sorted as strings by default: let arr = [ 1, 2, 15 ]; arr.sort(); Output: "1, 15, 2". To use our own sorting order, we need to supply a function of two arguments as the argument of the sort() method: function compareNumeric(a, b) { if (a > b) return 1; if (a == b) return 0; if (a < b) return -1; } let arr = [ 1, 2, 15 ]; arr.sort(compareNumeric); Output: "1, 2, 15".
Explain how sort() method works with arrays.
Deletion (from index 1 remove 1 element): let arr = ["I", "study", "JavaScript"]; arr.splice(1, 1); alert( arr ); Output: "I", "JavaScript". Deletion with Replacement (remove 3 first elements and replace them with another): let arr = ["I", "study", "JavaScript", "right", "now"]; arr.splice(0, 3, "Let's", "dance"); alert( arr ); Output: "Let's", "dance", "right", "now". Insertion (from index 2 insert 2 elements): let arr = ["I", "study", "JavaScript"]; arr.splice(2, 0, "complex", "language"); alert( arr ); Output: "I", "study", "complex", "language", "JavaScript". Negative indexes are allowed. They specify the position from the end of the array. (from index -1 (one step from the end) delete 0 elements, then insert 3 and 4): let arr = [1, 2, 5]; arr.splice(-1, 0, 3, 4); alert( arr ); Output: 1,2,3,4,5
Explain how splice() method works with arrays.
Try..catch allows to "catch" errors and, instead of dying, do something more reasonable.
Why "Try - Catch" block is used?
delete() method will only delete the value, but not the index from the array. To delete both, use splice() method. This method is actually used to add, delete and insert array elements.
How to delete an element from the array? Since array is an object, Can I use delete() method?
2 1 first copy a to b, then increment a.
What is the output? let a = 1; let b = a++; console.log(a, b);
Array is still an object. ...But what makes arrays really special is their internal representation. The engine tries to store its elements in the contiguous memory area, one after another, just as depicted on the illustrations in this chapter, and there are other optimizations as well, to make arrays work really fast. Arrays are carefully tuned inside JavaScript engines to work with contiguous ordered data, please use them this way. And if you need arbitrary keys, chances are high that you actually require a regular object {}.
What is the difference between an object and array?
Use function object property .name: function hello() { alert("hi") } let name = hello().name;
How to get a name of a function into a variable?
toString() method returns a comma-separated list of elements: let arr = [1, 2, 3]; console.log( arr.toString() ); Output: String "1,2,3".
What would a toString() method of an array return?
Destructuring assignment is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables. It's called "destructuring assignment", because it "destructurizes" by copying items into variables. But the array itself is not modified. let [firstName, surname] = arr; is the same as let firstName = arr[0]; let surname = arr[1]; The destructuring assignment also works with objects: let options = { title: "Menu", width: 100, height: 200 }; let {title, width, height} = options; alert(title); // Menu alert(width); // 100 alert(height); // 200
Why destructuring assignment is used? Explain how it works
Use forEach() function. let arr = ["Bilbo", "Gandalf", "Nazgul"] arr.forEach((item, index, array) => { alert(`${item} is at index ${index} in ${array}`); }); The result of the inner function (if it returns any) is thrown away and ignored.
How to run a function for each element of an array?
Document Object Model. The document object gives access to the page content. We can change or create anything on the page using it: document.body.style.background = "red";
What is DOM?
Make the array's length property a zero: let arr = [1, 2, 3, 4, 5]; arr.length = 0; The length property is actually writable. If we decrease it, the array is truncated.
What is the simplest way to clear an array?
Use unshift() method: let fruits = ["Orange", "Pear"]; fruits.unshift("Apple"); "Apple" is added to the beginning of the array.
How to add an element to the beginning of an array?
shift() and unshift() are slower, because they need to move each element of an array in one or another side.
Which of this array methods slower than others? shift(), unshift(), push(), pop().
It is impossible.
How to add comments to JSON?
Use JSON.parse() method: let numbers = "[0, 1, 2, 3]"; numbers = JSON.parse(numbers);
How to get an object out of a JSON string?
This runs, but the result probably is not what you expect. The proper way is to pass a function reference to the setTimeout method (no parenthesis): setTimeout(sayHi, 1000); You also may use a function inside the setTimeout: setTimeout( () => alert( 'Hi' ), 1000 );
Will this run? function sayHi() { alert( 'Hi' ); } setTimeout(sayHi(), 1000);
Use push() method: let fruits = ["Apple", "Orange"]; fruits.push("Pear"); "Pear" is added to the end of the array.
How to append an element to the end of an array?
Use shift() method: let fruits = ["Apple", "Orange", "Pear"]; alert( fruits.shift() ); "Apple" is removed from the array and is returned. Array is changed.
How to extract the first element from an array and return it?
Use getTime() method: let current = new Date(); console.log(current.getTime()); or shorter (without using Date object): let current = Date.now();
How to get a current timestamp?
Functions alert/confirm/prompt are a part of BOM (Browser Object Method: they are directly not related to the document, but represent pure browser methods of communicating with the user. They cannot be styled.
Why alert/confirm/prompt have such "style-less" look?
2 2 first increment a, then copy a to b.
What is the output? let a = 1; let b = ++a; console.log(a, b);
Yes, with Date.parse() method. The string should be formatted: YYYY-MM-DDTHH:mm:ss.sssZ YYYY-MM-DD - is the date: year-month-day. The character "T" is used as the delimiter. HH:mm:ss.sss - is the time: hours, minutes, seconds and milliseconds. The optional 'Z' part denotes the time zone in the format +-hh:mm. A single letter Z that would mean UTC+0. For example: let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );
Can we get a date from a string?
In computer science, a "queue" means an ordered collection of elements which supports two operations: - push appends an element to the end. - shift get an element from the beginning, advancing the queue, so that the 2nd element becomes the 1st. For queues, we have FIFO (First-In-First-Out).
What is a Queue data structure?
Yes. This is called Named Function Expression. You may use "func" inside the function block to refer the function itself. "func" is not visible outside of the function. let sayHi = function func(who) { if (who) { alert(`Hello, ${who}`); } else { func("Guest"); // use func to re-call itself } }; sayHi(); // Output: Hello, Guest. But this won't work: func(); // Output: Error, func is not defined (not visible outside of the function).
Does this code execute without error? let sayHi = function func(who) { alert(`Hello, ${who}`); };
Use function object custom property. Let's create a custom property called "count": function sayHi() { alert("Hi"); sayHi.counter++; } sayHi.counter = 0; // initial value sayHi(); // Hi sayHi(); // Hi console.log(sayHi.counter); Output: 2.
How to count how many times a function was executed?
There are two ways: 1. A normal C-like "For" loop: let arr = ["Apple", "Orange", "Pear"]; for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } 2. A special "For-Of" loop: let fruits = ["Apple", "Orange", "Plum"]; for (let fruit of fruits) { alert( fruit ); }
How would you loop through an array?
Output: NaN. Undefined is neither a string or a number. You cannot add to it.
What is the output? undefined + 1
Spread operator turns array into a list of arguments. For instance, there's a built-in function Math.max that returns the greatest number from a list: Math.max(3, 5, 1); Now let's say we have an array [3, 5, 1]. How do we call Math.max with it? We can't manually list items in the code Math.max(arr[0], arr[1], arr[2]). Spread operator to the rescue! let arr = [ 3, 5, 1 ]; alert( Math.max( ...arr ) ); The spread operator operates only on iterables.
Explain spread operator.
The JSON (JavaScript Object Notation) is a general format to represent values and objects. It's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever.
What is JSON and where should we use it?
Use isArray() function. Since array does not have its own type, it is impossible to get the type with "typeof", because it will return "object". alert(Array.isArray( {} )); Output: false alert(Array.isArray( [ ] )); Output: true
How to tell if the structure is an array?
The number of milliseconds that has passed since the beginning of 1970 is called a timestamp.
What is a timestamp?
No. Try..catch only works for runtime errors. The syntax should be always valid.
Is it possible to catch syntax errors with "Try - Catch" block?
Use pop() method: let fruits = ["Apple", "Orange", "Pear"]; alert( fruits.pop() ); "Pear" is removed from the array and is returned. Array is changed.
How to extract the last element of an array and return it?
Section 3
(11 cards)