[노마드 코더 Vanilla JS] 함수 (Function)

지난 시간에는 변수, 이번 시간은 함수이다.

 

Function

만일 console.log 라는 코드 조각으로 반 친구들에게 인사를 하고싶다면 어떻게 해야할까?

 

 

console.log("hello Oh!")

console.log("hello Kim!")

console.log("hello Jung!")

console.log("hello Park!")

 

             .

             .

             .

 

여기까진 좋지만 만약 집에 갈때가 되서 인삿말을 "Bye"로 바꾸고 싶다면, 반에 100명이 있다면 100번을 쳐야할 셈이다. 중복을 줄이는 것이 컴퓨터 프로그래밍에서 발전해 온 길이다. (생활코딩에서 들은 말) 그러므로 100번의 console.log("hello ***")을 하나의 완전한 코드로 인사가 필요할 때마다 꺼내 쓸 수 있다면 아주 좋을 것이다. 이 때 function이라는 것을 사용 할 수있다. 그러므로 일단 이름을 부르며 인사를 할 수 있는 function을 만들어 보자.

 

function sayHello() {

}

 

sayHello 라는 친구들에게 인사해줄 함수를 막 만들었다. 하지만 이것은 아무런 행동도 결과도 없다.

 

function sayHello(){

   console.log ("hello!")

}

 

그리고 이 함수를 사용 하면

 

다음과 같이 function은 console.log("hello!") 라는 인사를 하는 행동을 할 수 있게 되었다. 하지만 그 어디에도 이름에 관한 언급은 없기 때문에 이름을 부를 순 없다. 그래서 우린 여기에 name이라는 이름을 부를 수 있는 'parameter' (매개변수) 라는 것을 넣어 '이름'을 부르며 인사를 하게 만들수 있다.

 

parameter

function sayHello(name){

   console.log ("hello!", name)

}

 

parameter는 외부로 부터 들어온 데이터 ("Oh") 를 받아 함수의 행동에 따라 처리하게 할수 있도록 한다. 이렇게 이름을 부르고 인사를 다했다면, 집갈 때 인삿말로 바꾸는 것은 쉽다.

 

console.log 에 있는 "hello!"라는 문구를 "Bye!"라고만 바꿔준다면 지금부터 모든 인사를 "Bye!"로 손쉽게 할 수 있다. 

여기까지 반 친구들에게 인사도 다 했지만, 다음 날에는 몇시에 인사를 했는 지도 알고 싶다면 어떻게 해야 할까?

 

function sayHello(name, time){
   console.log ("hello!", name, "it is", time, "good morning")
}

 

아마도 이렇게 적을 수 있을 수 있을 것이다. parameter를 두개 둬서 외부에서 들어오는 데이터 time(인사하는 시간)을 추가해주는 것이다. 하지만 오늘 점심이 무엇인지, 언제 수업이 끝날지 등등의 외부에서 들어올 데이터가 많아진다면 ("hello!", name, "it is", time, "good morning") 이 와같은 방법으로 표현한다면 정말 귀찮을 것이다. 그래서 이런 표현방법이 있다.

 

function sayHello(name, time){ 
   console.log (`hello! ${name} it is ${time} good morning`) 
}

 

` ` 이라는 새로운 스트링을 사용하는 것이다. ,(컴마)를 찍고 name이라고 쓰는 것이 ${name}으로 대체 되었다. 좀 더 하나의 문장을 쓰듯 유연하게 사용이 가능해진 것이다.

 

return

만일 모두에게 인사하는 함수를 어린이날을 맞아 한 사람 한 사람에게 특별히 변수를 만들어 인사를 한다면 어떻게 할 수 있을 까.

 

const helloNahmir = sayHello(Nahmir)

 

이렇게 선언할 수 있다. 하지만 helloNahmir로 인사를 하려했더니

 

 

인사 대신 undefined 라는 어떠한 값도 할당받지 못한 데이터 타입이 나왔다. 분명 나는 Nahmir라는 데이터를 받아 console.log 를 통해 "hello!"라는 인사를 하는 행동을 하는 함수를 helloNahmir라는 변수에 할당해 줬는데 말이다.

이것은 return과 관련이 있다. 변수 helloNahmir에는 sayHello(Nahmir)의 return 이라는 값이 할당된다. 즉 return을 통해 인사를 돌려주는 부분이 없었던 sayHello함수를 helloNahmir라는 변수에 할당한 결과 undefined라는 결과가 나온 것이다. 그렇다면 새로운 스트링 ` `와 return 을 종합하여 이렇게 바꿔볼 수 있겠다.

 

function sayHello(name){

   return `hello! ${name}`

}

 

 

Nahmir가 섭섭하지 않게 인사가 잘되었다. 결국 한 변수에 어떠한 함수를 할당할 때에는 그 return값을 할당하게 되는 것이다.