[JS] 12. 함수

김지민·2022년 6월 3일
0

자바스크립트

목록 보기
16/20
post-thumbnail

1. 함수란?

일련의 과정을 문으로 구현하고 코드 블로으로 감싸서 하나의 실행 단위로 정으한 것이다.

2. 함수의 사용 이유

여러번 호출가능, 재사용가능.
유시 보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과

3. 함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다.

함수 리터럴의 구성 요소

함수 이름

  • 함수 이름은 식별자다. 따라서 식별자 네이밍 규칙을 준수해야 한다.
  • 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다.
  • 함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명 함수, 없는 함수를 무명/익명 함수라 한다.

매개변수 목록

  • 0개 이상의 매개변수를 소과호로 감싸고 수미표로 구분한다.
  • 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 즉, 매개변수 목록은 순서에 의미가 있다.
  • 매개 변수는 함수 몸체 내에서 변수와 동일하게 취급된다. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야 한다.

함수 몸체

  • 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행단위로 정의한 코드 블록이다.
  • 함수 몸체는 함수 호출에 의해 실행된다.

리터럴은 값을 생성하기 위한 표기법
함수 리터럴도 평가되어 값을 생성하며 그 값은 객체다
함수는 객체다

일반 객체는 호출할 수 없지만, 함수 객체는 호출할 수 있다.

4. 함수 정의

하ㅁ수를 호출하기 이전에 인수를 전달 받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것

4.1 함수 선언문

//함수 선언문

function add(x,y) {
  return x+y;
}

// 함수 참조
// console.dir은 console.log와 달리 함수 객체의 프로퍼티까지 출력한다.
// 단 node.js 환경에서는 console.log와 같은 결과가 출력된다.

console.dir(add); // f add(x,y)

//함수 호출
console.log(add(2,5)); // 7

함수 리터럴과 형태가 동일하다
함수 리터럴은 함수 이름을 생략할 수 있지만,
함수 선언문은 함수 이름을 생략할 수 없다.

함수 선언문은 표현식이 아닌문이다.
(객체는 표현식이라고 알고 있는데, 그렇다면 함수 선언문은 객체가 아닌가..?)

즉, 크롬 개발자 도구의 콜솔에서 함수 선언문을 실행하면 완료값 undefined가 출력된다.


//기명함수 단독은 -> 함수 선언문
function foo() { console.log('foo');}

//함수 리터럴을 피연산자로 사용하면 함수 리터럴 표현식으로 해석
(function bar() {consol.log('bar');});
bar() // ReferenceError: bar is no define

5. 함수 호출

함수를 호출하면 현재 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다. 이때 매개 변수에 인수가 순서대로 할당되고 함수 몸체의 문들이 실행되기 시작한다.

5.1 매개변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전ㄴ달할 필요가 있는 경우, 매개 변수를 통해 인수를 전달한다. 인수는 값으로 평가될 수 있는 표현식이어야 한다. 인수는 함수를 호출할 때 지저앟며,

function add(x,y) {
  retrun x+y;
}

console.log(add(2)); // NaN

매개변수와 인수의 개수가 일치하지 않아도 에러는 발생하지 않는다.
초과 인수는 버려지는 것이 아니라 암묵적으로 arguments 객체의 프로퍼티로 보관

따라서 자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.

function add(x,y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw new TypeError('인수는 모두 숫자 값이어야 합니다')
  }
  return x+y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(add('a','b')) // TypeError: 인수는 모두 숫자 값이어야 합니다.
profile
💡Habit is a second nature. [Git] https://github.com/Kimjimin97

0개의 댓글