Function
함수라는 데이터 타입으로 함수 이름을 붙이고 중괄호 안에는 함수가 담당할 기능이 들어가 있다.
function camille() {
let petName = "bbachon",
console.log(petName)
return petName
};
*📌 함수를 구성하는 세가지 구성요소 *
- input 받기
- 기능 수행
- output 반환
But, 늘 이세가지 요소가 있어야만 함수로서 동작하는 것은 아님, 간혹 (리턴)아웃풋 없이 인풋과 기능을 수행하는 것 만으로도 함수가 작동할 수 있다.
함수는 변수와 마찬가지로 선언을 하고 시작한다. 그런데 선언하는 것만으로 끝나지 않고 실행을 시켜줘야한다. 따라서 선언과 실행은 같이 짝을 지어 다닌다고 볼 수 있다.
= 함수를 정의 한다. = 함수를 호출한다.
function sayHello(**INPUT**){ console.log('Hello! Camille💛') }
### 📕 **기능만 출력하는 함수**
여기서 함수의 이름은 sayHello 이라고 볼 수 있다. 또한 ( )안이 INPUT의 자리이다.
console.log('Hello! Camille💛')는 내부에 작동할 기능이라고 볼 수 있다.
>**호출을 하는 방법** ```sayHello();```
아웃풋을 반환한다. = 아웃풋을 return한다.
```javascript
function sayHello(){
let friend = 'Camille'
console.log('Hello!'+' ' + friend)
}
function sayHello2(){
let friend = 'Camille'
return 'Return' + friend
}
sayHello();
sayHello2();
< "Hello! Camille"
문자열 하나만 출력되었다. 이유는? console.log가 찍은 콘솔만 출력 결과물이 나타나고
sayHello2의 함수는 콘솔에 아무것도 찍히지 않는데 --> 정상
return은 콘솔로그가 아니고 아웃풋으로 반환을 하긴하지만 콘솔에 어떤 대상을 출력하는 기능을 하는 것이 아니다. 콘솔에 어떤 대상을 출력하는 것은 console.log뿐이다.
따라서 return 은 결과물로서 반환한다는 뜻이지 이 결과물이 바로 눈에 보이는 것은 아니다.
- return 한 값을 변수에 할당 할 수 있다.
```javascript
1.스트링
let myFriend - sayHello2();
console.log(myFriend);
< Return Camille
2.숫자
function addNumbers(){
return 100 + 200
}
let myNumber = addNumbers();
console.log(myNumber);
< 300
### 👩🏫 retun VS console.log
> **return** 함수의 output을 반환해주는 역할 / 반환해주는 결과물을 지칭
아웃풋이 분명히 있기때문에 아웃풋을 변수에 할당하는 것도 가능
> **console.log** 단순히 화면에 출력 / 결과물을 내지는 못함/ 변수에 할당할 수 없음
ex)
let number = console.log (1000);
< 1000
console.log(number)
< undefined
### 📕 **input이 있는 함수**
1. input 받기 -> 2. 기능 수행 -> 3.output return
``` javascript
기본형
function sayHello4 (input){
...input...
return output
}
응용 1
function sayHello4 (name){
return'Hello, '+ name + '!'
}
여기서, 인풋자리에는 꼭 인풋이라는 글자가 아니라도, 내가 인풋을 어떤 변수명으로 받고 싶은지만 생각하면되며 name, age, gender, color 하지만 인풋자리에 들어온 변수는 내부에서도 꼭 같은 이름으로 사용해줘야한다.
⭐ 함수를 선언할 때의 input = parameter = 매개변수 = 변수
응용 2
function sayHello4 (name){
return'Hello, '+ name
}
function sayHello5 (name){
console.log('Hello '+ name)
console.log('Nice meet to you, ' + name)
}
sayHello5('camille');
sayHello5('son')
< "Hello camille"
"Nice meet to you, camille"
"Hello son"
"Nice meet to you, son"
camille 파라미터(name) 자리에 넣어줄 다른 값을 써줘야함
응용 3
function sayHello4 (name){
return'Hello, '+ name
}//input 값인 name은 여기서 parameter를 뜻함
let greeting = sayHello4('camille')//여기서 camille은 argument를 의미
console.log(geeting);
< Hello, camille
⭐ 함수를 호출할 때의 함수명(name);-> argument = 전달인자 = 값
🧷** argument는 인수 = 전달인자 *, *parameter를 인자 = 매개변수 **
응용 4 : 좀 더 효율적인 호출 방식
function sayHello4 (name){
return'Hello, '+ name
}
let firtstGreeting = sayHello4('Camille');
let secondGreeting = sayHello4('Son');
let thirdGreeting = sayHello4('Ka');
console.log(firtstGreeting);
< Hello, Camille
응용5 : addedNumber
function addedNumbers(num1, num2){
let result = num1 + num2
return result
}
let addNumber= addedNumber(3,5);
console.log(addNumber);
< 8
'DEV' 카테고리의 다른 글
JavaScript : Array (1) | 2024.10.20 |
---|---|
JavaScript : 조건문 (0) | 2024.10.20 |
운영체제(정의, 목적, 분류) (0) | 2024.10.20 |
JavaScript 시작하기 (0) | 2024.10.20 |
CSS 들여다보기 (0) | 2024.10.20 |