Javascript 부시기 - 2

웹 개발 실전 프로젝트 스터디 - 1주차

181. 참조 타입과 동일성 테스트

배열에서 === 와 == 의 역할

• 배열에서 삼중/이중 등호 연산자는 배열의 값을 비교하지 않는다.
• 메모리에서 참조(reference)되는 값을 비교한다.
• 화살표가 향하는 개념

• 배열의 비교는 변수 자체에 저장된 콘텐츠가 아닌 참조(주소)로 작용

182. 배열 + const

• 배열을 생성할 때 const 를 사용할 수 있다.

• const로 만든 배열은 원시 타입과는 다르게 참조(주소)를 저장한 것.
• 껍질(shell)은 그대로지만 내용(contents)은 바뀔 수 있다.

• 참조를 바꾸거나 재할당할 수는 없지만 배열 안의 콘텐츠는 원하는대로 변경할 수 있다.

183. 다차원 배열

nested array

• 중첩 배열의 데이터에 접근하려면 대괄호로 연결한다.

185. 객체 리터럴(Object Literals) 개요

• 객체도 배열처럼 일종의 구조에 여러 데이터 조각을 저장하게 해준다.

• 배열과 달리 데이터 순서(order)가 아닌 키(key)-값(value)의 쌍으로 이루어진 프로퍼티를 이용해 데이터를 저장한다.

• 프로퍼티는 순서나 우선순위가 없다.

186. 객체 리터럴 생성하기

• 객체 리터럴은 중괄호 {} 를 써서 만드는 키-값 쌍으로 저장되는 데이터 구조를 의미한다.
• 객체 라는 말은 좀 더 범용적으로 쓰인다.
• typeof [] 가 Object로 나왔던 것을 생각하기

• 각 프로퍼티는 쉼표 , 로 구분한다.

const product = {
    name: "Gummy Bears",
    inStock: true,
    price: 1.99,
    flavors: ["grape", "apple", "cherry"]
}

187. 객체 외부 데이터에 액세스하기

대괄호 표기법

• 대괄호와 큰따옴표 쓰기 object["key"]

• 대괄호 안에 표현식을 넣을 수 있다.

• 대괄호 내에서 따옴표로 감싼 이름은 프로퍼티 키로 해석되고, 감싸지 않은 이름은 식별자로 해석된다.

• 동적으로 프로퍼티에 접근할 때는 따옴표로 감싸지 않는다.

마침표 표기법

• 점 구문 쓰기 object.key

• 객체에서 만드는 모든 키들은 문자열로 변환된다. (기호 제외)

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

//YOUR CODE GOES DOWN HERE:
const { address, city, state, zipcode } = restaurant;
const fullAddress = `${address}, ${city}, ${state} ${zipcode}`;

188. 객체 수정하기

• 배열도 키가 숫자인 객체로 생각할 수 있다.

189. 배열과 객체 네스트 구성하기

• 배열 안에 객체를 넣을 수도 있고, 객체 안에 배열을 넣을 수도 있다.

• json

191. For 루프

• 루프의 핵심은 어떤 기능을 반복하는 것

• 1부터 10까지 출력하기 (3:36)

for (let i = 1; i <= 10; i += 1) {
	console.log(i);
}

• 루프에 대해 새로운 변수를 만든다. (i)
• 세미콜론을 기준으로 중간 부분은 불리언 표현식
• 마지막 부분은 증감 표현식 (i값을 업데이트)

192. For 루프 예제 더 알아보기

for (
	[initialExpression];
	[condition];
	[incrementExpression]
)

• for 루프는 변수가 있는 초기 표현식이 있고, 변수는 카운터와 비슷하다.

• 얼마나 오랫동안 혹은 언제까지 루프를 실행할지 명령하는 조건이 있다.

• 마지막엔 증감 표현식이 온다.

• 짝수/홀수만 출력하기

• 100부터 10씩 차감하기

for (let i = 100; i >= 0; i -= 10) {
	console.log(i);
}

• 루프가 계속 실행되기 위해서는 조건이 참이 되어야 한다.

• 조건이 거짓이 되면 루프 종료

193. 무한 루프의 위험성 :(

• 멈추지 않는 루프

• 루프가 멈추지 않으면 JavaScript가 가진 메모리를 모두 사용하게 된다.

• 이 조건이 거짓이 될 것인가? 를 생각해보기

194. 배열 루프

• 배열의 각 요소에 대해 어떤 기능을 반복시키기

• 배열의 모든 요소에 접근하는 법 - 배열의 길이 .length 와 인덱스 활용

for (let i = 0; i < animals.length; i++) {
	console.log(i, animals[i]);
}

for (let i = animals.length - 1; i >= 0; i--) {
	console.log(i, animals[i]);
}

195. 네스트 구성 (중첩) 루프

• 보통 중첩되는 for 루프 변수로는 i, j, k 를 사용한다.

• 중첩 루프는 보통 중첩된 배열을 통과하거나 반복해야 할 때 사용된다.

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

for (let i = 0; i < seatingChart.length; i++) {
	const row = seatingChart[i];
	for (let j = 0; j < row.length; j++) {
		console.log(row[j]);
	}
}

• for ... of 문으로 개선할 수 있다.

196. 또다른 루프: While 루프

• while 구문 하나와 괄호 안에 조건문 하나

• 조건이 참이면 계속 반복하고, 거짓이면 루프를 종료한다.

const SECRET = "BabyHippo";

let guess = prompt("enter the secret code...");
while (guess !== SECRET) {
	guess = prompt("enter the secret code...");
}
console.log("CONGRATS YOU GOT THE SECRET!!!");

197. 정지 / break 키워드

let input = prompt("Hey, say something!");
while (true) {
	input = prompt(input);
	if (input.toLowerCase() === "stop copying me") break;
}
console.log("OK YOU WIN!");

• while 조건이 참이고 break가 없으면 계속 반복한다.

198. 추측 게임 만들기

• maximum 변수에 넣는 이유는 사용자 입력값이 숫자가 아닌 경우 처리를 해줘야 하기 때문.
• parseInt('asdasd') 를 하면 NaN이 나온다.
• 이를 활용해 사용자 입력값을 확인하고 실제로 유효하고 파싱될 수 있는 값을 입력하록 해야 한다.

• 1부터 maximum 범위 안에서 난수 만들기

let guess = prompt("Enter your first guess!");
let attempts = 1;

while (parseInt(guess) !== targetNum) {
	if (guess === 'q') break;
	attempts++;
	if (guess > targetNum) {
		guess = prompt("Too high! Enter a new guess:");
	} else {
		guess = prompt("Too low! Enter a new guess:");
	}
}

if (guess === 'q') {
	console.log("OK, YOU QUIT!");
} else {
	console.log("CONGRATS YOU WIN!");
	console.log(`You got it! It took you ${attempts} guesses`);
}

199. for 루프의 유용함

for ... of 문

for (variable of iterable) {
	statement
}

• 배열 또는 문자열 등의 반복 가능한 객체(iterable object)에서 반복시키는 기능이 많이 개선되었다.

• 가독성이 좋아짐.

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);
	}
}

200. 객체 루프

• for ... of 문은 반복 가능한 객체에서 사용할 수 있다고 했는데, 실제 객체 즉, 객체 리터럴을 반복시킬 때도 사용할 수 있을 것 같다.

• 하지만 실제 객체 리터럴은 반복 가능한 객체로 인식되지 않는다.

• 엄밀히 말하면, 시스템 상으론 배열과 문자열, Map, Set도 객체다.

• 굳이 객체 리터럴에 쓰려면 for ... in 문을 쓰면 되는데, 잘 쓰이지 않음.

• Object.keys() 와 Object.values() , Object.entries()를 사용하자.

const testScores = {
	keenan: 80,
	damon: 67,
	kim: 89,
	shawn: 91,
	marlon: 72
}

for (let person in testScores) { // 객체의 key가 person이 됨
	console.log(`${person} scored ${testScores[person]}`);
}

// 혹은
for (let score of Object.values(testScores)) {
	console.log(score);
}

• 점수 총합 구하기

let total = 0;
for (let score of Object.values(testScores)) {
	total += score;
}

• 점수 평균 구하기
• 객체에 몇 개의 아이템이 있는지 알아야 한다.
• 객체에 length 를 쓸 수 없다. (길이가 있는 배열이나 문자열이 아니므로)
• 배열의 길이 활용하기

let total = 0;
let scores = Object.values(testScores);
for (let score of scores) {
	total += score;
}
console.log(total / scores.length);

201. Todo List 프로젝트 개요

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>

<body>
    <h1>Todo List</h1>
    <ul>
        <li>"new" - Add A Todo</li>
        <li>"list" - List All Todos</li>
        <li>"delete" - Remove Specific Todo</li>
        <li>"quit" - Quit App</li>
    </ul>
    <script src="todos.js"></script>
</body>

</html>

202. Todo List 프로젝트 따라하기

• while문 조건 만들 때 (input !== 'quit' && input !== 'q') 와 (!(input === 'quit' || input === 'q')) 는 같다.

• isNaN() 숫자가 아닌 것을 확인하는 메서드
• NaN일 때 true를 반환한다.

if (!Number.isNaN(index)) {
  const deleted = todos.splice(index, 1);
  console.log(`Ok, deleted ${deleted[0]}`)
} else {
  console.log('Unknown index');
}

204. 함수 개요

• 함수는 배열, 조건, 변수 어디에나 쓰인다.

• 함수는 코드의 재사용 가능한 일부로써 언제든 사용할 수 있도록 이름 붙인 것

• 코드의 중복을 줄이는 데 유용하다.

• 코드를 더 읽기 쉽고 이해하기 쉽게 만든다.

205. 우리의 가장 첫 번째 함수

• 함수를 작성하고 사용하는 법
• 1) DEFINE - 함수를 정의하기 (JavaScript에 등록)
• 함수를 설명할 수 있는 이름 붙이기
• 중괄호 안의 코드는 바로 실행되지 않는다 → 함수를 실행할 때 동작

function funcName() {
	// do something
}

• 2) EXECUTE - 함수를 실행하기
• native code. 그냥 함수 이름만 입력하면 단순히 함수임을 알려준다.
• () 괄호를 함께 입력하면 실행된다.

• 함수를 사용하기 전에 먼저 정의하기 (→ 호이스팅 개념과 관련)

206. 인수 개요

• 인수(arguments)는 함수에 입력하는 값

• 모든 메서드는 곧 함수다. (인수를 필요로 하는 메서드 생각하기)

• 인수를 정의하는 방법
• 함수를 정의할 때 괄호 안에 변수 이름을 넣는다. ⇒ 매개변수(parameter)
• 함수의 인수로 전달되면 매개변수에 저장되어 접근할 수 있다.

• 주어져야 할 인수가 전달되지 않으면 기본값은 undefined

207. 인수가 여러 개인 함수

• 함수를 정의할 때 매개변수 사이에 쉼표를 넣어 구분한다.

• 함수를 실행할 때 인수의 순서를 지켜야 한다.

function repeat(str, numTimes) {
	let result = '';
	for (let i = 0; i < numTimes; i++) {
		result += str;
	}
	console.log(result);
}

repeat(3, 'I LOVE MY CHICKENS!');
// I LOVE MY CHICKENS! I LOVE MY CHICKENS! I LOVE MY CHICKENS! 

• 인수가 코드에서 이용되어 오류를 일으키지만 않는다면 인수를 필수로 넣지 않아도 된다.

208. 반환(return) 키워드

• 함수의 출력값(output)

• console.log() 로 단순히 출력하는 것과는 다르다.

• 함수 밖으로 하나의 값을 내보낼 수 있다.

• return 키워드는 함수 실행을 중단시킨다.

function add (x, y) {
	if (typeof x !== number || typeof y !== 'number') {
		return false;
	}
	return x + y;
}

• 단, 함수 안에 return이 있기만 해서는 중단되지 않고 return이 있는 줄이 실행되어야만 함수가 중단된다.

209. 섹션 주제

Crucial - Function Scope - Block Scope - Lexical Scope - Function Expressions - Higher Order Functions

Important - Returning Functions - The Keyword “this” - Adding Methods To Objects

210. 함수 범위

• 범위는 변수 가시성(variable visibility)을 참조한다.

• 변수를 JavaScript의 어느 부분에 정의하느냐가 엑세스 지점을 결정한다.

• 함수 안에서 let 키워드를 사용해 그 값을 정의한 변수들은 그 함수로 범위가 한정된다. ⇒ 함수 밖에서는 엑세스할 수 없다.

• 전역 변수를 함수 안에서 업데이트하기보다는 보통은 내부 변수를 쓴다.

• JavaScript는 함수 안에 전역 변수와 같은 이름으로 정의된 내부 변수가 있을 경우, 내부 변수를 먼저 참조한다.

let bird = 'Scarlet Macaw';

function birdWatch() {
	console.log(bird); // Scarlet Macaw
}

birdWatch();
console.log(bird); // Scarlet Macaw

let bird = 'Scarlet Macaw';

function birdWatch() {
	console.log(bird); // Uncaught ReferenceError: Cannot access 'bird' before initialization
	let bird = 'Great Blue Heron';
	console.log(bird); // Great Blue Heron
}

console.log(bird); // Scarlet Macaw
birdWatch();
console.log(bird); // Scarlet Macaw

211. 블록 범위

• var 키워드를 쓰면 변수의 범위가 함수로 지정되지만 블록으로 지정되진 않는다.

• let과 const는 범위가 블록으로 지정되는 변수들. 유효 범위 규칙을 따른다.

• 블록 스코프도 함수 스코프와 비슷하다. 블록 범위는 조건문 등의 중괄호 {} 안이다.

212. 렉시컬 범위

• 외부(부모) 함수 안에 중첩된 내부(자식) 함수가 있으면 자식 함수에서 부모 함수 범위의 값이나 변수에 엑세스할 수 있다.

function bankRobbery() {
	const heroes = ['Spiderman', 'Wolverine', 'Black Panther'];
	function cryForHelp() {
		for (let hero of heroes) {
			console.log(`PLEASE HELP US, ${hero.toUpperCase()}`);
		}
	}
	cryForHelp();
}
bankRobbery();

213. 함수 표현식

• function expression

• 함수 선언문과는 다른 방식으로 함수를 정의하는 법

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

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

• 함수는 자신에게 연결된 이름을 지정할 수 있는 옵션이 있다.

• 함수 표현식의 경우 이름이 없는(익명) 함수를 변수 안에 저장한 것이다.

• JavaScript에서는 함수도 값으로 취급되므로, 식별자에 저장하고 전달할 수 있다.
• 함수가 인수로 전달되든 반환되든 함수를 값처럼 전달할 수 있다.

214. 고차 함수 / 215. 반환 함수

• 고차 함수란 다른 함수와 함께(with) 작동하거나 다른 함수에서(on) 작동하는 함수
• 1) 다른 함수를 인수로 받아서 그 인수로 어떤 작업을 하는 함수

function callTwice(func) {
	func();
	func();
}

function callTenTimes(f) {
	for (let i = 0; i < 10; i++) {
		f();
	}
}

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

callTwice(rollDie);
callTenTimes(rollDie);

• 2) 혹은 함수 내에서 함수를 값으로 반환하는 함수

• 이 두 가지 중 하나가 적용되거나 둘 다 적용되는 함수를 만들 수도 있다.

• 팩토리 함수 - 함수를 만들어 주는 함수

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

• 변수 안에 캡쳐해서 사용하기

216. 메서드 정의하기

• 모든 메서드는 함수이지만 모든 함수가 메서드는 아니다.

• 객체의 프로퍼티 값으로 함수를 전달한 것을 메서드라 부른다.

const myMath = {
	PI: 3.141592,
	square: function (num) {
		return num * num;
	},
	cube: function (num) {
		return num ** 3;
	{
}

myMath.square(2) // 4
myMath.cube(4) // 64

• shorthand ) 프로퍼티 key와 value를 : 으로 구분지어 전달하는 대신 아래처럼 메서드를 추가할 수 있다.

const myMath2 = {
	blah: 'Hi!',
	add(x, y) {
		return x + y;
	},
	multiply(x, y) {
		return x * y;
	}
}

myMath2.add(50, 60) // 110

217. ‘this’라는 불가사의한 키워드

• 메서드에 있는 객체를 가리킬 때 this 키워드를 사용한다.
• 객체에 있는 데이터에 접근할 수 있다.

• 객체에 여러 프로퍼티가 있거나 정보와 메서드가 다양할 때 this가 유용하다.

const cat = {
	name: 'Blue Steele',
	color: 'grey',
	breed: 'scottish fold',
	meow() {
		console.log(`${this.name} says MEOWWW`);
	}
}

• 여기에서 this 키워드는 cat 객체를 가리킨다.
• 메서드에서 this.property 라고 쓰면 this는 이 메서드가 정의하는 객체를 가리킨다.
• 항상 this 키워드가 해당 객체를 가리키는 것은 아니다.

• this의 값은 사용된 함수의 호출 컨텍스트(invocation context)에 따라 달라진다.
• 함수를 호출하는 방법에 따라 달라진다.

const cat = {
	name: 'Blue Steele',
	color: 'grey',
	breed: 'scottish fold',
	meow() {
		console.log("THIS IS:", this);
		console.log(`${this.name} says MEOWWW`);
	}
}

const meow2 = cat.meow;

const hen = {
    name: 'Helen',
    eggCount: 0,
    layAnEgg() {
        this.eggCount++;
        return 'EGG';
    }
}

218. try/catch 사용하기

• try문과 catch문은 항상 함께 사용되며, JavaScript의 오류 및 예외를 처리한다.

• 오류가 발생했을 때 try/catch로 오류를 잡아내면, 오류를 처리하고 나머지 코드도 문제 없이 실행시킬 수 있다.

220. 이 섹션에서는 무엇을 배울까?

• 고차함수의 배열 메서드

221. forEach 메서드

• for ... of 루프가 등장하기 전 자주 쓰였다.

• 배열 안의 아이템 각각에 대해 함수와 코드를 한번씩 실행한다.

• forEach에는 기존 유명(기명) 함수를 전달할 수도 있지만 재사용하지 않을 일회성 익명함수를 전달하는 것이 일반적이다.

222. map 메서드

• 배열을 다른 상태로 맵핑한다.

• 배열 각각의 요소에 실행한다는 점에서 forEach와 비슷하지만, 콜백의 반환값을 이용해 새로운 배열을 생성한다는 점에서 차이가 있다.

• 원래 배열을 기반으로 모든 요소를 변환한 새로운 배열을 반환

• 사용 예시) 데이터의 일부만 가져오기, 각 데이터의 값을 두 배로 늘리기 ,...

// DO NOT ALTER THE FOLLOWING CODE:
const fullNames = [{first: 'Albus', last: 'Dumbledore'}, {first: 'Harry', last: 'Potter'}, {first: 'Hermione', last: 'Granger'}, {first: 'Ron', last: 'Weasley'}, {first: 'Rubeus', last: 'Hagrid'}, {first: 'Minerva', last: 'McGonagall'}, {first: 'Severus', last: 'Snape'}];

// Write your code here
const firstNames = fullNames.map(v => v.first);

223. 화살표 함수 개요

• 화살표 함수는 함수를 정의하는 최신 구문. 함수 표현식을 만들 때 사용

• function 이라는 키워드 없이 함수를 입력할 수 있다.

• 화살표 함수 하나만 단독으로 만들 순 없다.

• 전달될 인수가 하나일 때는 괄호를 생략할 수 있다.

const greet = name => {
    return `Hey ${name}!`;
}

224. 화살표 함수의 반환

• 한 줄의 코드나 짧은 함수의 경우 암시적 반환과 화살표 함수를 사용해 코드를 짧게 만들 수 있다.

• 중괄호를 괄호로 바꾸고 return 키워드를 뺀다.

const rollDie = () => (
	Math.floor(Math.random() * 6) + 1
)

• 코드가 한 줄일 때 유용하다.

const add = (a, b) => a + b;

225. 화살표 함수 요약

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

const newMovies = movies.map(movie => (
	`${movie.title} - ${movie.score} / 10}`
));

226. setTimeout 과 setInterval

• 실행을 연기, 대기, 중단하거나, 추후 날짜로 실행을 연기하거나 기본적으로 작업 일정을 정하는 메서드

setTImeout()

• 첫 번째 인수로 TimerHandler라는 함수를 전달하고, 두 번째 인수는 timeout 값으로 실행을 얼마나 연기할 것인지 밀리 초(ms)를 전달.

• timeout 초가 흐른 뒤 TimerHandler 함수를 딱 한번 실행한다.

• 비동기 JavaScript 섹션에서 핵심적인 역할을 한다.

setInterval()

• 콜백을 매 특정 밀리 초마다 호출하는 함수. 인터벌을 두고 작업을 반복한다.

clearInterval()

• setInterval의 반환값(해당 인터벌의 ID값) 을 저장한 다음 그 ID를 이용해 중단하고 싶은 함수를 지정할 수 있다.

const id = setInterval(() => {
	console.log(Math.random())
}, 2000);

clearInterval(id);

227. filter 메서드

• 배열에서 필터링을 하거나 부분 집합을 모아 새 배열을 만드는 데 쓰인다.

• 함수를 전달해서 참이나 거짓을 반환하고, 참이 반환된 해당 요소는 필터링되어서 만들어진 새 배열에 추가된다.

• 원본은 변하지 않는다.

const validUserNames = (usernames) => {
    return usernames.filter(username => username.length < 10)
}

228. some과 every 메서드

• 새 배열을 반환하는 map, filter와 달리 불리언 메서드.

• 전달해야 하는 콜백 또한 참이나 거짓을 반환해야 한다.

• 테스트를 하는 방법

some()

• 배열 내에서 하나 이상의 요소가 테스트를 통과하는지 여부를 반환

every()

• 배열 내의 모든 요소가 테스트를 통과해 참을 반환하면 호출된 every 함수가 참을 반환

• exams.every(score => score >= 75) // true or false 반환

• 요소들 중 하나라도 콜백에서 거짓을 반환하면 전체 every가 거짓이 된다.

const allEvens = (numArr) => {
    return numArr.every(num => num % 2 === 0);
}

229. 악명 높은 reduce 메서드

arr.reduce(callback[, initialValue])

• 배열을 점차 줄여가며 마지막에 하나의 값만 남기는 메서드

• 배열의 모든 요소의 총합 예시

[3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
	return accumulator + currentValue;
});

• return된 값은 다음 순회의 accumulator에 사용된다.
• currentValue는 각각의 개별 요소를 나타낸다.
• reduce 메서드의 두 번째 인수로 넘겨주는 initialValue는 accumulator에 대한 초기값이다. 적지 않으면 default값은 배열의 첫 번째 요소가 된다.

const prices = [9.99, 1.50, 19.99, 49.99, 30.50];
const total = prices.reduce((total, price) => total + price);

• 배열의 최소/최대값 찾기 예시

const minPrice = prices.reduce((min, price) => (price < min) ? price : min);

const maxPrice = prices.reduce((max, price) => (price > max) ? price : max);

230. 화살표 함수와 ‘this’

• 화살표 함수에서 this 키워드는 일반 함수에 사용했을 때와 다르게 동작한다.

• ⭐ 화살표 함수 안에 있는 this 키워드는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.

232. 기본 매개 변수

• = 등호와 디폴트 값을 매개변수 목록에 넣어주면 기본(디폴트) 매개변수가 된다.

• 매개변수가 없으면 디폴트 매개변수를 받는다.

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

rollDie(); // 1~6

• 디폴트 매개변수는 디폴트 값이 없는 매개변수의 뒤에 와야 한다.

function greet(person, msg = "Hey there") {
	console.log(`${msg}, ${person}!`);
}

greet("Joaquin"); // Hey there, Joaquin!

233. 함수 호출 시의 스프레드 구문

• 배열과 같이 반복 가능한(iterable) 객체를 전개 구문을 사용해 펼쳐준다. (확장)

• 배열 뿐 아니라 문자열, 함수 호출 시에도 펼칠 수 있다.

234. 행렬 리터럴 스프레드 구문

• 전개 연산자를 사용해 두 배열의 요소를 복사해서 새로운 배열로 합치기

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

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

• 문자열의 각 문자를 배열에 담기

[...'hello']
// ['h', 'e', 'l', 'l', 'o']

235. 객체 스프레드 구문

• 전개 연산자를 사용해 객체의 프로퍼티를 복사해서 새로운 객체 만들기

• 특성에서 key-value 쌍을 가져와서 추가한다.

• 배열이나 문자열을 펼쳐서 새로운 객체를 만들 수도 있다.

• 객체를 변형하지 않고 복사하는 방법은 중요하다 (라이브러리, React 등 사용 시)

• 폼에서 사용자 데이터를 추출해서 새로운 객체를 만들고 정보 추가하기

const dataFromForm = {
	email: 'blueman@gmail.com',
	password: 'tobias123!',
	username: 'tfunke'
}

const newUser = {...dataFromForm, id: 2345, isAdmin: false};

236. rest 매개 변수

인수 객체

• 인수 객체 arguments는 배열과 비슷해 보여서 유사 배열 객체(array-like object)라고 부른다.

• 모든 인수를 자동으로 모아준다.

• 배열 메서드를 사용할 수 없다. (배열과 비슷하지만 인수 객체는 배열이 아니다)

• 화살표 함수에선 인수 객체를 사용할 수 없다. ⇒ 나머지 매개변수 필요

나머지 매개변수

• 나머지 연산자(rest operator) ... 로 만들고, 매개변수 목록에서 남아 있는 인수를 모두 모아 배열로 나타낸다.

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

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}`);
}

237. 배열 분해

디스트럭처링(destructuring)

• 값을 해체하고 꺼내고 선정하는 간편한 방식

• 배열이나 객체에 적용할 수 있다.

• [] 안에서 배열에서 분해한 것을 어떻게 지칭할지 정한다.

const scores = [929321, 899341, 888336, 772739, 543671, 243567, 111934];
const [gold, silver, bronze, ...everyoneElse] = scores;

238. 객체 분해

• 순서를 따르지 않기 때문에 배열 구조 분해보다 실용적이다.

const user = {
	email: 'harvey@gmail.com',
	password: 'sCoTt1948sMiTh',
	firstName: 'Harvey',
	lastName: 'Milk',
	born: 1930,
	city: 'San Francisco',
	state: 'California'
}

const { email, firstName, lastName, city } = user; // 기존 프로퍼티 키 이름 그대로 활용
const { born: birthYear } = user; // born 프로퍼티 값을 birthYear 변수에 사용
const { died = 'N/A' } = user; // 없는 프로퍼티일 경우 기본(디폴트)값 설정

239. 매개 변수 분해

• 함수를 정의할 때 괄호 () 안에서 매개변수로 전달되는 값의 구조를 분해할 수 있다.

• 객체를 전달받을 때 주로 사용된다.

• 배열에 사용할 경우 예시

// movies.filter((movie) => movie.score >= 90);
movies.filter(({ score }) => score >= 90);