함수
- 함수란 프로그램의 코드를 저장한 공간
- 변수에는 데이터만 저장할 수 있고, 코드는 저장할 수없으며, 함수를 사용하면 코드를 메모리에 저장했다 가 필요할 때마다 호출하여 사용할 수 있다.
* 변수와 함수의 차이점
| 변수 | 함수 |
| 1개의 데이터만 저장 | 자바스크립트 코드를 저장 |
| var 라는 키워드를 이용하여 선언 | function이라는 키워드를 이용하여 선언 |
| 문자형, 숫자형, 논리형 테이터를 보관 | 출력문, 제어문 등의 코드를 저장하고 데이터를 반환 |
| 객체를 참조함 |
기본 함수 정의문
- 함수를 사용하여 코드를 저장한 것을 '함수 정의문'이라고 한다.
- 변수를 선언할 때 var 키워드를 사용한 것처럼 함수에서는 function 키워드를 사용해 변수를 선언
기본형
1. 일반 함수 정의
function 함수명(){
자바스크립트 코드;
}
2. 익명 함수 정의
참조 변수 = function(){
자바스크립트 코드;
}
//함수 정의문 안에 작성된 코드는 즉시 실행되지 않는다. 함수는 메모리에 할당되어 대기하고 있다가
//함수가 호출되면 실행 된다.
함수 호출 기본형
함수명();
참조변수();
일반함수 정의 방식과 익명 함수 선언 참조 방식의 차이점
- 일반 함수 정의는 함수 호출 시 호이 스팅(hoisting) 기술을 지원한다.
- 익명함수 선언 참조 방식은 호이 스팅을 지원하지 않는다.
- 호이스팅을 적용하면 함수 정의문보다 호출 문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출한다.
<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>매개변수가 있는 함수 정의문
- 기본 함수 정의문은 함수 안에 있는 코드를 실행할 때 단순히 함수명으로 호출해서 코드를 실행
즉, 함수를 호출할때, 값을 전달할 수 업다.
- 매개변수가 있는 함수 정의문은 함수를 호출할 때 전달하고자 하는 값을 입력하여 호출할 수 있다.
이렇게 전달된 값은 매개변수가 받아 함수 정의문에서 사용할 수 있다.
기본형
function 함수명(매개변수 1, 매개변수 2, 매겨변수n){
자바스크립트 코드;
}
함수명(데이터 1, 데이터 2, 데이터 n);매개변수 없이 함수에 전달된 값 받아오기
- 함수 정의문에서 arguments을 사용하면 매개변수를 사용하는 것처럼 함수 호출 문의 값을 받아올 수 있다.
- 함수 정의문에 매개변수가 없는 상태에서 데이터를 전다 하여 함수를 호출하면 그 값은 배열에 저장된다.
- 함수 정의문에서는 그 값을 arguments라는 변수로 참조함
arguments 기본형
function 함수명(){
arguments;
}
함수명(데이터1, 데이터2, 데이터3);ex) 매개변수를 생략한 함수 호출 문에서 3개의 숫자형 데이터 전달
function sum(){
//매개변수 없이 함수 호출문에 전달된 값들은 배열로 저장됨
var sum = arguments[0] + arguments[1] + arguments[2];
document.write(sum); //60
};
sum(10, 20, 30);
//-----------------------------------------------------------
function sum(){
var sum = 0;
for(var i=0; i < arguments.length; i++){
sum += arguments[i];
}
document.write(sum); // 60
}
sum(10, 20, 30);함수에서 return 문의 역할
- return 문은 함수에서 결괏값을 반환할 때 사용
- return 문이 실행되면 반복문의 break문과 비슷하게 코드가 강제로 종료됨
return 문의 기본형
function 함수명(){
자바스크립트 코드1; --2 : 함수 코드 실행
return 데이터(값); --3 : 자바스크립트 코드 2를 무시하고 데이터를 반환
자바스크립트 코드2;
}
var 변수 = 함수명(); --1 : 함수 호출문재귀 함수 호출
- 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라 한다.
- 재귀 함수 호출은 함수를 반복문처럼 여러 번 호출하기 위해 사용
재귀 함수 호출 기본형
function myFnc(){
자바스크립트 코드;
myFnc();
}
myFnc();ex) 재귀 함수 호출을 적용하여 1~10까지의 값을 출력
<script>
var num = 0;
function testFnc() {
num++;
document.write(num, "<br/>");
if(num == 10)return;
testFnc();
}
testFnc();
</script>함수 스코프 개념 이해
- 스코프(scope)의 사전적 의미는 '범위'이며, 여기에서는 변수 또는 함수의 유효 범위를 가리킴
- 스코프란 변수 또는 함수의 유효 범위
- 지역 변수란 스코프 영역에서 선언한 변수, 스코프 영역에서만 사용 가능
- 지역 함수란 스코프 영역에서 선언한 함수를 가리킴, 스코프 영역에서만 호출 가능
전역 함수와 지역 함수의 차이
- 전역 함수는 자바스크립트 어디에서든 사용할 수 있는 함수
- 지역 함수는 함수 스코프에서만 사용할 수 있는 함수
기본형
function 함수명1(){ //전역함수
자바스크립트 코드;
}
function 함수명2(){
function 함수명3(){ //지역 함수
자바스크립트 코드;
}
}전역과 지역을 나누는 이유
- 프로그램을 개발할 때 전역(Global)과 지역(Local)을 나누면 충돌을 피할 수 있다.
- 같은 이름의 전역 변수나 전역 함수를 사용하면 충돌이 발생한다. 또 다른 개발자가 이미 개발해 놓은 라이브러리나 플러그인의 변수 또는 함수의 이름과 자신이 사용하는 변수나 함수의 이름이 같은 경우에도 충돌이 발생할 수 있다.
<script>
var num = 100;
function menu(){ //개발자 1
num +=100;
alert(num);
}
menu();
function menu(){ //개발자 2
alert(num);
}
//B 개발자가 만든 함수명이 같아서 개발자 A가 만든 함수는 제거되고 개발자 B가 만든 함수만
//호출 된다.
</script> 즉시 실행 함수
- 개발자 A와 B가 지역 함수를 사용하여 함수를 선언했다면 함수가 충돌하는 불상사를 피할 수 있다.
- 지역 함수 선언에 사용하면 효과적임
- 함수 선언과 동시에 함수를 호출할 수 있다.
기본형
(function(){
자바스크립트 코드;
}());
(function(){
var 변수명; //지역 변수
function 함수명(){ //지역 함수
자바스크립트 코드;
}
}());ex) 개발자 A와 B가 즉시 실행 함수에 지역 변수와 지역 함수를 선언하여 충돌을 방지한 예제
(function(){
var num = 100;
function menu(){
num += 100;
alert(num);
}
menu();
}());
(function(){
var num = 100;
function menu(){
alert(num);
}
}());객체 생성자 함수의 활용
객체 생성자 함수
- 내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수(Object Constructor Function)를 사용하여 객체를 생성
기본형
function 함수명(매개변수1, 매개변수2, 매개변수n){ //객체 생성자 함수
this 속성명 = 새 값;
this 함수명 = function(){
자바슼립트 코드;
}
}
var 참조 변수(인스턴스 네임) = new 함수명(); //객체 생성
var 참조 변수 = {속성 : 새 값, 함수명 : function(){}}ex) CheckWeight라는 이름으로 객체 생성자 함수를 선언하고 2개의 객체를 생성
- 생성된 각각의 객체에는 속성(이름, 키, 몸무게)과 함수(getInfo(), getResult())를 등록
//객체 생성자의 함수명은 소문자로 시작해도 되지만 가능하면 대문자로 만드는 것이 좋다.
//(개발자 간의 약속)
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());메모리 절약을 위한 프로토타입 사용하기
- 앞에서 설명한 대로 객체를 생성하면 객체를 생성한 만큼 함수가 등록된다
- 함수를 여러 개 등록하면 메모리 공간을 많이 차지하여 메모리를 낭비하게 된다
- 객체 생성자 함수에 프로토타입(Prototype)을 사용하여 함수를 등록하면 메모리 낭비를 줄일 수 있다
- 프로토타입(Prototype)의 사전적 의미는 '원형'이다
- 자바스크립트에서 '원형'은 객체 생성자 함수를 의미, 프로토타입을 사용하여 등록한 함수는 원형(객체 생성자 함수)에서 생성된 객체를 공유할 수 있다. / 여러 개의 함수를 등록할 필요가 없다.
자바스크립트 내장 함수
- 내장함수란 자바스크립트 엔진에 내장된 함수를 말함 / 개발자가 함수를 정의하고 호출문을 사용해 함수 안에 있는 코드를 실행, 하지만 내장 함수는 개발자가 함수를 직접 선언하지 않아도 된다.
- 자바스크립트에 이미 내장된 함수는 바로 호출할 수 있다
내장함수의 종류
| 종류 | 설명 | 사용 예 |
| encodeURI() | 문자를 유니코드 값으로 인코딩함(영문, 숫자, 일부기호(; , / ? : @ & = + $)는 제외) | encodeURI("?query=값"); -> "?query=%EA%B0%91" |
| encodeURIComponent() | 문자를 유니 코드값으로 인코딩함(영문, 숫자 제외) | encodeURICOmponent("?query=값") -> "%3Fquery%3D%EA%B0%91" |
| decodeURI() | 유니 코드값을 디코딩해 다시 문자화함 | decomdeURI("?query=%EA%B0%91") -> "?query = 값" |
| decodeURIComponent() | 유니 코드값을 디코딩해 다시 문자화 함 | decodeURIComponent("%3Fquery%3D%EA%B0%91") -> "?query=값" |
| parseInt() | 문자열 데이터를 정수형 데이터로 반환 | parseInt("5.12") -> 5 parseInt("15px") -> 15 |
| parseFloat() | 문자열 데이터를 실수형 데이터로 반환 | parseFloat("5.12") -> 5.12 parseFloat("65.5%") -> 65.5 |
| String() | 문자형 데이터로 반환 | String(5) -> "5" |
| Number() | 숫자형 데이터로 반환 | Number("5") -> 5 |
| Boolean() | 논리형 데이터로 반환 | Boolean(5) -> true Boolean(null) -> false |
| isNan() | is Not a Number의 약자이며 숫자가 아닌 문자가 포함되어 있으면 true를 반환 | isNaN("5-3") -> true isNaN("53") -> false |
| eval() | 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리 | eval("15+5") -> 20 |
'IT 개발 > JavaScript' 카테고리의 다른 글
| 07. 제이쿼리 이벤트 (1) : 이벤트 메서드 종류 및 이벤트 발생 / 제거 (0) | 2020.03.08 |
|---|---|
| 06. 제이쿼리 문서 객체 선택자와 조작법 (0) | 2020.01.14 |
| 04. 객체 (0) | 2019.12.30 |
| 03. 제어문 (0) | 2019.12.22 |
| 02. 자바스크립트 기초 문법 (0) | 2019.12.18 |
