매개변수 패턴

매개변수 : 함수 안으로 들어오는 데이터를 받는 매개체가 되는 변수

예시 1

function sumNum1(a, b){
	return a + b
}
console.log(sumNum1(7))  // 출력 : NaN

/* 7은 a로 들어가지만, 
b는 받는값이 없어 undefined로 정의되어 NaN가 출력됨. */

예시2

function sumNum2(a, b = 1){  // 1은 b의 기본값
	return a + b
}
console.log(sumNum2(2, 4))  // 출력 : 6

/* 매개변수 b의 기본값은 1이지만, 
4라는 값이 b에 할당되었기 때문에 6으로 출력됨. */

이는 객체 데이터와 배열 데이터에서도 해당되는 내용이다.

객체 데이터의 경우

const user = {
	name : 'jk'
  	age : 27
}

function userName1(user) {  // user는 객체데이터
	const {name} = user  // 구조분해 할당
    return name
}
console.log( userName1(user) )  // jk 출력

/*------------- 위와 아래는 같은 값을 도출함 -------------*/

function userName2({name}) {  // 입력받는 매개변수의 name값을 도출
    return name
}
console.log( userName2(user) )  // 출력 : jk



function userEmail({email = '이메일은 없는데요!') {  // email 속성의 기본값 설정
    return email
}
console.log( userEmail(user) )  // 출력 : 이메일은 없는데요!

배열 데이터의 경우

const cities = ['서울','부산','대구','울산','광주']

function secondCity(, b) {  // 두번째 값만 호출함. (굳이 (, b, , , )로 작성할 필요 X)
	return b
}
console.log(secondCity(cities))  // 출력 : 부산

---

나머지 매개변수

매개변수가 얼마나 입력될지 모르는 상황일때 사용

// 매개변수의 갯수에 상관없이 모든 매개변수를 더하는 함수

function sum (...rest) { // 전개 연산자 사용, 배열로 입력데이터 받아옴.
	return rest.reduce(function (acc, cur) {
     	return acc + cur                  
     }, 0)  // 0은 acc의 초기값
  /*
  	let acc
  	for(let i = 0; i < rest.length; i += 1) {
  		acc += rest[i]
  	}
  	와 동일한 내용임!
  */
}

console.log(sum(1, 2))  // 출력 : 3
console.log(sum(1, 2, 3, 4))  // 출력 : 10

console.log(argument) // 함수 내에서 선언없이 사용가능
/*
- 배열데이터 X (배열의 정보를 나열해주긴 하지만, 배열은 아님.) 
- 배열과 유사한 일종의 객체데이터임. 
- Array Like라고 부름.
- 함수 안에 포함됨.
*/

---

화살표 함수

function sum () {}
const sum = function () {}
const sum = () => {}

// 위의 세가지는 모두 동일하게 동작하는 함수임!


function sum (a, b) {
	return a + b
}

const sum = (a, b) => {
	return a + b
}

// 두 함수는 서로 뜻하는 바가 같다.


const sum = (a, b) => a+b  // 위의 두 함수들처럼 return 키워드로 로직이 시작하는 경우 {} 생략이 가능.

const sum = a => {}  // 매개변수가 1개라면, 소괄호도 생략 가능! (단, 매개변수 2개 이상은 소괄호 필요.)

const a = () => { return { a : 1 } }
const b = () => ({ a : 1 })  
/* 객체 데이터를 표현할때는 
함수의 범위를 지정해주는 중괄호`{}`와 혼동될 수 있기 때문에 소괄호를 사용해야 함.
a, b 함수는 서로 같음.
*/

const c = () => { return [1, 2, 3] }
const d = () => [1, 2, 3]
// c, d 함수는 서로 같음.

즉시실행 함수 (IIFE)

const a = 7
const double = () => {
	console.log(a * 2)
}
double()

;(() => {  // ';'는 윗줄의 double() 실행 함수와 구분을 위한 세미콜론.
	console.log(a * 2)
})()
// 즉시실행 함수는 ()() 소괄호가 두개다!


/* 즉시실행 함수의 예제들 */
;(() => {로직})()           // (F)()
;(function () {로직}) ()    // (F)()
;(function() => {로직} ())  // (F())  첫번째 소괄호 안에 두번째 소괄호가 포함된 모습
;!function() => {로직}()    // !F()
;+function() => {로직}()    // +F()'


;(a, b) => {
  console.log(a)
  console.log(b)
}(1, 2)  // 두번째 소괄화로 들어가는 데이터는 즉시실행함수의 매개변수로 전달할 수 있음.
/* 이를 활용하여 다양한 전역데이터들의 이름을 간소화 할 수 있으며, "난독화" 할 수 있다.
 ex) window, document
*/

---