JavaScript _함수

Adela·2020년 4월 25일
0

JavaScript

목록 보기
2/17
post-thumbnail

함수

자바스크립트에서 가장 중요한 개념 1순위

함수는 특정기능을 제공하는 코드를 작성해서 함수를 정의하고 이 함수를 호출해서 결과값을 얻는다.
하지만 이러한 기능 외에도 함수는 모듈화, 클로저, 객체 생성 등 많은 기능을 제공한다.

함수 생성

자바스크립트에서는 함수도 값이다.
(= 함수형 프로그래밍이 가능한 이유)

따라서 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼, 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다.

함수 리터럴 : 함수 선언식, 표현식 방법 모두 이 방식
객체 리터럴 방식 : 객체를 생성하기 위한 표기법, {}안에 정의 후 변수에 객체값 할당하는 방식

function add(x,y){
//function 키워드로 시작
  return x+y;
  //함수가 호출되었을 때 실행되는 코드부분
}

함수 선언문 : 반드시 함수명이 정의되어야 한다.

function 키워드

리턴값과 매개변수로 넘기는 값의 변수타입을 기술하지않음

  • 함수 호이스팅 : 함수가 정의되기 전에도 정의할 함수를 호출하는 것이 가능하다.
    선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작한다는 뜻이다.
    하지만 이것은 함수 사용 전에 반드시 선언해야한다는 규칙을 무시하게 되므로 함수 표현식을 사용할 것을 권장한다고 한다.
function add(x, y){
  return x+y;
}
console.log(add(3,4));   //7

함수 끝에 ;를 붙이지 않는다.

함수 표현식 : 함수를 변수에 할당할 수 있다.

자바스크립트 (JavaScript)에서 함수는 값이다. 따라서 함수를 변수에 할당할 수 있다.

(익명)함수를 생성하고 생성한 함수를 변수에 할당한다.

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

함수 끝에 ;를 붙인다.

함수를 할당한 변수는 함수를 참조할 뿐, 함수의 이름이 아니다.(함수변수)

const plus = add;

add === plus;  // true

console.log( add(3,4) );   // 7
console.log( plus(5,6) );   // 11

함수변수 add는 함수의 참조값을 갖고 있는 것이기 때문에 또 다른 변수 plus에도 값을 그대로 할당할 수 있다.

호출하려면 함수변수를 호출하면 된다.
add와 plus는 같은 익명 함수를 참조하는 함수변수이다. 따라서 같은형태로 함수를 호출할 수 있다.

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

Uncaught SyntaxError: Identifier 'add' has already been declared

함수변수에 기명함수를 참조하게 한 후 함수의 이름을 호출하면 error가 뜬다.

let fact = function factorial(n){
  if(n<= 1){
    return 1;
  }
  return n* factorial(n-1);
};
//기명함수 정의 후 변수에 할당 완료
console.log(fact(3));   // 6
console.log(factorial(3));   // referenceError

표현식으로 정의된 기명함수에서 함수의 이름은 외부코드에서 함수를 호출할 때가 아니라 정의된 함수 내부에서 해당 함수를 재귀적으로 호출하거나, 디버거 등에서 함수를 구분할 때 사용된다.

함수 외부에서 함수를 호출할 때는 함수 변수로 호출한다.
함수 내부에서 이뤄지는 재귀호출은 factorial 함수 이름으로 처리한다.

함수 객체

함수도 객체다.

일반객체처럼 프로퍼티(속성)를 가질 수 있다.

함수는 기본기능인 코드실행 뿐아니라 일반객체처럼 프로퍼티를 가질 수 있다.

function add (x,y){
  return x+y;  //코드내부
}
// add 함수 객체에 result, status 프로퍼티 추가
add.result = add(3,2);
add.status = add('OK');

이렇게 하면 result는 어디에 저장될까?
코드내부에 프로퍼티를 생성하고 호출한 결과를 저장한다고 한다.

눈에 바로 보이지는 않지만 호출하면 값이 나오는 것을 확인할 수 있다.

console.log(add.result);  // 5 
console.log(add.status);  // 'OK'

add함수는 함수 기능과 일반객체처럼 result, status 프로퍼티를 가지고 있다.

함수객체의 length 속성

함수가 정상적으로 실행될 때 기대되는 인자의 개수를 나타낸다.

function func0(){}
function func1(x){
  return x;
}
function func2(x, y){
  return x+y;
}
function func3(x, y, z){
  return x+y+z;
}

console.log('func0.length = ' + func0.length);
//func0.length = 0
console.log(func1.length);  // 1
console.log(func2.length);  // 2
console.log(func3.length);  // 3
profile
👩🏼‍💻 SWE (FE)

0개의 댓글