Section 23: JavaScript의 최신 기능들

1. 기본 매개 변수

• 이전까지 함수를 사용할 때 매개 변수는 선택사항이었다.
• 이번에는 매개 변수를 default 값으로 설정해보자.

예제 1 : default 매개변수를 사용하지 않은 함수

// 주사위의 눈을 입력 받아 랜덤으로 숫자 출력
function rollDice(num) {
    // 만약 매개변수 값을 전달받지 못하면 1~6의 눈 출력
    if(num === undefined) num = 6;
    return Math.floor(Math.random() * num) + 1;
}

rollDice() // 1~6의 숫자 중 하나의 숫자가 출력된다.

예제 2 : default 매개변수를 사용한 함수

// 매개변수의 기본 값을 6으로 설정한다.
function rollDice(num = 6) {
    return Math.floor(Math.random() * num) + 1;
}

rollDice() // 1~6의 숫자 중 하나의 숫자가 출력된다.

예제 3: default 매개변수의 주의점

// 항상 인자로 받을 매개변수를 default 매개변수보다 앞에 명시해주도록 하자.
function greet(say='반가워!!!', nickname) {
    console.log(`${say} ${nickname}`);
}

greet('뚝딱아') // 뚝딱아 undefined

 

2. 함수 호출 시의 spread 구문

• spread 구문이란 반복 가능한 배열과 같은 객체를 0개 이상의 요소로 확장한다.
• spread 구문을 사용하면 객체를 변경하지 않고 복사할 수 있다.
• 함수의 인수 값에 특정 키워드를 통해 spread 구문을 넣어보자.

예제 1

const nums = [9, 3, 2, 8];

// 배열 자체의 메모리 참조 값이 인수로 들어간다.
Math.max(nums); // NaN

// 배열의 각 요소들이 인수로 들어간다.
Math.max(...nums); // 9

예제 2

console.log('hello'); // hello

// 인덱스를 가지고 있는 문자열 또한 배열처럼 spread 구문을 사용할 수 있다.
// 함수의 인수로 문자열을 각각 문자로 쪼개 넣은 결과와 같다.
console.log(...'hello'); // h e l l o
 
console.log('h','e','l','l','o'); // h e l l o

 

3. 배열 리터럴 spread 구문

예제 

const cats = ['밍키', '복실이'];
const dogs = ['백구', '까몽이', '순철이'];

// 두 개 이상의 배열을 합쳐 복사하기
const allPets = [...cats, ...dogs];

allPets // ['밍키', '복실이', '백구', '까몽이', '순철이']

// 강아지 '흑구' 추가하기
[...cats, ...dogs, '흑구']; // ['밍키', '복실이', '백구', '까몽이', '순철이', '흑구']

 

4. 객체 spread 구문

• 객체를 복사하거나 새로운 객체를 만들 수 있다.

예제 

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

// 객체를 복사해 속성 값에 'isPet'을 추가
const dog = { ...canine, isPet: true};
// {family: 'Caninae', furry: true, isPet: true}

// 객체를 복사해 속성 값에 'genus'을 추가
const lion = { ...feline, genus: 'Panthera'};
// {legs: 4, family: 'Felidae', genus: 'Panthera'}

// 두 객체를 결합하여 복사
const catDog = { ...feline, ...canine};
// {legs: 4, family: 'Caninae', furry: true}

 

5. Rest 매개 변수

• rest 매개 변수는 spread 구문과는 전혀 다르다.
• 인수 객체는 유사 배열 객체라고 부른다.
• 인덱스를 사용하여 접근하고 배열 메서드를 사용할 수 없다.
• 인수 객체는 함수로 전달된 모든 인수를 가지고 있다.

예제 1 : 인수 객체

function sum() {
    // arguments 객체는 인수 전체를 가르킨다.
    // 배열이 아니기 때문에 배열 메서드를 사용할 수 없다.
    const total = arguments.reduce((sum, num) => sum + num, 1);
    // Arguments(4) [1, 3, 5, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}

sum(1, 3, 5, 7);

예제 2: rest 매개 변수1

// 인수 객체를 사용했을 때와는 달리 
// rest 매개 변수로 배열 메서드 사용이 가능하다.
function sum(...nums) {
    return nums.reduce((sum, num) => sum + num, 1);
}

sum(1, 3, 5, 7) // 17

예제 3: rest 매개 변수2

function raceResults(gold, silver, ...others) {
    console.log(`대망의 금메달 수여자는 ${gold}님!!!`);
    console.log(`축하드립니다! 은메달 수여자는 ${silver}님`);
    console.log(`참가해 주신 ${others} 여러분 모두 수고하셨습니다!!`);
}

raceResults('나빨라', '한번에', '러닝광', '늘달려', '심장둘');

// 대망의 금메달 수여자는 나빨라님!!!
// 축하드립니다! 은메달 수여자는 한번에님
// 참가해 주신 러닝광,늘달려,심장둘 여러분 모두 수고하셨습니다!!

 

 

6. 배열 분해

• 비구조화 할당을 통해 배열 값이나, 객체의 속성 값을 변수에 담을 수 있다.

예제 1

const scores = [878865, 766588, 987544, 935378, 843391, 790542];

// const 배열의 첫번째 요소를 first 변수에 할당한다.
// ...
// others 변수는 네번째 요소부터 마지막 요소가 들어있는 배열이 할당되었다.
const [first, second, third, ...others] = scores;

first // 878865
second // 766588
third // 987544
others // [935378, 843391, 790542]

 

7. 객체 분해

• 이번에는 객체를 분해해보자.

예제 1: 객체 분해

const user = {
	email: 'test@gmail.com',
	password: 'sEcRet777',
	firstName: '길동',
	lastName: '홍',
	born: 1932,
	died: 1977,
	city: 'Incheon',
	country: 'South Korea'
}

// 아래의 코드와 같은 코드
// const email = user.email; test@gmail.com

// 변수 선언 순서와 무관하게 변수명과 객체의 속성 값만 같으면 할당 받을 수 있다.
const { email, firstName, lastName, city, country } = user;

email // 'test@gmail.com'
firstName // '길동'
lastName // '홍'
city // 'Incheon'
country // 'South Korea'

const { born: birthYear, died: deathYear } = user;
birthYear // 1932
deathYear // 1977

예제 2: 객체 분해 (default 속성 추가)

const user2 = {
	email: 'test2@gmail.com',
	firstName: '산범',
	lastName: '장',
	born: 1913,
}

// user2에 존재하지 않는 속성을 할당 받을 때 'N/A'값을 default 값으로 할당 받는다.
// 존재하는 속성 값을 할당 받는다면 default 값은 무시된다.
const { born, died = 'N/A'} = user2
born // 1913
died // N/A

 

8. 매개 변수 분해

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

예제 1: 매개 변수 분해

const user = {
	email: 'test@gmail.com',
	password: 'sEcRet777',
	firstName: '길동',
	lastName: '홍',
	born: 1932,
	died: 1977,
	city: 'Incheon',
	country: 'South Korea'
}

function fullName({ firstName, lastName }) {
	console.log(`${firstName} ${lastName}`);
}

fullName(user); // 길동 홍

예제 2: 매개 변수 분해

const movies = [
    {
        title: '신세계',
        score: 8.7
    },
    {
        title: '극한직업',
        score: 8.3
    },
    {
        title: '타짜',
        score: 9.6
    },
    {
        title: '엑시트',
        score: 8.85
    },
    {
        title: '설국열차',
        score: 9.1
    },
]

const movieInfo = movies.map(({title, score}) => `${title}의 평점은 ${score}점`);
// ['신세계의 평점은 8.7점', '극한직업의 평점은 8.3점', '타짜의 평점은 9.6점', '엑시트의 평점은 8.85점', '설국열차의 평점은 9.1점']