[JavaScript 개념잡기] 함수와 메서드

4. 함수와 메서드

 

1) 함수

✔ 함수란?

다수의 명령문을 코드 블록으로 감싸고 하나의 실행 단위로 만든 코드의 집합

• 유사한 동작을 하는 코드를 하나로 묶어 범용성을 확대 시킨 블록 코드
• 정의 부분, 호출 부분으로 구성
• 가급적 한 가지 일만 하며 매개 변수는 최대 3개 이내로 작성을 권장

  function add(x, y ) {
  return x + y; // 반환 결과
  }
  add (10, 20); // 인자(argument) : 매개변수(parameter)에 대입

  
  
  

✔ 함수 정의

1. 함수 선언식

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

 

2. 함수 표현식

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

 

3. 화살표 함수

// ES6
const add = (x, y) => x + y;

✔ 함수 호출

자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않음

• ES6에서 도입된 기본값을 통해 undefined 변수가 들어올 경우 값 초기화 지정 가능
  

  function print_add(x, y) {
    console.log(x + y);
  }
  print_add(); // NaN
  print_add(10, 20, 30); // 30, 이후 인자는 안건드림
  
  // 변수에 값을 설정할 때
  function print_add(x, y = 10) {
    console.log(x + y);
  }
  print_add(); // NaN, x값 없음
  print_add(10); // 20
  
  // 매개변수가 없을 때
  function print_min() {
    // console.log(arguments);
    console.log(arguments[0] - arguments[1]); // 넣어준 index에 맞춰 인자에 전달
  }
  print_min(10, 20, 30); // -10
  print_min(10); // NaN​

✔ 함수 반환

return 후 코드는 수행되지 않으며 default return value = undefined

function add(x, y) {
  return x + y; // break 처럼 쓸 수 있음
  console.log("hi"); // 미 수행, 수행하고 싶으면 위로
}
function dummy() {}

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return false;
  }
}

console.log(add(10, 20)); // 30
console.log(dummy()); // undefined
console.log(checkAge(14)); // false

✔ 재귀 함수 🤯

함수 자신을 참조해 호출하며 동일한 코드가 계속적으로 수행되는 함수 호출 방법

• 특정 조건이 됐을 때 자신을 그만 호출되도록 하는 exit code 가 필요

  function recurse() {
  // function code
  recurse();
  }
  recurse();

  
  
  

✔ 콜백 함수

• 콜백 함수(Callback Function): 다른 함수의 매개 변수로 전달되어 수행되어지는 함수
• 고차 함수(Higher-order Function): 매개변수를 통해 함수를 받아 호출하는 함수 
• // callback function > 다른 함수의 매개변수가 됨 function callback_func() { console.log("callback function"); } function higher_order_func(callback) { console.log("higher-order function"); } console.log(callback_func);

 

 

✔ call by *

let a = 1;
let add = function(b) { b = b + 1 }; // 값을 복사하기 때문에 함수 내 값이 영향 x
add(a); 

console.log(a); // 1

1. call by value
   • 값에 의한 복사로 함수 내에서 매개변수 값을 변경 시켜도 영향이 미치지 않음
   • 원시 타입(primitive type)을 매개변수로 넘겼을 때 발생

 

var a = { v: 1 };
var add = function(b) { b.v = b.v + 1 }; // 주소 값이 복사가 됐기 때문에 가리키고 있는 곳 값이 바뀜

2. call by reference
   • 주소에 대한 복사로 함수 내에서 매개변수 내 값을 변경시키면 원본 데이터에도 영향을 받음
   • 객체 타입(object type)을 매개변수로 넘겼을 때 발생

✔ 함수 저장

배열의 요소(element) 혹은 객체의 속성(property)에 함수를 정의하여 저장 가능

let list = ["john", 27, function hello_func() { console.log("hello"); }];
let obj = {
  name: "john",
  age: 27,
  hello_func() {
    console.log("hello");
  }.
}
function hello_func() { conosole.log("hello") };

hello_func(); // hello
obj.hello_func(); // hello
list[2](); // hello

2) method

method(메서드)란?

객체에 저장된 값이 함수인 경우

let user = {
  name: "park",
  age: 28,
  hello_func() {
    console.log("hi");
  },
};

✔ this

메서드에서 객체 내부의 속상(property)값을 접근할 수 있는 지시자

let obj = {
  name: "park",
  age: 91,
  hello_func() {
    console.log(
      "hello" + this.name
    );
  },
};

• this를 사용하는 method는 추가 가능함
• 이 떄 this는 runtime에 결정되어 호출한 객체에 따라 다름
• 객체의 property값을 각각 달리 핸들링 할 수 있는 것이 장점