.png)
위코드 사전스터디 과정 중 JavaScript의 Function(함수)에 대해서 정리해본다
😊 이번 스터디를 통해 드디어 함수에서 return이 어떻게 사용되는지 알게 되었다. 그동안 도대체 함수에 return은 왜 있는거지? 결과를 반환한다는 뜻이 뭐지? return이 들어가면 함수 호출은 왜 안 되는 거야?(그냥 안 되는 건 아니었다😂)라는 질문들이 있었는데 이번에 해결! 게다가 function YourName(name1, name2) {...}에서 parameter, 즉 name1, name2의 의미도 제대로 이해하였다. "변수"라고 생각하니 편안..😉
함수를 직관적으로 그려보자
- 함수의 구조와 구성요소
- 함수에는 1번 input, 2번 function(기능수행), 3번 output(반환,결과)가 있다
- 생레몬을 1번, 레몬을 자르는 기능을 2번, 잘린 레몬을 3번이라고 생각하면 쉽다
✨ 함수의 동작 조건
2(function) : 정상동작 가능
2(function) + 3(output) : 정상동작 가능
1(input) + 2(function) : 정상동작 가능
1(input) + 2(function) + 3(output) : 정상동작 가능
Function만으로 동작하는 함수
함수의 선언과 실행
✨ 함수를 선언하면 꼭 실행을 시켜줘야 한다
- 함수의 선언 = 함수를 정의한다(만들고)
- 함수의 실행 = 함수를 호출한다(동작시킨다)
✨ 함수 선언의 예를 들어보자
function sayHello () {
console.log('Hello! Code Kim!')
}
✨ 이번에는 함수 선언하고 호출을 해보자
function sayHello () {
console.log('Hello! Code Kim!')
}
sayHello(); // Hello!Code Kim 출력sayHello();> 이렇게 함수의 실행(호출)이 없으면 함수가 동작하지 않는다
Function + Output 반환 함수로 동작하는 함수
output 반환하는 함수란?
- output 반환하는 함수 = output return하는 함수(동일한 의미)
함수 안에서 변수 선언하고 할당할 수 있다
✨ 변수를 한 개 선언했을 때
function sayHello ( ) {
let friend = 'Code Kim'
console.log('Hello!' + friend)
}
sayHello(); // Hello!Code Kim 출력✨ 변수를 여러개 선언할 수도 있다
function sayHello3 () {
let sentence = 'Hello!! '
let name = 'Code Kim'
console.log(sentence, name)
}
sayHello3();return을 사용하여 함수를 만들어보자
- 함수를 선언하고 호출해도 콘솔로그에 아무 출력이 일어나지 않는다
✨ 그 이유, return의 특징
- return은 콘솔에 어떤 대상을 출력하라는 명령어가 아니다.
- output을 return(반환)한 대상(Return Code Kim)은 그 자체로 특정한 데이터가 된다
- return한 값을 콘솔 로그에 나타내려면, console.log()라는 명령을 사용하여 콘솔에 출력해야 함
- return한 값을 변수에 할당이 가능하다
✨ 함수명으로 함수를 호출했을 때의 예시
function sayHello2 () {
let friend = 'Code Kim'
return 'Return ' + friend
}
sayHello2(); // 출력 안됨✨ console.log()를 사용하여 화면에 출력하도록 함
function sayHello2 () {
let friend = 'Code Kim'
return 'Return ' + friend
}
console.log(sayHello2()); // Return Code Kim ✨ return한 값을 변수에 할당하여 콘솔에 출력하기
function sayHello2 () {
let friend = 'Code Kim'
return 'Return ' + friend
}
let yourFriend = sayHello2 (); > sayHello2()는 실행이 되고 있지만,
console.log()로 출력을 안 했기 때문에 보이지는 않는 것
console.log(yourFrined); // Return Code Kim
✨ 변수를 여러 개 선언해서 값을 반환하는 함수를 만들어보자
function sayHello3 () {
let friend1 = 'Code Kim, '
let friend2 = 'Code Lee'
return friend1+friend2
}
console.log(sayHello3 ()); // Code Kim, Code Lee
[return과 console.log의 차이점]
return : 함수의 output을 반환하는 결과물, 변수에 할당 가능
console.log : 단순히 화면에 출력, 변수에 할당 불가능
Input이 있는 함수
input = pharameter
- 매개변수, pharameter라고도 함
- pharameter가 있는 함수도 함수의 선언(정의)과 실행(호출)이 있어야 동작을 한다
- pharameter에 들어오는 매개변수명을 함수 안에서 동일하게 사용해야 한다
- pharameter은 함수 안에서 변수와 동일하게 취급된다
input이 있는 함수의 정의와 호출
✨ 함수의 정의(input의 위치 보기!)
function sayHello4(input) {
. . . input . . . (기능들)
return output
}
function sayHello4(name) {
console.log("Hello, " + name)
}
✨ 함수의 호출(호출될 때, input이 바뀌는 부분 보기!)
- argument(인수) : 함수를 실행시킬 때, 호출할 때 parameter 자리에 들어가 있는 값
함수가 실행되기 위해서는 인수(argument)를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다 - "지연비" : argument, name : parameter
function sayHello4(name) {
console.log("Hello, " + name)
}
sayHello4("지연비"); // Hello, 지연비✨ parameter와 return의 사용해
function sayHello4(name) {
return "Hello, " + name
}
let greeting = sayHello4('wecode');
console.log(greeting); // "Hello, Wecode"함수 내부의 명령과 호출이 여러 개인 Case
function sayHello4 (name) {
console.log("Hello, " + name)
console.log("Nice to meet you, " + name + "!")
}
sayHello4('Wecode');
[출력 : 콘솔에 두 줄 실행]
"Hello, Wecode"
"Nice to meet you, Wecode!"
함수 호출을 두 개 다른 값으로 하면?
sayHello4('Wecode');
sayHello4('Code Kim');
[출력 : 콘솔에 4줄이 출력됨]
"Hello, Wecode"
"Nice to meet you, Wecode!"
"Hello, Code Kim"
"Nice to meet you, Code Kim!"
함수에 parameter가 여러 개인 case
- parameter의 이름은 함수 내부에서 동일해야 한다
- parameter 개수는 여러 개가 들어갈 수 있지만, 함수 내부에서 이름과 순서가 동일하게 배치되어야 함
✨ 인자가 2개인 함수 선언 예시1
function addNumbers (num1, num2) {
let result = num1 + num2
return result
}
✨ 2가지 방식의 호출 방법
1. let addedNumber = addNumbers(3,5);
console.log(addedNumber);
2. console.log(addNumbers(1,2));
✨ 인자가 2개인 함수 선언과 호출 예시2
- 인자 값의 순서, argument의 순서와 출력되는 값을 자세히 보자
function divideNumbers (number1, number2) {
let result = number1 / number2
return result
}
let smallNumber = divideNumbers(10, 100)
console.log(smallNumber); = 0.1
let smallNumber = divideNumbers(100, 10)
console.log(smallNumber); = 10함수의 재사용!
✨ 함수는 하나만 만들고 input만 3번 바꿔서 함수를 여러 번 사용할 수 있다
function sayHello4(name) {
return 'Hello ' + name
}
let firstExample = sayHello4('wecode')
let secondExample = sayHello4('Code Kim')
let thirdExample = sayHello4('Developers')
console.log(firstExample) // Hello wecode
console.log(secondExample) // Hello Code Kim
console.log(thirdExample)// Hello Developers
실수하기 쉬운 check point
function addNumbers (num1, num2) {
let result = num1 + num2
return result
}- result, num1, num2라는 함수 내부에서 선언된 변수들은 함수의 중괄호가 끝난 함수의 바깥에서는 사용할 수 없게된다
- console.log(num1) // 참조에러가 난다(ReferenceError: num1 is not defined)
console.log(result) // 참조에러가 난다(ReferenceError: num1 is not defined) - console.log(addNumbers(100,600) // 700 ; num1, num2 자체를 출력한 것은 아니다
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ