728x90
728x90
쉽게 함수는 프로그램의 코드를 저장한 공간입니다.
자바스크립트의 함수에 대해 DO IT! 자바스크립트+제이쿼리 입문
첫째마당의 5장을 보고 내용을 정리했습니다.
1 함수
: 프로그램의 코드를 저장한 공간
함수와 변수의 차이
변수 : 데이터만 저장, 코드를 저장할 수 없음
함수 : 코드를 메모리에 저장했다가 필요할 때마다 호출하여 사용
-> 즉 호출되어야만 실행
함수 정의문
testOne();
function testOne(){
code;
}
// another way : 익명함수
var testFnc = function() {
code;
}
testFnc();
function 키워드를 사용해 변수를 선언 후 아래와 같이 호출
함수명이나 참조변수();
일반 함수 정의 방식과 익명 함수 선언 참조 방식의 차이점
: 호이스팅 기술이 적용되는지 안되는지
* 호이스팅 : 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출
일반함수정의 : 지원
익명함수선언참조 : 미지원
<!DOCTYPE html>
<html lang="ko">
<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");
//getElementById() : id 값을 이용해 문서객체(태그)를 선택하는 메서드
bodyTag.style.backgroundColor = color[i];
//문서객체.style.스타일속성=새값;
}
</script>
</head>
<body id="theBody">
<button onclick="changeColor();">배경색 바꾸기</button>
</body>
</html>
매개변수가 있는 함수 정의문
: 파라미터에 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있음
전달된 값은 매개변수가 받아 다른 함수 정의문에서 사용
function 함수명 {(매개변수1, 매개변수2, 매개변수3)}
code;
함수명 (데이터1, 데이터2, 데이터3);매개변수 없이 함수에 전달된 값 받아오기
: 함수 정의문에서 arguments 사용
함수정의문의 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열식으로 저장됨
함수 정의문에서는 그 값을 arguments라는 변수로 참조
function sum(){
var sum = arguments[0]+ arguments[1] + arguments[2];
document.write(sum);
}
sum(10,20,30);function sum(){
var sum = 0;
for (var i=0; i<arguments.length; i++){
sum+= arguments[i];
}
document.write(sum);
}
sum(10,20,30);
2 함수에서 return의 역할
: 함수에서 결과값을 반환할 때 사용
return문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료
-> 함수 정의문에 return문이 사용되면 함수를 호출했을 때 결과값(data)를 반환
데이터를 반환하고 강제 종료하는 return
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<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>
<body>
</body>
</html>
갤러리 예제
* 8보다 큰 값이 나오는 경우 이미지를 불러올 수 없는 오류 => return문으로 num++실행 이전에 함수를 종료하여 문제 해결)
* 23 setAttribute("속성명", "새값"); : 선택한 태그의 지정한 속성을 새 값으로 바꿈
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<style>
*{margin: 0;padding: 0;}
#galleryZone {text-align: center;}
#galleryZone input[type="image"]{margin:0 8px;}
</style>
<script>
var num = 1;
function gallery(direct) {
if(direct) {
if(num == 8) return;
num++;
} else {
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" alt=""></p>
<p>
<button onclick="gallery(0)">이전</button>
<button onclick="gallery(1)">다음</button>
</p>
</div>
</body>
</html>재귀함수 호출
: 함수 안에서 자신의 함수를 재호출하는 것.
함수를 반복문처럼 여러번 호출하기 위해 사용
function myFnc(){
code;
myFnc();
}
myFnc();예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
var num = 0;
function testFnc(){
num++;
document.write(num, "<br>");
if(num == 10) return;
testFnc();
}
testFnc();
</script>
</head>
<body>
</body>
</html>* 예제가 아리까리해서 다른 블로거 분의 팩토리얼 함수 예제로 이해했다.
3 함수의 스코프
Scope : 범위 라는 뜻
자바스크립트의 스코프는 변수 또는 함수의 유효 범위
전역 변수와 지역 변수의 차이
Global Variables 전역변수 : 어디에서든 사용할 수 있는 변수
Local Variables 지역변수 : 스코프 영역에서 선언한 변수로 그 영역에서만 사용가능
전역함수 : 자바스크립트 어디든 사용할 수 있는 함수
지역함수 : 스코프 영역에서 선언한 함수로 그 영역에서만 호출가능
var score = 10;
function myFnc(){
var score=50;
alert(score); //50
}
myFnc();
alert(score); //10
즉시실행함수
: 지역함수선언에 사용하면 효과적
//함수선언과 동시에 호출을 하는 방식
(function() {
code;
}());
전역변수명이 같아 충돌하는 경우를 방지하기 위해 이런 방법을 쓸 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
(function() {
var num = 100;
function menu( ) {
num += 100;
alert(num);
}
menu( );
}());
(function(){
var num = 100;
function menu( ) {
alert(num);
}
}( ));
</script>
</head>
<body>
</body>
</html>4 객체 생성자 함수
: 내장 객체 생성 시 사용하는 함수
-> 내장객체는 자바스크립트 엔진에 내장되어 있는 객체생성자함수(Object Constructor Function)을 사용해서 객체를 생성한다.
형식
function 함수명 (매개변수, 매개변수2, 매개변수3..) { //객체 생성자 함수
this.속성명 = 새 값;
this.함수명 = function() {
자바스크립트 코드;
}
}
var 참조변수(인스턴스네임) = new 함수명(); //객체 생성
var 참조변수 = { 속성: 새 값; 함수명: function() { ... } }
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
function CheckWeight(name, height, weight) { // 객체 생성자 함수명은 가능한 대문자가 규칙
this.userName = name; //생성한 객체에 이름, 키, 몸무게 등의 속성 등록
this.userHeight = height;
this.userWeight = weight;
this.minWeight;
this.maxWeight;
this.getInfo = function() { //생성한 객체에 속성값을 출력하는 함수를 등록
var str = ""
str += "이름: " + this.userName + ", ";
str += "키: " + this.userHeight + ", ";
str += "몸무게: " + this.userWeight + "<br>";
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 "정상 몸무게보다 초과입니다";
}
}
}
var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);
console.log(jang);
console.log(park);
document.write(jang.getInfo()); //객체의 속성정보 반환
document.write(jang.getResult()); //몸무게의 표준여부 확인
</script>
</head>
<body>
</body>
</html>메모리절약을 위한 프로토타입 사용
앞의 방식은 객체를 생성한 만큼 함수가 등록되어
함수를 여러 개 등록하면 메모리 공간을 많이 차지해서 메모리를 낭비
=> 객체생성자 함수에 프로토타입(Prototype)을 사용하여 함수를 등록하면 문제 해결
Prototype : 원형 (= 객체 생성자 함수)
프로토타입 메서드를 사용하여 등록한 함수는 원형, 즉 객체생성자 함수에서 생성된 객체를 공유 가능
function 함수명 (매개변수1, 매개변수2, ... 매개변수n) {
this.속성명 = 새 값;
}
함수명.prototype.함수명 = function() {
자바스크립트 코드;
}
var 참조변수 (인스턴스네임) = new 함수명();예제
앞의 것과 같은 예제를 프로토타입으로 함수를 등록하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
function CheckWeight(name, height, weight) {
this.userName = name;
this.userHeight = height;
this.userWeight = weight;
this.minWeight;
this.maxWeight;
}
CheckWeight.prototype.getInfo = function() {
var str = ""
str += "이름: " + this.userName + ", ";
str += "키: " + this.userHeight + ", ";
str += "몸무게: " + this.userWeight + "<br>";
return str;
}
CheckWeight.prototype.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 "정상 몸무게보다 초과입니다";
}
}
var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);
console.log(jang);
console.log(park);
document.write(jang.getInfo());
document.write(jang.getResult(), "<br>");
document.write(jang.getResult === park.getResult);
</script>
</head>
<body>
</body>
</html>5 자바스크립트 내장 함수
: 스크립트 엔진에 내장된 함수로 개발자가 함수를 직접 선언하지 않고 바로 호출 가능
내장 함수의 종류
| 종류 | 설명 | 사용 예 |
| encodeURI() | 문자를 유니코드값으로 인코딩 (영문, 숫자, :,/?:@&=+$ 제외) |
|
| encodeURIComponent() | 문자를 유니코드값으로 인코딩 (영문, 숫자 제외) | |
| decodeURI() | 유니코드값을 디코딩해 문자화 | |
| decodeURIComponent() | 유니코드값을 디코딩해 문자화 | |
| parseInt() | 문자열 데이터를 정수형 데이터로 반환 | |
| parseFloat() | 문자열 데이터를 실수형 데이터로 반환 | |
| String() | 문자열 데이터로 반환 | String(5) -> "5" |
| Number() | 숫자형 데이터로 반환 | Number("5") -> 5 |
| Boolean() | 논리형 데이터로 반환 | |
| isNaN() | is Not a Number의 약자. 숫자가 아닌 문자가 포함되면 true 반환 | isNaN("5-3") -> true |
| eval() | 문자형 데이터를 따옴표가 없는 JS 코드로 처리 | eval("15+5") - > 20 |
728x90
728x90
'Javascript' 카테고리의 다른 글
| [JS] JavaScript의 init() 이나 initialize() 는 무엇일까? (0) | 2019.12.31 |
|---|---|
| [JS] 자바스크립트 히스토리 객체 (window.history, browser.history) (0) | 2019.12.30 |
| [JS] 자바스크립트 객체 (0) | 2019.12.21 |
| [JS] 자바스크립트의 화면 출력 방법 정리 (0) | 2019.12.18 |
| [JS] 자바스크립트 연산자 우선순위 (0) | 2019.12.15 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
