innn

function 본문

FE/HTML CSS 자바 스크립트

function

33삼 2022. 8. 29. 15:33

 

function이란 계속 반복해서 사용할 수 있는 코드 조각이다.

코드의 반복을 줄일 수 있다. 

funtion은 어떤 코드를 캡슐화해서 실행을 여러번 할 수 있게 해준다. 

argument(인수)는, function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법이다.

 

function 선언

function 함수명 () {

실행코드 

}

 

furntion 실행

함수명 ();

arguement(인수)를 보내야 하는데 인수란 함수를 실행하는 동안 어떤 정보를 함수에게 보낼 수 있는 방법이다. 

 

데이터를 funtion에 보내는 방법

 

 

function의 괄호 안의 매개변수에서 argument를 받아들일 수 있다.

예를 들어 위의 코드에선

nameOfPerson이 "sam", "yun"을 받은 것이다. 

arguement는 위와 같이 age, name 등 여러개를 받을 수 있다.

 

ex) funtion plus(a, b) >>> plus라는 펑션에 a와 b 라는 아규먼트 

firstNumber과 secondNumber라는 아규먼트는 {} 중괄호 안에서만 존재한다. function의 밖에선 존재하지 않는다.

가령 plus(firstNumber, secondNumber); 이라고 함수를 호출하면 에러가 뜬다.

왜냐 ? 아규먼트는 펑션 내부에서만 존재하기 때문이다. (데이터를 받기위한 매개체일 뿐) 

 

펑션을 데이터없이 실행하면 NaN(숫자가 아님)이 뜬다.

 

이게 데이터를 받는 방법이다.

 

 

 

그러나 함수를 그냥 어떤 기능을 수행하는 것이라고 생각하기 보다는

어떤 일을 수행하고 그 결과를 알려주는것이라고 생각해보자.

콘솔이나 alert가 아닌 코드에서 결과를 원할 때가 있을 것이다. 

그때 추가해야할 것이 return이다

 

함수 안에 return을 추가하면, 누군가가 function을 실행할 때, 그 실행문을 리턴값으로 대체시켜 줄 것이다. 

 

어떤 작업을 처리하고 그 결과를 return하기 위해 function 을 사용할 것이다. 

 

데이터를 받아서 사용하거나, 화면에 결과를출력하고 싶어함 => result 사용하기 

 

const calculator = {  plus: function (a, b) {  // 더하기
    return a + b;
  }, 
minus: function (a, b) {  // 빼기
    return a - b;  
}, 
times: function (a, b){  // 곱하기   
return a * b; 
}, 
divide: function(a, b){  // 나누기
    return a / b; 
}, 
power: function(a, b) {  // 제곱
    return a **b;
},
};

const plusResult = calculator.plus(2, 3);

'FE > HTML CSS 자바 스크립트' 카테고리의 다른 글

자스로 계산기 만들기  (0) 2022.08.29
자바스크립트 기본기 정리 (1)  (0) 2022.08.29
Object  (0) 2022.08.29
배열  (0) 2022.08.29
null 값과 undefined  (0) 2022.08.29