JS 최신 기능 몇 가지

---

Default Parameter (기본값 매개변수)

• 값이 없거나 undefined가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화할 수 있다.

 

function rollDie(numSides = 6) {
ㅤㅤreturn Math.floor(Math.random()*numSides)+1;
}

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters

기본값 매개변수 - JavaScript | MDN

---

Spread (전개 구문)

• 배열과 같이 반복 가능한 객체를 전개 구문을 사용하여 확장한다.

const nums = [1,2,3,4,5,6,7,8,9]
Math.max(...nums)

const nums = [1,2,3,4,5,6,7,8,9]
console.log(nums) //[1,2,3,4,5,6,7,8,9]
console.log(...nums) // 1 2 3 4 5 6 7 8 9
console.log('h', 'e', 'l', 'l', 'o') // h e l l o
console.log(...'hello') // h e l l o

onst cats = ['may', 'blue', 'scout']
const dogs = ['rusty', 'wyatt']
const allPets = [...cats, ...dogs] // ['may', 'blue', 'scout', 'rusty', 'wyatt']

Spread in object literals

const feline = {legs:4, family:'Felidae'};
const canine = {isFurry:true, family:'Caninae'};
const catDog = {...feline, ...canine} // {legs:4, family:"Caninae", isFurry:true}

- 키 값이 중복되는 경우 마지막 요소의 값으로 덮어씌워진다.

{...[2,4,6,8]} // {0:2, 1:4, 2:6, 3:8}

- 값을 spread하여 객체를 생성하는 경우 키 값이 0, 1, 2, ... 형식으로 생성된다.

const dataFromForm = {
ㅤㅤemail : 'yu_ri_son@naver.com',
ㅤㅤpassword : 'yuriyuri',
ㅤㅤusername : 'yurrrrri'
}
const newUser = {...dataFromForm, id:1234, isAdmin:false}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN

---

Rest Parameter (나머지 매개변수)

• 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. => 가변항 함수를 표현할 때 사용한다.

function sumAll(...nums) {
ㅤㅤlet total = 0;
ㅤㅤfor (let n of nums) {
ㅤㅤㅤㅤtotal+=n;
ㅤㅤ}
ㅤㅤreturn total;
}

console.log(sumAll(1,2,3)); // 6
console.log(sumAll(1,2,3,4)); // 10

function sum(...nums) {
ㅤㅤreturn nums.reduce((total, el) => total + el)
}

function myFun(a, b, ...manyMoreArgs) {
ㅤㅤconsole.log("a", a)
ㅤㅤconsole.log("b", b)
ㅤㅤconsole.log("manyMoreArgs", manyMoreArgs)
}

myFun("one", "two", "three", "four", "five", "six")

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters

나머지 매개변수 - JavaScript | MDN

---

Destructuring (구조 분해 할당)

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

배열 분해

const raceResults = ['Eliud', 'Feyisa', 'Galen'];
const [gold, silver, bronze] = raceResults;
   // gold -> 'Eliud', silver -> 'Feyisa', ...
const [fastest, ...everyoneElse] = raceResults;

객체 분해

const dataFromForm = {
ㅤㅤemail : 'yu_ri_son@naver.com',
ㅤㅤpassword : 'yuriyuri',
ㅤㅤusername : 'yurrrrri'
}
const {email, password, username} = dataFromForm;
const {password: pwd} = dataFromForm; // pwd -> 'yuriyuri'

매개변수 분해

// function fullName(user) {
// ㅤㅤconst {firstName, lastName} = user;
// ㅤㅤreturn `${firstName} ${lastName}`
// }

function fullName({firstName, lastName}) {
ㅤㅤreturn `${firstName} ${lastName}`
}

movies.map({title, score, year}) => {
ㅤㅤreturn `${title} (${year}) is rated ${score}`
})

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

https://ko.javascript.info/destructuring-assignment

구조 분해 할당

---