SONG's 개발새발

Javascript 함수 Function

2019-04-14

함수 function

  1. 어떠한 작업을 실행하기 위해 그룹화한 것
  2. 함수를 쓰는 이유
    • 코드의 재사용
    • 코드의 그룹화, 모듈화 -> 가독성, 유지보수 또한 좋음

1. 함수 선언

1. 함수 선언식

  1. function으로 함수의 시작을 알린다.
  2. 함수명을 써야 한다.
  3. 호이스팅 : 프로그램의 첫머리로 끌어올린다.
1
2
3
4
function name() {
  name();
  // 자기자신을 호출할 수 있다. (재귀함수)
}

2. 함수 표현식 ( 함수리터럴 )

  1. 함수 리터럴 : 익명함수, 무명함수
    • function(x) {...}
    • 함수명이 없다 -> 대신, 변수에 함수를 넣는다.
  2. 익명함수는 호이스팅 X
    1
    2
    3
    var foo = function() {
      console.log("함수리터럴");
    };

3. Function 생산자 함수 (잘 사용하지 않음!)


2. 자바스크립트 함수는 객체이다. 일급객체!

일급객체

  • 생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍언어의 기본적 조작을 제한없이 사용할 수 있는 대상

1. 일급객체 특징

  1. 함수리터럴로 표현이 가능하다.
  2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
  3. 함수의 매개변수(Parameter)에 전달할 수 있다.
  4. 반환값(return)으로 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 1. 무명의 리터럴로 표현이 가능하다.

// 2. 변수나 자료구조에 함수를 저장할 수 있다.
var foo = function() {
  console.log("변수안에 함수 담았다.");
};

var obj = {
  foo: function() {
    console.log("메서드 : 객체 안에 담긴 함수.");
  }
};

// 3. 함수를 매개변수로 전달할 수 있다.
var foo2 = function(para) {
  // para : 매개변수
  return console.log(para);
}; // 1

foo2(1); // foo2는 1이라는 인수(argument)를 통해 1이라는 값을 매개변수(Parameter)로 받게 된다.

// 4. return으로 사용할 수 있다.
var foo3 = function() {
  return 1 + 1;
}; // 2
  1. 파라미터는 3개 이하가 좋다!
  2. Return : 함수는 return을 만나면 함수 밖으로 값을 내보낸다!
    • 함수에서 받아낸 값을 다시 사용해야하는 경우 return을 사용!!!

3. 매개변수(Parameter, 인자) vs 인수(Argument)

1. 매개변수(Paramenter)

  1. 함수에게 추가적인 정보가 필요할 경우 매개변수 사용

  2. 인수(Argument)를 담는 변수

    • 함수 내에서 변수와 동일하게 메모리 공간을 확보
    • 전달받은 인수(Argument)는 매개변수에 할당

2. 인수(Argument)

1. 함수에서 넘겨받는 실제 값
1
2
3
4
5
6
7
8
var foo = function(p1, p2) {
  console.log(p1, p2);
};

foo(1);

// 1 undefined
// 인수를 전달받지 못한 매개변수 : 값이 할당 되지않은 **undefined**가 됨
2. 참조값 전달, 값의 전달은 다르게 동작한다!
  1. 값의 전달
1
2
3
4
5
6
function add(x) {
  return (x = x + 1);
}
var a = 3;
var b = add(a);
console.log(a, b); // a=3, b=4
  1. 참조값 전달 (Object)
1
2
3
4
5
6
7
8
function add1(p) {
  p.x = p.x + 1;
  p.y = p.y + 1;
  return p;
}
var a = { x: 3, y: 4 };
var b = add1(a);
console.log(a, b); // a,b = {x:4, y:5}

4. 인수 (Argument) vs Rest Parameter (ES6)

1. 인수(Argument)는 유사배열이다

  • 유사배열 객체(Array-like Object) : 일반 객체에 length라는 프로퍼티를 가진 객체
  • 하지만, 배열은 아니다!!
    => .push()같은 배열 메소드는 사용할 수 없다!
1
2
3
4
5
6
7
8
9
10
11
function foo() {
  var result = 0;

  for (var i = 0; i < arguments.length; i += 1) {
    result += argumnets[i];
  }
  // argument가 유사배열이기 때문에 .length와 arguments[i]를 사용할 수 있다.
}

foo(1, 2, 3, 4, 5);
// Arguments(5) [1, 2, 3, 4, 5]

2. ES6 : Rest Parameter (…rest)

  • argument보다 사용하기 편리하다
  • 유사배열이 아닌 진짜 배열로 넣어준다!
  • Spread연산자( … )을 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function foo(...rest) {
  // rest대신 다른 이름이여도 된다.

  return console.log(rest);
} // [1,2,3,4,5]

foo(1, 2, 3, 4, 5);

function foo(num1, num2, ...rest) {
  // num1,2 또한 다른 이름이어도 된다.
  console.log(num1); // 1
  console.log(num2); // 2
  console.log(reset.length); // 5
}
Tags: javascript
← 4. Vue Component 0414 study →