함수(function)

/**

 * function -> 함수

 */

/**

 * 만약에 2라는 숫자에 * 10 / 2 % 3을

 * 스트링으로 변환해서 반환받고 싶을땐?

 */

console.log((((2 * 10) / 2) % 3).toString());

이렇게 계산식을 만들고 .toString이라는 함수로 string타입으로 변환하면 될것이다

1

값은 1

 

그런데 만약 3이라는 숫자로 * 10 / 2 % 3 을 하고싶으면

console.log((((2 * 10) / 2) % 3).toString());

console.log((((3 * 10) / 2) % 3).toString());

이렇게 복사해서 앞에 숫자만 바꿔주었다

그러면 위의 사진처럼 중복되는 코드가 존재한다

하지만 개발자는 DRY라고 반복하지 말라는말이 존재한다

DRY를 지키는게 좋은 코드를 작성하는데 큰 도움이 된다고 한다

/**

 * DRY

 * D -> Don't

 * R -> Repeat

 * Y -> Yourself

 */

function calculate() {

  console.log((((2 * 10) / 2) % 3).toString());

}

이렇게 function키워드로 calculate라는 함수를 선언하고

동작문에는 위의 식을 그대로 붙여넣었다

function calculate() {

  console.log((((2 * 10) / 2) % 3).toString());

}

calculate();

그리고 calculate () 라고 함수를 입력해 실행할 수 있다

1

값도 그래도 1으로 잘 출력된다

function calculate(number) {

  console.log((((number * 10) / 2) % 3).toString());

}

그러면 앞에 선언했던 함수뒤에 () 괄호에 변수를 넣어고

동작문의 원래 2였던 숫자를 number라는 변수로 지정했다

function calculate(number) {

  console.log((((number * 10) / 2) % 3).toString());

}

calculate(3);

그리고 calculate (3); 이라고 괄호안에 값을 지정해주면

해당 코드는 3 * 10 / 2 % 3이라는 식이 되는것이다

0

값은 0

/**

 * 함수에서 입력받는 값에대한 정의를 parameter라고 한다

 *

 * 실제 입력하는 값은 argument라고 한다

 */

parameter

argument

function multiply(x, y) {

  console.log(x * y);

}

이렇게 파라미터를 ,(콤마)를 기준으로 여러개 지정할 수 있다

function multiply(x, y) {

  console.log(x * y);

}

multiply(2, 4);

아그미터를 지정할때도 ,(콤마)를 기준으로 순서대로 적용된다

아그미터가 (2,4) 이므로

위의 함수식은 2 * 4가 된다 답은 8

8

이렇게 파라미터를 여러개 받을수 있다

 

function multiply(x, y = 10) {

  console.log(x * y);

}

하나의 파라미터에 디폴트값을 줄 수 있다

function multiply(x, y = 10) {

  console.log(x * y);

}

multiply(2, 4);

아그미터에 2, 4 값을 입력하면

8

그대로 2 * 4 로 8이 출력된다

function multiply(x, y = 10) {

  console.log(x * y);

}

multiply(2);

하지만 이번에 아그미터에 2라는 값만 지정하면

20

20이 출력된다 파라미터인 y에 디폴트값으로 10으로 지정해줘서

기본값은 10인 것이다

 

아그미터 지정할때 값을 지정해주지 않으면 기본값인 10이 적용되어

2 * 10 이 되어 값은 20이 출력된다

**

 * 반환받기

 * return 받기

 */

함수로 만들어진 값은 그 함수 안에서만 존재한다

하지만 return으로 함수 밖으로 반환받을 수 있다

 

function multiply(x, y) {

  return x * y;

}

const result1 = multiply(2, 4);

console.log(result1);

함수의 동작문에 return키워드를 사용

 

이렇게 result1이라는 변수를 선언하고 변수값에

내가 만든 multiply이라는 함수와 아그미터값을 지정해주고

콘솔창에 result1이라는 변수를 출력해보자

8

아그미터의 값에 따라 2 * 4 는 8이되고

result1이라는 변수값에 저장되기 때문에

result1을 출력했을때 8이라는 값이 나온다

/**

 * Arrow 함수

 */

const multiply = () => {

   

}

arrow함수 문장이다 =>라는 기호를 사용한다

소괄호 () 에 파라미터를 지정하고 중괄호 {} 에 동작문을 지정한다

const multiply2 = (x, y) => {

  return x * y;

};

console.log(multiply2(4, 3));

12

언뜻보면 function인 일반 함수와 arrow함수는 똑같은거 같다

차이점은 나중에 배운다고 한다

const multiply2 = (x, y) => x * y;

console.log(multiply2(4, 5));

arrow함수는 이렇게 코드를 간결하게 할 수 있다

20

해당 코드는

const multiply2 = (x, y) => {

  return x * y;

};

이 코드와 똑같다고 한다

const multiply3 = (x) => x * 1;

console.log(multiply2(4));

이렇게 파라미터가 하나인경우

const multiply3 = x => x * 1;

console.log(multiply3(4));

이렇게 파라미터의 소괄호 ()를 없에도 된다고 한다

간결해지기 때문

근데 vscode에서 저장을하면 자동으로 괄호가 쳐진다

const multiply5 = (x) => (y) => (z) => `x: ${x} y:${y} z:${z}`;

console.log(multiply5(2)(5)(7));

x: 2 y:5 z:7

이런식으로 사용할수 있다고 한다

function multiply6(x) {

  return function (y) {

    return function (z) {

      return `x: ${x} y:${y} z:${z}`;

    };

  };

}

console.log(multiply6(2)(5)(7));

x: 2 y:5 z:7

function으로 일반함수를 만들었을때 위의 arrow함수와 동일한 코드이다

 

함수를 변수선언 하듯이 선언해도 된다고 한다

const multiplyTwo = function (x, y) {

  return x * y;

};

console.log(multiplyTwo(1, 5));

이렇게 변수선언문으로 변수명을 선언하고 변수값을 함수키워드로 선언해서

함수를 선언할 수 있다

 

function(x,y) {

    console.log(x*y);

}

함수를 즉시 실행할 수 있다고 한다

위의 코드를 소괄호()로 크게 묶고 다시 소괄호()로 파라미터값을 지정해주면 된다

(function (x, y) {

  console.log(x * y);

})(2, 2);

4

이렇게 즉시 실행 된다고 한다

 

 

console.log(typeof multiply);

multiply의 자료형은

function

console.log(multiply instanceof Object);

위의 instanceof 키워드는 비교 키워드이다

multiply은 object와 같은가? 라는 뜻

true

그러면 true가 반환된다

그러므로 함수는 오브젝트타입이다