Function

함수란?

함수의 정의와 호출

1. 함수 정의(선언) 하기
2. 함수 호출(실행) 하기

함수의 반환(Return)

1. 반환 기능 수행
2. 반환 결과(Output) 확인하기
3. 반환(Return) 예시
4. 반환(Return) 과 Console.log의 차이

함수의 Input

1. 모든 요소가 있는 함수의 예시

주의해야하는 것들

💡 함수란?

1. Input 받기 -> 2. 기능 수행 -> 3. Output 반환 의 구조로 구성되어 있다.
   

하지만 위의 모든 요소가 늘 있어야 동작하는 것은 아니다. 1번과 2번, 2번과 3번만 혹은 2번만 있어도 잘 동작한다.

💡 함수의 정의와 호출

선언과 실행을 해준다. 다시 말하자면 정의와 호출을 해준다는 뜻이다.

함수는 어떤 동작을 대신 수행해주는 대상이지만 호출하기 전까지는 절대 그 기능이 수행되지 않는다.
우선 2번의 기능만 수행하는 함수를 먼저 알아본다.

1. 함수 정의(선언) 하기

변수 선언 시 제일 처음에 let 이나 const 를 달아준 것처럼 함수는 fucntion 을 달아준다. 그리고 함수의 이름(ex - sayHello)을 붙여준다. 소괄호 사이는 Input(Parameter) 의 자리이다. 중괄호 사이는 함수가 실행할 기능이 들어간다.

function sayHello () {
  let friend = 'Sue Coding'
  console.log('Hello! ' + friend)
}

2. 함수 호출(실행) 하기

함수의 이름과 함께 소괄호를 붙여준다.

sayHello()	// Hello! Sue Coding

💡 함수의 반환(Return)

2번의 기능 수행과 3번의 Output 반환(Return) 할 수 있는 함수를 알아본다.
Return은 결과물로써 반환을 한다는 뜻이다.

1. 반환 기능 수행

Return 이라는 명령어를 사용한다. 그 뒤에는 Output으로 결과를 내고 싶은 대상을 적어준다. 코드를 실행 시 Output이 만들어지고 있으나 육안으로 보이지 않는다는 특징이 있다.

function sayHello2() {
  let friend = 'Sue Coding'
  
  return 'Return ' + friend
}

2. 반환 결과(Output) 확인하기

console.log(sayHello2())	// Return Sue Coding

함수를 호출(실행)해서 나오는 Output을 consloe.log로 호출해주면 그제서야 육안으로 결과를 확인할 수 있다.

3. 반환(Return) 예시

반환된 Output을 변수에 할당하여 출력한다,

1)

function sayHello2() {
  let friend = 'Sue Coding'
  
  return 'Return ' + friend
}

let myFriend = sayHello2()

console.log(myFriend)	// Return Sue Coding

2)

function addNumbers() {
  return 100 + 200
}

let myNumber300 = addNumbers()

console.log(myNumber300)

console 에 값을 찍는 아래의 3가지 방법이 있다.

1) addNumbers()			// 호출 시 console에 찍히지 않음

2) console.log(addNumbers())	// 호출 시 console에 찍힘

3) let myNumber300 = addNumbers()

console.log(myNumber300)	// 호출 시 console에 찍힘

4. 반환(Return) 과 Console.log의 차이

Return	console.log
함수의 output을 반환하는 결과물	단순히 화면의 출력

return은 output이 분명히 있기 때문에 어떤 output을 변수에 할당하는 것이 가능하다. console.log는 불가능하다.

💡 함수의 Input

input이 있는 함수의 구조는 아래와 같다.
소괄호 안에 input(parameter, 매개변수) 값을 적어준다.
중괄호 안에 실행시키고 싶은 기능을 적어주고 output을 return 해준다.

function sayHello4(input) {
  . . . input . . .
  return output
}

1. 모든 요소가 있는 함수의 예시

함수 선언 시 input 자리에 들어가는 것을 parameter(매개변수)라고 부른다.
함수 호출 시 input 자리에 들어가는 것을 argument(인자)라고 부른다.
parameter(매개변수)는 개발자가 작성하기 나름이지만 함수의 내부(중괄호)에서는 input에 쓰인 동일한 parameter를 사용해야 한다.

1)

function sayHello4 (name) {		// input -> parameter
  return name +'님, 가입을 환영합니다.'
}

let greeting = sayHello4('Sue Coding') // Argument

console.log(greeting)			// Sue Coding님, 가입을 환영합니다.

2)

function addNumbers (num1, num2) {
  let result = num1 + num2
  
  return result
}

let addedNumber = addNumbers(3, 5)

console.log(addedNumber)	// 8

3)

function divideNumbers (number1, number2) {
  let result = number1 / number2
  
  return result
}

let smallNumber = divideNumbers(10, 100)

console.log(smallNumber)	// 0.1

특히 나눗셈 연산자가 오는 경우 smallNumber 변수에 할당된 함수 값의 인자의 순서가 바뀌면 결과 값이 바뀌니 주의해야한다.

💡 주의해야하는 것들

1) 함수의 파라미터는 함수 내부에서(중괄호 사이)만 사용 가능하다.

2) Replit 시스템 사용 시 console.log를 찍지 않아도 Return 되는 값을 쉽게 확인하기 위해서 값을 console 창에 띄워준다. 그래서 Jsbin 과 같은 코드 에디터를 사용하는 것이 좋다.