From 21652477c23e887a6780d6a9dd97e6e15e1a7a2e Mon Sep 17 00:00:00 2001 From: Ravi Subramanian Date: Thu, 23 Feb 2017 16:04:42 -0800 Subject: [javascript/en] Clarify objects, remove premature reference to prototypes - Prototypes are referenced in Section 3 before being discussed (in Section 5) - Also, prototypes are referenced while talking about for-loops, which IMHO distracts from the discussion of the loop structure itself - Added example that shows prototype-chain-walking via for-in in Section 5 --- javascript.html.markdown | 64 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 17 deletions(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 38119864..13ed2fb8 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -138,7 +138,7 @@ undefined; // used to indicate a value is not currently present (although // Note that 0 is falsy and "0" is truthy, even though 0 == "0". /////////////////////////////////// -// 2. Variables, Arrays and Objects +// 2. Variables, Arrays and basics of Objects // Variables are declared with the `var` keyword. JavaScript is dynamically // typed, so you don't need to specify type. Assignment uses a single `=` @@ -200,6 +200,11 @@ myObj.myThirdKey = true; // If you try to access a value that's not yet set, you'll get undefined. myObj.myFourthKey; // = undefined +// JavaScript objects are not instantiated from blueprints ("classes" in other +// object-oriented languages), but may refer to another special object called a +// "prototype". See later section for more info. + + /////////////////////////////////// // 3. Logic and Control Structures @@ -225,7 +230,7 @@ do { } while (!isValid(input)) // The `for` loop is the same as C and Java: -// initialisation; continue condition; iteration. +// initialization; continue condition; iteration. for (var i = 0; i < 5; i++){ // will run 5 times } @@ -241,22 +246,25 @@ for (var i = 0; i < 10; i++) { } } -// The for/in statement iterates over every property across the entire prototype chain. +// The for/in statement allows iteration over properties of an object. var description = ""; var person = {fname:"Paul", lname:"Ken", age:18}; for (var x in person){ description += person[x] + " "; -} +} // description = 'Paul Ken 18 ' -// To only consider properties attached to the object itself -// and not its prototypes, use the `hasOwnProperty()` check. -var description = ""; -var person = {fname:"Paul", lname:"Ken", age:18}; -for (var x in person){ - if (person.hasOwnProperty(x)){ - description += person[x] + " "; - } +// It also works for array objects but iterates over the indices +var myArray = [1, 2, 3, "apple", "banana", function(){}] +for (var index in myArray) { + console.log(index + ": " + myArray[index]); } +///prints: +// 0: 1 +// 1: 2 +// 2: 3 +// 3: apple +// 4: banana +// 5: function () {} // For/in should not be used to iterate over an Array where the index order // is important, as there is no guarantee that for/in will return the indexes @@ -273,7 +281,6 @@ if (colour == "red" || colour == "blue"){ // && and || "short circuit", which is useful for setting default values. var name = otherName || "default"; - // The `switch` statement checks for equality with `===`. // Use 'break' after each case // or the cases after the correct one will be executed too. @@ -485,6 +492,26 @@ myObj.myBoolean; // = true myPrototype.meaningOfLife = 43; myObj.meaningOfLife; // = 43 +// The for/in statement allows iteration over properties of an object, +// walking up the prototype chain until it sees a null prototype. +for (var x in myObj){ + console.log(myObj[x]); +} +///prints: +// Hello world! +// 42 +// [Function: myFunc] + +// To only consider properties attached to the object itself +// and not its prototypes, use the `hasOwnProperty()` check. +for (var x in myObj){ + if (myObj.hasOwnProperty(x)){ + console.log(myObj[x]); + } +} +///prints: +// Hello world! + // We mentioned that `__proto__` was non-standard, and there's no standard way to // change the prototype of an existing object. However, there are two ways to // create a new object with a given prototype. @@ -570,12 +597,15 @@ of the language. [JavaScript: The Definitive Guide][6] is a classic guide and reference book. -[Eloquent Javascript][8] by Marijn Haverbeke is an excellent JS book/ebook with attached terminal - -[Eloquent Javascript - The Annotated Version][9] by Gordon Zhu is also a great derivative of Eloquent Javascript with extra explanations and clarifications for some of the more complicated examples. +[Eloquent Javascript][8] by Marijn Haverbeke is an excellent JS book/ebook with +attached terminal -[Javascript: The Right Way][10] is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. +[Eloquent Javascript - The Annotated Version][9] by Gordon Zhu is also a great +derivative of Eloquent Javascript with extra explanations and clarifications for +some of the more complicated examples. +[Javascript: The Right Way][10] is a guide intended to introduce new developers +to JavaScript and help experienced developers learn more about its best practices. In addition to direct contributors to this article, some content is adapted from Louie Dinh's Python tutorial on this site, and the [JS Tutorial][7] on the -- cgit v1.2.3 From 54eff5591a1701b40af8632b6c9239dbb8a68ddc Mon Sep 17 00:00:00 2001 From: Adam Brenecki Date: Wed, 1 Mar 2017 19:29:32 +1030 Subject: [javascript/en] Minor changes to formatting, prototype explanations - Made a comment a complete sentence, to match the style of the rest of the document. - Removed discussion of for/in over Arrays, since it's a can of worms, and for/of is more appropriate if ES6 operators are available. - Reworded introduction to prototypes, and moved it with the rest of the prototype documentation. --- javascript.html.markdown | 28 +++++----------------------- 1 file changed, 5 insertions(+), 23 deletions(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 13ed2fb8..a85a7872 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -138,7 +138,7 @@ undefined; // used to indicate a value is not currently present (although // Note that 0 is falsy and "0" is truthy, even though 0 == "0". /////////////////////////////////// -// 2. Variables, Arrays and basics of Objects +// 2. Variables, Arrays and Objects // Variables are declared with the `var` keyword. JavaScript is dynamically // typed, so you don't need to specify type. Assignment uses a single `=` @@ -200,11 +200,6 @@ myObj.myThirdKey = true; // If you try to access a value that's not yet set, you'll get undefined. myObj.myFourthKey; // = undefined -// JavaScript objects are not instantiated from blueprints ("classes" in other -// object-oriented languages), but may refer to another special object called a -// "prototype". See later section for more info. - - /////////////////////////////////// // 3. Logic and Control Structures @@ -253,23 +248,6 @@ for (var x in person){ description += person[x] + " "; } // description = 'Paul Ken 18 ' -// It also works for array objects but iterates over the indices -var myArray = [1, 2, 3, "apple", "banana", function(){}] -for (var index in myArray) { - console.log(index + ": " + myArray[index]); -} -///prints: -// 0: 1 -// 1: 2 -// 2: 3 -// 3: apple -// 4: banana -// 5: function () {} - -// For/in should not be used to iterate over an Array where the index order -// is important, as there is no guarantee that for/in will return the indexes -// in any particular order. - // && is logical and, || is logical or if (house.size == "big" && house.colour == "blue"){ house.contains = "bear"; @@ -456,6 +434,10 @@ var MyConstructor = function(){ myNewObj = new MyConstructor(); // = {myNumber: 5} myNewObj.myNumber; // = 5 +// Unlike most other popular object-oriented languages, JavaScript has no +// concept of 'instances' created from 'class' blueprints; instead, JavaScript +// combines instantiation and inheritance into a single concept: a 'prototype'. + // Every JavaScript object has a 'prototype'. When you go to access a property // on an object that doesn't exist on the actual object, the interpreter will // look at its prototype. -- cgit v1.2.3 From 966886c6a9bd651679d6846f25d75666dfcbfb3c Mon Sep 17 00:00:00 2001 From: rlgreen91 Date: Thu, 8 Jun 2017 16:35:17 -0500 Subject: Corrects typo in prototype section. --- javascript.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index a85a7872..85c8a52d 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -481,7 +481,7 @@ for (var x in myObj){ } ///prints: // Hello world! -// 42 +// 43 // [Function: myFunc] // To only consider properties attached to the object itself -- cgit v1.2.3 From 575dc7c0184978f73c4327c5f27f1c41c090fa5a Mon Sep 17 00:00:00 2001 From: Kyle Mendes Date: Fri, 27 Oct 2017 16:09:35 -0400 Subject: Adding missing semicolons --- javascript.html.markdown | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 85c8a52d..4ed8f849 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -103,7 +103,7 @@ false; // ... which works with more than just strings "1, 2, " + 3; // = "1, 2, 3" -"Hello " + ["world", "!"] // = "Hello world,!" +"Hello " + ["world", "!"]; // = "Hello world,!" // and are compared with < and > "a" < "b"; // = true @@ -222,7 +222,7 @@ while (true){ var input; do { input = getInput(); -} while (!isValid(input)) +} while (!isValid(input)); // The `for` loop is the same as C and Java: // initialization; continue condition; iteration. @@ -293,7 +293,7 @@ myFunction("foo"); // = "FOO" // automatic semicolon insertion. Watch out for this when using Allman style. function myFunction(){ return // <- semicolon automatically inserted here - {thisIsAn: 'object literal'} + {thisIsAn: 'object literal'}; } myFunction(); // = undefined @@ -388,7 +388,7 @@ myFunc(); // = undefined // through `this`, even if it wasn't attached when it was defined. var myOtherFunc = function(){ return this.myString.toUpperCase(); -} +}; myObj.myOtherFunc = myOtherFunc; myObj.myOtherFunc(); // = "HELLO WORLD!" @@ -397,7 +397,7 @@ myObj.myOtherFunc(); // = "HELLO WORLD!" var anotherFunc = function(s){ return this.myString + s; -} +}; anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!" // The `apply` function is nearly identical, but takes an array for an argument @@ -420,7 +420,7 @@ boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!" // `bind` can also be used to partially apply (curry) a function. -var product = function(a, b){ return a * b; } +var product = function(a, b){ return a * b; }; var doubler = product.bind(this, 2); doubler(8); // = 16 @@ -430,11 +430,11 @@ doubler(8); // = 16 var MyConstructor = function(){ this.myNumber = 5; -} +}; myNewObj = new MyConstructor(); // = {myNumber: 5} myNewObj.myNumber; // = 5 -// Unlike most other popular object-oriented languages, JavaScript has no +// Unlike most other popular object-oriented languages, JavaScript has no // concept of 'instances' created from 'class' blueprints; instead, JavaScript // combines instantiation and inheritance into a single concept: a 'prototype'. @@ -451,7 +451,7 @@ var myObj = { var myPrototype = { meaningOfLife: 42, myFunc: function(){ - return this.myString.toLowerCase() + return this.myString.toLowerCase(); } }; @@ -515,7 +515,7 @@ MyConstructor.prototype = { }; var myNewObj2 = new MyConstructor(); myNewObj2.getMyNumber(); // = 5 -myNewObj2.myNumber = 6 +myNewObj2.myNumber = 6; myNewObj2.getMyNumber(); // = 6 // Built-in types like strings and numbers also have constructors that create @@ -540,7 +540,7 @@ if (new Number(0)){ // you can actually add functionality to a string, for instance. String.prototype.firstCharacter = function(){ return this.charAt(0); -} +}; "abc".firstCharacter(); // = "a" // This fact is often used in "polyfilling", which is implementing newer @@ -556,7 +556,7 @@ if (Object.create === undefined){ // don't overwrite it if it exists Constructor.prototype = proto; // then use it to create a new, appropriately-prototyped object return new Constructor(); - } + }; } ``` -- cgit v1.2.3 From cbb09c2df6fe9b373457c3b59380038e85f00e92 Mon Sep 17 00:00:00 2001 From: name Date: Tue, 31 Oct 2017 13:57:42 +0300 Subject: [javascript/en] Add several usefull functions to work with arrays --- javascript.html.markdown | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 4ed8f849..75bdf1ad 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -180,6 +180,23 @@ myArray.length; // = 4 // Add/Modify at specific index myArray[3] = "Hello"; +// Add and remove element from front or back end of an array +myArray.unshift(3); // Add as the first element +someVar = myArray.shift(); // Remove first element and return it +myArray.push(3); // Add as the last element +someVar = myArray.pop(); // Remove last element and return it + +// Join all elements of an array with a string +var myArray0 = [32,false,"js",12,56,90]; +myArray0.join(";") // = "32;false;js;12;56;90" + +// Get subarray of elements from index 1 (include) to 4 (exclude) +myArray0.slice(1,4); // = [false,"js",12] + +// Remove 4 elements starting from index 2, and insert there strings +// "33","34" and "35"; return removed subarray +myArray0.splice(2,4,"33","34","35"); + // JavaScript's objects are equivalent to "dictionaries" or "maps" in other // languages: an unordered collection of key-value pairs. var myObj = {key1: "Hello", key2: "World"}; -- cgit v1.2.3 From aff623e234d8d0844a44ff5331d756ae539aa6d0 Mon Sep 17 00:00:00 2001 From: name Date: Mon, 13 Nov 2017 00:41:52 +0300 Subject: Comments improved --- javascript.html.markdown | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 75bdf1ad..199c3c09 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -186,7 +186,7 @@ someVar = myArray.shift(); // Remove first element and return it myArray.push(3); // Add as the last element someVar = myArray.pop(); // Remove last element and return it -// Join all elements of an array with a string +// Join all elements of an array with semicolon var myArray0 = [32,false,"js",12,56,90]; myArray0.join(";") // = "32;false;js;12;56;90" @@ -194,8 +194,9 @@ myArray0.join(";") // = "32;false;js;12;56;90" myArray0.slice(1,4); // = [false,"js",12] // Remove 4 elements starting from index 2, and insert there strings -// "33","34" and "35"; return removed subarray -myArray0.splice(2,4,"33","34","35"); +// "hi","wr" and "ld"; return removed subarray +myArray0.splice(2,4,"hi","wr","ld"); // = ["js",12,56,90] +// myArray0 === [32,false,"hi","wr","ld"] // JavaScript's objects are equivalent to "dictionaries" or "maps" in other // languages: an unordered collection of key-value pairs. -- cgit v1.2.3 From c06af7a5ac4097b26113ea649893e57e405edefc Mon Sep 17 00:00:00 2001 From: Apoorv Choubey Date: Sun, 17 Dec 2017 15:56:42 +0530 Subject: Added a resource to read for Javascript --- javascript.html.markdown | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 199c3c09..e7066291 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -607,6 +607,10 @@ some of the more complicated examples. [Javascript: The Right Way][10] is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. +[Javascript:Info][11] is a modern javascript tutorial covering the basics (core language and working with a browser) +as well as advanced topics with concise explanations. + + In addition to direct contributors to this article, some content is adapted from Louie Dinh's Python tutorial on this site, and the [JS Tutorial][7] on the Mozilla Developer Network. @@ -622,3 +626,4 @@ Mozilla Developer Network. [8]: http://eloquentjavascript.net/ [9]: http://watchandcode.com/courses/eloquent-javascript-the-annotated-version [10]: http://jstherightway.org/ +[11]: https://javascript.info/ -- cgit v1.2.3 From faca0e79445f90e51acc4c4345795de6ae69c9ab Mon Sep 17 00:00:00 2001 From: hra Date: Sun, 1 Jul 2018 15:05:02 -0700 Subject: add for/of to js --- javascript.html.markdown | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index 85c8a52d..f2dd08c8 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -248,6 +248,13 @@ for (var x in person){ description += person[x] + " "; } // description = 'Paul Ken 18 ' +// The for/of statement allows iteration over an iterator. +var myPets = ""; +var pets = ["cat", "dog", "hamster", "hedgehog"]; +for (var pet of pets){ + myPets += pet + " "; +} // myPets = 'cat dog hamster hedgehog ' + // && is logical and, || is logical or if (house.size == "big" && house.colour == "blue"){ house.contains = "bear"; -- cgit v1.2.3 From 2a3d19ef73cf273e5ab0b0a6d640172b47b6bb92 Mon Sep 17 00:00:00 2001 From: hra Date: Sun, 1 Jul 2018 15:10:13 -0700 Subject: add for/of to js (change description) --- javascript.html.markdown | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index f2dd08c8..35bcf988 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -248,7 +248,9 @@ for (var x in person){ description += person[x] + " "; } // description = 'Paul Ken 18 ' -// The for/of statement allows iteration over an iterator. +// The for/of statement allows iteration over iterable objects (including the built-in String, +// Array, e.g. the Array-like arguments or NodeList objects, TypedArray, Map and Set, +// and user-defined iterables). var myPets = ""; var pets = ["cat", "dog", "hamster", "hedgehog"]; for (var pet of pets){ -- cgit v1.2.3 From c2e2fca15ce0d0398b341f3e4e8e0fcbc9987a65 Mon Sep 17 00:00:00 2001 From: luc4leone Date: Mon, 2 Jul 2018 14:15:02 +0200 Subject: Delete broken link to Eloquent Javascript - The Annotated Version by Gordon Zhu --- javascript.html.markdown | 5 ----- 1 file changed, 5 deletions(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index e7066291..52084e93 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -600,10 +600,6 @@ of the language. [Eloquent Javascript][8] by Marijn Haverbeke is an excellent JS book/ebook with attached terminal -[Eloquent Javascript - The Annotated Version][9] by Gordon Zhu is also a great -derivative of Eloquent Javascript with extra explanations and clarifications for -some of the more complicated examples. - [Javascript: The Right Way][10] is a guide intended to introduce new developers to JavaScript and help experienced developers learn more about its best practices. @@ -624,6 +620,5 @@ Mozilla Developer Network. [6]: http://www.amazon.com/gp/product/0596805527/ [7]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript [8]: http://eloquentjavascript.net/ -[9]: http://watchandcode.com/courses/eloquent-javascript-the-annotated-version [10]: http://jstherightway.org/ [11]: https://javascript.info/ -- cgit v1.2.3 From 25703676055e3db817e95ca184a04e0f9761ac24 Mon Sep 17 00:00:00 2001 From: Konstantin L Date: Mon, 21 Jan 2019 16:04:23 +0300 Subject: Fix js prototype example It would also print myBoolean from prototype's prototype --- javascript.html.markdown | 1 + 1 file changed, 1 insertion(+) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index ecaf02c5..c466c09b 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -510,6 +510,7 @@ for (var x in myObj){ // Hello world! // 43 // [Function: myFunc] +// true // To only consider properties attached to the object itself // and not its prototypes, use the `hasOwnProperty()` check. -- cgit v1.2.3 From 19a377def003d9992f631ff0727add5263eee824 Mon Sep 17 00:00:00 2001 From: Chris Zimmerman Date: Mon, 30 Sep 2019 17:55:50 -0400 Subject: Adds documentation for some basic ES6 features. --- javascript.html.markdown | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index c466c09b..ce9772ca 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -586,6 +586,48 @@ if (Object.create === undefined){ // don't overwrite it if it exists return new Constructor(); }; } + +// ES6 Additions + +// The "let" keyword allows you to define variables in a lexical scope, +// as opposed to a block scope like the var keyword does. +let name = "Billy"; + +// Variables defined with let can be reassigned new values. +name = "William"; + +// The "const" keyword allows you to define a variable in a lexical scope +// like with let, but you cannot reassign the value once one has been assigned. + +const pi = 3.14; + +pi = 4.13; // You cannot do this. + +// There is a new syntax for functions in ES6 known as "lambda syntax". +// This allows functions to be defined in a lexical scope like with variables +// defined by const and let. + +const isEven = (number) => { + return number % 2 === 0; +}; + +isEven(7); // false + +// The "equivalent" of this function in the traditional syntax would look like this: + +function isEven(number) { + return number % 2 === 0; +}; + +// I put the word "equivalent" in double quotes because a function defined +// using the lambda syntax cannnot be called before the definition. +// The following is an example of invalid usage: + +add(1, 8); + +const add = (firstNumber, secondNumber) => { + return firstNumber + secondNumber; +}; ``` ## Further Reading -- cgit v1.2.3 From eb6aa85639898f1c5a2f56718941454e8d993b98 Mon Sep 17 00:00:00 2001 From: Samuel Rabinowitz <5happy1@users.noreply.github.com> Date: Sat, 28 Dec 2019 16:50:01 -0700 Subject: Add missing semicolon for consistency --- javascript.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index ce9772ca..ad1af76a 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -188,7 +188,7 @@ someVar = myArray.pop(); // Remove last element and return it // Join all elements of an array with semicolon var myArray0 = [32,false,"js",12,56,90]; -myArray0.join(";") // = "32;false;js;12;56;90" +myArray0.join(";"); // = "32;false;js;12;56;90" // Get subarray of elements from index 1 (include) to 4 (exclude) myArray0.slice(1,4); // = [false,"js",12] -- cgit v1.2.3 From 5864aba42d2cf57dfe96049568b3a9689ea6a813 Mon Sep 17 00:00:00 2001 From: Leigh Brenecki Date: Thu, 13 Feb 2020 10:38:29 +1030 Subject: Purge my deadname --- javascript.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript.html.markdown') diff --git a/javascript.html.markdown b/javascript.html.markdown index ad1af76a..3c0e6d4f 100644 --- a/javascript.html.markdown +++ b/javascript.html.markdown @@ -1,7 +1,7 @@ --- language: javascript contributors: - - ["Adam Brenecki", "http://adam.brenecki.id.au"] + - ["Leigh Brenecki", "https://leigh.net.au"] - ["Ariel Krakowski", "http://www.learneroo.com"] filename: javascript.js --- -- cgit v1.2.3