Viewing: ko.javascript.info

, .

. .

' (destructuring assignment) . (destructuring) . Destructuring assignment is a special syntax that allows us to unpack arrays or objects into a bunch of variables, as sometimes thats more convenient.

          //     
let arr = ["Bora", "Lee"]

//    
// firstName arr[0]
// surname arr[1] .
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee
        

split .

let [firstName, surname] = "Bora Lee".split(' ');

'(destructurize)' . .

          // let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];
        

//     
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

, title . .

(iterable, ) .

          let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);
        

(assignables) .

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');

alert(user.name); // Bora

Object.entries(obj) .

let user = {
  name: "John",
  age: 30
};

//    
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, age:30  
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

let guest = "Jane";
let admin = "Pete";

//  guest Pete,  admin Jane   
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane(   !)

, .

''

. ... (rest) .

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest` .
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

rest . rest , (...) .

. undefined .

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

= '(default value)' .

// 
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius (  )
alert(surname); // Anonymous ()

. .

prompt . , prompt .

// name prompt 
let [surname = prompt(' .'), name = prompt(' .')] = [""];

alert(surname); //  (  )
alert(name);    // prompt

let {var1, var2} = {var1:, var2:}

, ' . .

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

options.title options.width, options.height . . .

          // let {...}     
let {height, width, title} = { title: "Menu", height: 200, width: 100 }
        

. .

. options.width w . (:) .

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// {  :   }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

' : . width w, height h . title title .

= . .

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

. .

width title .

let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // prompt

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// title  
let { title } = options;

alert(title); // Menu

? ' ?

(rest pattern) . , IE . (Babel) .

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title =  title 
// rest =  
let {title, ...rest} = options;

// title "Menu", rest {height: 200, width: 100} .
alert(rest.height);  // 200
alert(rest.width);   // 100

let {} = {} . let , .

let title, width, height;

// SyntaxError: Unexpected token '='    .
{title, width, height} = {title: "Menu", width: 200, height: 100};

{...} . (statement) .

{
  //  
  let message = "Hello";
  // ...
  alert( message );
}

{...} .

(...) {...} .

let title, width, height;

//   .
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

, . (nested destructuring) .

options size . items . options .

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

//         
let {
  size: { // size ,
    width,
    height
  },
  items: [item1, item2], // items  
  title = "Menu" //   title    
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

extra( ) options .

[]

width, height, item1, item2 , title .

size items . size items .

. . . , , , .

          function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}
        

. IDE . .

. ?

          //       undefined    .
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])
        

. .

, .

//   
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

//        
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items   options 
  // width, height  
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width w,
  height: h = 200, // height h,
  items: [item1, item2] // items    item1,    item2 
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

          function({
  incomingProperty: varName = defaultValue
  ...
})
        

incomingProperty varName . defaultValue .

, . .

          showMenu({}); //    .

showMenu(); //    .

{} .

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

{} .

.
:
```
let {prop : varName = default, ...rest} = object
```
object prop varName , object prop default varName .

rest .

let [item1 = default, item2, ...rest] = array

array item1, item2 , rest .

          let user = {
  name: "John",
  years: 30
};
        

name name .
years age .
isAdmin isAdmin . isAdmin false .

          let user = { name: "John", years: 30 };

//      ?
// ... = user

alert( name ); // John
alert( age ); // 30
alert( isAdmin ); // false
        

let user = {
  name: "John",
  years: 30
};

let {name, years: age, isAdmin = false} = user;

alert( name ); // John
alert( age ); // 30
alert( isAdmin ); // false

salaries .

          let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};
        

topSalary(salaries) . .

salaries null .
.

: Object.entries - .

          function topSalary(salaries) {

  let max = 0;
  let maxName = null;

  for(const [name, salary] of Object.entries(salaries)) {
    if (max < salary) {
      max = salary;
      maxName = name;
    }
  }

  return maxName;
}
        