JavaScript: 객체 리터럴, 구조, 함수, 배열 메서드와 콜백, 최신 기능들

1. 객체(Object) 리터럴: 개요

JS의 객체(Object)는 배열과 마찬가지로 여러 데이터 조각을 저장할 수 있다.

배열과 객체의 차이점은 배열에서는 데이터의 순서가 중요했지만, 객체는 ‘key:value‘의 쌍 이를 property 라고 하는데, 이 property 를 이용해서 데이터를 저장하고 호출할 수 있다.

객체 안에 property 를 선언할 때는 변수, 배열 선언과는 다르게 let, const 가 필요 없고, key 값이 문자열이어도 따옴표를 함께 작성할 필요가 없다.

대신에 ‘:’ 를 사이에 두고, key와 value를 구분하여 정의하면 된다.

const restaurant = {
    name: 'Ichiran Ramen',
    address: `${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
    city: 'Brooklyn',
    state: 'NY',
    zipcode: '11206'
};

2. 객체(Object) 리터럴: property 액세스

객체의 데이터에 액세스하는 방법은 아래와 같이 두 가지 방법이 있다.

• (방법 1) 객체[‘key’] : 깊은 참조.

const years = {2022: 'Good', 2020: 'Bad', birthDay: 1987};

// Good
console.log(years['2022']);

// Bad
console.log(years[2020]);

• (방법 2) 객체.key : 얕은 참조.

const home = {
    address: 'Seodaemoon',
    phoneNumber: '02-359-0123'
};

// Seodaemoon, 02-359-0123
console.log(`${home.address}, ${home.phoneNumber}`);

• 방법 1과 같이 데이터 호출 시, 따옴표와 key 를 함께 작성해야 하는 이유는 무엇일까?

  • 객체에서 만들어진 모든 key 는 문자열로 변환되기 때문에 되도록이면 따옴표와 함께 작성하는 것이 좋다.

• 그렇다면, 방법 1과 방법 2 중에서 어떠한 방법을 사용하는 것이 좋을까?

  • 방법 2를 사용하는 것이 좋다. 가독성이나 속도 관점에서 얕은 참조가 선호되기 때문이다. (단, 모든 key 는 문자열로 변환되어 저장되기 때문에 이러한 작동 원리를 이해하고 있어야 한다.)

  const home = {
      address: 'Seodaemoon',
      phoneNumber: '02-359-0123'
  };
    
  let address = 'Jongro';
    
  // Jongro
  console.log(address);
  // undefined, 오류
  console.log(home[address]);
  // Seodaemoon
  console.log(home[`address`]);
  // Seodaemoon
  console.log(home.address);
  

3. 객체(Object) 리터럴: property 추가, 수정

const midTerms = {Thomas: 'C+', Danielle: 'A'};

// property 추가 가능
midTerms['Ezra'] = 'F';

// prperty 추가 불가능
// midTerms[Shelly] = 'A+';

// property 수정
midTerms['Thomas'] = 'S';

4. 객체(Object) 리터럴: 배열과 객체 네스트 구성

배열과 객체를 같이 섞어 사용하면 기능이 강력해지며, 섞어서 사용하는 경우는 실무에서 매우 흔하게 일어난다.

배열과 객체를 혼합하여 사용하는 경우, 각 기능을 정리할 필요가 있다.

먼저, 배열은 데이터의 순서가 중요한 경우 사용되는 구조이고, 객체는 순서와 상관없이 property로 데이터의 묶음을 저장할 때 사용한다.

아래는 직접 제작해본 방명록 게시판 예시이다.

// 방명록 게시판 시스템
// 방명록(배열)에는 '유저(객체)', '포스트 글(변수)', '게시 날짜(변수)'
// 유저(객체)에는 '이름', '생년월일'

const comments = [
    {
        user: { 
            id : 'ehdrb3663',
            name : '이동규',
            birthDay : 19871016 
        }, 
        txt: '안녕하세요~ 첫 방문입니다.',
        date: '2021-12-01'
    },

    {
        user: { 
            id : 'ejdrb87',
            name : '이동건',
            birthDay : 19870913 
        }, 
        txt: 'Hello New World!',
        date: '2021-12-02'
    },

    {
        user: { 
            id : 'eidung89',
            name : '이동팔',
            birthDay : 20010134 
        }, 
        txt: '새글 남겨요~ 등업해주세요.',
        date: '2021-12-03'
    },
]

// {user: {…}, txt: '안녕하세요~ 첫 방문입니다.', date: '2021-12-01'}
// {user: {…}, txt: 'Hello New World!', date: '2021-12-02'} 
// {user: {…}, txt: '새글 남겨요~ 등업해주세요.', date: '2021-12-03'}
console.log(comments[0], comments[1], comments[2]);

// ehdrb3663 ejdrb87 eidung89
console.log(comments[0].user.id, comments[1].user.id, comments[2].user.id);

// 이동규 이동건 이동팔
console.log(comments[0].user['name'], comments[1].user['name'], comments[2].user['name']);

// 안녕하세요~ 첫 방문입니다. Hello New World! 새글 남겨요~ 등업해주세요.
console.log(comments[0]['txt'], comments[1]['txt'], comments[2]['txt']);

// 2021-12-01 2021-12-02 2021-12-03
console.log(comments[0].date, comments[1].date, comments[2].date);

5. 루프(Loop): for 문

JS 의 for 문은 C와 비슷하다.

// 1: da ba dee da ba daa
// 2: da ba dee da ba daa
// 3: da ba dee da ba daa
// 4: da ba dee da ba daa
// 5: da ba dee da ba daa
// 6: da ba dee da ba daa
// 7: da ba dee da ba daa
// 8: da ba dee da ba daa
// 9: da ba dee da ba daa
// 10: da ba dee da ba daa
for (let i = 1; i <= 10; i++) {
    console.log(`${i}: da ba dee da ba daa`);
}


// 25
// 20
// 15
// 10
// 5
// 0
for (let i = 25; i >= 0; i -= 5) {
    console.log(i);
}

6. 루프(Loop): 무한 반복의 위험성 :(

반복문을 작성할 때, 조건문과 증감식을 치밀하게 계산하지 못하면 제어할 수 없는 무한 반복문이 된다. 반복문 작성 시, 각별히 유의하도록 하자.

// infinity loop! Do not try again
// ===============================
// for (let i = 20; i >= 0; i++) {
//     console.log(i);
// }

7. 루프(Loop): 배열과 for 문 활용

let animials = ['rabbit', 'lion', 'tiger', 'dog', 'cat', 'crocodile', 'mouse', 'monkey', 'horse'];

// 배열을 순서대로 참조
for (let i = 0; i < animials.length; i++) {
    console.log(i, animials[i]);
}

// 배열을 역순으로 참조
for (let i = animials.length-1; i >= 0; i--) {
    console.log(i, animials[i]);
}

8. 루프(Loop): 다차원 배열과 네스트 for 문

// 0번째 줄
//     Kirsten
//     Erik
//     Namita
// 1번째 줄
//     Geoffrey
//     Juanita
//     Antonio
//     Kevin
// 2번째 줄
//     Yuma
//     Sakura
//     Jack
//     Erika
const seatingChart = [
    ['Kirsten', 'Erik', 'Namita'],
    ['Geoffrey', 'Juanita', 'Antonio', 'Kevin'],
    ['Yuma', 'Sakura', 'Jack', 'Erika'],
];

for (let i = 0; i < seatingChart.length; i++) {
    console.log(`${i}번째 줄`);
    for (let j = 0; j < seatingChart[i].length; j++) {
        console.log(`   ${seatingChart[i][j]}`);
    }
}

9. 루프(Loop): while 문

JS 의 while 문은 C와 비슷하다.

[예제 1]

// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// 10
let i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}

[예제 2]

const passWord = '3663';

let guess = prompt('비밀번호를 입력해주세요.');
while(passWord != guess) {
    guess = prompt('비밀번호가 틀렸습니다. 다시 입력해주세요.');
}
console.log('Logged In');

[예제 3]

let maximum = parseInt(prompt('Enter the maximum number!'));

const targetNum = Math.floor(Math.random() * maximum) + 1;
console.log(targetNum);

let guess = prompt('What is my number?');
while (targetNum != guess) {
    if (guess == 'q') break;
    if (targetNum > guess) {
        guess = parseInt(prompt('UP!'));
    }
    else {
        guess = parseInt(prompt('DOWN!'));
    }
}
console.log("Congulaturations!");

10. 루프(Loop): iterable 객체의 반복, for … of 문

iterable 참조 링크

for … of 문과 iterable 객체를 함께 사용하면, 쉽게 iterable 객체에 있는 모든 요소를 탐색할 수 있다.

여기서 iterable 객체란, ‘반복 가능한’ 이라는 의미로써 iterable 객체의 종류는 아래와 같다.

• String
• Array
• TypedArray
• Map
• Set

하지만, 객체(Object)는 iterable 객체가 아니기 때문에, for .. of 문을 활용한 탐색이 불가함을 명심하자.

[예제 1]

// String
for (let word of "HELLO") {
    console.log(word);
}

// Array
for (let num of [1, 2, 3, 4]) {
    console.log(num);
}

[예제 2]

const seatingChart = [
    ['Kristen', 'Erik', 'Namita'],
    ['Geoffrey', 'Juanita', 'Antonio', 'Kevin'],
    ['Yuma', 'Sakura', 'Jack', 'Erika'],
];

// 다차원 배열의 모든 요소 탐색
for (let row of seatingChart) {
    for (let student of row) {
        console.log(student);
    }
}

11. 루프(Loop): 객체(Obejct)의 반복, for … in 문

for .. in 문은 for .. of 에 비해 많이 사용되지 않지만 객체(Object)를 탐색할 때 주로 사용된다.

for .. in 과 객체를 함께 사용하면, 객체의 key 를 순서대로 탐색할 수 있다.

이렇게 순서대로 탐색한 key를 가지고, value에도 접근할 수 있다.

const testScores = {
    keenan: 80,
    damon: 67,
    kim: 89,
    shawn: 91,
    marlon: 72,
    dwayne: 77,
    nadia: 83,
    elvira: 97,
    diedre: 81,
    vonnie: 60,
}

// keenan: 80
// damon: 67
// kim: 89
// shawn: 91
// marlon: 72
// dwayne: 77
// nadia: 83
// elvira: 97
// diedre: 81
// vonnie: 60
for (let name in testScores) {
    console.log(`${name}: ${testScores[name]}`);
}

• Object.values(객체) : 객체의 value를 순서대로 추출하여 배열로 만든다. (그런데, 막상 typeof를 찍어보면, 배열이 아닌 Object로 찍힌다…)

const testScores = {
    keenan: 80,
    damon: 67,
    kim: 89,
    shawn: 91,
    marlon: 72,
    dwayne: 77,
    nadia: 83,
    elvira: 97,
    diedre: 81,
    vonnie: 60,
}

// 객체의 value를 순서대로 추출하여 배열로 구성
let name_array = Object.values(testScores);

// 80
// 67
// 89
// 91
// 72
// 77
// 83
// 97
// 81
// 60
for (let name of name_array) {
    console.log(name);
}

[연습-미니 프로젝트]

// ================기능=================
// 'quit'을 입력할 때까지, 'What would you like to do?' 묻고 입력 대기
// 'new'-> 'Enter new todo' 묻고 입력대기 -> 콘솔에 '입력한 값 + added to list' 메시지 출력
// 'list' -> 'index 값: value' 출력
// 'delete' -> 'Enter index of todo to delete' 묻고 입력대기 -> 콘솔에 '입력한 값 + Removed' 메시지 출력
// 'quit' -> 콘솔에 'OK, YOU QUIT THE APP' 메시지 출력

let input = prompt('What would you like to do?');
const toDoList = [];

while(input !== 'quit') {
    if (input === 'new') {
        let tmp = prompt('Enter new todo');
        console.log(`${tmp} added to list`);
        toDoList.push(tmp);
        input = '';
    }
    else if (input === 'list') {
        console.log('**********');
        for (let i = 0; i < toDoList.length; i++) {
            console.log(`${i}: ${toDoList[i]}`);
        }
        console.log('**********');
        input = '';
    }
    else if (input === 'delete') {
        let del_i = parseInt(prompt('Enter index of todo to delete'));
        console.log(`${toDoList[del_i]} Removed`);
        toDoList.splice(del_i, 1);
        input = '';
    }
    input = prompt('What would you like to do?');
}
console.log('OK, YOU QUIT THE APP');

12. 함수(fuction): 종류

[예시 1 - 인수, 반환이 없는 함수]

// <3
function printHeart() {
    console.log('<3');
}

printHeart();

[예시 2 - 인수가 하나이고, 반환이 없는 함수]

// I HATE BEETS
// I HATE BEETS
// I HATE BEETS
function rant(message) {
    for (let i = 0; i < 3; i++) {
        console.log(message.toUpperCase());
    }
}

rant('I hate beets');

[예시 3 - 인수가 여러개이고, 반환이 없는 함수]

function repeatGreetings(message, repeatTimes) {
    for (let i = 0; i < repeatTimes; i++) {
        console.log(message);
    }
}

// Hi
// Hi
// Hi
// Hi
// Hi
repeatGreetings('Hi', 5);

[예시 3 - 인수가 여러개이고, 반환이 없는 함수]

function add(num1, num2) {
    let res;
    if (typeof(num1) !== 'number' || typeof(num2) !== 'number' ) {
        res = false;
        console.log(res);
        return res;
    }
    else {
        res = num1 + num2;
        console.log(res);
        return res; 
    }
}

// 6
add(1, 5);
// false
add('a', 1);

13. *함수(fuction): 표현식

이름이 없는 함수를 선언하여 변수 안에 저장하는 방식이다. 이 방식을 사용하면, 함수를 인수로 전달 받거나, 함수를 반환할 수 있게 된다.

반드시 함수 표현식을 기억하고 익숙하게 사용하도록 하자.

const add = function(x, y) {
    return x + y;
}

// 3
console.log(add(1, 2));

14. 함수(fuction): 고차 함수

고차 함수의 종류:

• 다른 함수를 인수로 받는 함수
• 함수를 반환하는 함수

[예시 1 - 다른 함수를 인수로 받는 함수]

function rollDie() {
    const roll = Math.floor(Math.random() * 6) + 1;
    console.log(roll);
}

// 고차 함수 정의
function callTenTimes(f) {
    for (let i = 0; i < 10; i++) {
        f();
    }
}

callTenTimes(rollDie);

[예시 2 - 함수를 반환하는 함수]

function makeBetweenNum(min, max) {
    return function(num) {
        return num >= min && num <= max;
    }
}

const isAdult = makeBetweenNum(19, 64);
const isSenior = makeBetweenNum(65, 120);

// false
console.log(isAdult());
// true
console.log(isAdult(20));
// false
console.log(isAdult(18));


// false
console.log(isSenior());
// false
console.log(isSenior(121));
// true
console.log(isSenior(120));

15. 함수(fuction): 메서드 정의하기

메서드는 객체(Object)의 key에 종속된 함수를 의미한다. 이 때, function 키워드를 생략하여 단축할 수도 있다.

const myMath = {
    PI: 3.141592,

    // 객체에 종속된 함수 == 메서드
    square: function (num) {
        return num*num;
    },

    // 메서드는 function 키워드를 생략할 수 있음
    cube(num) {
        return num ** 3;
    },
}

let myPI = myMath.PI;
let mySqaure = myMath.square(5);
let myCube = myMath.cube(6);

// 3.141592 25 216
console.log(myPI, mySqaure, myCube);

16. 콜백 배열 메서드(1): .forEach()

forEach 문은 함수를 인수로 받아들인다. 이 때, 인수로 받아지는 함수를 ‘콜백 함수’라고 한다.

배열, 객체(Object) 안의 요소 각각에 대해 함수와 코드를 한번 씩 실행한다.

[예제 1 - 배열을 콜백하는 예시]

const numbers = [1, 2, 3, 4, 5, 6];

// 1
// 2
// 3
// 4
// 5
// 6
numbers.forEach(function(el) {
    console.log(el);
})

// 2
// 4
// 6
numbers.forEach(function(el){
    if (!(el % 2))  console.log(el);
})

[예제 2 - 객체(Object)를 콜백하는 예시]

const moives = [
    {
        title: 'Amadeus',
        score: 99
    },
    {
        title: 'Stand By Me',
        score: 85
    },
    {
        title: 'Parasite',
        score: 95
    }
]

moives.forEach(function(movie) {
// Amadeus - 99 / 10
// Stand By Me - 85 / 10
// Parasite - 95 / 10
    console.log(`${movie['title']} - ${movie['score']} / 10`)
})

17. 콜백 배열 메서드(2): .map()

map은 forEach와 마찬가지로 함수를 인수로 받아들이고, 배열, 객체(Object) 안의 요소 각각에 대해 함수와 코드를 한번 씩 실행하고 반환된 콜백값을 이용해서 새로운 배열을 생성할 수 있다.

[예제 1 - 배열을 콜백하는 예시]

const numbers = [1, 2, 3, 4, 5, 6];

// 배열(numbers)의 요소를 변경하지는 않음.
numbers.map(function(number) {
    return number * 2;
})

// 배열(numbers)에서 반환값을 변수(new_numbers)에 맵핑.
const doubles = numbers.map(function(number){
    return number * 2;
})

// [2, 4, 6, 8, 10, 12]
console.log(doubles);

[예제 2 - 객체(Object)를 콜백하는 예시]

const movies = [
    {
        title: 'Amadeus',
        score: 99
    },
    {
        title: 'Stand By Me',
        score: 85
    },
    {
        title: 'Parasite',
        score: 95
    }
]

const new_movies = movies.map(function(movie){
    return `${movie['title']} - ${movie['score']} / 10`;
})

// ['Amadeus - 99 / 10', 'Stand By Me - 85 / 10', 'Parasite - 95 / 10']
console.log(new_movies);

18. *화살표 함수(1): 개요

(강의자가 말하길 반드시 익혀두었으면 하는 내용이라고 한다.)

화살표 함수는 함수를 정의하는 최신 기술이다.

function 키워드를 사용할 필요 없이, 함수 표현식의 형태(이름없는 함수를 정의하여 변수에 저장하는 방식)로 직관적으로 정의할 수 있다.

앞으로 왠만한 함수는 화살표 함수로 정의하고 사용하도록 하자.

// 함수 표현식
// const add = function(x, y) {
//     return x + y;
// }

// 화살표 함수
const add = (x, y) => {
    return x + y;
}

// 12
console.log(add(10, 2));


//  repeatTime 만큼 주사위값을 반복 출력하는 함수
const rollDie = (reapeatTime) => {
    for (let i = 0; i < reapeatTime; i++)   console.log(Math.floor(Math.random() * 6) + 1); 
}

rollDie(5);

19. *화살표 함수(2): return 생략 방법

함수의 실행부를 정의할 때, 중괄호( {} )를 사용하는데, ‘소괄호( () )’로 변경하면 명시적으로 실행부의 코드가 반환값임을 JS에 알려줄 수 있다.

이 때 주의할 점은 아래와 같이 소괄호로 return 문 생략 후, 반환값 뒤에 ‘ ; ‘ 을 붙여주면 컴파일 에러가 발생하니 기억해두자.

const rollDie = () => (
    Math.floor(Math.random() * 6) + 1; // <- ; 을 붙여 코드가 실행되지 않는다.
)

const rollDie = () => (
    Math.floor(Math.random() * 6) + 1 // 정상 실행
)

또는 아예 소괄호를 생략해서 사용할 수도 있다.

const add = (x, y) => x + y;

// 3
console.log(add(1, 2));

20. 타이머: setTimeout & setInterval

• setTimeout : Delay 함수이다.

console.log('Are you there?')

// 3초 후 출력
setTimeout(() => {
    console.log("Yeah I'm here!")
}, 3000)

• setInterval : ms초 간격으로 반복하는 함수이다. 콘솔에 clearInterval(id)를 입력하면, 반복이 정지된다.

// 변수(const id)를 생략해도 작동하지만, 반복을 멈추기 위해 함수 표현식으로 정의
const id = setInterval(() => {
    console.log(Math.random())
}, 1000)

21. 콜백 배열 메서드(3): .filter()

filter 는 배열에서 요소를 필터링하여 부분 집합을 모아 새 배열을 만드는데 사용한다.

그렇게 하기 위해 콜백을 전달하고 이 콜백이 참이나 거짓을 반환하는 경우, true 값을 반환하는 요소만을 수집한다.

콜백으로 function을 사용하면, 에러가 발생하니 유념하자.

[예제 1]

const numbers = [1, 2, 3, 4, 5, 6];

// [1, 2, 3]
const lowerNumbers = numbers.filter((number) => { return number < 4})

[예제 2]

const movies = [
    {
        title: 'Amadeus',
        year: 1987,
        score: 34,
    },
    {
        title: 'Avengers',
        year: 2019,
        score: 99
    },
    {
        title: 'Stand By Me',
        year: 1999,
        score: 60
    },
    {
        title: 'Parasite',
        year: 2021,
        score: 95
    },
]

// {title: 'Avengers', year: 2019, score: 99}
// {title: 'Parasite', year: 2021, score: 95}
const newestMovies = movies.filter(movie => movie['year'] > 2010)

// {title: 'Amadeus', year: 1987, score: 34}
const badMovies = movies.filter((movie) => movie['score'] < 50)

[심화 예제]

function validUserNames(usernames) {
    return usernames.filter(function(username) {
        if (username.length < 10)   return username;
    })
}

// ["mark", "carrie98", "MoanaFan"]
console.log(validUserNames(['mark', 'staceysmom1978', 'q29832128238983', 'carrie98', 'MoanaFan']));

22. 콜백 배열 메서드(4): .every() & .some()

• .every() : 배열 내의 모든 요소가 every를 통해 테스트를 거치는데, 모든 요소가 해당 함수로 전달되어 참을 반환하면 호출된 전체 every 함수가 참을 반환.

const movies = [
    {
        title: 'Amadeus',
        year: 1987,
        score: 34,
    },
    {
        title: 'Avengers',
        year: 2019,
        score: 99
    },
    {
        title: 'Stand By Me',
        year: 1999,
        score: 60
    },
    {
        title: 'Parasite',
        year: 2021,
        score: 95
    },
]

// 요소에서 movie['score']가 모두 90점을 넘는지 확인
const isAllHigher90 = movies.every((movie) => movie['score'] > 90) // => false

// 요소에서 movie['score']가 모두 30점을 넘는지 확인
const isAllHigher30 = movies.every((movie) => movie['score'] > 30) // => true

• .some() : 배열 내의 모든 요소가 every를 통해 테스트를 거치는데, 단 하나의 요소가 해당 함수로 전달되어 참을 반환하기만해도 호출된 전체 every 함수가 참을 반환.

// 요소에서 movie['score']가 하나라도 98점을 넘는지 확인
const isAnyHigher98 = movies.some((movie) => movie['score'] > 98) // => true

[심화 예제]

// 배열의 모든 요소가 짝수인지 판별
function allEvens(numbers) {
    return numbers.every((num) => num % 2 == 0)
}

allEvens([2,4,6,8]) //true
allEvens([1,4,6,8]) //false
allEvens([1,2,3]) //false

23. 콜백 배열 메서드(5): .reduce()

배열의 각 요소에 대해 reducer function을 실행하여 단일 값을 생성한다.

복수 개의 인수와 함께 사용한다.

[예제 1 - 배열의 총합을 구하는 함수]

const numbers = [1, 2, 3, 4, 5]

const sum = numbers.reduce((total, number) => {
    // number
    console.log(typeof(total));
    return total + number})

// 15
console.log(sum);

[예제 2 - 배열의 최대값을 구하는 함수]

const numbers = [92, 3, 5, -1, 100, 25, 66]

const maxNumber = numbers.reduce((tmp, number) => {
    // number
    console.log(typeof(tmp));
    if (tmp < number) {
        tmp = number;
    }
    return tmp;
})

// 100
console.log(maxNumber);

[예제 3 - 객체의 최고 점수를 받은 영화 제목]

const movies = [
    {
        title: 'Amadeus',
        year: 1987,
        score: 34,
    },
    {
        title: 'Avengers',
        year: 2019,
        score: 99
    },
    {
        title: 'Stand By Me',
        year: 1999,
        score: 60
    },
    {
        title: 'Parasite',
        year: 2021,
        score: 95
    },
]

const highestRated = movies.reduce((bestMovie, currMovie) => {
    // object
    console.log(typeof(bestMovie));
    if (bestMovie.score < currMovie.score) {
        return currMovie;
    }
    return bestMovie;
})

// Avengers
console.log(highestRated.title);

• 인수를 하나더 추가하여, .reduce()의 인수값을 초기화할 수 있다.

const numbers = [1, 2, 3, 4, 5]

const sum = numbers.reduce((total, number) => {
    return total + number}, 10) // <- total = 10 과 같음

// 25, 총합은 15이나 total이 10으로 초기화된 결과
console.log(sum);

24. 최신 기능들(1): 디폴트 매개 변수

python과 비슷하게 JS에서 함수를 정의할 때, 매개 변수에 디폴트 값을 미리 정의할 수 있다.

주의할 점은 함수를 콜할 때, 인수의 순서와 매개 변수의 순서를 신경써야 한다.

const greeting = (name, words = 'hello') => console.log(`${name}, ${words}!!`);

// Michael, hello!!
greeting('Michael');

// Leo, how are you?!!
greeting('Leo', 'how are you?')

// undefined, hello!!
greeting();

// Nice to meet you, hello!!
greeting('Nice to meet you');

25. 최신 기능들(2): 함수 호출 시, 스프레드 구문(…)

iterable 객체 참조 링크

반복 가능한 객체인 iterable 객체를 함수 호출하면, 요소 하나하나를 공백 단위로 분리하여 보여준다.

nums = [1, 2, 3, 4, 5];
// 1 2 3 4 5
console.log(...nums);

city = 'Seoul';
// S e o u l
console.log(...city);

26. 최신 기능들(3): 배열 리터럴, 스프레드 구문(…)

만약 배열과 배열을 결합하거나, 배열을 확장하려고 할 때, 배열의 이름 앞에 스프레드 구문(…)을 추가하면 확장할 수 있다.

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const conNum = [...num1, ...num2, 7];

// [1, 2, 3, 4, 5, 6, 7]
console.log(conNum);

27. 최신 기능들(4): 객체, 스프레드 구문(…)

객체와 스프레드 구문을 함께 사용하면, 객체의 변형없이 복사하거나 복사한 콘텐츠를 확장할 수 있어 매우 유용하다.

const feline = { legs: 4, family: 'Felidae'};
const canine = { family: 'Caninae', furry: true};

// 스프레드를 통한 객체 복사와 확장
// {family: 'Caninae', furry: true, isPet: true}
const dog = { ...canine, isPet: true};
// {legs: 4, family: 'Felidae', genus: 'Panthera'}
const lion = { ...feline, genus: 'Panthera'};

단, 스프레드를 통해 복사하여 객체를 결합할 때, 같은 property가 있는 경우 가장 마지막에 스프레드한 객체의 property 값이 저장된다.

// 스프레드를 통한 객체 복사와 결합
// {legs: 4, family: 'Caninae', furry: true}
const catDog = { ...feline, ...canine};