From dc40c5326c68f760e8b4049e29fe5e0721f4506c Mon Sep 17 00:00:00 2001 From: Aleksandr Daniloff Date: Mon, 15 Feb 2016 15:04:59 +0100 Subject: [PATCH 1/6] add tip basics declarations --- README.md | 1 + _posts/en/2016-02-15-basics-declarations.md | 62 +++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 _posts/en/2016-02-15-basics-declarations.md diff --git a/README.md b/README.md index a6b28119..e019cc7b 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ There are a lot of ways to get update, choose your own # Tips list +- 47 - [Basics : declarations](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-15-basics-declarations.md) - 46 - [Detect document ready in pure JS](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-15-detect-document-ready-in-pure-js.md) - 45 - [Calculate the Max/Min value from an array](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-14-calculate-the-max-min-value-from-an-array.md) - 44 - [Know the passing mechanism](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-13-know-the-passing-mechanism.md) diff --git a/_posts/en/2016-02-15-basics-declarations.md b/_posts/en/2016-02-15-basics-declarations.md new file mode 100644 index 00000000..44d55327 --- /dev/null +++ b/_posts/en/2016-02-15-basics-declarations.md @@ -0,0 +1,62 @@ +--- +layout: post + +title: Basics declarations +tip-number: 47 +tip-username: adaniloff +tip-username-profile: https://github.com/adaniloff +tip-tldr: Understand and work with declarations. + +categories: + - en +--- + +Below, different ways to declare variables in javascript. +Comments and console.log should be enough to explain what's happening here: + +```js +var y, x = y = 1 //== var x; var y; x = y = 1 +console.log('--> 1:', `x = ${x}, y = ${y}`) + +// Will print +//--> 1: x = 1, y = 1 + +;(() => { + var x = y = 2 // == var x; y = 2; + console.log('2.0:', `x = ${x}, y = ${y}`) +})() +console.log('--> 2.1:', `x = ${x}, y = ${y}`) + +// Will print +//2.0: x = 2, y = 2 +//--> 2.1: x = 1, y = 2 + +;(() => { + var x, y = 3 // == var x; var y = 3; + console.log('3.0:', `x = ${x}, y = ${y}`) +})() +console.log('--> 3.1:', `x = ${x}, y = ${y}`) + +// Will print +//3.0: x = undefined, y = 3 +//--> 3.1: x = 1, y = 2 + +;(() => { + var y, x = y = 4 // == var x; var y; x = y = 3 + console.log('4.0:', `x = ${x}, y = ${y}`) +})() +console.log('--> 4.1:', `x = ${x}, y = ${y}`) + +// Will print +//4.0: x = 4, y = 4 +//--> 4.1: x = 1, y = 2 + +x = 5 // == x = 5 +console.log('--> 5:', `x = ${x}, y = ${y}`) + +// Will print +//--> 5: x = 5, y = 2 +``` + +More informations available on the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var). + From 78fccd0dd4e5ddf6b94dd29a189732392cb632d5 Mon Sep 17 00:00:00 2001 From: Aleksandr Daniloff Date: Mon, 15 Feb 2016 19:29:46 +0100 Subject: [PATCH 2/6] fix tip basics declarations, add explanations and modify a comment --- _posts/en/2016-02-15-basics-declarations.md | 24 +++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/_posts/en/2016-02-15-basics-declarations.md b/_posts/en/2016-02-15-basics-declarations.md index 44d55327..8876743e 100644 --- a/_posts/en/2016-02-15-basics-declarations.md +++ b/_posts/en/2016-02-15-basics-declarations.md @@ -11,7 +11,7 @@ categories: - en --- -Below, different ways to declare variables in javascript. +Below, different ways to declare variables in javascript. Comments and console.log should be enough to explain what's happening here: ```js @@ -20,7 +20,11 @@ console.log('--> 1:', `x = ${x}, y = ${y}`) // Will print //--> 1: x = 1, y = 1 +``` + +First, we just set two variables. Nothing much here. +```js ;(() => { var x = y = 2 // == var x; y = 2; console.log('2.0:', `x = ${x}, y = ${y}`) @@ -30,7 +34,11 @@ console.log('--> 2.1:', `x = ${x}, y = ${y}`) // Will print //2.0: x = 2, y = 2 //--> 2.1: x = 1, y = 2 +``` +As you can see, the code has only changed the global y, as we haven't declared the variable in the closure. + +```js ;(() => { var x, y = 3 // == var x; var y = 3; console.log('3.0:', `x = ${x}, y = ${y}`) @@ -40,9 +48,13 @@ console.log('--> 3.1:', `x = ${x}, y = ${y}`) // Will print //3.0: x = undefined, y = 3 //--> 3.1: x = 1, y = 2 +``` +Now we declare both variables through var. Meaning they only live in the context of the closure + +```js ;(() => { - var y, x = y = 4 // == var x; var y; x = y = 3 + var y, x = y = 4 // == var x; var y; x = y = 4 console.log('4.0:', `x = ${x}, y = ${y}`) })() console.log('--> 4.1:', `x = ${x}, y = ${y}`) @@ -50,7 +62,11 @@ console.log('--> 4.1:', `x = ${x}, y = ${y}`) // Will print //4.0: x = 4, y = 4 //--> 4.1: x = 1, y = 2 +``` + +Both variables have been declared using var and only after that we've set their values. As local > global, x and y are local in the closure, meaning the global x and y are untouched. +```js x = 5 // == x = 5 console.log('--> 5:', `x = ${x}, y = ${y}`) @@ -58,5 +74,9 @@ console.log('--> 5:', `x = ${x}, y = ${y}`) //--> 5: x = 5, y = 2 ``` +This last line is explicit by itself. + +You can test this and see the result [thanks to babel](https://babeljs.io/repl/#?experimental=false&evaluate=true&loose=false&spec=false&code=var%20y%2C%20x%20%3D%20y%20%3D%201%20%2F%2F%3D%3D%20var%20x%3B%20var%20y%3B%20x%20%3D%20y%20%3D%201%0Aconsole.log('--%3E%201%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F--%3E%201%3A%20x%20%3D%201%2C%20y%20%3D%201%0A%0A%3B(()%20%3D%3E%20%7B%20%0A%20%20var%20x%20%3D%20y%20%3D%202%20%2F%2F%20%3D%3D%20var%20x%3B%20y%20%3D%202%3B%0A%20%20console.log('2.0%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%7D)()%0Aconsole.log('--%3E%202.1%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F2.0%3A%20x%20%3D%202%2C%20y%20%3D%202%0A%2F%2F--%3E%202.1%3A%20x%20%3D%201%2C%20y%20%3D%202%0A%0A%3B(()%20%3D%3E%20%7B%20%0A%20%20var%20x%2C%20y%20%3D%203%20%2F%2F%20%3D%3D%20var%20x%3B%20var%20y%20%3D%203%3B%0A%20%20console.log('3.0%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%7D)()%0Aconsole.log('--%3E%203.1%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F3.0%3A%20x%20%3D%20undefined%2C%20y%20%3D%203%0A%2F%2F--%3E%203.1%3A%20x%20%3D%201%2C%20y%20%3D%202%0A%0A%3B(()%20%3D%3E%20%7B%20%0A%20%20var%20y%2C%20x%20%3D%20y%20%3D%204%20%2F%2F%20%3D%3D%20var%20x%3B%20var%20y%3B%20x%20%3D%20y%20%3D%203%0A%20%20console.log('4.0%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%7D)()%0Aconsole.log('--%3E%204.1%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F4.0%3A%20x%20%3D%204%2C%20y%20%3D%204%0A%2F%2F--%3E%204.1%3A%20x%20%3D%201%2C%20y%20%3D%202%0A%0Ax%20%3D%205%20%2F%2F%20%3D%3D%20x%20%3D%205%0Aconsole.log('--%3E%205%3A'%2C%20%60x%20%3D%20%24%7Bx%7D%2C%20y%20%3D%20%24%7By%7D%60)%0A%0A%2F%2F%20Will%20print%0A%2F%2F--%3E%205%3A%20x%20%3D%205%2C%20y%20%3D%202). + More informations available on the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var). From f9ae6342d999cdcc01c148fd3dfe364d5f080245 Mon Sep 17 00:00:00 2001 From: Aleksandr Daniloff Date: Mon, 15 Feb 2016 19:33:24 +0100 Subject: [PATCH 3/6] fix basics declarations typo --- _posts/en/2016-02-15-basics-declarations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/en/2016-02-15-basics-declarations.md b/_posts/en/2016-02-15-basics-declarations.md index 8876743e..a8ba134d 100644 --- a/_posts/en/2016-02-15-basics-declarations.md +++ b/_posts/en/2016-02-15-basics-declarations.md @@ -50,7 +50,7 @@ console.log('--> 3.1:', `x = ${x}, y = ${y}`) //--> 3.1: x = 1, y = 2 ``` -Now we declare both variables through var. Meaning they only live in the context of the closure +Now we declare both variables through var. Meaning they only live in the context of the closure. ```js ;(() => { From bc03adf9087866135753a039816f0d36ab519575 Mon Sep 17 00:00:00 2001 From: Aleksandr Daniloff Date: Tue, 16 Feb 2016 09:52:44 +0100 Subject: [PATCH 4/6] fix tip basics declarations typo --- _posts/en/2016-02-15-basics-declarations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/en/2016-02-15-basics-declarations.md b/_posts/en/2016-02-15-basics-declarations.md index a8ba134d..0d33dc03 100644 --- a/_posts/en/2016-02-15-basics-declarations.md +++ b/_posts/en/2016-02-15-basics-declarations.md @@ -11,7 +11,7 @@ categories: - en --- -Below, different ways to declare variables in javascript. +Below, different ways to declare variables in JavaScript. Comments and console.log should be enough to explain what's happening here: ```js From 87e598e872211e884befb326d807433b85dbfd4d Mon Sep 17 00:00:00 2001 From: Aleksandr Daniloff Date: Tue, 16 Feb 2016 11:46:21 +0100 Subject: [PATCH 5/6] fix tip basics declarations, add special thanks --- _posts/en/2016-02-15-basics-declarations.md | 1 + 1 file changed, 1 insertion(+) diff --git a/_posts/en/2016-02-15-basics-declarations.md b/_posts/en/2016-02-15-basics-declarations.md index 0d33dc03..96dac599 100644 --- a/_posts/en/2016-02-15-basics-declarations.md +++ b/_posts/en/2016-02-15-basics-declarations.md @@ -80,3 +80,4 @@ You can test this and see the result [thanks to babel](https://babeljs.io/repl/# More informations available on the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var). +Special thanks to @kurtextrem for his collaboration :)! From 59dc20b4af2458195d06cc3778c855309d0ed550 Mon Sep 17 00:00:00 2001 From: Aleksandr Daniloff Date: Tue, 16 Feb 2016 12:30:09 +0100 Subject: [PATCH 6/6] fix tip basics declarations, change the date --- README.md | 2 +- ...basics-declarations.md => 2016-02-16-basics-declarations.md} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename _posts/en/{2016-02-15-basics-declarations.md => 2016-02-16-basics-declarations.md} (100%) diff --git a/README.md b/README.md index e019cc7b..0b053ae8 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ There are a lot of ways to get update, choose your own # Tips list -- 47 - [Basics : declarations](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-15-basics-declarations.md) +- 47 - [Basics : declarations](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-16-basics-declarations.md) - 46 - [Detect document ready in pure JS](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-15-detect-document-ready-in-pure-js.md) - 45 - [Calculate the Max/Min value from an array](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-14-calculate-the-max-min-value-from-an-array.md) - 44 - [Know the passing mechanism](https://github.com/loverajoel/jstips/blob/gh-pages/_posts/en/2016-02-13-know-the-passing-mechanism.md) diff --git a/_posts/en/2016-02-15-basics-declarations.md b/_posts/en/2016-02-16-basics-declarations.md similarity index 100% rename from _posts/en/2016-02-15-basics-declarations.md rename to _posts/en/2016-02-16-basics-declarations.md