Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                ES6 
The new features in ES6 are
<ol>
  <li>Arrow functions</li>
  <li>Classes</li>
  <li>Modules</li>
  <li>Promises</li>
  <li>Generators</li>
  <li>let and const</li>
</ol>

<h2>Explore Differences Between the var and let Keywords</h2>
<p>var has a global scope which means it can be access anywhere in our code while let has a special use case
It can only be used within the scope in which it is defined
the biggest problem with the var keyword is that it doesn't warn you but continues and overwrite one part of ure code with another
it also just read part of ure code
while let takes everything
  
"use strict". This enables Strict Mode, which catches common coding mistakes and "unsafe" actions. You can see this as going onto safe mode onto Mac and you will be restricted to some functions. However it's not entirly save and there are way's to surpass it easely.</p>
https://tylermcginnis.com/var-let-const/

<h2>Compare Scopes of the var and let Keywords</h2>
<p>When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function.
The let keyword however when you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.
  
  Fix the code so that i declared in the if statement is a separate variable than i declared in the first line of the function. Be certain not to use the var keyword anywhere in your code.

So simply said change var to let
  and put let before the i
  the let word comes onto the 2nd row
</p>

<h2>Declare a Read-Only Variable with the const Keyword</h2>
<p>Const are read-only. They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned.You should always name variables you don't want to reassign using the const keyword. A common practice when naming constants is to use all uppercase letters, with words separated by an underscore.</p>

<h2>Mutate an Array Declared with const</h2>
<p> const are still mutable. Using the const declaration only prevents reassignment of the variable identifier. u cant redeclare it or redefine it, however the value can be changed
an object can have new keys / delete keys even though its a constant
Changing multiple indexes at once is just something that isn't in Javascript
  we need to change them step by step
</p>

<h2>Prevent Object Mutation</h2>
<p>Object.freeze() is the syntax
so the answer is: Object.freeze (MATH_CONSTANTS).As seen in the previous challenge, const declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze to prevent data mutation.
Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.</p>

<h2>Use Arrow Functions to Write Concise Anonymous Functions</h2>
<p>Create inline functions. You might remeber the word inline from HTML.We don't need to name these functions because we do not reuse them anywhere else.
The syntaxt
  const myFunc = function() {
  const myVar = "value";
  return myVar;
  }
  
The arrow function syntax:
  const myFunc = () => {
  const myVar = "value";
  return myVar;
  }
  
This helps simplify smaller functions into one-line statements:
  const myFunc = () => "value";
This code will still return value by default.
  
  var magic = function() {
  "use strict";
  return new Date();
};
  
  const magic = () => {
  "use strict";
  return new Date();
};
console.log(magic);
  
</p>

<h2>Write Arrow Functions with Parameters</h2>
<p>Just like a regular function, you can pass arguments into an arrow function.

// doubles input value and returns it
const doubler = (item) => item * 2;
If an arrow function has a single argument, the parentheses enclosing the argument may be omitted.

// the same function, without the argument parentheses
const doubler = item => item * 2;
It is possible to pass more than one argument into an arrow function.

// multiplies the first input value by the second and returns it
const multiplier = (item, multi) => item * multi;
const myConcat = (arr1, arr2) => 
  now how to get to the sollution
  
  before arrows:
   hello = function() {
  return "Hello World!";
}
  after arrows:
  hello = () => {
  return "Hello World!";
}
  the word function will become obsolute when u have the arrows
  let's do that here as well
  
  var myConcat = (arr1, arr2) {
  "use strict";
  return arr1.concat(arr2);
};
  getting closer but we aren't there yet
  just like the example above we see that it ends with a =>
  so let's try 
    var myConcat = (arr1, arr2) {
  "use strict";
  return arr1.concat(arr2);
};
  now it is a arrow function but we are still missing the const so let's replace var with const. perfect you did succeed
  
  
 const= It does NOT define a constant value. It defines a constant reference to a value.
https://www.w3schools.com/JS/js_const.asp
  https://www.w3schools.com/JS/js_arrow_function.asp

const myConcat = (arr1, arr2) => {
  "use strict";
  return arr1.concat(arr2);
};
// test your code
console.log(myConcat([1, 2], [3, 4, 5]));
new messages

Always have it at the back of your mind that we change var keyword to const each time we are working on ES6
Therefore, let and const keyword is preferable.




</p>

<h2>Set Default Parameters for Your Functions</h2>
<p>
const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous

The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter name will receive its default value "Anonymous" when you do not provide a value for the parameter. You can add default values for as many parameters as you want.
so basicly in the parenthese we can set a name = "default paramenter" and do this with numbers as well or anything we would be needing in or code.
  
  so when they ask us to Modify the function increment by adding default parameters so that it will add 1 to number if value is not specified.

they meant we need to set the value = 1; so it use the 1 as a defeault and the code doesn't return NaN
  const increment = (number, value = 1) => number + value;
console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns 6
  
</p>
Use the Rest Parameter with Function Parameters

In order to help us create more flexible functions, ES6 introduces the rest parameter for function parameters. With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.

THE REST PARAMETER ALLOWS US TO ASSIGN MULTIPLE ARGUEMENTS INTO OUR FUNCTIONS

The rest parameter is basically three periods which  is declared as a parameter in our function to catch as much as possible arguments.

...abc is a typical example of a rest parameters

Rest parameter is used to add contents to an element of an array.
new messages
i.e we can use it to copy from array 1  into  array 2.

Therefore, it helps to write a short and concise function
const sum = (...args) => {
  
  return args.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6
...args in the above code is a typical example of a rest parameter
new messages
It allows us to reduce the function name and compute the result to the browser console
a and b represent 1, 2 and 3


So a + b = 1+2+3 which gives number 6 as the result.
That's all about rest parameters



<h2> Use Destructuring Assignment to Extract Values from Objects

</h2>
<p>Destructuring is a new syntax introduced to ES6 to efficiently extract object properties from an JSON object.
So we can easily represent the code as:
const name = { 
kitty : "naughty",
language : "JS",
school : " FCC"
};
The above is an object represented by a curly brace and not a parenthesis.
The first part of the property is known as the property name or key.
new messages
While the latter part of the property is known as the property value or simply - value.
Now to represent the above code in ES6:
 We start by assigning the property name to a variable and also to the previous variable name.

Remember, the previous variable name is const name;
Now we have:
const new = {
kitty,
language, 
school} = name;

Immediately those keys are being called the value will be printed out as well.
So when we log the variable call new to the console, the corresponding value is printed out.
Those property name can be declared as an empty strings. Then, we can use those keys as a variable to hold values
  
  Syntax
const user = { name: 'John Doe', age: 34 };

const name = user.name; // name = 'John Doe'
const age = user.age; // age = 34
Here's an equivalent assignment statement using the ES6 destructuring syntax:

const { name, age } = user;
// name = 'John Doe', age = 34
</p>

<h2>Use Destructuring Assignment to Assign Variables from Objects</h2>
<p>const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES 
const user = { name: 'John Doe', age: 34 };
Here's how you can give new variable names in the assignment:

const { name: userName, age: userAge } = user;
// userName = 'John Doe', userAge = 34
</p>

<h2>Write Concise Object Literal Declarations Using Object Property Shorthand</h2>
<p>OK, I'm reading it

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

const getMousePosition = (x, y) => ({ x, y });

getMousePosition is function in Es6 that allows us to return 2 properties simultaneously from an object.

Example is shown above

It is similar to destructuring in which whenever the property name is called then the corresponding value is printed out.

x: x is key and value pair
Same as y: y</p>

<h2>Write Concise Declarative Functions with ES6</h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>
Here, we are using restructuring on a multi-dimensional objects:

const LOCAL_FORECAST = {
  yesterday: { low: 61, high: 75 },
  today: { low: 64, high: 77 },
  tomorrow: { low: 68, high: 80 }
};

lowToday and highToday is the new property name
owToday and highToday is the new property name


owToday and highToday is the new property name

lowToday and highToday is the new property name





6:26
IowToday = 64;  highToday = 77
6:26
therefore:
6:26
low = lowToday = 64
6:26
high = highToday = 77
new messages
6:27
Therefore we have:
6:27
const { today: { low: lowToday, high: highToday } } = LOCAL_FORECAST;



6:26
IowToday = 64;  highToday = 77
6:26
therefore:
6:26
low = lowToday = 64
new messages
6:26
high = highToday = 77


new messages
6:26
IowToday = 64;  highToday = 77


new messages
6:23
Therefore, we add more curly braces
6:24
const { today: { low: lowToday, high: hightoday } } = LOCAL_FORECAST;
<h2></h2>
<p></p>

<h2>Create Strings using Template Literals

</h2>
<p>A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier.
Template literals allow you to create multi-line strings and to use string interpolation features to create strings.
Consider the code below:

Template Literal allows us to create complex string

i.e it allows to create multi-line strings</p>

<h2></h2>
<p>Okay so slice() only takes 2 parameters. 1st the index to begin the substraction 2nd the index which stops the extraction </p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p><h2></h2>
<p></p>

<h2></h2>
<p></p>

<h2></h2>
<p></p>
import * as myMathModule from "./math_functions.js";

<h2></h2>
<p></p>
Create an Export Fallback with export default
export default
<h2></h2>
<p></p>

.map
map wouldn't work there

import add from "./math_functions.js";
ADD
              
            
!

CSS

              
                Divine in half until we get to the number 1.

1:01 PM
1 = odd
1:01 PM
0 = even
----------------------
Destructuring is for extracting properties from Object.
To put them back in ES6 have a short hand version of writing Object properties.
let coder = {
   name : "",
   language : ""
};
//Destructuring
let { name, langauge } = coder;
name = 10;
language = 100;
//Short Hand Assignment
coder = { name, language };
console.log( coder );

It occurs to me that the const binding is frequently used. (edited) 
Do they have advantage over one another?

@pass
Yes, It has to do with variable scope.  Scope means "context", where does the variable exist.
1:05 AM
var is a function scope variable.  This means that a variable only exist inside of a function scope.
let is a block scope variable.  This means that a variable only exist inside a block scope.
const is a constant variable which locks up the value that it initially give it.
1:06 AM
For example:
var a = 10;
function test( ) {
    var a = 100;
    {
        let a = 1000;
        console.log( a ); //block scope: a = 1000
    }
    console.log( a ); //function scope: a = 100
    console.log( window.a ); //global scope: a = 10
}
test( );

Destructuring allows you to assign  key to an empty string and assign it as a variable name to hold values.

4:22 PM
Outside the object
              
            
!

JS

              
                
              
            
!
999px

Console