본문 바로가기
DEV

JavaScript : Function

by camille: 2024. 10. 20.
728x90
반응형

Function

함수라는 데이터 타입으로 함수 이름을 붙이고 중괄호 안에는 함수가 담당할 기능이 들어가 있다.

  function camille() {
    let petName = "bbachon",
    console.log(petName)
    return petName
    };

*📌 함수를 구성하는 세가지 구성요소 *

  1. input 받기
  2. 기능 수행
  3. 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
728x90
반응형

'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