[JavaScript] 문법(4) 함수(function)

1. 함수 선언 문법 3가지

1.1. 함수 선언문

JavaScript의 함수는 return 타입과 매개변수 타입을 지정하지 않는다.

function myFunction(param1, param2, ...) {
     ... logic

     return ...;
}

 

1.2. 함수 표현식

let myFunction = function(param1, param2, ...) {
     ... logic

     return ...;
}

[함수 선언문과 함수 표현식의 차이]

함수 선언문은 함수를 호출하는 코드의 위치가 어디서든(함수 선언 위치보다 위/아래) 가능하지만,

함수 표현식은 함수 선언 위치보다 '아래'에서만 가능하다

 

1.3. 화살표 함수(arrow function)

let myFunction = (param1, param2, ...) => {
     ... logic

     return ...;
}

function이라는 키워드를 제거하고 화살표 '=>'를 넣어 선언할 수 있다.

 

2. 매개변수 default value 

아래와 같이 매개변수가 입력되지 않을 경우 사용할 기본값을 설정할 수 있다.

function 함수명 (매개변수1="param1") {
     ... logic

     return ...;
}

 

3. 매개변수가 함수(Function)인 경우

함수의 매개변수로 함수를 받을 수 있고, 함수가 들어올 매개변수에 ()를 붙여 받은 함수를 실행할 수 있다. 

 

3.1. 선언과 사용

function fx1() {
  console.log("print fx1");
}

function fx2(fxParam) {
  fxParam(); // fxParam 매개변수로 fx1이 넘어와 fx1();가 실행된다.
}

fx2(fx1);
> "print fx1"

 

3.2. 매개변수 함수에 매개변수를 전달

function fx1(text) {
  console.log(text);
}

function fx2(fxParam, text) {
  fxParam(text);
}

fx2(fx1, "print fx1");
> "print fx1"

동작 과정

3.3. 익명함수를 매개변수로 전달

const fx = function(fxParam, text) {
  fxParam(text);
}

fx((text) => {console.log(text);}, "print fx1");

 

4. 생성자 함수를 이용해 Object 타입 변수 생성

'JavaScript 기초 문법(1) 변수 선언과 자료형' 편에서 객체 리터럴 방식으로 Object 변수를 선언했다. 이번에는 생성자 함수를 이용해 변수를 선언해본다.

 

생성자 함수는 함수명의 첫 글자를 대문자로 쓰는 것이 관례이며, new 키워드를 사용해 선언한다.

 

4.1. 선언과 사용

// 생성자 함수임을 알리도록 함수명의 첫 글자를 대문자(P)로 사용하는 것이 관례.
function Person(name, age){
  this.name = name;
  this.age = age;
  this.printName = function(){
    console.log(this.name);
  }
}

// Object 선언
let person1 = new Person('citron', 20); // new 연산자를 사용해 선언
let person2 = new Person('banana', 30); // new 연산자를 사용해 선언

person1.printName();
> "citron"
console.log(person1.age);
> 20

person2.printName();
> "banana"
console.log(person2.age);
> 30

 

4.2. 내부 동작

내부적으로는 아래와 같이 this에 대해 선언해주고, 반환 해주는 코드가 동작한다

function Person(name, age){
  // this = {}; // 내부 동작

  this.name = name;
  this.age = age;
  this.printName = function(){
    console.log(this.name);
  }
  
  // return this; // 내부 동작
}

 

❑ Reference

유튜브 코딩앙마 왕 초보 자바스크립트