JS 함수 선언

함수 선언

• 함수는 다양하게 만들 수 있음, 함수는 반환문을 생략할 수 있지만 내부적으론 undefined를 리턴함

// 일반적인 방법(함수 선언)
function sum(param1, param2) {
  return param1 + param2;
}

// 메소드로 객체의 프로퍼티 밸류가 함수일 경우 쓸 수 있음
const obj = {
  prop: function() {

  }
}

// 생성자 함수(특정 인스턴스를 만들 수 있음, 대문자로 만듬)
function MyObj() {

}

// 화살표 함수(ES2015+, ES6), 변수에 담아서 바로 사용 가능함
const arrowFunc = () => {}

// 함수는 호출해서 사용할 수 있음
sum(1, 2);

함수 표현식

• 함수 선언문의 경우, 아래와 같이 중복으로 함수를 만들 수 있음, 이 때 마지막에 있는 것이 호출이 됨(혹은 값을 넣는 것에 따라서)

function func() {
  return 'param1 + param2';
}

function func(param1, param2) {
  return param1 + param2
}

• 이럴 때 함수 표현식을 통해서 만든 함수를 변수에 할당하는 것(중복선언, 호이스팅 문제를 막을 수 있음)
• 이를 예시처럼 익명 함수로도 만들 수 있음
• 이처럼 함수 표현식을 통해서 함수 선언문에서의 문제를 예방함

// 함수 표현식 + 기명 함수(기명 함수 표현식)
const func = function func() {
  return 'func'
}

// 함수 표현식 + 익명 함수(익명 함수 표현식)
const func = function() {
  return 'func';
}

console.log(func())

화살표 함수

• 화살표 함수는 아래와 같이 편하게 쓸 수 있고, function 키워드가 빠지고 중괄호만 써도 됨
• 중괄호는 다양한 로직이 필요할 때 씀, 하지만 이 떄 한 줄로 반환을 할 경우에는 더 쉽게 쓸 수 있음(중괄호 없이)
• 화살표 함수는 argument나 this 등의 작용이 다름, 일반적인 함수와 동작 방식이나 여러가지가 다를 수 있음

const arrowFunc = () => {
  return '문자열'
}
// 한 줄로 가능
const arrowFunc = () => '문자열'

매개변수와 인자 다루기

• 매개변수는 함수를 선언하는 측, 인자는 함수를 호출하는 측에서 부르는 방식임
• 매개변수는 함수 안에서 내부적으로 지역 변수처럼 활용한다고 볼 수 있음
• 아래 예시처럼 p가 지역변수처럼 활동하고 쓸 수 있다는 것임, 그리고 이 매개변수는 순서도 중요함
• 예시처럼 매개변수를 넘기고 싶지 않다고 해도 그 값을 직접 써서 해야할 수 밖에 없음(js에선 매개변수 숫자를 잘 지켜야 하기에)
• 이미 만든 매개변수는 어떻게 조작할 수 없음

function func(p1, p2, p3, p4) {
  console.log(p2, p4);
}

const result = func(undefined, 'p2', undefined, 'p4');

• 그래서 그럴 땐 객체를 받아서 처리하면 좀 더 수월함(그러면 순서는 상관이 없게됨), 객체로 넘기면 되니까

function func(objP) {
  const p1 = objP.p1
  const p2 = objP.p2
  const p3 = objP.p3
  const p4 = objP.p4

  console.log(p2, p4)
}

const result = func({
  p2: 'P2',
  p4: 'P4',
})

• 여기서 위와 같이 안하고 객체 구조 분해 할당을 하면 쉽게 아래와 같이 할 수 있음

function func({ p1, p2, p3, p4, }) {

  console.log(p2, p4);

}

const result = func({
  p2: 'P2',
  p4: 'P4',
})

arguments

• JS 함수 객체에 내장되어 있는 요소임(단, 화살표 함수에는 없음)
• arguments를 선언하고 접근하면 함수에서 어떻게든 사용할 수 있음
• 이 때 수많은 인자들이 정해지지 않은 규칙들로 가변 인자를 대처하기에 좋음(아래 예시처럼)

const func = function() {
  const convertArr = Array.from(arguments)

  return convertArr.reduce((prev, curr) => prev + curr)
}

console.log(func(1,2,3,4,5,6,7));

• 하지만 arguments 사용 자체가 불완전한 것이지만, 그래도 가변 인자를 통해서 처리하는데 유용한 것이 arugments임

rest parameter

• 나머지 매개변수의 경우 arguments와 비슷하게 사용하지만 다름, 화살표 함수에서 쓸 수 있음
• 여기서 중요한 것은 배열로 동작할 수 있기에 굳이 형변환을 하지 않아도 됨
• 그리고 다른 매개변수와 연관지어서 사용할 수도, 다른 매개변수와 조합을 해서도 쓸 수 있음(아래 예시처럼)
• 또 주의할점은 나머지 매개변수는 항상 마지막 순서에 들어감을 유의해야함

const func = (first, second, ...nums) => {

  console.log(first);
  console.log(second);
  console.log(Array.isArray(nums));

  return convertArr.reduce((prev, curr) => prev + curr));
}

console.log(func(1,2,3,4,5,6,7));

• 그래서 나머지 매개변수를 활용해서 가변 인자를 다루는 것을 추천함