Javascript_function

Function

Function은 실행 가능한 코드의 집합체다. 한 마디로 행동들을 묶어놓은 패키지라고 보면 된다. 알약 캡슐처럼 이런저런 우리 몸에 어떤 영향을 미치는 영양소들이 하나의 캡슐 안에 들어있고 그 캡슐을 우리가 필요할 때마다 먹는다고 생각하면 된다.

기본 구조> input

function sayHello() {

    console.log("sayHello")

}

 

sayHello()

> output

 

파이썬과 크게 다르지 않아서 이해하기가 쉽다.

 

이제 함수에 파라미터(입력변수)를 넣어서 실행해보자.

function sayHello(nameOfPerson) {

    console.log(nameOfPerson)

}

 

sayHello("thisBag");

sayHello("thatBag");

sayHello("thoseBag");

위 함수에서는 파라미터 1개를 넣었다. 그럼 파라미터 2개를 넣어보자.

function sayHello(nameOfPerson, age) {

    console.log(nameOfPerson, age)

}

 

sayHello("John", 20);

 

 

 

파라미터 2개를 넣으니 ‘John 20’이라는 결과물이 도출되었다. 파라미터 사이에 스페이스 1칸이 들어갔다.

 

Function을 객체Object에 넣기

const player = {

    name = "John",

    sayHello = function (otherName) {

        console.log("Hi", otherName + ", Good to see you again"),

    },

};

 

console.log(player.name);

player.sayHello("Suji");

 

function을 객체에 넣으면 위와 같다. sayHello라는 키에 function을 대입한다. 직관적으로 이해할 수 있다. player 객체에 sayHellow 메소드를 사용하면 해당 function이 실행된다. 한번 확인해보자.

 

문제 발생

그런데 ‘}’ 때문에 문법 오류가 발생했다. 어디가 문제가 생긴 것일까?

 

const player = {

    name = "John",

    sayHello = function (otherName) {

        console.log("Hi", otherName + ", Good to see you again"),

    },

};

 

console.log(player.name);

player.sayHello("Suji");

문제 원인

1. Object 내 name, sayHello를 정의해줄 때 ‘:’가 아닌 ‘=’를 썼다. 
2. function 내 console.log 구문이 끝난 후 무의미한 ‘,’가 들어가있다.

해결

const player = {

    name : "John",

    sayHello : function (otherName) {

        console.log("Hi", otherName + ", Good to see you again")

    }

}

 

console.log(player.name);

player.sayHello("Suji");

 

인사이트

• JS에서 Object 내 property와 method를 정의하기 위해 ‘:’를 쓴다
• ‘=’는 Object 선언 시 사용한다
• 불필요한 ‘,’는 넣지 않는다

 

클린 코드

const calculator = {

    add : function(a, b){

        console.log(a + b);

    },

    minus : function(a, b){

        console.log(a - b);

    },

    multiple : function(a, b){

        console.log(a * b);

    },

    divide : function(a, b){

        console.log(a / b);

    },

    power : function(a, b){

        console.log(a ** b);

    },

};

 

위 코드를 좀 더 간결하게 정리할 수는 없을까? 선배님들께 피드백을 요청하여 아래와 같이 수정을 했다.

 

//version 2

const calculator = {

    add(a, b) { console.log(a + b)},

    minus(a, b) { console.log(a - b)},

    multiple(a, b) { console.log(a * b)},

    divide(a, b) { console.log(a / b)},

    power(a, b) { console.log(a ** b)},

};

 

calculator.add(10, 2);

calculator.minus(10, 2);

calculator.multiple(10, 2);

calculator.divide(10, 2);

calculator.power(10, 2);

 

methodName : function(a, b)가 -> methdName(a, b)로 줄여졌다.

 

//version 3

 

const calculator = {

    add: (a, b) => a + b,

    minus: (a, b) => a - b,

    multiple: (a, b) => a * b,

    divide: (a, b) => a / b,

    multiple: (a, b) => a ** b,

};

 

console.log(calculator.add(2, 10));

console.log(calculator.minus(2, 10));

console.log(calculator.multiple(2, 10));

console.log(calculator.divide(2, 10));

console.log(calculator.multiple(2, 10));

 

이렇게도 줄일 수 있다고 한다.

add : function(a, b) {a + b}가 아예 add: (a,b) => a + b 로 바뀌어버렸다.

function 함수가 사라지고 ‘{}’도 =>로 바뀌었다. 개인적으로 세 번째의 코드가 가독성이 좋다고 생각하지만 현업에서 이런 방식으로 코드를 작성하는지 잘 모르겠다. 

 

Return

 

const age = 50;

 

function calculatorKrAge(internationalAge) {

    return internationalAge + 2;

}

 

const krAge = calculatorKrAge(age);

console.log(krAge);

 

한국 나이를 계산하는 calculatorKrAge() 함수의 결과값을 krAge 변수에 대입하고, 해당 변수를 출력하고 싶다. 하지만 이 경우 calculatorKrAge()의 결과 값이 console.log()가 아닌 return으로 반환해주어야 값들이 각 변수들에 대입되어 결과적으로 호출할 수 있다. 기존에 사용했던 console.log와 alert는 단순 출력 함수이기 때문에 값을 다루기 위해선 return해야 한다.

 

위 calculator 코드에 return을 적용하면 아래와 같이 나타난다.

//version 4

const calculator = {

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

    minus(a, b) { return a - b},

    multiple(a, b) { return a * b},

    divide(a, b) { return a / b},

    multiple(a, b) { return a ** b}

}