함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합이다.
| 분류 | 종류 | 설명 |
| 사용자 정의 함수 | - 선언적 함수 - 익명 함수 |
프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 |
| 내장 함수 | - 인코딩, 디코딩 함수 - 숫자 판별 함수 - 유 · 무한 값 판별 함수 - 숫자변환 함수 - 문자 변환 함수 - 자바스크립트 코드 변경 함수 |
프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수 |
1. 선언적 함수 : 사용자가 직접 정의해서 만드는 함수
| 선억적 함수의 형식 | 선언적 함수의 호출 |
| function 함수(){ 실행문; } |
함수의 앞 또는 뒤에서 호출 가능 선언적 함수는 함수를 선언하지 않고 호출하여도 에러가 발생하지 않는다. ( '호이스팅(Hoisting)' ) |
<script>
function myFun(){
var x=10;
var y=100;
var result=x/y;
console.log(result);
}
myFun();
</script>
2. 익명 함수 : 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용
| 익명 함수의 형식 | 익명 함수의 호출 |
| var 변수 = function ( ){ 실행문; }; |
변수 선언 이후에 호출 |
<script>
var myFun= function(){
var x = 0.5;
var y = 10;
var result = x*y;
console.log(result);
};
myFun();
</script>
3. return : 함수를 통해 처리된 결과를 반환시켜주는 명령어
<script>
function aver(){
var kor = 100;
var eng = 90;
var avg = (kor+eng)/2;
return avg;
}
console.log(aver());
</script>
함수 안에서 return을 만나게 되면 해당 함수를 호출한 곳으로 결과 데이터를 반환해 주고 함수를 종료한다.
4. 매개변수 : 함수를 호출할 때 전달하는 변수
| 매개변수가 있는 함수의 형식 | 함수 형식 |
| function 함수명(매개변수1, 매개변수2,....){ 실행문; } 함수명(매개변수1 값, 매개변수2 값,....); |
선언적 함수 |
| var 변수명 = function(매개변수1, 매개변수2,....){ 실행문; }; 변수명(매개변수1 값, 매개변수2 값,....); |
익명 함수 |
<script>
function examPass(name, h, c, j){
var comment = name+' 학생은 ';
if(h>=60 && c>=60 && j>=60){
comment += '전과목 PASS'
} else{
if(h<60){
comment += 'html 재시험, ';
}
if(c<60){
comment += 'css 재시험, ';
}
if(j<60){
comment += 'javascript 재시험';
}
}
return comment;
}
console.log(examPass('홍길동',90,90,90));
console.log(examPass('임꺽정',70,50,50));
</script>
- 매개변수의 개수가 정해해지지 않은 함수
보통은 매개변수 개수가 정해져 있지만 경우에 따라서 매개변수의 개수를 정할 수 없는 함수를 만들어야 하는 경우도 있다. 이런 경우 함수에 전달되는 매개변수 값을 저장해주는 arguments 객체를 사용하여 함수를 만들 수 있다.
<script>
function showSubject(){
for(i=0; i<arguments.length; i++){
console.log(arguments[i]);
}
}
showSubject('html', 'css', 'javascript', 'jQuery');
//arguments.length = arguments에 저장되어 있는 배열의 개수
</script>
함수 안에서 arguments 객체를 사용하면 매개변수 값들을 배열(Array 객체) 형태로 저장한다.
▶ 화살표 함수(Arrow function)
ECMAScript 2015(ES6)에 추가된 내용으로 '=>'을 이용하여 함수를 간결하게 표현할 때 사용한다.
| 일반 함수 | 화살표 함수 |
| var doMultiplication = function(s1, s2){ return s1 * s2; } console.log(doMultiplication(2, 5); //10 |
var doMultiplication = (s1, s2) => s1 * s2; console.log(doMultiplication(2, 5); //10 |
| function doMultiplication(s1, s2){ var avg = (s1 + s2) / 2; return avg; } console.log(doMultiplication(2, 5); //3.5 |
var doMultiplication = (s1, s2) => { var avg = (s1 + s2) / 2;S return avg; } console.log(doMultiplication(2, 5); //3.5 |
5. 전역 변수와 지역 변수
'전역 변수'는 함수 블록{ } 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{ } 내에서만 사용할 수 있다.
| 전역 변수 | 지역 변수 |
| var 변수; function 함수( ) { } |
function 함수( ) { var 변수; } |
함수 블록 { } 안에 지역 변수는 반드시 var로 선언해주어야 하며 함수의 지역 변수는 함수 블록{ } 밖에서 사용할 수 없다.
- 변수의 scope : 블록{ }에 의해 변수의 범위가 달라지는 것
▶ 함수 레벨 스코프(function level scope)와 블록 레벨 스코프(block level scope)
var는 함수 블록{ }에서만 지역 변수가 존재하며 블록{ }이나 제어문 블록{ }에서는 지역 변수가 존재하지 않는다. 하지만 let과 const는 블록{ }이나 제어문 블록{ }에서도 지역 변수를 선언할 수 있다.
<script>
// 함수의 전역변수
var sum1 = 10;
function add1(){
sum1=20;
}
add1();
console.log('전역'+sum1);
// 함수의 지역변수
var sum2 = 30;
function add2(){
var sum2 = 40;
console.log('지역'+sum2);
}
add2();
console.log('전역'+sum2);
// 블록의 지역변수
var num1 = 50;
if(num1===50){
var num1 = 60;
}
console.log('전역'+num1);
let num2 = 70;
if(num2===70){
let num2 = 80;
console.log('지역'+num2);
}
console.log('전역'+num2);
</script>
- var, let, const 비교 정리
| 변수 범위 | 변수 선언 | 특징 |
| 함수 레벨 스코프 | var | - 변수를 중복해서 선언할 수 있다. - 함수 블록{ } 내에서만 지역 변수가 존재한다. |
| 블록 레벨 스코프 | let | - var과 같지만 같은 블록{ }에서는 이미 선언한 변수를 중복해서 선언할 수 없다. - 블록{ }, 제어문 블록{ }에서도 지역 변수가 존재한다. |
| const | - 같은 블록{ }에서는 이미 선언한 변수를 중복해서 선언할 수 없고 저장된 값을 변경할 수도 없다. - 블록{ }, 제어문 블록{ }에서도 지역 변수가 존재한다. |
6. 재귀 함수 : 함수 안에서 자신의 함수를 다시 호출하는 함수
<script>
function factorial(n){
if(n===0){
console.log('호출 끝');
} else{
console.log('호출'+n);
factorial(n-1);
}
}
factorial(5);
</script>
7. 내장 함수 : 자바스크립트에 기본적으로 내장되어 있는 함수들
▶ 인코딩, 디코딩 함수
URL 주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있다. 이런 경우 인코딩 함수를 이용해 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용해 문자로 되돌릴 수 있다.
| 함수명 | 설명 |
| encodeURIComponent( ) | 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩 |
| decodeURIComponent( ) | encodeURIComponent( )의 디코딩 함수 |
▶ 숫자, 유/무한 값 판별 함수
| 함수명 | 설명 |
| isNaN( ) | 숫자인지 아닌지 판별하는 함수. 숫자이면 false, 숫자가 아니면 true를 반환해준다. NaN은 Not a Number의 약자이다. |
| isFinite( ) | 유한값인지 무한값인지 판별하는 함수. 유한값이면 true, 무한값이면 false를 반환해준다. |
▶ 숫자, 문자 변환 함수
| 함수명 | 설명 |
| Number( ) | 숫자로 변환해 주는 함수 |
| parseInt( ) | 숫자와 문자가 포함되어 있을 경우 정수 부분만 숫자로 변환해 주는 함수 |
| parseFloat( ) | 숫자와 문자가 포함되어 있을 경우 소수 부분까지 숫자로 변환해 주는 함수 |
| String( ) | 문자로 바꾸어 주는 함수 |
▶ 자바스크립트 코드 변경 함수
| 함수명 | 설명 |
| eval( ) | 문자를 자바스크립트 코드로 변경해 주는 함수 |
<script>
// 인코딩, 디코딩 함수
var encodeStr='자바스크립트';
console.log(encodeURIComponent(encodeStr));
var decodeStr=encodeURIComponent(encodeStr);
console.log(decodeURIComponent(decodeStr));
// 숫자, 유무한 값 판별 함수
var num1 = '숫자';
if(!isNaN(num1)){
console.log('숫자');
} else{
console.log('숫자 아님');
}
var num2 = 1/0;
if(isFinite(num2)){
console.log('유한값');
} else{
console.log('무한값');
}
// 숫자, 문자 변환 함수
var num3 = '10';
console.log(Number(num3));
var num4 = '100px';
console.log(parseInt(num4));
var num5 = '33.3%';
console.log(parseFloat(num5));
var num6 = 10;
console.log(typeof num6);
console.log(typeof String(num6));
// 자바스크립트 코드 변경 함수
var str1 = 'var num7 = 10';
var str2 = 'var num8 = 20';
eval(str1);
eval(str2);
console.log(num7+num8);
</script>
'Java Script' 카테고리의 다른 글
| Java Script-내장 객체 1 (Number, String, Array) (0) | 2020.09.22 |
|---|---|
| Java Script-사용자 정의 객체 (0) | 2020.09.21 |
| Java Script-제어문 (0) | 2020.09.10 |
| Java Script-연산자 (0) | 2020.09.09 |
| Java Script-변수와 상수, 데이터 타입 (0) | 2020.09.09 |
댓글