[Udemy] [23-1] JavaScript의 최신 기능들 (DEFAULT PARAMS, SPREAD)

 

232. 기본 매개 변수 (DEFAULT PARAMS) _ The old Way

 

function print(num) {
	return num + 1;
}

print(5)	// 6
print(10)	// 11
print()		// NaN	**

 

* 기본 매개변수 지정

(조건문으로 지정)

function print(num) {
	if(num === undefined) {
    	num = 0
    }
	return num + 1;
}

 

(매개변수에 지정)

function print(num = 0) {
	return num + 1;
}

 

print(5)	// 6
print(10)	// 11
print()		// 1	**

=> 매개변수가 없다면 default값인 0으로, print(0)으로 실행. 

 

---

 

* 기본 매개변수가 여러개인 경우 (순서 중요*)

 

function print(num, name) {
	console.log(`${num}등:  ${name}`);
}

print(1, "pyo")	// 1등:  pyo

 

 

(기본값지정)

function print(num = 1, name) {
	console.log(`${num}등:  ${name}`);
}

print("pyo")	// pyo등:  undefined

따라서 default값이 없는 매개변수, default값이 있는 매개변수 순서로 

 

function print(num, name="pyo", msg="추카") {
	console.log(`${num}등:  ${name}! ${msg}!!`);
}

print(1)	// 1등:  pyo! 추카!!

 

---

 

233. 스프레드(SPREAD) 구문

 

* 배열

const nums = [100, 3, 65, 477, 7, 23, 97, 855]

Math.max(nums)	// Nan
Math.max(100, 3, 65, 477, 7, 23, 97, 855)	// 855
Math.max(...nums)	// 855

 

... nums 를 출력해보면 숫자 사이에 공백을 두고 각각의 인수가 출력.

console.log(...nums)
// 100 3 65 477 7 23 97 855

 

* 문자열

console.log(..."String");
// s t r i n g

 

=> 반복 가능한 객체를 0개이상의 요소로 확장.

 

---

 

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

* 배열

const vegetable = ['cabbage', 'eggplant', 'onion']
const fruit = ['apple', 'banana', 'orange']

const food = [...vegetable, ...fruit]
//  ['cabbage', 'eggplant', 'onion', 'apple', 'banana', 'orange']

=> spread로 배열 복사 

 

const food = [...fruit, ...vegetable]
//  ['apple', 'banana', 'orange', 'cabbage', 'eggplant', 'onion']

=> 순서도 영향 미침

 

[ 1, 2, 3, ...fruit, ...vegetable, 'value']
//  [ 1, 2, 3, 'apple', 'banana', 'orange', 'cabbage', 'eggplant', 'onion', 'value']

=> 앞뒤로 숫자, 문자열 추가 가능

 

* 문자열

[..."string", ..."value"]
// ['s', 't', 'r', 'i', 'n', 'g', 'v', 'a', 'l', 'u', 'e']

[..."string", "integer", ..."value"]
// ['s', 't', 'r', 'i', 'n', 'g', 'integer', 'v', 'a', 'l', 'u', 'e']

 

---

 

235. 객체 스프레드 구문 (Spread in Object Literals)

 

const A = {name: 'aaa', id: 'AAA'}
const B = {age: 30, id: 'BBB'}

{...A, ...B, addr: 'seoul'}
// {name: 'aaa', id: 'BBB', age: 30, addr: 'seoul'}

=> 같은 key값에 대해서는 덮어쓴다.

 

{...A, ...B, id: 'ZZZ'}
// {name: 'aaa', id: 'ZZZ', age: 30}

=> 속성값 변경 가능.

---

배열을 전개해서 객체로 만들 수 있음.

{...['apple', 'banana', 'orange']}
// {0: 'apple', 1: 'banana', 2: 'orange'}

=> 각 배열 요소의 key값은 배열의 index값이 된다.

 

문자열에도 적용가능.

{..."string"}
// {0: 's', 1: 't', 2: 'r', 3: 'i', 4: 'n', 5: 'g'}