함수 (function)

wldls·2022년 11월 4일
JavaScript
0

javascript

목록 보기
9/33

함수란 ?

함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다
즉 계속 반복해서 사용할 수 있는 코드 조각이라고 생각하면 된다
함수를 사용하는 이유는 코드의 재사용 측면에서 매우 유용하다

	function add (x,y) {
		return x + y;
	}
	add(2,5);

함수는 코드 블록으로 감싸서 하나의 실행 단위를 정의 한 것

함수 내부로 입력을 전달 받는 변수를 매개변수

입력을 인수, 출력을 반환값, 함수는 함수 정의를 통해 생성한다

인수를 매개변수를 통해 함수에 전달하면서 함수 호출을 한다

실행 결과는 반환값을 반환한다

매개변수와 인자

매개변수(parameter)는 '자리' 혹은 '변수의 이름’인 반면, 

인자(argument)는 그 자리에 들어갈 구체적인 값을 뜻한다 이 두 종류의 값을 잘 구분하기

매개변수(parameter) 는 함수 안쪽에서 변수와 같은 역할
을 하게 된다 함수가 호출될 때 값(인자)을 전달받게 되면 매개변수에 값이 정의

인자(argument)는 호출문의 괄호 안에 어떤 값 / 어떤 변수를 인자 라고한다

const x = 42
const y = 40
add(x,y); // <- add를 호출하면서 값 42,40을 전달

값을 직접 전달할 수 있을 뿐만 아니라, 변수로도 인자를 전달할 수 있다

함수의 형태

// 1.
let 함수이름 = () => {}

// 2.
function 함수이름() {}
  • 첫 번째 방식
    • let 키워드로 함수 이름을 짓는다
    • 함수의 시작을 알리는 소괄호(())
    • 화살표( -> ) 작성.
    • 함수 로직 내용에 중괄호({})
  • 두 번째 방식
    • function 키워드로 시작한다
    • 함수 이름을 작성
    • 함수의 시작을 알리는 소괄호(())
    • 함수 로직 내용에 중괄호({})

함수 분리하기

요소.addEventListener('이벤트이름', '이벤트가 발생할 때 실행될 함수');

자주 사용하는 addEventListener 함수의 두 번째 인자에 함수가 필요하다

loginButton.addEventListener('click', function() {
	const userId = document.getElementById('아이디input').value;
	const userPw = document.getElementById('비밀번호input').value;

	확인(userId,userPw);
});

함수 호출

함수를 정의했다고 해서 실행되지 않는다
함수의 이름에 소괄호(())를 열고 닫으면 그 때 실행된다

함수 이름();

위의 로그인 함수는 함수 이름이 없지만
function() ~ 부터 브라우저에서 갖고 있다가 'click' 이벤트가 발생 할때마다 function() ~ 함수 내용을 실행 시킨다

👉 사용자의 댓글 입력창의 값을 가져와서 댓글 영역에 추가해보자

위의 코드처럼 함수를 외부에 정의하고
함수 이름이 곧 함수 자체이니까 이름으로 두 번째 인자로 넘길 수도 있다

return의 필요 이유

const age = 98;
function ageOf (num) {
    return num + 2;
		// console.log(num+2)  // 콘솔x , return으로 값을 외부로 넘겨야 함
}
const ageNum = ageOf(age) // function 함수를 호출하여 return 값을 변수에 할당
console.log(ageNum)

콘솔이 아닌 리턴으로 값을 받는 것은

function 외부에서 function 안에 있는 value 값을 얻기 위해서이다

예를들어 레몬주스를 만들려고 냉장고 안에 있는 레몬🍋을 꺼내야 하는데

그걸 못 꺼내는 경우 일 것
함수가 return을 하지 않는다면 undefined를 반환 한다

그리고 return의 또 다른 역할은 return이 실행되면
그 함수는 끝나게 되어 밑의 코드는 실행 되지 않는다

파라미터 , 인자

파라미터,인자가 없을 경우를 살펴보자

function noParameter() {
  return 10;
}

const result1 = noParameter();

console.log(result1)

result 반환값으로 10이 반환 되었다

반대로 파라미터,인자가 있는 경우이다

function getNameParameter(name) {
  return name + '님'
}
const newName1 = getNameParameter('김코드')
const newName2 = getNameParameter('김기획자')

console.log(newName1)
console.log(newName2)

newName의 인자가 함수의 매개변수로 담겨져
외부로부터 들어오는 값을 담아
함수 내부에서 사용하도록 하는 변수의 역할을 한다

매개변수를 받는 함수가 필요한 이유는
만약 사이트에서 사용자가 무수히 많다면 여러개의 함수를 만들기 어렵기 때문에 매개변수를 받는 함수가 필요하다

함수의 실행 순서를 자세하게 알아보자

다음은 원 가격에 세금을 더한 값을 리턴하는 함수이다
실행 순서를 자세히 살펴보자

// 가격을 매개변수로 받아서 10%의 세금을 구하는 함수
console.log(0)
let getTax = (price) => {
console.log(1, price)
  return price * 0.1;
}
console.log(2)
// 가격을 매개변수로 받고 원래 가격에 세금을 더하는 함수
let calculateTotal = (price) => {
console.log(3 , price)
  return price + getTax(price);
}
console.log(4);
let result = calculateTotal(3500);
console.log(result);

결과는
0 -> 2 -> 4 -> 3 -> 1 -> result

    1. getTax 함수 정의
    1. calculateTotal 함수 정의
    1. calculateTotal 즉, result 변수로 할당하는 calculateTotal(3500) 3500 인자가 담긴 calculateTotal 함수 호출이 실행 된다
    1. calculateTotal 함수 내용이 실행되어 3500으로 파라미터로 받고
      3500을 price 파라미터로 받는 getTax() 함수를 호출 하게 된다
    1. getTax(price) 함수가 내용이 실행되어 price 파라미터에 3500을 인자로 받아 3500 * 0.1 값이 return 된다 그리고 3번의 getTax() 호출된 함수의 파라미터로 값을 받게 되며 3500 + 350 이 return 된다
  • result = 3850 이 할당된다

최소, 최대값을 받아 원하는 값을 반환하기

아래의 함수는 max값을 포함하지 않는, min ~ max 값까지의 정수 랜덤 넘버를 만들어주는 함수이다

오른쪽의 결과 처럼 최소값 2부터 최대값보다 -1 적은 49 사이의 정수가
랜덤으로 리턴되었다

주석처리 되어있는 console.log를 살펴보면

  • Math.floor() 함수는 소수점 1째자리 이후의 숫자를 버림하고, 정수를 리턴한다 리턴할 숫자가 없으면 NaN 결과가 나온다

  • Math.floor(Math.random());
    Math.random() 함수는 0~0.99999...인 숫자를 리턴하기 때문에,
    Math.floor(Math.random()) 의 결과는 항상 0이다

  • max(50) + 1 - min(2) -> 50은 포함 되지않게 결과는 49가 나온다
    여기에 + min(2)을 더하면
    Math.floor(Math.random() * (max(50) + 1 - min(2))) + min(2)
    -> Math.random()` 함수는 0~0.99999...인 숫자를 리턴하기 때문에 결과가 0 이 나온다면 min의 숫자를 더해 인자 값으로 넘겨진 그 최소값이 나오게 된다

출처 : https://hianna.tistory.com/454


여러개의 인자에 따라 다르게 리턴하기

아래의 인자를 넣었을 때 주석처럼 결과가 리턴되게 하시오 

meetAt(2022); // 결과 --> "2022년
meetAt(2032, 3); // 결과 --> "2032년 3월"
meetAt(1987, 10, 28); // 결과 --> "1987/10/28"

매개변수는 한개만 전달하는게 아니라 여러개의 데이터를 받을 수 있다

문제 👉

      const send = document.getElementById('send-answer');
      let count = 0;

      send.addEventListener('click', () => {
        const answer = document.getElementById('answer');
        count += 1;

        if (answer.value == '1335') {
          alert('성공');
        } else if (count > 3) {
          alert('틀렸습니다');
        } else {
          alert('다시 써보시오');
        }
      });

❓
const answer = document.getElementById('answer');
이 코드를 왜 이벤트리스너 바깥에 넣으면 안될까?
->
<script> 안에 있는 코드 -> 새로고침시 1회 실행
이벤트리스너 안에 있는 코드 -> 이벤트 실행시 1회 실행

profile
wldls
다양한 변화와 도전하는 자세로
이전 포스트

반복문 for문, while문

다음 포스트

간단한 웹게임 만들기 - javascript(유령)

0개의 댓글