javaScript. (3) 함수(Function)

1. 함수(Function)

 

📌 함수의 생성

 

방법 1 / 함수 선언 (Declaration)

function addOne(x) {
   var y = x + 1;
   return y;
}

 

방법 2 / 함수 표현식 (Expression)

let addOne = function(x){      // 변수 선언 후 함수 대입
   var y = x + 1;
   return y;
};

 

여기서 addOne은 함수의 이름(=변수의 이름)이고,

x는 사용자가 넣고싶은 값을 넣는 곳이다.

따라서, x를 매개변수(parameter)라고 한다.

 

 

return은 해당 값을 함수 바깥으로 내보내고, 함수를 종료하라는 의미이다. (= 반환)

 

❗❗ 주의 - return의 위치

 

 

 

위 두 방식의 차이 중 하나는 호이스팅(hoisting)이라는 현상인데,

해당 내용은 아래 포스팅에 정리해두었다.

 

javaScript. 호이스팅(Hoisting)

 

 

또 다른 차이는 중괄호(블록) 끝에 세미콜론(;)이 붙는다는 점이다.

함수 선언으로 함수를 만들 때에는 끝에 세미콜론을 붙이지 않는다.

 

 

 

 

---

 

📌 함수의 실행

 

위와 같이 생성한 함수를 실행하기 위해서는

함수의 이름에다 소괄호()를 붙이고,

괄호 안에는 매개변수에 상응하는 인자(argument)를 넣어준다.

 

>> 함수의 호출

 

 

변수에 저장해서 return값을 받을 수도 있고,

그냥 단순히 호출만 할 수도 있다.

(보통은 변수에 저장하여 사용)

 

 

(상) 호출만 / (하) 호출하여 변수에 저장

우리가 소괄호 안에 인자(argument)로 1을 넣었으므로

3이 매개변수(parameter) x로 전달되고, addOne 함수 내부의 코드가 실행된다.

 

 

function(parameter) {   }	함수 선언시 괄호 안의 값
function(argument)	함수 호출시 괄호 안의 값

 

 

만약, 매개변수가 두개가 있다면 호출 시 인자를 두개 넣어주면 된다.

예>

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

addNumbers(12, 5);    // 17

 

 

___

 

 

but. 매개변수가 많아지면 사용시 헷갈릴 수 있다.

>> 매개변수가 많아질 것 같으면 객체를 주로 사용한다.

 

const addAll = function(object) {
   return object.a + object.b + object.c + object.d;
};

addAll({a: 1, b: 3, c: 4, d: 6});     // 14

이렇게 객체를 이용하면,

매개변수도 하나이고, 인자(argument)도 하나로 깔끔하게 된다.

 

addAll함수에 인자로 넣은 객체( { } 안의 값들 )가 object라는 매개변수로 전달되어

함수의 코드대로 실행되는 것이다.

 

 

+) 추가로, 함수의 인자로 함수를 호출해도 된다.

const addOne = function(x) {
   return(x + 1);
}

const multiply = function(x, y) {
   return(x * y);
}   

const addMultiply =  multiply(addOne(2), addOne(4));    // 15

 

 

 

___

 

 

 

❗  return을 하지 않는 함수

 

- return이 없는 함수는 자동으로 undefined를 반환한다.

- console.log나 alert 등이 출력되는것은 return에 의한 것이 아니므로 관련 X.

 

 

>> return 값을 입력하지 않으면 자동으로 return undefined; 가 마지막 코드로 동작!

 

 

 

 

 

___

❗❗ return의 위치

 

- return 이후에는 함수가 종료되기 때문에 실행되지 않음.

> return 뒤에 코드를 적는 실수를 하지 말자.

 

 

---

 

2. 메소드 (method) + 그 외

 

자바스크립트에서는 객체나 배열의 값(value)으로 함수가 들어갈 수 있다.

>> 함수도 하나의 값이기 때문.

 

 

const user = {
   name : 'yjin',
   age : 23,
   sayHello : function() {
   	  console.log('Hello ' + this.name);    // 여기서 this는 객체 자신을 의미.
    }
}

실행 결과

 

객체에서 속성(property)의 값으로 사용되는 함수를 메소드(Method) 라고 한다.

 

>> 추후에 this에 대해 자세히 포스팅하도록 하겠다.

 

 

 

 

 

** 함수 심화 ver.

const mother = function(func) {
  func();
};
const children = function() {
  alert('안녕하세요');
};
mother(children); // '안녕하세요'

 

위 예제에서, mother이라는 함수는

매개변수를 받아 그 함수를 실행하도록 되어있다.

 

그리고, childeren이라는 함수는 '안녕하세요'를 출력한다.

 

mother의 인자(argument)로 children이 들어갔기 때문에

매개변수 func에 childern이라는 값이 전달된다.

따라서, mother 함수의 코드를 실행하여

 

children()이 실행 -> children 함수가 호출됨.

 

 

>> 함수가 인자값(argument)과 매개변수(parameter)로 활용될 수 있다!

 

 

위와 같이 값(value)으로 사용하는 함수를 1급 함수라고 부른다.

 

 

 

---

REFERENCE

https://www.zerocho.com/category/JavaScript/post/572dcbbd2115c895b0f248fd

(JavaScript) 함수(Function)

이 포스팅은 zerocho님의 javascript 강의와 책을 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!