섹션 23
삼항연산자
조건 ? 참이면 : 거짓이면
b = typeof b !== 'undefined' ? b : 1;b를 b 타입이 undefined가 아니면 b로 하고, 맞으면 b를 1로 한다.
b = 다음이 삼항연산자.
Default Params
기본 매개 변수
function multiply(a,b = 1) { //두번째 인수가 없다면 1로 친다.
return a * b;
}
multiply(4); //4
multiply(4, 5); //20b가 없는 경우를 if문으로 만들지 않아도 된다.
다만 인수는 순서대로 되기 때문에 a=1이라고 넣어도 처음 넣는 게 a로 할당되기 때문에 기본 매개 변수는 두번째나 세번째에 넣어야 한다. 디폴트 값이 없는 매개변수 뒤에 있어야 함.
Spread
전개 구문
배열과 같이 반복 가능한 객체를 전개 구문을 사용해서 확장한다.
함수로 호출할 경우엔 0개 이상의 인수로, 배열 리터럴에서는 요소로 확장할 수 있다
객체 리터럴의 경우 객체 표현식은 0개 이상 키-값 쌍으로 확장할 수 있다.
const nums = [9, 3, 2, 8];
Math.max(nums); //NaN
Math.max(...nums); // 9
// Same as Math.max(9,3,2,8)Expands an iterable(array, string, etc) into a list of arguments
행렬 리터럴 스프레드 구문
const cats = ['Blue', 'Scout', 'Rocket'];
const dogs = ['Rusty', 'Wyatt'];
const allPets = [...cats, ...dogs]
allpets; // ['Blue', 'Scout', 'Rocket', 'Rusty', 'Wyatt']배열의 요소들을 한번에 다 넣을 수 있다.
배열뿐 아니라 문자열도 가능하다.
[..."hello"]
-> ["h", "e", "l", "l", "o"]객체 리터럴 스프레드 구문
객체에 있는 특성을 복사해서 새로운 객체를 만든다.
객체 여러 개를 한 객체로 묶을 수 있다.
기존의 객체를 이용해서 객체를 새롭게 만들 수 있고
객체를 복사하고 수정할 수도 있다.
const feline = { legs: 4, family: 'Felidae' };
const canine = { family: 'Caninae', furry: true };
const dogs = { ...canine, isPet: true };
// { family: "Caninae", furry: true, isPet: true }
const lion = { ...feline, genus: 'Panthera' };
// { legs: 4, family: "Felidae", genus: "Panthera" }
const catDog = { ...feline, ... canine };
// { legs: 4, family: "Caninae", furry: true }
// 객체의 키가 겹치면 뒤에 오는게 덮어 씌워진다.배열이나 문자열을 펼쳐서 객체를 만들수도 있다.
{...[2,4,6,8]}
-> { 0: 2, 1: 4, 2: 6, 3: 8} //키는 자동으로 인덱스로됨
{..."HIII"}
-> { 0: "H", 1: "I", 2: "I", 3: "I" }
객체를 만들고 거기에 추가할수도 있다.
const dataFromForm = {
email: "111@gmail.com",
password: "to123!",
username: "tfunke"
}
const newUser = {...dataFromForm, id: 2345, isAdmin: false}
newUser;
-> {
email: "111@gmail.com",
password: "to123!",
username: "tfunke"
id: 2345,
isAdmin: false
}REST
나머지 매개변수
전개와 비슷하지만 완전히 다르다.
인수객체
function sumAll() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
sumAll(8, 4, 3, 2); // 17
sumAll(2, 3); //5모든 함수에 가능하다. 배열과 비슷한 객체. 유사 배열 객체이다. 인덱스와 length가 있다. 화살표 함수에서 사용불가.
하지만 배열은 아니라서 pop이나 push,reduce 사용불가.
따라서 나머지 매개변수가 필요하다.
function sumAll(...nums) {
let total = 0;
for(let n of nums) total += n;
return total;
}
sumAll(1, 2); //3
sumAll(1, 2, 3, 4, 5); //15rest params 나머지 매개 변수를 쓰면 실제 배열처럼 쓸 수 있다.
reduce도 가능하다.
funtion sum(...nums) {
return nums.reduce((total, el) => total + el)
}
sum(1,2,3)
-> 6여러개의 인수를 쓸때 나머지를 설정할수 있다.
function raceResults(gold, silver, ...everyoneElse) {
console.log(`Gold: ${gold}`)
console.log(`Silver: ${silver}`)
console.log(`Thanks to Everyone Else: ${...everyoneElse}`)
}
//첫번째와 두번째 인수가 gold, silver가 되고 그 뒤 몇개가 들어가든 everyone else가 된다.Destructuring
구조 분해
값을 해체하고 꺼내고 선정하는 간편한 방식이다.
배열이나 객체에 적용가능. 해체해서 별개의 변수 형태로 만들 수 있다.
배열
const result = ['John', 'Sam', 'Luke']
const [ gold, silver, bronze ] = result;
gold; // 'John'
silver; // 'Sam'
bronze; // 'Luke'
const [ fastest, ...everyoneElse ] = result;
fastest; // 'John'
everyoneElse; // 'Sam', 'Luke'즉, 인수를 받기 전에 미리 인수 자리 별로 어떤 변수에 할당할지 정해놓고, 받는 즉시 그대로 할당된다. 배열에선 순서를 기준으로.
Object Destructuring
객체 분해
순서를 따르지 않기 때문에 배열 구조 분해보다 실용적이다.
객체 안의 값을 변수를 지정할 수 있다.
const runner = {
first: "John",
last: "Sam",
country: "Canada",
title: "32th Marathon"
}
const { first, last, country } = runner;
first; //"John"
last; //"Sam"
country; //"Canada"
//객체 분해를 쓰지 않으면 이렇게 해야한다.
// let first = runner.first;
배열처럼 순서가 없는 대신 특성의 이름이 중요하다.
변수의 이름을 다르게 할수도 있다.
const runner = {
first: "John",
last: "Sam",
country: "Canada",
title: "32th Marathon"
}
const { first: Winner } = runner; //특성 값 뒤에 : 콜론을 하고 새로운 변수 이름을 적어주면 된다.
Winner;
-> "John"
const { first, prize = "N/A" } = runner; //특성 값이 없으면 입력한 디폴트값이 뜨게 할수도 있다.
prize;
-> "N/A"Param destructuring
매개 변수 분해
함수의 매개 변수에 적용된다.
함수를 정의할 때 괄호 안에 매개변수를 작성하면
전달되는 값의 구조를 분해할 수 있다. 객체에 주로 사용됨.
const fullName = ({first, last}) => {
return `${first} ${last}`
}
const runner = {
first: 'KIM',
last: 'Geoge',
country: 'Kenya'
}
fullName(runner); // "KIM Geoge"
//값이 없을때 들어갈 디폴트를 줄수도 있다.
// { first, last = 'abc' })filter메서드와 함께 쓴다면
