자바스크립트 함수 사용법을 정리해보겠습니다. 함수를 정의하고 호출하는 기본 사용법과, 스코프, 호이스팅, 매개 변수, arguments, return, 객체 생성자 함수 등 함수를 사용할 때 알아야할 것들을 짤막하게 정리해보았습니다.
변수에 데이터를 저장했듯이, 함수에는 코드를 저장해서 필요할 때 호출해서 사용할 수 있습니다.
이번 글에서는 다음과 같이 함수의 사용법을 알아보도록 하겠습니다.
1. 함수 정의하기
함수에 코드를 저장하는 것을 '함수 정의문'이라고 하며 다음과 같이 선언합니다.
- 기본형 함수 : function 함수명(){}
- 익명 함수 : 참조할 변수명 = function(){}
위와 같이 함수명으로 정의하여 사용할 수도 있고, 익명 함수로서 변수에 함수를 담아서 사용할 수 도 있습니다.
참고로 익명 함수는 호이스팅(함수 정의문보다 호출문을 먼저 작성해도 작동되는 것. 끌어올리기라는 뜻)이 지원되지 않습니다.
2. 함수 호출하기
함수는 반드시 호출해야 작동이 되므로 아래와 같이 함수를 호출해 실행해야 합니다.
- 기본형 함수 : 함수명();
- 익명 함수 : 참조 변수();
호출하는 횟수만큼 함수가 실행되며, 제어문을 통해 특정 조건이 맞을 때 함수를 호출하는 등 유용하게 사용할 수 있습니다.
<body>
<button>배경색 변경</button>
</body>
<script>
let color= ["red","yellow","blue","black"];
let i=0;
function changeColor(){
i++;
if(i>=color.length){ //i가 4이상이면 i를 0으로 초기화
i=0;
}
let bodyTag= document.getElementsByTagName("body")[0];
bodyTag.style.backgroundColor=color[i];
}
let btn= document.getElementsByTagName("button")[0];
btn.addEventListener("click", function(){
changeColor();
});
</script>
getElementsByTagName과 같이 요소를 선택하거나 조작하는 명령어는 다음 글을 참고해주세요.
자바스크립트로 HTML을 조작하는 방법
자바스크립트로 HTML을 조작하는 방법을 정리해보겠습니다. 지난 글에서 문서 객체 모델(DOM)과 노드에 대해 개념을 알아보았습니다. 문서 객체 모델(DOM), 노드 구조와 개념 정리 문서 객체 모델(DO
cucat.tistory.com
3. 함수의 스코프(범위) 알기
스코프는 범위라는 뜻입니다. 변수나 함수의 유효한 범위를 말하고, 전역과 지역으로 나뉩니다.
- 전역 변수&함수 : 중괄호 밖에서 선언된 변수나 함수를 말하며 어디서든 쓸 수 있습니다.
- 지역 변수&함수 : 중괄호 안에서 선언된 변수나 함수를 말하며 중괄호 안에서만 쓸 수 있습니다.
이렇게 전역과 지역으로 나누어 관리하는 것은 변수나 함수의 이름이 중복될 경우 발생할 에러를 방지하기 위해서입니다.
스코프의 개념에 대해서 유튜브 '엘리의 드림 코딩'에서 이를 썬팅된 차에 비유해주셨던 것이 기억납니다.
안에서는 바깥이 보이지만, 밖에서는 차 안이 보이지 않는 썬팅된 차처럼 스코프를 생각하시면 이해하기 쉬울 것 같습니다.
다만 전역 함수 지역 함수가 조금 헷갈릴 수 도 있으니 짚고 넘어가겠습니다.
전역 함수는 가장 바깥에 쓰인 함수이고, 지역 함수는 함수 속의 함수입니다.
let 전역 변수;
function 전역 함수(){
function 지역 함수(){
let 지역 변수;
}
}
추가로 지역 함수의 충돌을 방지하는 '즉시 실행 함수'를 소개해드리니 이런 것도 있구나 하고 넘어가시면 되겠습니다.
(function(){
let 지역변수명;
function 지역함수명(){
코드;
}
}());
//(function(){여기서 엔터}());
function앞, 뒤로 소괄호를 위와 같이 추가하면 안에 있는 지역 함수가 생성과 동시에 실행이 됩니다.
이렇게 묶고 실행까지 시켜버리면, 바깥에서 조작할 일이 없어 지역 변수나 지역 함수명의 중복을 방지할 수 있습니다. 블럭화 된 것이죠.
4. 함수로 데이터 전달하기
위에서는 changeColor(); 이렇게 단순하게 함수명으로 호출했었습니다.
그러나 함수를 호출할 때 값을 전달해서 더욱 유용하게 사용하려면, 매개 변수를 이용해야 합니다.
매개 변수란?
매개 변수는 함수에 특정한 값을 집어넣어 함수의 안에 들어있는 코드를 실행시킬 수 있도록 매개가 되는 변수입니다.
그동안에 했던 것처럼 let 키워드를 이용해서 선언하지 않지만, 함수 옆 소괄호 안의 순서대로 저장됩니다.
처음엔 헷갈릴 수 있지만 그냥 단순하게 호출해서 쓰는 것보다 훨씬 유용하니 꼭 알아두시면 좋겠습니다.
매개 변수 사용법
매개 변수가 있는 함수 정의문을 사용하면 함수를 호출할 때에 전달하고자 하는 값을 입력해서 호출할 수 있습니다.
기본적으로 아래와 같이 사용합니다.
- 정의문 : function 함수명(매개 변수 1, 매개 변수 2...){}
- 데이터를 전달하면서 호출 : 함수명(데이터 1, 데이터 2...);
function Hello(from, name){
document.write(from+"에서 오신 "+name+"님 환영합니다!")
}
Hello("서울", "큐캣");
함수를 정의할 때 소괄호에 쓴 from, name에 각각 맨 아랫줄에 적은 데이터인 서울, 큐캣이 전달되어 실행됩니다.
매개 변수 생략하기
위에서 매개 변수를 사용해서 데이터를 전달받은 것과 같이, arguments를 이용하면 같은 효과를 낼 수 있습니다.
arguments 자체가 변수로 참조되기 때문에 일일이 매개 변수의 이름을 지정하기 귀찮을 때 사용하면 좋겠습니다.
- 함수 선언 : function 함수명(){ arguments;})
- 함수 호출 : 함수명(데이터 1, 데이터 2...);
따로 매개 변수를 지정하지 않아도, 입력된 데이터 순서에 따라 자동으로 arguments[0]부터 쭉 배열로 저장됩니다.
function printData(){
arguments;
for(let i=0; i<arguments.length; i++){
document.write(arguments[i]);
}
}
printData("1번 데이터", "2번 데이터");
5. return 이용하기
함수 안의 코드를 실행하면, 숫자 계산이든 문자열이든 특정한 '결괏값'이 나오게 됩니다.
이때 코드를 종료시키는 동시에 결괏값을 반환해 이용하려면 return문을 알아야 합니다.
사용법은 간단합니다. 아래와 같이 얻고자 하는 결괏값에 관련한 데이터를 return문 옆에 써주면 됩니다.
function 함수명(){
코드;
return 데이터;
코드2; //참고로 return문 아래의 코드는 실행되지 않습니다.
}
아래는 얻고자 하는 데이터인 시험 평균 점수를 얻고 return문으로 반환함과 동시에 함수를 종료하는 코드입니다.
let arrSubject= ["국어", "수학"]; //arrData로 2개 과목 전달
function testAvg(arrData){
let sum= 0;
for (let i= 0; i<arrData.length; i++){
sum += Number(prompt(arrData[i] + " 점수를 입력해주세요"));
}
let avg= sum/arrData.length; //평균 점수
return avg; //전체 과목 평균 점수를 반환
}
document.write("평균 점수는 "+testAvg(arrSubject)+"점 입니다.");
Number와 같이 데이터 타입을 변환하는 함수는 '자바스크립트 내장 함수'에 해당합니다. 자세한 정보는 아래 글을 참고해주세요.
변수의 개념과 사용법, 자료형 정리
변수의 개념과 사용법, 자료형에 대해 정리를 해보겠습니다. 문자와 숫자 자료형을 변환하는 방법도 소개합니다. 자바스크립트나 다른 모든 프로그래밍을 시작하려면 기초적인 프로그래밍 문
cucat.tistory.com
특정 조건에서 함수를 강제 종료시킬 때 return문을 사용하는 방법은 아래와 같습니다.
let num= 1;
let txt=document.getElementsByTagName("p")[0];
function txtSlide(nextBtn){
if(nextBtn){ //문자열은 모두 true
if(num==10) return; //num이 10이 되면 종료
num++; //num이 10이하면 1씩 증가
txt.innerHTML=num;
}
else{ //nextBtn이 아닌 경우
if(num==1) return; //num이 1이 되면 종료
num--; //num이 1이면 1씩 감소
txt.innerHTML=num;
}
}
1 이하나 10 이상이 될 경우, return문으로 인해 함수가 종료되어 텍스트가 출력되지 않습니다.
6. 재귀 함수(함수의 반복) 알기
이번에는 함수를 반복문처럼 반복해서 호출하는 방법을 소개해드리겠습니다.
함수를 반복해서 호출하려면 기본적으로 다음과 같이 작성합니다.
function 함수명(){
코드;
함수명();
}
함수명();
맨 마지막 줄에서 함수를 호출하고, 함수 안에서 다시 호출합니다. 이대로라면 계속 무한 반복이 되겠죠?
조건에 맞게 함수 호출을 조절하려면 다음과 같이 작성합니다. 10번째까지만 함수가 반복 실행된 후 종료됩니다.
let num= 0;
function repeatFx(){
num++;
document.write(num +"번째 실행" + "<br>");
if(num == 10) return;
repeatFx();
}
repeatFx();
반복문도 조건이 있었듯이, 재귀 함수에서는 if문과 return을 사용해서 반복을 멈추도록 하였습니다.
선뜻 이해가 어렵다면 if와 같은 조건문, for과 같은 반복문을 복습해보는 것도 좋겠습니다.
제어문(조건문, 선택문, 반복문) 7가지 핵심 정리
제어문(조건문, 선택문, 반복문) 7가지 핵심 정리를 해보겠습니다. 제어문은 조건문, 선택문, 반복문 이렇게 3가지로 나뉩니다. 그리고 자바스크립트에서 사용 가능한 제어문은 각각 아래와 같이
cucat.tistory.com
7. 객체 생성자 함수 사용법
여기까지 오시느라 수고가 많으셨습니다.
마지막으로 객체를 생성하는 '객체 생성자 함수'에 대해서 소개해드리고 글을 마치겠습니다.
객체 생성자 함수에 대해 이해하려면, 객체의 기본 개념- 생성과 호출에 대해 소개한 글을 먼저 참고해주세요.
자바스크립트 객체 사용법, 3종류 객체 핵심 정리
자바스크립트 객체 핵심 정리를 해보겠습니다. 내장 객체, 브라우저 객체, 문서 객체 모델에 대해 다룰 것 입니다. 이전 자바스크립트 공부 순서 글에서 언급했듯이, 자바스크립트의 가장 큰 특
cucat.tistory.com
객체 생성자 함수를 이용하면 아래와 같이 객체의 속성과 함수를 등록할 수 있습니다.
function 함수명(매개 변수 1, 매개 변수 2...){
this.속성명 = 값;
this.함수명 = function(){
코드;
}
}
let 참조 변수 = new 함수명();
기기 이름과 볼륨, 이퀄라이저 정보를 가진 객체를 만들어보겠습니다.
//객체 생성자 함수. 괄호안은 매개 변수
function GetSound(name, volumn, eq){
this.deviceName= name; //this 키워드로 속성 등록
this.deviceVolumn= volumn;
this.deviceEq= eq;
this.printInfo= function(){ //this 키워드로 함수 등록
let str="";
str += "기기 : " + this.deviceName +"<br>";
str += "볼륨 : " + this.deviceVolumn +"<br>";
str += "이퀄라이저 : " + this.deviceEq +"<br><br>";
return str;
}
}
//GetSound 객체 함수에 매개 변수 값 전달
let iphone= new GetSound("아이폰", 20, "classic");
let galaxy= new GetSound("갤럭시", 30, "pop");
//객체를 참조한 변수로 객체 함수 출력
document.write(iphone.printInfo());
document.write(galaxy.printInfo());
참고로 객체 생성자 함수는 대문자로 시작하는 것이 개발자들 간의 약속이니 가능한 지켜주는 것이 좋습니다.
그러나 위와 같이 코딩하면 같은 기능을 가진 객체를 여러 번 생성하고, 객체를 생성한 만큼 함수가 등록되어 메모리가 낭비됩니다.
따라서 객체를 생성할 때 프로토 타입을 이용해 함수를 등록하여, 함수를 공유해서 쓸 수 있게 하는 것을 추천합니다.
function 함수명(매개 변수 1, 매개 변수 2...){
this.속성명= 값;
}
함수명.prototype.함수명= function(){
코드;
}
let 참조 변수= new 함수명();
아래와 같이 프로토 타입으로 함수를 등록하면, 이전 예제와 결괏값은 같지만 메모리는 훨씬 절약되는 방식이 됩니다.
//객체 생성자 함수. 괄호안은 매개 변수
function GetSound(name, volumn, eq){
this.deviceName= name; //this 키워드로 속성 등록
this.deviceVolumn= volumn;
this.deviceEq= eq;
}
//프로토 타입으로 함수 등록
GetSound.prototype.printInfo= function(){
let str="";
str += "기기 : " + this.deviceName +"<br>";
str += "볼륨 : " + this.deviceVolumn +"<br>";
str += "이퀄라이저 : " + this.deviceEq +"<br><br>";
return str;
}
//GetSound 객체 함수에 매개 변수 값 전달
let iphone= new GetSound("아이폰", 20, "classic");
let galaxy= new GetSound("갤럭시", 30, "pop");
//객체를 참조한 변수로 객체 함수 출력
document.write(iphone.printInfo());
document.write(galaxy.printInfo());
//두 객체가 같은 함수를 공유하는지 체크
document.write(iphone.printInfo === galaxy.printInfo);
여기까지 자바스크립트 함수 사용법에 대해 정리해보았습니다. 읽어주셔서 감사합니다.
'웹 > 웹코딩 공부' 카테고리의 다른 글
| 자바스크립트로 HTML을 조작하는 방법 (0) | 2022.08.12 |
|---|---|
| 문서 객체 모델(DOM), 노드 구조와 개념 정리 (0) | 2022.08.10 |
| 브라우저 객체 모델 6가지 정리, 사용법 (0) | 2022.08.10 |
| 자바스크립트 객체 사용법, 3종류 객체 핵심 정리 (0) | 2022.08.10 |
| 제어문(조건문, 선택문, 반복문) 7가지 핵심 정리 (0) | 2022.08.08 |
| 연산자 7종류 핵심 정리 (0) | 2022.08.08 |
| 변수의 개념과 사용법, 자료형 정리 (0) | 2022.08.08 |
| 자바스크립트 공부 순서 4단계로 정리 (0) | 2022.08.08 |
댓글