1. 함수란?
데이터를 저장할 때 변수를 선언하여 저장 했다.
하지만 변수에는 코드를 저장할 수 없기 때문에 함수를 이용해서 코드를 메모리에 저장 했다가 필요할 때마다 호출하여 사용한다.
1) 기본 함수 정의문
함수 정의문 : 함수를 사용하여 코드를 저장한 것
function 함수명() {
코드;
}
다음과 같이 익명함수(함수명이 없는 함수)를 선언하고 변수에 참조해도 된다.
참조 변수 = function() {
코드;
}
함수 정의문 안에 작성된 코드는 바로 실행되지 않는다. 함수는 메모리에 할당되어 대기중인 상태로 있는 함수가 호출되면 실행된다.
함수명();
또는 참조 변수();
일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점
일반 함수 정의는 함수 호출시 호이스팅 기술을 지원한다. 그러나 익명 함수 선언 참조 방식은 호이스팅을 지원하지 않는다. 호이스팅을 적용하면 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출한다.
함수 정의문과 익명 함수 참조 예제
<Script>
var count = 0;
// 호출문이 먼저 나와도 호이스팅 방식으로 정상 함수 호출가능
myFnc();
function myFnc(){
count++;
document.write("hello" + count, "<br>");
}
myFnc();
var theFnc = function(){
count++;
document.write("bye", count, "<br>");
}
theFnc();
</Script>
배경색 바꾸기 클릭시 배경 바꾸는 예제
<head>
<meta charset="UTF-8">
<title>배경색바꾸기 예제</title>
<script>
var color = ["white", "yellow", "aqua", "purple"];
var i = 0;
function changeColor(){
i++;
if(i >= color.length){
i = 0;
}
var bodyTag = document.getElementById("theBody");
bodyTag.style.backgroundColor = color[i];
}
</script>
</head>
<body id = "theBody">
<button onclick="changeColor()">배경색 바꾸기</button>
</body>
getElementById()메서드는 id 값을 이용해 문서 객체(태그)를 선택하는 메서드이다.
선택한 문서 객체에 스타일을 적용하기 위해서는 다음과 같이 문서 객체의 style에 접근하고 적용하고자 하는 속성에 새 값을 입력해야한다
문서객체.stlye.스타일속성=새값;예) id값이 "theBody"인 요소의 배경을 노란색으로 적용한다.
document.getElementById("theBody").style.backgroundColor = yellow;
2) 매개변수가 있는 함수 정의문
함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다. 이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있게 된다.
기본형
function 함수명(매개변수1, 매개변수2, ..., 매개변수 n) {
자바스크립트 코드;
}
함수명(데이터1, 데이터2, ..., 데이터n);
이름과 거주지 데이터를 매개변수로 전달하여 출력 예제
<script>
function myFnc(name, area){
document.write("안녕하세요." + name + "입니다.", "<br>");
document.write("사는 곳은 " + area + "입니다.", "<br>");
}
myFnc("홍당무", "서울");
myFnc("깍두기", "부산");
</script>
아이디, 비밀번호 일치 여부 확인 예제
<script>
var rightId = "korea";
var rightPw = "1234";
function login(id, pw){
if(id == rightId){
if(pw == rightPw){
document.write(id + "님 방문을 환영합니다");
} else {
alert("잘못된 비밀번호입니다.");
}
} else {
alert("아이디가 존재하지 않습니다.");
}
}
var userId = prompt("아이디를 입력하세요", "");
var userPw = prompt("비밀번호를 입력하세요", "");
login(userId, userPw);
</script>
3) 매개변수 없이 함수에 전달된 값 받아오기
함수 정의문에 arguments를 사용하면 매개변수가 없는 상태에서도 데이터를 전달받을 수 있다.
전달받은 값들은 배열에 저장되어 arguments라는 변수로 참조한다.
function 함수명() {
arguments;
}
함수명(데이터1, 데이터2, 데이터3);
매개변수를 생략한 함수 호출문에서 3개의 숫자형 데이터를 전달하는 예
<script>
//매개변수를 선언안해도 javascript에 내장된 arguments배열을 통해 매개변수들을 받을 수 있다.
//javascript에서는 메소드도 객체로 생성되기 때문에 다양한 내장 속성과 내장 메소드 지원
function sum() {
var sum = 0;
for(var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
document.write("sum = " + sum, "<br>");
}
sum(10, 20, 30, 40);
</script>숫자형 데이터는 배열에 저장되고 arguments변수로 참조할 수 있다. arguments의 인덱스를 이용해 배열에 저장된 값을 불러와 합을 구하여 결과값(60)을 출력한다.
return 문은 함수에서 결과값을 반환할 때 사용한다.
그리고 함수에서 return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료된다.
함수 정의문에 return문이 사용되면 함수를 호출했을 때 결괏값(data)를 반환한다.
2. 데이터를 반환하고 강제 종료하는 return문
기본형
function 함수명() {
자바스크립트 코드1;
return 데이터(값);
자바스크립트 코드2;
}
var 변수 = 함수명();
각 과목들의 평균 점수 반환하는 예제
<script>
function testAvg(arrData){
var sum = 0;
for (var i=0; i<arrData.length; i++){
sum += Number(prompt(arrData[i] + "점수는?", "0"));
}
var avg = sum / arrData.length;
return avg;
}
var arrSubject = ["국어", "수학"];
var result = testAvg(arrSubject);
document.write("평균 점수는 " + result + "점입니다.")
</script>
이미지 파일을 이용해 갤러리 만들기
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var num = 1;
function gallery(direct) {
if (direct) {
//num이 8일때 num증가 못하도록 메소드 종료
if (num == 8) return;
num++;
} else {
//num이 1일때 num감소 못하도록 메소드 종료
if (num == 1) return;
num--;
}
var imgTag = document.getElementById("photo");
imgTag.setAttribute("src", "images/pic_" + num + ".jpg");
}
</script>
</head>
<body>
<div id="galleryZone">
<p><img src="images/pic_1.jpg" id="photo"></p>
<p>
<button onclick="gallery(0);">이전</button>
<button onclick="gallery(1);">다음</button>
</p>
</div>
</body>
재귀함수 호출
function myFnc() {
자바스크립트 코드;
myFnc();
}
myFnc();
재귀함수로 1 부터 10까지의 값을 출력
<script>
var num = 0;
function testFnc() {
num++;
document.write(num, "<br>");
//num이 10이 되면 메소드 종료
if (num == 10) return;
//재귀함수 호출
testFnc();
}
testFnc();
</script>
3. 함수 스코프
스코프(Scope)의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킨다.
전역변수와 지역변수의 개념과 차이
<script>
var 변수명; // 전역 변수
function 함수명() {
var 변수명; // 지역 변수
}
</script>전역변수 : 자바스크립트 어디에서든 사용할수 있는 변수
지역변수 : 함수 스코프에서만 사용할 수 있는 변수
전역 함수와 지역 함수의 차이
<script>
function 함수명1() { // 전역 함수
자바스크립트 코드;
}
function 함수명2() {
function 함수명3() { // 지역 함수
자바스크립트 코드;
}
}
</script>전역함수 : 자바스크립트 어디에서든 사용할수 있는 함수
지역함수 : 함수 스코프에서만 사용할 수 있는 함수
전역과 지역을 나누는 이유
프로그램을 개발할 때 전역(Global)과 지역(Local)을 나누면 충돌을 피할 수 있기 때문이다.
예를 들어, 다른 개발자가 이미 개발해 놓은 라이브로리나 플러그인의 변수나 함수의 이름이 겹치면 충돌이 발생할 수 있기 때문에 전역과 지역을 나눈다.
<script>
var num = 100;
function menu() { // 개발자 A가 작성한 코드
num += 100;
alert(num);
}
menu(); // 100
// 100이 출력되는 이유 : 두 개발자가 작성한 함수의 이름이 겹쳐서
// 먼저 만들어진 개발자 A의 코드가 제거되고 개발자 B의 함수가 호출됨
function menu() { // 개발자 B가 작성한 코드
alert(num);
}
</script>
즉시 실행 함수
위 예제와 같은 불상사를 막기 위해서는 지역 함수를 사용하여 함수를 선언하면 된다. 즉시 실행 함수는 지역 함수 선언에 사용하면 함수 선언과 동시에 함수를 호출할 수 있게 된다.
<script>
(function() {
var 변수명; // 지역 변수
function() 함수명() { // 지역 함수
자바스크립트 코드;
}
}());
</script> <script>
//즉시 실행 함수 a
(function() {
//즉시 실행 함수 a내에서만 유효한 지역 변수 및 지역 함수
var num = 100;
function menu() {
num += 100;
alert(num);
}
menu();
}());
//동일한 메소드 명이 존재할 때 나중에 선언된 메소드가 호출됨
//즉시 실행 함수 b
(function() {
//즉시 실행 함수 b내에서만 유효한 지역 변수 및 지역 함수
var num = 100;
function menu() {
alert(num);
}
menu();
}());
</script>
4. 객체 생성자 함수의 활용
객체 생성자 함수
내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성한다
<script>
function 함수명(매개변수1, 매개변수2, ..., 매개변수n) {
this.속성명 = 새 값;
this.함수명 = function() {
자바스크립트 코드;
}
}
var 참조 변수(인스턴스 네임) = new 함수명(); // 객체 생성
var 참조 변수 = {속성 : 새 값, 함수명 : function(){ ... }}
</script>
CheckWeight라는 이름으로 객체 생성자 함수를 선언하고 2개의 객체를 생성하는 예제
<script>
function checkWeight(name, weight, height) {
//this는 checkWeight라는 객체를 가르킴.
this.userName = name;
this.userWeight = weight;
this.userHeight = height;
this.minWeight;
this.maxWeight;
this.getInfo = function() {
var str = "";
str += "이름 : " + this.userName + ", ";
str += "몸무게 : " + this.userWeight + ", ";
str += "신장 : " + this.userHeight;
return str;
}
this.getResult = function() {
this.minWeight = (this.userHeight - 100) * 0.9 - 5;
this.maxWeight = (this.userHeight - 100) * 0.9 + 5;
if(this.userWeight >= this.minWeight && this.userWeight <= this.maxWeight) {
return "정상 몸무게 입니다.";
} else if(this.userWeight <= this.minWeight) {
return "정상 몸무게보다 미달입니다.";
} else {
return "정상 몸무게보다 초과입니다.";
}
}
}
//checkWeight객체 생성
var jang = new checkWeight("장보리", 62, 168);
//checkWeight객체 생성
var park = new checkWeight("박달재", 88, 180);
console.log(jang);
console.log(park);
document.write(jang.getInfo(), "<br>");
document.write(jang.getResult(), "<br><br>");
document.write(park.getInfo(), "<br>");
document.write(park.getResult(), "<br><br>");
</script>
</body>
메모리 절약을 위한 프로토타입 사용하기
앞에서 배운 대로 객체를 생성하면 객체를 생성한 만큼 함수가 등록되어 메모리 낭비를 하게 된다.
객체 생성자 함수에 프로토타입을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있다
<script>
function 함수명(매개변수1, 매개변수2, ..., 매개변수n) {
this.속성명 = 새 값;
}
함수명.prototype.함수명 = function() {
자바스크립트 코드;
}
var 참조변수(인스턴스 네임) = new 함수명();
</script>
5. 자바스크립트 내장 함수
내장함수란 자바스크립트 엔진에 내장된 함수를 말한다. 개발자가 함수를 직접 선언하지 않아도 바로 호출 할 수 있다.
내장함수의 종류
| 종류 | 설명 |
| encodeURI( ) | 문자를 유니코드값으로 인코딩한다. (영문, 숫자, 일부기호 제외) |
| encodeURIComponent( ) | 문자를 유니코드값으로 이코딩한다. (영문, 숫자 제외) |
| decodeURI( ) | 유니코드 값을 디코딩해서 다시 문자화 한다. |
| decodeURIComponent( ) | 유니코드값을 디코딩해 다시 문자화 한다. |
| parseInt( ) | 문자열 데이터를 정수형 데이터로 반환한다. |
| parseFloat( ) | 문자열 데이터를 실수형 데이터로 반환한다. |
| String( ) | 문자형 데이터로 반환한다. |
| Number( ) | 숫자형 데이터로 반환한다. |
| Boolean( ) | 논리형 데이터로 반환한다. |
| isNaN( ) | is Not a Number의 약자로 숫자가 아닌 문자가 포함되어 있으면 true를 반환한다. |
| eval( ) | 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리한다. |
참고 : ⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.
'🎨 Web_Front end > JavaScript' 카테고리의 다른 글
| ES2015(ES6) (0) | 2023.05.04 |
|---|---|
| 이벤트 (0) | 2023.04.26 |
| 객체 (내장객체, 브라우저 객체 모델, 문서 객체 모델) (0) | 2023.04.25 |
| 제어문 (조건문, 선택문, 반복문) (0) | 2023.04.25 |
| 연산자 (0) | 2023.04.25 |
