[JS] 04. Function(함수)

1. 함수

1.1 함수란?

• 자주 실행하는 기능에 포함된 명령어가 여러가지일 때 그 명령을 한번에 실행할 수 있게 하는 것
• input 받기 > 기능 수행 > output 반환하는 과정으로 진행된다.

1.2 함수를 왜 사용해야 할까?

• 각 명령의 시작과 끝을 명확하게 알 수 있다.
• 함수에 별도의 이름을 붙이면 같은 기능이

1.3 함수 만들기

• 변수와 마찬가지로 '선언'을 하고 '실행'한다.
• 같은 말로, 함수를 '정의'하고 '호출'한다.

1.4 함수 형태

함수 정의하기

• function 기입한 뒤 함수의 이름을 적는다.
• () 안에는 input을 넣어준다.
• {} 중괄호 안에는 함수가 수행할 기능을 적어준다.

function sayHello(input) {
	console.log('Hello! Code Yeo!')
} 

함수 호출하기

• 함수 이름과 소괄호를 적어준다.
• 함수를 선언하고 실행하지 않으면 아무것도 콘솔에 나오지 않는다.

sayHello()

예시1)

function sayHello() {
  let friend = "Code Yeo"
  console.log('Hello '+friend)
}

sayHello();

//결과값 : Hello Code Yeo

2. Return

2.1 Return이 있는 함수

• 하기 예시의 결과값은 아무것도 나오지 않는다.
• Return은 output으로 반환을 하지만 콘솔에 어떤 대상을 출력할 수는 없다. 콘솔에 무언가를 출력하는 것은 console.log가 유일하다.

function sayHello2() {
  let friend = "Code Yeo"
  return 'Return' +friend
}

sayHello2();

//결과값 : 아무것도 나오지 않음

• 그렇다면 return한 대상을 어떻게 콘솔로그로 나타나게 할 수 있을까?
• 하기와 같이 sayHello2라는 함수를 실행해서 나오는 output을 콘솔로그를 통해 출력되도록 할 수 있다.

function sayHello2() {
  let friend = "Code Yeo"
  return 'Return ' +friend
}

console.log(sayHello2());

//결과값 : Return Code Yeo

• 함수를 변수에 넣어줄 수도 있다.

function sayHello3() {
  let friend = "Code Yeo"
  return 'Return ' +friend
}

let myFriend = sayHello3()
console.log(myFriend)

//결과값 : Return Code Yeo

• 만약 출력된 console.log를 다시 console.log할 경우?
• 처음에 number 변수에 10000이 출력되도록 코드를 작성했기 때문에 첫번째 결과값으로 10000이 나온다.
• 그러나 다음줄인 console.log(number)의 number에는 1000이 들어가지 않았다. 왜냐, console.log는 output을 도출해내는 기능이 아닌 단순 출력 기능이기 때문에 undefined가 나온 것.

let number = console.log(10000)
console.log(number)

//결과값 : 10000
//결과값 : undefined

3. Input

3.1 Input이 있는 함수

• 마찬가지로 input 선언(정의)를 해준 뒤 실행(호출)을 해줘야만 함수가 실행된다.
  

• input 자리에는 내가 이런 이름으로 input을 사용할 것이다라는 뜻.

• input에서 사용하는 이름은 함수 내부에도 같은 이름으로 사용한다.
  

예시)

function sayHello4(name) {
	console.log('Hello ' + name)
}

sayHello('Wecode')

//결과값 : Hello Wecode

예시2)
문제 : 함수의 인자로 성과 이름(두 개의 인자)을 받아서 합친 후, 전체 이름을 출력하고 반환하는 함수 getFullName을 구현해주세요.

답안 :

function getFullName(firstName, lastName) {
  const fullName = firstName + lastName
  console.log(fullName)
  return fullName
}

getFullName('코드', '김')

//결과값: 김코드

예시3) 나눗셈 예시

function divide() {
  let result = 66 / 11;
  return result;
}

console.log(divide());

//결과값 : 6

function divideByTwo(num1) {
  let result = num1 / 2;
  return result;
}

console.log(divideByTwo(10));
console.log(divideByTwo(100));

//결과값 : 5, 50

3.2 Parameter & Argument 차이

• 함수를 선언할 때 넣어주는 input을 parameter(파라미터)라고 한다.
• 함수를 실행할 때(호출시킬 때) 넣어주는 input을 argument(인자)라고 한다.

function sayHello4(name) {
	return 'Hello, ' + name 
}

//여기서 name은 parameter(파라미터)다.

let greeting = sayHello4('Wecode')
console.log(greeting)

//여기서 'Wecode'는 Argument(인자)다.