티스토리 뷰
함수 : function 키워드로 정의
- 함수 선언 또는 함수 표현식을 사용 할 수 있음
함수 선언
1. 기본 형식
function 함수이름 (매개변수1, 매개변수2, ....., 매개변수n) {
//실행될 함수 문장
}
2. Function( ) 생성자
function myFunction(a, b){
return a * b;
}
3. 함수 값으로 사용 가능
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 5) * 2;
4. 함수는 객체이다
- typeof 연산자는 함수에 대해 'function'을 반환한다
function myFunction(a, b) {
return arguments.length;
//arguments.length 속성은 함수가 호출될 때 받은 인수의 갯수
}
function yourFunction(a, b) {
return a * b;
}
document.write(typeof(myFunction)); //myFunction에 대한 typeof 연산자를 적용한 함수의 자료형 출력
document.write(myFunction(4, 3)); //myFunction()을 호출하여 매개변수의 개수를 출력
document.write(yourFunction.toString()); //yourFunction함수를 객체로 다루어 toString() 메소드를 적용
사용자 정의 함수
1. 명시적(선언적) 함수
- 기본 형식
function 함수이름 (매개변수1, 매개변수2, ....., 매개변수n) {
//실행될 함수 문장
}
<head>
<script>
function helloworld {
alert("Hello world!");
}
</script>
</head>
<body>
<script>
helloworld();
</script>
</body>#함수의 이름을 통하여 필요한 곳에서 호출하여 사용
2. 함수 표현식(무명 함수) : 함수의 이름을 부여하지 않고 선언된 함수
- 기본 형식
var 변수 = function(인자, ....인자) {
//함수 본문
[ return 문 ]
}
<head>
<script>
function helloworld {
alert("Hello world!");
}
var hellocity = function() {
alert("Hello city!");
}
</script>
</head>
<body>
<script>
helloworld();
hellocity();
</script>
</body>#함수 표현식에서 사용된 변수는 함수 객체이며, 나중에 객체로써 호출되어 사용할 수 있음
4. 함수 표현식 고려사항
- 명시적 함수일 경우, 함수의 선언이 함수 호출 이후에 있어도 오류가 발생하지 않음
- 함수식 표현식은 먼저 호출하고 나중에 함수를 선언하면 결과를 출력하지 못하는 오류가 발생함
- 명시적 함수는 함수를 어디에 선언해도 함수의 호출에 영향을 미치지 않음
- 함수식 표현식은 함수가 변수에 할당되는 대입문인데, 이것이 실행되어 함수가 변수에 할당되어야만 그 변수를 함수 객체의 개념에서 접근 할 수 있음
<body>
<script>
helloworld();
function helloworld {
alert("Hello world!");
}
//hellocity(); //오류
var hellocity = function() {
alert("Hello city!");
}
hellocity();
</script>
</body>
5. 람다(Lamda) 함수 : 자체 호출 함수
- 선언적으로나 익명으로도 함수의 이름이 존재하지 않음
- 다른 위치에서 함수 호출 불가 -> 람다 함수를 대표하는 어떠한 이름도 존재하지 않기 때문
- 순차적인 실행과정에서 순서에 따라 실행
- 기본 형태
(function ( ) {
//문장
})( );
<body>
<script>
(function() {
alert("Hello World!");
})();
</script>
</body>
6. 함수를 변수로 활용
- 함수는 return된 값을 함수 표현식의 값으로 할당되므로 수식에서 하나의 변수로 활용할 수 있음
<head>
<script>
var view = functino add(x, y) {
var sum;
sum = x + y;
return sum;
};
</script>
</head>
<body>
<script>
var result = view(100, 200);
document.write("함수 add()가 반환된 값 : " + result);
</script>
</body>
가변 인자 함수
1. 매개변수 기본원칙
- 매개변수에 대한 데이터 유형을 지정하지 않음
- 함수는 전달된 함수에 대해 유형 검사를 수행하지 않음
- 함수는 받은 인수의 수를 확인하지 않음
- 인수보다 매개변수의 개수가 많으면 초과된 매개변수는 'undefined'로 지정되고, 인수가 많으면 초과된 인수는 무시됨
2. 함수 이름은 같으나 매개변수가 여러 가지인 경우
- 가장 많은 매개변수를 가지고 있는 함수에만 호출 함수가 적용됨
<head>
<script>
function print(x, y) {
document.write(x + "가 " + y + "개 있습니다");
}
function print(x) {
document.write(x + "를 판매한다");
}
function print(a, b, c, d) {
document.write(a + "가 " + b + "개 있으며, 단가는" + c + "원이며, " + d + "되었다");
}
</script>
</head>
<body>
<script>
print('사과', 10);
//사과가 10개 있으며, 단가는 undefined원이며, undefined되었다.
print('사과');
//사과가 undefind개 있으며, 단가는 undefined원이며, undefined되었다.
print('사과', '수천', 500, '완판');
//사과가 수천개 있으며, 단가는 500원이며, 완판되었다.
</script>
</body>
3. 'undefined'된 매개변수에 함수 내에서 값을 할당하는 경우
<head>
<script>
function print(fruit, count){
if (count == undefind){
count = 10;
document.write(fruit+"가 "+count+"개 있습니다");
}
}
</script>
</head>
<body>
<script>
print('사과'); //사과가 10개 있습니다
</script>
</body>
4. 초과된 인수의 활용 (argument 객체)
- 매개변수를 정의하지 않고 함수를 선언할 필요가 있는데, 이때 인수로 넘어온 값들을 함수에서 활용하고자 할 때 'argument' 객체 이용
<head>
<script>
function print(){
document.write(arguments[0]+"가 "+arguments[1] +"개 있습니다");
}
</script>
</head>
<body>
<script>
print('사과', 10);
</script>
</body>
5. 인수에는 객체, 배열도 가능하다
- 함수의 인수에는 배열이나 객체가 올 수 있음
<head>
<script>
function showMe(a, b) {
document.write(a[0] + "가 " + a[1] + "개 있습니다");
document.write("나는" + b.car + "를 타고, 색상이" + b.col + "이다");
}
</script>
</head>
<body>
<script>
var array = ['사과', 10];
var obj = {'car':'BMW', 'col':'black'};
showMe(array, obj);
</script>
</body>
함수의 호출
- 이벤트가 발생할 때 (ex. 사용자가 버튼을 클릭할 때)
- 자바스크립트 코드에서 호출할 때
- 자체(재귀 함수) 호출할 때
1. 함수 안에서 외부 함수 호출
function square(x, y) {
var sum;
sum = (x * y) / 2;
return sum;
}
function display(a, b) {
document.write("삼각형의 면적 : " + square(a, b));
}
2. 함수 안에서 내부 함수 호출
function square(x, y) {
var calc = function(a, b) {
sum = (x * y) / 2;
return sum;
}
}
var result = calc(x, y);
document.write("삼각형의 면적 : " + result);
3. 재귀 함수 : 나 자신을 다시 호출하는 함수
function count(x) {
if (x == 0)
document.write("함수 실행 종료");
else {
document.write("함수 'count'가 호출될 때의 x 값 : " + x);
count(x - 1);
}
}
4. 콜백 함수 : 함수의 매개변수에 전달되는 함수 표현식의 변수인 인수
function callBack(x) {
for (var i = 1; i < -10; i++) {
x(i);
}
}
var greeting = function(i) {
document.write('Hello JavaScript World' + i);
}
내장 함수
1. eval( ) : 자바스크립트 문장이 매개변수로 전달된 문자열이면, 그 문장을 자바스크립트 문장으로 인식하여 처리
var str1 = "var1 = 20";
var str2 = "var2 = 30";
document.write(eval(str1) + eval(str2)); //50
2. parseInt( ), parseFloat( ) : 인수로 숫자형 문자를 정수나 실수로 변경
- ParseInt(String[ , nBase]);
- ParseFloat(String);
3. isFinite( ), isNaN( ) : 결과는 true 또는 false
- isFinite( ) : 주어진 값이 유리수인지 아닌지 여부 판단
- isNaN( ) : 주어진 값이 숫자인지 아닌지 여부 판단
4. Number( ), String( )
- Number( ) : 함수를 문자열로 변환
- String( ) : 숫자를 문자열로 변환
5. escape(매개변수), unescape(매개변수)
- escape( ) : 문자 인코딩
-> 일반 문자, 특수 문자, 숫자 등 'ISO-Latin-1' 문자를 16진수 아스키코드 값으로 바꾸어주는 함수
- unescape( ) : 문자 디코딩
-> 아스키코드 값을 'ISO-Latin-1' 문자로 바꾸어주는 함수
함수 메소드
1. call( ) : 미리 정의된 자바스크립트 함수 메소드
- 소유자 객체를 첫 번째 인수(매개변수)로 사용하여 함수를 호출하는데 사용할 수 있음
- 다른 객체에 속한 메소드를 사용 가능
<body>
<p id="demo01"></p> <!-- John Goodman -->
<p id="demo02"></p> <!-- Mary Lockman -->
<script>
var person = {
firstName: "John",
lastName: "Goodman",
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
}
var person = {
firstName = "Mary",
lastName = "Lockman",
}
x = person.fullName(myObject);
document.getElementById("demo01").innerHTML = x;
y = person.fullName.call(myObject);
document.getElementById("demo02").innerHTML = y;
</script>
</body>
2. apply( ) : call( ) 메소드와 비슷하게 적용
- call( )은 함수 인수를 따로 취함
- apply( )는 모든 함수 인수를 배열로 사용
변수의 적용 범위
1. 지역 변수 : 함수 내부에 선언된 변수
function add(a, b) {
var sum = 0; //지역 함수
sum = a + b;
return sum;
}
2. 전역 변수 : 함수 밖에 변수를 정의하여 함수 내에도 영향을 미치는 함수
var sum = 0; //전역 함수
function add(a, b) {
sum = a + b;
return sum;
}3. 변수의 우선순위
- 전역변수와 지역변수가 같은 이름으로 명시되면, 함수 내에서는 지역 변수가 우선적으로 적용됨
클로저
1. 카운터 딜레마
- 무언가 계산에 변수를 사용하고, 카운터를 모든 함수에서 사용할 수 있게 한다면 전역 변수와 함수를 사용하여 카운터를 늘릴 수 있음
<body>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo01">0</p>
<script>
var counter = 0;
function add() {
return counter += 1;
}
function myFunction() {
document.getElementById("demo01").innerHTML = add();
}
</script>
</body>
2. 중첩 함수
- 중첩된 함수는 상위 범위에 있는 변수에 접근할 수 있도록 지원함
<body>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo01">0</p>
<script>
document.getElementById("demo01").innerHTML = add();
function add() {
var counter = 0;
function plus()(counter += 1;)
plus();
return counter;
}
</script>
</body>
3. 클로저 (Closures)
<body>
<button type="button" onclick="myFunction()">Count!</button>
<p id="demo01">0</p>
<script>
var add = (function() {
var counter = 0;
return function() {
return counter += 1;
}
})();
function myFunction() {
document.getElementById("demo01").innerHTML = add();
}
</script>
</body>
'LANGUAGE > JAVA SCRIPT' 카테고리의 다른 글
| [JAVA SCRIPT] DOM (0) | 2018.10.16 |
|---|---|
| [JAVA SCRIPT] OBJECT - 객체 (0) | 2018.10.14 |
| [JAVA SCRIPT] ARRAY - 배열 (0) | 2018.10.11 |
| [JAVA SCRIPT] 자료형 (0) | 2018.09.28 |
| [JAVA SCRIPT] 이미지 자동 변경 (0) | 2018.04.15 |