[JS][multicampus] Functions

► Reference type (참조 자료형)

• 객체의 주소가 저장되는 자료형(가변, 주소가 복사)
• Objects (object, array, functions)

---

1.  Functions

• 참조 자료형
• 모든 함수는 Functions object
• 함수의 구조 : 함수의 이름 + 함수의 매개변수 + 함수의 body를 구성하는 statement

function name (param[, param,[..., param]]]) {
	statments
    return value
}
// return이 없다면 undefined를 반환

 

---

2.  함수의 정의

 ► function declaration 선언식

• '익명 함수' 사용 불가능
• 호이스팅 없음

function funcName () {
	statements
}

// 함수 선언식 예시
function add (num1, num2) {
	return num1 + num2
}

add(2, 7) 
// 9
// console.log(add(2, 7)) 이렇게 작성해야 console에서 확인 가능


// 순서를 바꿔도 실행됨 (유지 보수 관점에서 좋지 않음)
add(2, 7) // console.log(add(2, 7))

function add (num1, num2) {
	return num1 + num2
}

 

► function expression 표현식

• 함수 이름이 없는 '익명 함수'를 사용할 수 있음
• 선언식과 달리 표현식으로 정의한 함수는 호이스팅이 되지 않으므로 코드에서 나타나기 전에 먼저 사용할 수 없음
• 사용 권장

const funcName = function () {
	statements
}

// 함수 표현식 예시
const sub = function (num1, num2) {
	return num1 - num2
}

sub(7, 2) // 5
// console.log(sub(7, 2)) 이렇게 작성해야 console에서 확인 가능

 

► Default function parameter 기본 함수 매개변수

• 값이 없거나 undefined가 전달될 경우 이름 붙은 매개변수를 기본값으로 초기화

const greeting = function (name = 'Anonymous') {
	return `Hi ${name}`
}

greeting() // Hi Anonymous
// console.log(greeting())

 

► 매개변수와 인자의 개수 불일치

• 매개변수 개수 < 인자 개수

const noArgs = functions () {
	return 0
}
noArgs(1, 2, 3) // 0
// console.log(noArgs(1, 2, 3))

const twoArgs = function (arg1, arg2) {
	return [arg1, agr2]
}
twoArgs(1, 2, 3) // [1, 2]
// console.log(twoArgs(1, 2, 3))

• 매개변수 개수 > 인자 개수

const threeArgs = function (arg1, arg2, arg3) {
	return [arg1, arg2, arg3]
}
threeArgs() // [undefined, undefined, undefined]
// console.log(threeArgs())
threeArgs(1) // [1, undefined, undefined]
// console.log(threeArgs(1))
threeArgs(2, 3) // [2, 3, undefined]
// console.log(threeArgs(2, 3))

 

► Rest parameters 나머지 매개변수

• 무한한 수의 인자를 '배열'로 허용하여 가변 함수를 나타내는 방법
• 함수 정의에는 하나의 나머지 매개변수만 있음
• 나머지 매개변수는 함수 정의에서 마지막 매개변수이어야 함

const myFunc = function (arg1, arg2, ...restArgs) {
	return [arg1, arg2, restArgs]
}

myFunc(1, 2, 3, 4, 5) // [1, 2, [3, 4, 5]]
myFunc(1, 2) // [1, 2, []]

 

► Arrow function expressions 화살표 함수 표현식

• 함수 표현식의 간결한 표현법

const arrow1 = function (name) {
	return `hello, ${name}`
}

// 1. function 키워드 삭제 후 화살표 작성 (자주 사용)
const arrow2 = (name) => {return `hello, ${name}`}
// console.log(arrow2('name'))

// 2. 인자가 1개일 경우에만 () 생략 가능 (직관력이 떨어지기 때문에 사용 자제)
const arrow3 = name => {return `hello, ${name}`}

// 3. 함수 바디가 return을 포함한 표현식 1개일 경우에 {} & return 삭제 가능 (직관력이 떨어지기 때문에 사용 자제)
const arrow4 = (name) => `hello, ${name}`

1. function 키워드 제거 후 매개변수와 중괄호 사이에 화살표(=>) 작성
2. 함수의 매개변수가 하나 뿐이라면 매개변수의 `()` 제거 가능
3. 함수 본문의 표현식이 한 줄이라면 `{}` 와 `return` 제거 가능

 

// 화살표 함수 표현식 응용 (1단계만 자주 사용)

// 1.인자가 없다면 () or _ 로 표시
const noArgs1 = () => 'No args'
const noArgs2 = _ => 'No args'

// 2-1.object를 return 한다면 return을 명시적으로 작성해야 함
const returnObject1 = () { return {key: 'value' }}

// 2-2.return을 적지 않으려면 소괄호로 감싸야 함
const returnObject2 = () => ({ key: 'value' })