[JS] JavaScript 정리하기 (4) - 함수

오늘은 함수에 대해 알아보자~~

---

함수의 정의

 

• 함수 선언식(Function declaration)
  • 일반적인 프로그래밍 언어의 함수 정의 방식

function add(num1, num2) {
  return num1 + num2
}
add(2, 7) //9

 

• 함수 표현식(Function expression)
  • 표현식 내에서 함수를 정의하는 방식
  • 함수 표현식은 함수의 이름을 생략함 익명 함수로 정의 가능

const sub = function (num1, num2) {
  return num1 - num2
}

sub(7, 2) //5

 

• 표현식에서 함수 이름을 명시하는 것도 가능
• 다만 이 경우 함수 이름은 호출에 사용 되지 못하고 디버깅 용도로 사용됨

const mySub = function namedSub(num1, num2) {
  return num1 - num2
}

mySub(1, 2) //-1
namedSub(1, 2) // ReferenceError: nameSub is not defined

 

 

• 기본인자 (Default arguments)
  • 인자 작성시 '=' 뒤에 기본 인자 선언 가능

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

greeting() // Hi Anonymous

 

• 호이스팅
  • 함수 선언식과 표현식중 선언식의 경우 var로 정의한 변수처럼 호이스팅이 발생한다
  • 즉 함수 호출 이후에 함수를 선언해도 동작

add(2, 7) //9

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

 

 

---

매개변수와 인자의 개수가 불일치 할 때

 

• 매개변수보다 인자의 개수가 많은 경우

const noArgs = function() {
  return 0
}

noArgs(1, 2, 3) //0

const towArgs = function (arg1, arg2){
  return [arg1, arg2]
}

towArgs(1, 2, 3) // [1,2]

 

• 매개변수보다 인자의 개수가 적을 경우

const threeArgs = function (arg1, arg2, arg3) {
  return [arg1, arg2, arg3]
}

threeArgs()  //[undefined, undefined, undefined]
threeArgs(1)  //[1, undefined, undefined]
threeArgs(1, 2)  //[1, 2, undefined]

 

---

Spread syntax(...)

 

• "전개 구문"
• 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 객체를 배열의 경우는 요소, 함수의 경우는 인자로 확장할 수 있음
• 배열과의 사용(배열 복사)

let parts = ['shoulders', 'Knees']
let lyrics = ['head', ...parts, 'and', 'toes']
// ['head', 'shoulders', 'Knees', 'and', 'toes']

• 함수와의 사용 (Rest parameters)
  • 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

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

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

 

---

화살표 함수(Arrow Function)

 

• 함수를 비교적 간결하게 정의할 수 있는 문법
• ES6에 도입됨
• function 키워드와 중괄호를 이용한 구문을 짧게 사용하기 위해 탄생
  • function 키워드 생략 가능
  • 함수의 매개변수가 하나 분이라면 매개변수의 '()' 생략가능
  • 함수의 내용이 한 줄이라면 '{}'와 'return'도 생략 가능
• 화살표 함수는 항상 익명 함수

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

// 1. function 키워드 삭제
const arrow2 = (name) => { return `hello, ${name}` }

// 2. 인자가 1개일 경우에만 () 생략 가능
const arrow3 = name => { return `hello, ${name}`}

// 3. 함수 바디가 return을 포함한 표현식 1개일 경우에 {} & return 삭제 가능
const arrow4 = name => `hello, ${name}`

// 응용
// 1. 인자가 없다면? () or _로 표시 가능
let noArge = () => 'No args'
noArgs = _ => 'No args'

// 2-1. object를 return 한다면
let returnObject = () => { return { key: 'value'} }

// 2-2. return을 적지 않으려면 괄호를 붙여야 함
returnObject = () => ({key: 'value'})

 

 

오늘은 함수에 대해 알아봤다

 

뷰를 쓰던 리액트를 쓰던 함수를 안 쓸 일은 거의 절대 없다고 본다

 

특히 화살표함수는 꼭 잘 익히고 사용해야 한다!!

 

아무튼 오늘도 화이팅!!