함수(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() ~ 함수 내용을 실행 시킨다
👉 사용자의 댓글 입력창의 값을 가져와서 댓글 영역에 추가해보자
위의 코드처럼 함수를 외부에 정의하고
함수 이름이 곧 함수 자체이니까 이름으로 두 번째 인자로 넘길 수도 있다
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
아래의 함수는 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의 숫자를 더해 인자 값으로 넘겨진 그 최소값이 나오게 된다
아래의 인자를 넣었을 때 주석처럼 결과가 리턴되게 하시오
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회 실행