프론트엔드 개발일지 #18 - javascript 최신 기능들

매개변수

매개변수란 function (매개변수) {} 여기 들어가는 친구인데, 디폴트 값도 줄 수 있다.

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

//이걸 이렇게 새롭게 적어주면,
function rollDie(numSides = 6) {
    return Math.floor(Math.random() * numSides) + 1
}

그리고 매개 변수는 순서가 아주 중요하다 !

function greet(msg, person) {
  return `${mag}, ${person}!`
}
greet("Hello","Ara") // Hello, Ara!
greet("Ara") // undefined
//자바스크립트는 아라가 사람인걸 모르기때문에 순서가 중요하다.
//따라서 디폴트 값이 있는 변수를 뒤에 넣어줘야한다.

function greet(person, msg="Hey there") {
  return `${msg},${person}!`
} 
greet("Ara") // Hey there, Ara!

spread

배열과 같이 반복 가능한 객체를 전개 구문을 사용해서 확장한다. 함수로 호출할 경우에는 0개 이상읜 인수로, 배열 리터럴에서는 요소로 확장한다. 그리고 객체 리터럴의 경우 객체 표현식은 0개 이상의 키-값 쌍으로 확장 할 수 있다.

// 함수
const nums = [13, 4, 5, 21, 3, 3, 1, 2, 7, 6, 4, 2, 53456];

Math.max(nums) //NaN
Math.max(...nums) //53456

// 배열
const cats = ['Blue', 'Scout', 'Rocket'];
const dogs = ['Rusty', 'Wyatt'];

const allPets = [...cats, ...dogs]; 
//['Blue', 'Scout', 'Rocket','Rusty', 'Wyatt']

// 객체 : 객체는 키-값 쌍으로 이루어져 있고, 같은 키가 있을 때는 
//나중에 나온 키의 값이 덮어씌워집니다.
const feline = { legs: 4, family: 'Felidae' };
const canine = { isFurry: true, family: 'Caninae' };

catDog;
//{legs: 4,family: 'Caninae',isFurry: true}
{ ...caline, ...feline }
//{isFurry: true,family: 'Felidae',legs: 4}

//하나더 예를 들자면,
{...[2,4,6,8]}
//{0:2, 1:4, 2:6, 3:8}
//키-값

{..."HII"}
//{0:H,1:I,2:I}

// 복사를 할 때도,
const dataFromForm = {
    email: 'blueman@gmail.com',
    password: 'tobias123!',
    username: 'tfunke'
}
const newUser = { ...dataFromForm, id: 2345, isAdmin: false }
//{email: "blueman@gmail.com",password: "tobias123!",username: "tfunke",id: 2345, isAdmin: false}

Rest 매개변수

함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.함수의 마지막 매개변수 앞에 "..."를 붙이면 (사용자가 제공한) 모든 후속 매개변수를 표준 JavaScript 배열에 넣도록 지정한다. 마지막 매개변수만 나머지 매개변수로 설정할 수 있다.

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"] <-- 배열임에 주목

function sum () {
return arguments.reduce((total, el) => total + el)
}
//작동하지않는다.
//인수는 객체가 아니므로 이렇게 적으면 안된다.

function sum(...nums) {
    return nums.reduce((total, el) => total + el)
}
//nums는 매개변수의 이름이기때문에 작동한다.
//함수 정의에는 하나의 ...만 존재할 수 있다.

function raceResults(gold, silver, ...everyoneElse) {
    console.log(`GOLD MEDAL GOES TO: ${gold}`)
    console.log(`SILVER MEDAL GOES TO: ${silver}`)
    console.log(`AND THANKS TO EVERYONE ELSE: ${everyoneElse}`)
}
//나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 한다.

나머지 매개변수와 arguments 객체 사이에는 세 개의 주요 차이가 있습니다.

1. arguments 객체는 실제 배열이 아니다. 그러나 나머지 매개변수는 Array 인스턴스이므로 sort, map, forEach, pop 등의 메서드를 직접 적용할 수 있다.
2. arguments 객체는 callee 속성과 같은 추가 기능을 포함한다.
3. ...restParam은 후속 매개변수만 배열에 포함하므로 ...restParam 이전에 직접 정의한 매개변수는 포함하지 않는다. 그러나 arguments 객체는, ...restParam의 각 항목까지 더해 모든 매개변수를 포함한다.

배열 분해

값을 해체하고 꺼내고 선정하는 간편한 방식이다. 해체해서 별개의 변수 형태로 만들 수 있다.

const scores = [929321, 899341, 888336, 772739, 543671, 243567, 111934];

const highScore = score[0];
const secondHighScore = score[1];

const [gold, silver] = score;
//배열을 지워서 꺼내는게 아니라 기존 배열에서 꺼내와서 복사해서 쓰는것

객체 분해

const user = {
    email: 'harvey@gmail.com',
    password: 'sCoTt1948sMiTh',
    firstName: 'Harvey',
    lastName: 'Milk',
    born: 1930,
    died: 1978,
    bio: 'Harvey Bernard Milk was an American politician and the first openly gay elected official in the history of California, where he was elected to the San Francisco Board of Supervisors',
    city: 'San Francisco',
    state: 'California'
}

const user2 = {
    email: 'Stacy@gmail.com',
    firstName: 'Stacy',
    lastName: 'Gonzalez',
    born: 1987,
    city: 'Tulsa',
    state: 'Oklahoma'
}

const firstName = user. firstName; // "Harvey"
const lastName + user.lastName;// "Milk"
const email = user.email // "harvey@gmail.com"

//하나하나 불러오는것보다,

const {email, firsiName, lastName, City, bio} = user;
//객체를 기반으로 한 다섯개의 새 변수를 만들어준다.

//새로운 이름을 지어줄수도 있다
const {born:birthYear, died:deathYear } = user;

const { city, state, die } = user2;
//die는 undefined

const silly = user2.silly;
//silly 값이 없기 때문에 undefined


const { city, state, die = 'N/A' } = user2;
//값이 없는 변수에 디폴트 값을 준다.

const {born:birthYear, died:deathYear = 'N/A'} = user;
//user는 died값이 있기때문에 디폴트값을 줘도 1978 반환

매개 변수 분해

함수를 정의할 때 괄호 안에 매개변수를 작성하면 전달되는 값의 구조를 분해하여 전달 할 수 있다. 주로 객체에 사용되는 방법이다.

const user = {
    email: 'harvey@gmail.com',
    password: 'sCoTt1948sMiTh',
    firstName: 'Harvey',
    lastName: 'Milk',
    born: 1930,
    died: 1978,
    bio: 'Harvey Bernard Milk was an American politician and the first openly gay elected official in the history of California, where he was elected to the San Francisco Board of Supervisors',
    city: 'San Francisco',
    state: 'California'
}

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

//이름 정보만 필요하다면 매개 변수에서 구조 분해를 할 수 있다.
function fullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`
}

//평점으로 영화를 분류한다고 치면,
const movies = [
    {
        title: 'Amadeus',
        score: 99,
        year: 1984
    },
    {
        title: 'Sharknado',
        score: 35,
        year: 2013
    },
    {
        title: '13 Going On 30',
        score: 70,
        year: 2004
    },
    {
        title: 'Stand By Me',
        score: 85,
        year: 1986
    },
    {
        title: 'Waterworld',
        score: 62,
        year: 1995
    },
    {
        title: 'Jingle All The Way',
        score: 71,
        year: 1996
    },
    {
        title: 'Parasite',
        score: 95,
        year: 2019
    },
    {
        title: 'Notting Hill',
        score: 77,
        year: 1999
    },
    {
        title: 'Alien',
        score: 90,
        year: 1979
    }
  
movies.filter((movie) => movie.score >= 90)
movies.filter(({ score }) => score >= 90)

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


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