> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/js/es6.md).

# ES6 Specific Features

## For

```javascript
for (variable of iterable) {
  statement
}
```

## Spread

expand an array to serve as args/eles for another ft

```javascript
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
//becomes
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
```

### Other uses

```javascript
var arr2 = [...arr]; // like arr.slice()

<Component {...this.props} more="values" /> //React

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes'];

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
```

## Destructuring

```javascript
var [first, second, third] = someArray;
const [head, ...tail] = someArray;

const {name, color} = animalObj;
```

## Computed Property Names

```javascript
name = "hi"
//ES6
var a = {
});

//ES5
var a = {};
a[name] = value;
```

More complex example

```javascript
var i = 0;
var a = {
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
```

## Arrow functions

Preserves this function

```javascript
e => {

}
```

## Template Literals

```javascript
bio = `${name} is ${emotion}`
```

### Tag Functions

```javascript
var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}`;
}

var output = myTag`That ${ person } is a ${ age }`;

console.log(output);
// That Mike is a youngster
```

## EMCA 2020

### Optional Chaining

For use when you are accessing an `object` deeply and arent sure about key existence

```javascript
const customerCity = invoice?.customer?.address?.city;
```

### Nullish Coalescing Operator

```javascript
# Replace
const size = settings.size || 42;
# With as this checks for null or undefined not false/0
const size = settings.size ?? 42;
```