스터디9일차 - 전개, 배열 분해, 객체 분해

231. 기본 매개 변수 (default) : 매개변수로 아무 것도 입력받지 않았을 경우 대신 입력할 값입니다.
(옛날방식 : 조건문으로 만들었습니다.)
function rollDie(numSides) {
    if (numSides === undefined) { // 조건으로 매개변수가 undefined일 때 실행하도록 합니다.
        numSides = 6
    }
    retrun numSides
}

 

실제로 쓰는 방식 : [매개변수 = 값]  지정하기
function multilply(a, b = 1) {
   return a * b;
}
multiply(4) // b에 인수를 주지 않았기 때문에 b는 default 값인 1이 됩니다.
따라서 4 * 1 이 됩니다.

 

function greet(a, b="hi", c="!") {
    console.log(`${b}, ${a} ${c}`)
}
greet("James", "hello", "!!!!") // 출력결과 : b>a>c "hello, James !!!!" 

 

greet("James") // 출력결과 인수를 a만 주었을 경우에는 

hi와 !가 디폴트로 설정되어 있기 때문에 다음과 같이 출력됩니다. "hi, James !"

 

 

233. 스프레드 구문(전개)
Math.max(1,5,2,7,8,5,174) // Math.max()메서드는 가장 큰 값을 반환합니다. 174 
Math.min(2,4,1) // Math.min()메서드는 가장 작은 값을 반환합니다. 1

그런데 배열에 .max()함수를 쓸 수는 없습니다.
nums = [1,5,2,7,8,5,174]
Math.max(nums) // 출력결과 NaN

배열을 펼쳐서 인수를 넣어주어야 합니다.
Math.max(...nums) // 176
이는 
Math.max(1,5,2,7,8,5,174) 
와 같은 형태가 되는 것입니다.

234. 행렬 리터럴 스프레드 구문
스프레드 구문은 배열 안에서 하나만 넣을 수 있는 것이 아니라, 콤마","로 구분하여 쓸 수 있습니다.
let ab = ["a","b"]
let cd = ["c","d"]
[1, 2, ...ab, ...cd, "ㅇㅅㅇ"] // [1, 2, "a", "b", "c", "d", "ㅇㅅㅇ"] // 배열 안에서 펼쳐진 순서대로 나타납니다.



235. 객체 스프레드 구문 : 객체도 마찬가지로 스프레드 구문 "..."을 이용해 전개할 수 있습니다.
const 김 = { 지역:"서울", 직업:"개발자" };
const 박 = { 나이: 13, 직업:"야구선수" };

const 김박 = {...김, ...박} // { 지역:"서울",직업:"야구선수",나이:13 }; // 직업이라는 키가 겹치기 때문에 마지막에 할당된 "야구선수"가 되었습니다.
{...김, ...박, 직업:"군인"}; { 지역:"서울",직업:"군인",나이:13 } // 직업이라는 키는 마지막에 "군인"을 값으로 할당되어 최종적으로 "군인"이 직업이 되었습니다.


객체안에서 스프레드 구문"..."을 이용하면 인덱스를 키로 얻게 됩니다.
{...[a,b,c]} // {0:a, 1:b, 2:c} 
{..."가나다"} // {0:"가", 1:"나", 2:"다"}

 

 

실제로 이것이 쓰이는 형태는 다음과 같습니다.
const dataFromForm = {
    email: 'asd@naver.com',
    password: 'asd123',
    username: 'qwerty',
}
const newUser = {...dataFromForm, id: 123, isAdmin: false } // 존재하던 객체에 id와 isAdmin 키와 값을 손쉽게 업데이트 하였습니다.



236. Rest 매개 변수
매개변수로 argumetns 를 주게 되면 인수들이 인덱스를 갖고 arguments에 요소로써 나열됩니다. 
하지만 배열 메서드는 사용할 수 없습니다. 그래서 인수를 유사배열객체라고도 부릅니다.
function sum() {
    return arguments.reduce((total, el) => total + el) 
}
sum(1,2,3,4,5) // 에러 : arguments는 배열이 아니기 때문에 reduce 함수를 쓸 수 없습니다.

그래서 이를 스프레드 "..."를 사용해 배열로 만들어 주면 됩니다.

function func2(...nums) { // 매개변수를 스프레드 구문 "..."로 펼쳐주면
console.log(nums)
}
func2(1,2,3,4,5)
// 출력결과 : [1,2,3,4,5] // 인수들이 배열 안에 들어가게 됩니다.

이제 배열이 되었으므로 위의 reduce 함수를 쓸 수 있습니다.
function sum(...nums) {
    return nums.reduce((total, el) => total + el) 
}
sum(1,2,3,4,5) // 15

 

 

예시로 수상을 해봅시다.
function raceResults(금, 은, ...나머지) {
    console.log(`금메달 : ${금}`)
    console.log(`은메달 : ${은}`)
    console.log(`모두 감사합니다 : ${나머지}`)
}
raceResults("봉주", "석희", "김","나","박","이")
// 출력결과 
금메달 : 봉주
은메달 : 석희
모두 감사합니다 : 김, 나, 박, 이

인수는 화살표함수에서 사용할 수 없습니다.

 

 

237. 배열 분해 : 리액트 수업 중에 배운 [num, setNum]입니다.
const scores = [10, 9, 8, 3,2,1]

const gold = scores[0] // 10
const silver = scores[1] // 9 
const broneze = scores[2] // 8 

이를 간단하게 배열에 담아 한 줄로 표현할 수 있습니다.
const [gold, silver, bronze] = scores
gold // 10, silver // 9, bronze // 8
배열의 인덱스 순서대로 gold silver bronze에 할당됩니다.

const [gold, silver, bronze] = [10, 9, 8, 3,2,1] // 와 같은 형태입니다.

스프레드구문 "..."를 활용하여 나머지를 담아봅니다.
const [gold, silver, bronze, ...everyoneElse] = scores
everyoneElse // [3,2,1] // 할당되지 않은 나머지 3개 요소가 담겼습니다.

238. 객체 분해 : 객체분해는 배열과 비슷하지만 순서와 상관없이 객체의 키를 입력하면 됩니다.
const user = {
    email : 'asd@naver.com',
    name : 'geegee',
    password : 'asd',
}
const { password, email } = user
password // 'asd'
name // 'geegee'

키의 이름을 변경하는 방법입니다.
const { name: firstName } = user;
name // 출력이 되지 않습니다. 이제 name이라는 키는 없습니다.
fristName // 'geegee' 키의 이름이 변경되었습니다.



디폴트 값을 설정하는 방법입니다. 
객체 안에 키가 존재하지 않는 경우에는 "디폴트 값"을 줍니다.
const { password, birthYear = 1999 } = user;
birthYear // 1999

이미 존재하는 키의 경우에는 디폴트 값을 지정해도 변화가 없습니다.
const { password = 1111, birthYear } = user;
password // 'asd'



239. 매개 변수 분해 : 매개변수에 객체 분해를 이용할 수 있습니다. 

1.
function fullName(user) {
    return `${user.email} ${user.name}` // 기본 형태입니다.
}

2.
function fullName(user) {
    const { email, name } = user;
    return `${email} ${name}` // 분해를 통해 선언한 변수를 이용합니다.
}
const emailAndName = fullName(user) // `${email} ${name}`
3-1.
function fullName({ email, name }) { // 아예 분해를 매개변수에서 수행합니다.
    return `${email} ${name}`
}
fullName(user)
3-2.
function fullName({ email, name = "kim" }) { // 마찬가지로 default 값을 줄 수 있습니다.
    return `${email} ${name}`
}