Java Script - 함수

❌ Unsupported block (table_of_contents)

함수 (Function)

JavaScript에서 함수란? 

(코드의 동일한 코드를 여러번 사용할 수 있어 재사용성을 높여준다 )

1. 함수를 사용하는 이유

  • 코드를 재사용할 수 있다. (코드를 한 번 정의하고, 여러 번 사용)
  • 다른 인자를 사용하여 동일한 코드를 여러 번 사용할 수 있으며, 다른 결과를 도출할 수 있다.

    • 2. 함수의 특징

  • 변수안에 담길 수 있다. (함수가 값이기 때문)
  • 객체의 속성안에 method로 담길 수 있다.
  • 다른 함수의 인자값을 전달될 수 있다.
  • 함수의 return값으로도 사용할 수 있다.
  • 배열의 값으로도 사용할 수 있다.

    • 3. 함수 구문

    형태 

    function name (parameter1, parameter2,...) {
	// Execution statement
}

  • 함수 내에 선언된 변수는 함수의 지역변수가 된다. 지역 변수는 함수 내에서만 접근할 수 있으며 함수가 시작될 때 생성되고 함수가 완료되면 삭제된다.
  • 함수 이름에는 문자, 숫자, 밑줄 및 달러 기호 (변수와 동일한 규칙)가 포함될 수 있다.
  • 괄호에는 쉼표로 구분된 매개 변수 이름이 포함될 수있다.(parameter1, parameter2, ...)
  • 함수가 실행할 코드는 중괄호 ({})안에 있다.

    • 3.1 함수 선언식 - 변수 X

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

    3.2 함수 표현식 - 변수 O

    변수를 선언하고 함수를 대입하는 방식을 함수 표현식 이라고 한다.

    var addOne = function(x) {
  var y = x + 1;
  return y;
};
    ❌ Unsupported block (callout)

    4. 함수 이름 지정

    함수의 이름은 가능한 짧고 정확하게 함수의 기능을 설명해야 한다.

  • show.. : 무언가를 보여준다.
  • get.. : 값을 반환한다.
  • calc.. : 무언가를 계산한다.
  • create.. : 무언가를 만든다.
  • check.. : 무언가를 확인하고 불리언 등을 반환한다.

    • :: 사용예시

    showMessage(..)		// shows a message
getAge(..)			 // returns the age (gets it somehow)		
calcSum(..)			// calculates a sum and returns the result
createForm(..)		 // creates a form (and usually returns it)
checkPermission(..)	// checks a permission, returns true/false

    5. 함수 선언

    // 함수 선언
function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

    위 코드 예제는 add라는 이름의 함수를 선언하는 코드이다. 즉, add라는 단어의 의미가 저 함수가 되도록 설정한다는 뜻이다. 기본적으로 자바스크립트에서 add라는 단어는 아무런 의미가 없는 단어지만 저 함수를 선언해줌과 동시에 우리는 add라는 단어를 사용할 수 있게 되고, JavaScript 실행 엔진도 add라는 단어가 곧 저 함수를 의미한다는 것을 알게 된다.

    6. 함수 호출

    선언해 놓은 함수는 아래와 같이 소괄호를 이용하여 호출할 수 있다.함수를 호출한다. = 함수 내부의 코드가 실행된다.

    add(3, 5);

    함수를 호출하기 전까지는 함수 내부의 코드 구문들은 실행되지 않는다.

    7. 즉시 실행 함수 (IIFE)

    (function() {
	statements
})

    IIFE는 함수가 선언되자마자 호출되는 함수 표현식이다.

    8. Return 명령문

    return 명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다.

    3.1 Return의 기능 - 함수 종료

    함수 내부에서 return 명령문이 실행될 경우, 해당 함수가 종료된다.

    ::예제참고

    function doSomething () {
  console.log('start!');
  var a = 3;
  var b = 2;

  if (a > b) {
    console.log('a is bigger than b!');
    return;  //함수 종료
  }

  console.log('I am the last console.log!');	//실행되지 않음
}

doSomething();

// 결과 : start!, a is bigger than b!

    if 구문 내부가 실행되면서 return 명령문이 실행됐기 때문에 return 명령문은 해당 함수를 종료시키게 된다. 현재 return 명령문이 속해있는 함수는 doSomething이기 때문에 doSomething함수의 모든 코드 실행이 종료됨으로 세번째 콘솔 메시지는 나타나지 않는다.

    3.2 Return의 기능 - 값 반환

    return은 함수를 종료하는 기능과 더불어 어떠한 값을 반환할 수 있게 해준다.

    ::예제참고

    var a = 1;
consol.log(a);

// 결과 : 1

    a라는 변수에 1이라는 값을 담아서 콘솔에 나타나도록 로그하였다. 위 코드는 아래와 같이 표현할 수 있다

    ::예제참고

    function getA () {
  return 1;
}

var a = getA();
console.log(a);

// 결과 : 1

    a라는 변수에 1이라는 값을 담아서 콘솔에 나타나도록 로그하였다. 위 코드는 아래와 같이 표현할 수 있다

    예제에서 우리는 getA라는 함수를 선언했다. 그리고 변수 a를 선언하고 getA()라는 값을 대입해주었다. 그렇다면 getA()라는 표현의 값은 무엇일까?

    getA()라는 함수 실행문을 살펴보자면 getA가 함수여야 한다. 실제로 우리 예제 코드에서는 getA라는 함수가 존재한다.

    함수 실행문이 있는 자리는 해당 함수의 return값으로 대체된다.

    return이라는 단어 뒤에 어떤 값을 작성해주게 된다면 "해당 값이 함수에서 반환된다."

    따라서 현재 getA라는 함수의 return값은 1이다.

    ::예제참고

    function doSomething () {
  var a = 3;
  var b = 2;

  if (a > b) {
    return;
  }

  return 3;
}

var a = doSomething();
console.log(a);

// 결과 : undefined

    return이라는 단어 뒤에 어떤값도 지정해 주지 않은 경우, 기본적으로 undefined가 반환되게 된다. 이와 마찬가지로 return되는 값을 지정해 주지 않고 종료되는 함수 또한 기본적으로 undefined가 반횐되게 된다.

    + 매개 변수

    function add (x, y) {
  var result = x + y;
  console.log(result);
  return result;
}

add(3, 5);  // 함수 실행 + 매개변수의 정확한 값 호출

// 결과 : 8

    첫번째 줄의 x, y를 매개변수라고 부른다. 우리가 작성하는 함수에 필요한 요소들을 "정의" 하는 거라 생각하면 된다.

    함수를 선언하고 그 함수에 대한 매개 변수를 선언하는 것은 매개 변수의 값을 정해주지 않는다. 매개 변수의 정확한 값은 함수를 호출하는 순간에 결정된다.

    실행하는 소괄호 안에 3, 5를 쉼표로 구분하여 넣었다. 3과 5처럼 함수를 호출할 때 함수가 받는 값을 인자(argument)라고 부른다.

    var result = x + y;
console.log(result);
return result;

    1.result 변수가 선언된다.2.x + y를 연산하고 8이라는 결과를 얻는다.3.8이라는 결과값을 result 변수에 할당한다.4.콘솔에 result 변수의 값을 로그한다.5.result 변수의 값을 반환(return)한다.

    참고 - https://lifea.co.kr/자바스크립트-함수-매개변수-javascript-function-parameters/