프로그래밍/자바스크립트
09 사용자 정의 함수(function)
윤지(●'◡'●)
2021. 6. 16. 09:31
반응형
사용자 정의 함수(function)
함수는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
1. 이름만 존재하는 함수
function 함수명(){
함수가 호출되었을 때 실행할 문장;
...
}
//호출 방법
함수명();
[예시]
function func1() {
console.log('func1 함수 호출!')
}
2. 매개변수가 있는 함수
function 함수명(매개변수1,매개변수2,...){
함수가 호출되었을 때 실행할 문장;
...
}
//호출시
함수명(값1,값2,...);
[예시]
function func2(num){
console.log(`전달 받은 매개변수의 값 : ${num}`);
}
이때, 매개변수도 종류가 나누어진다.
1) 디폴트 매개변수
매개변수를 정하지 않으면 대신 할 기본값을 변수에 저장한다.
function 함수명(매개변수1 = 값1,매개변수2 = 값2,...){
함수가 호출되었을 때 실행할 문장;
...
}
[예시]
function func4(name='바둑이'){
console.log(`강아지의 이름은 ${name}입니다.`);
}func4('구름이');
func4();
매개변수를 정하지않은 경우 기본값으로 준 바둑이가 출력되는것을 확인할 수 있다.
2) 나머지 매개변수
생략 접두사(...)를 사용하여 특정위치의 인수부터 마지막 인수까지 한번에 지정할 수 있다.
function 함수명(매개변수1, ...매개변수2){
함수가 호출되었을 때 실행할 문장;
...
}
[예시]
function func5(num1, ...num2){
console.log(`num1의 값 : ${num1}`);
console.log(`num2의 값 : ${num2}`);
} func5(10,20,30,40,50,60,70);이때, num1에는 10이 들어가고 num2에는 20,30,40,50,60,70의 값이 배열로 들어간다.
3. 리턴값이 있는 함수
function 함수명(매개변수1,매개변수2,...){
함수가 호출되었을 때 실행할 문장;
...
return 값;
}
[예시]
function getSum(num1, num2){
return num1 + num2;
}const sum = getSum(10,5);
console.log(sum);
매개변수인 num1 과 num2의 합이 리턴되어서 sum에 둘의 합이 저장된것을 확인할 수 있다.
html파일과 js파일 연결하기
<head> 태그내에 <script>태그를 사용하여 위와 같이 경로를 작성해 연결해주면 된다.
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형