[Javascript] 함수

• 어떤 기능을 구현해놓은 명령어들의 집합
• 함수의 사용방법은 "정의"와 "호출"의 두 부분으로 나뉜다.

(1) 정의
function 함수이름() {
	명령문;
}
(2) 호출
함수이름();

 

- 코드의 중복 없애기
- input 받아서 output 반환(return)

 

- 호이스팅 : 문서를 실행할 때 먼저 코드를 쫙 돌면서 function으로 된 함수를 걷어다가 먼저 변수들로 등록하기 때문에 실행문보다 나중에 정의하는 것이 가능

// 함수는 실행문보다 나중에 정의하는 것이 가능
// 변수나 상수는 불가능! (var 제외)
console.log(add(2, 7)); //9
function add (x, y) {
	return x + y;
}

 

정의하는 방법

1. 함수 선언(함수 선언으로 정의된 함수만 코드실행 이전 미리 실행)
2. 상수나 변수에 함수 대입 함수도 값

const subt = function (x, y) {
	return x - y;
}
console.log(subt(7, 2));

// 💡 기존의 함수를 재정의하는것도 가능
add = function (x, y) {
  console.log(`${x}와 ${y}를 더합니다.`);
  console.log(`결과는 ${x + y}입니다.`);
  return x + y;
}

console.log(add(2, 7));

 

3. 화살표 함수 : 인자를 받고 반환하는 용도로 많이 사용

// 한 줄 안에 값만 반환시
const mult = (x, y) => x * y;

console.log(mult(2, 7));// 두 줄 이상의 작업이 있을 시
const mult = (x, y) => {
	console.log(${x}와 ${y}를 곱합니다.);
	console.log(결과는 ${x * y}입니다.);
	return x * y;
};

// 인자가 하나일 때는 괄호 없이 선언 가능
const pow = x => x ** 2;
console.log(pow(3));

 

화살표함수와 일반 함수의 차이

1. 화살표 함수는 인스턴트를 생성할 수 없습니다. 즉, 생성자 함수로 사용할 수 없습니다.
2. 화살표 함수는 자신만의 this를 가지지 않습니다.
3. 화살표 함수는 arguments 객체를 가지지 않습니다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

 

일급객체
- 함수를 변수나 상수의 값과 같이 다루는 언어에있는 개념
- 함수도 기본적으로 객체

- 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

 

일급 객체의 특성

1. 상수 또는 변수에 할당될 수 있음
2. 다른 함수에 인자로 전달될 수 있음
3. 다른 함수의 결과값으로서 반환될 수 있음
4. 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 

//함수를 변수에 저장
const add = function(num1,num2){
	return num1 + num2;
}

// 함수를 객체에 저장
const cal = { add }

// 함수에 인자로 전달
function sayHello(){
	return 'Hello, ';
}
function greetring(message,name){
	console.log(message() + name);
}
greeting(sayHello,"java script"); // Hello, java script

//함수반환
function helloWorld(){
	return () => {
    	console.log("hello, world");
    }

 

- 매개변수

함수의 매개변수 갯수를 넘어가는 인수

: 오류를 일으키지 않고 무시됨

function add(a, b) {
  return a + b;
}

console.log(
  add(1, 3), //4
  add(1, 3, 5), //4
  add(1, 3, 5, 7) //4
);

 

1. 기본값 매개변수

function add(a = 2, b = 4) {
  console.log(`${a} + ${b}`);
  return a + b;
}

console.log(
  add(), // 2 + 4 = 6
  add(1), // 1 + 4 = 5 
  add(1, 3) // 1 + 3 = 4
);

 

2. arguments - 함수 내에서 사용가능한 지역 변수

• 배열의 형태를 한 객체 - 배열은 아니지만 사실상 배열처럼 동작 
• 함수 호출 시 전달된 모든 인수들을 배열 형태로 가짐

function add(a, b) {
  console.log('1.', arguments); 
  console.log('2.', arguments[0]);
  console.log('3.', typeof arguments);
  return a + b;
}

console.log(
  '4.', add(1, 3, 5, 7)
);

 

function add(a, b) {
  for (const arg of arguments) { //for ...of 가 가능한 이유 : iterable이기 때문
    console.log(arg); //1 3 5 7
  }
  return a + b; //4
}

console.log(
  add(1, 3, 5, 7)
);

// 화살표 함수에서는 arguments 사용 불가

 

- 함수(function)와 메소드(method)의 차이

함수 : 특정 작업을 수행하기 위해 설계된 기능, 직접 호출 가능, 자체적으로 존재

메소드 : 객체의 프로퍼티가 함수인 경우, 점이나 대괄호 표기법을 이용한 호출, 함수의 비해 재사용이 어려움, 객체와 연결

 

호출 방식의 차이 : 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
} 

obj.show1(); // 메소드 객체 obj의 프로퍼티 이며, obj객체를 통해 호출했으므로 메소드
show2();     // 함수 객체를 생성하지 않고 직접 호출했으므로 함수 (window	전역객체로 호출)
// 사용자가 정의한 객체의 프로퍼티가 함수인 경우가 메소드