JaveScript - 여러가지 기능

1. 기본 매개 변수

• 함수를 생성할 때, 매개변수를 지정하면 지정한 매개변수를 사용한다.
  (but, 매개변수가 없으면 디폴트 매개변수를 받음)

//주사위 함수를 예시로 들어보자.
function rollDie(numSides){
	return Math.floor(Math.random() * numSides) + 1;
}

rollDie(6)	//육면체 주사위를 굴렸을 때 나오는 값
rollDie(12) // 12면체 주사위를 굴렸을 때 나오는 값.

rollDie()
> NaN  		// 매개변수가 지정되지 않았기 때문에 숫자가 아니다라는 결과값이 출력됨.

// 디폴트값 설정한 함수
function rollDie(numSides) {
	if(numSides === undefined) {
    	numSides = 6
    }
    return Math.floor(Math.random() * numSides) + 1
}

rollDie() 	//디폴트 값이 6으로 설정된 6면체 주사위를 굴렸을 때의 결과값 출력.
rollDie(12)		// 매개변수가 12로 설정되었기 때문에 12면체 주사위 굴렸을 때의 결과값을 출력시킴

위의 방식은 과거의 방식이었으며, 최신구문은 더 간단해졌다.

//현재 사용되는 디폴트 매개변수 함수
//a는 아무 숫자를 넣어도 무방한 매개변수, b는 매개변수를 따로 지정하지 않을 경우 디폴트 값을 2로 설정.

function multiply(a, b = 2) {		
	return a * b;
}

multiply(2); 	//4
multiply(2,3);	//6

여기서 주의해야 할 점이 존재한다.

매개변수를 사용할 때, 순서를 조심해야 한다.

if) 메세지와 이름을 입력하면 문자열로 나타내주는 함수가 존재한다고 가정하자

//기본적인 함수 모양
function greeting(msg, name) {
	console.log(`${msg} , ${name}`)
}

greeting("안녕!", "철수야~"); 	//안녕!, 철수야~

function greeting(msg="정말 반갑다!", name){
	console.log(`${msg}, ${name}`)
}

greeting("철수야!"); 	//철수야!, undefined

위의 예시처럼 순서가 맞지 않는 경우를 특히 주의해야한다.

• 디폴트 값을 설정했다고 해서 매개변수를 빼먹고 이름만 입력하게 되면 자바스크립트는 이름을 메세지 값으로 인식하고 출력해버리는 결과를 초래한다.

이를 해결하기 위해선 어떻게 해야할까?

function greeting(name, msg="정말 반갑다!"){
	console.log(`${msg}, ${name}`)
}

greeting("철수야");	//정말 반갑다!, 철수야

위의 문제를 해결하기 위해선 이렇게 매개변수의 순서를 바꿔주면 된다.

2. 함수 호출 시, 스프레드 구문

1. 배열과 같이 반복 가능한 객체를 전개 구문을 사용해서 확장한다.

2. 함수로 호출할 경우엔 0개 이상의 인수로 확장, 배열 리터럴에서는 요소로 확장가능하다.

// 인수가 다수인 상황에서 최댓값
Math.max(13, 3, 5, 21, 33, 45, 23, 53, 52, 32)

// 인수가 다수인 상황에서 최솟값
Math.min(2, 35, 23, 1)

// 요소가 다수인 배열
const nums = [13, 3, 5, 21, 33, 45, 23, 53, 52, 32]

// nums 호출
> (13) [13, 3, 5, 21, 33, 45, 23, 53, 52, 32]

Math.max(nums) 		// 배열 전체를 받기 때문에 어떻게 출력해야 할 지 모르기 때문에 NaN이라는 값을 출력하게 됨.
> NaN

// 올바른 출력
Math.max(...nums)
> 53

• 왜 ... 을 넣어야 할까?

  ...은 전개를 사용하는 스프레드이기 때문에 nums 라는 변수의 배열이 하나하나의 인수로 분리되며, 이 때 분리된 요소들은 Math.max 함수 안에 하나하나 들어가며 최댓값을 찾게 되는 것이다.

또 다른 예시

// console.log 에 원하는 인수를 자유롭게 넣을 수 있음
console.log("asd", "as", "asdsd", "hel");
> asd as asdsd hel

console.log(nums)
(13) [13, 3, 5, 21, 33, 45, 23, 53, 52, 32]

// 스프레드 구문 사용하여 출력했을 때
console.log(...nums)
> 13 3 5 21 33 45 23 53 52 32 		//배열에 있는 요소를 각각의 인수로 출력한 결과

// 일반적인 문자열을 출력했을 때
console.log("hello")
> hello

//스프레드 구문을 사용하여 문자열을 출력했을 때
console.log(...'hello')
h e l l o

// 각각의 인수를 출력했을 때
console.log('h', 'e', 'l')
h e l

마지막 스프레드 구문을 사용하여 문자열을 출력했을 때와 동일하게 각각의 인수를 따로 출력하는 경우 동일한 값을 확인할 수 있다.

3. 행렬 리터럴 스프레드

2. 챕터에서 다룬 것과 동일하게 적용.

const ramen = ['진라면', '열라면', '신라면']
const snack = ['포카칩', '스윙칩', '포테토칩']

// food 라는 변수에 ramen, snack 의 모든 요소를 합치고자 할때
const food = [...ramen, ...snack]

4. 객체 스프레드

객체 스프레드를 통해 새로운 객체를 만들거나 키-값을 수정할 수 있다.

// 남자 아이돌 그룹과 여자 아이돌 그룹
const boygroup = { 리더: 권지용, 소속사: YG}; 
const girlgroup = { 멤버 수: 4, 소속사: SM};

// 위의 두 그룹을 합쳤다고 가정
const mixidol = {...boygroup, ...girlgroup}
> undefined

mixidol
> {리더: 권지용, 소속사: SM, 멤버 수: 4}

남자 아이돌의 객체가 먼저 복사됐고 그 다음 걸그룹이 복사되었다.
하지만 여기서 소속사의 특성이 겹치므로, 충돌을 일으키게 된 것이다.

---

충돌이 발생하면 남자 아이돌 객체가 먼저 복사되고, 여자 아이돌 객체로 덮어쓰게 된다.

자 그럼 만약에 저기서 새로운 특성을 추가시키면 어떻게 될까?

// 소속사에 하이브 추가.
{...boygroup, ...girlgroup, 소속사: '하이브'}
>{리더: 권지용, 소속사: 하이브, 멤버 수: 4}

즉, 정보의 소스를 펼쳐 다른 용도로 변경해주는 것이 스프레드의 목적이다.