JavaScript 함수 정의


JavaScript는 function 키워드를 사용하여 함수를 정의합니다.

함수는 선언으로 정의할 수도 있고 표현식으로 정의할 수도 있습니다.

함수 선언

이전 튜토리얼에서 함수 선언의 구문을 배웠습니다.

function functionName( 매개변수) {
실행 코드
}

함수는 선언 직후에 실행되지 않고 호출될 때 호출됩니다. 필요해요.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Note세미콜론은 실행 가능한 JavaScript 문을 구분하는 데 사용됩니다.
Note分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。
함수 선언은 실행 가능한 명령문이 아니기 때문에 세미콜론으로 끝나지 않습니다.

함수 표현식

자바스크립트 함수는 표현식으로 정의할 수 있습니다.

함수 표현식은 변수에 저장할 수 있습니다:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

인스턴스 실행 중»

클릭 온라인 예제를 보려면 "예제 실행" 버튼을 누르세요.

함수 표현식이 변수에 저장된 후 변수를 함수로 사용할 수도 있습니다:

인스턴스 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

위 기능은 실제로는 익명 함수입니다(함수에는 이름이 없습니다).

함수는 변수에 저장되며 함수 이름이 필요하지 않으며 일반적으로 변수 이름을 통해 호출됩니다.

Note上述函数以分号结尾，因为它是一个执行语句。

Function() 생성자

위의 예에서 함수는 function이라는 키워드를 통해 정의된다는 것을 배웠습니다.

함수는 내장된 JavaScript 함수 생성자(Function())를 통해서도 정의할 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

사실 생성자를 사용할 필요는 없습니다. 위의 예는 다음과 같이 작성할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Run Instance»

"Run Instance" 버튼을 클릭합니다. 온라인 예시 보기

NoteJavaScript에서는 여러 번 ,
Note在 JavaScript 中，很多时候，你需要避免使用 new 关键字。
new<🎜> 키워드를 사용하지 마세요.

함수 호이스팅(Hoisting)

이전 튜토리얼에서 우리는 이미 "호이스팅"에 대해 배웠습니다.

호이스팅은 현재 범위를 앞으로 끌어올리는 JavaScript의 기본 동작입니다.

호이스팅은 변수 선언과 함수 선언에 적용됩니다.

따라서 선언 전에 함수를 호출할 수 있습니다.

myFunction(5);

function myFunction(y) {
return y * y;
}

식을 사용하여 함수를 정의하는 경우 승격할 수 없습니다.

자기 호출 함수

함수 표현식은 "자신을 호출"할 수 있습니다.

자기 호출 표현식이 자동으로 호출됩니다.

식 뒤에 () 가 오면 자동으로 호출됩니다.

선언된 함수를 자체 호출할 수 없습니다.

괄호를 추가하여 함수 표현식임을 나타냅니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

위 함수는 실제로 익명 자체 호출 함수입니다(함수 이름 없음).

함수를 값으로 사용할 수 있음

JavaScript 함수를 값으로 사용할 수 있음:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数可作为一个值：</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下，x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

JavaScript 함수를 표현식으로 사용할 수 있습니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>函数可作为一个表达式使用。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

함수는 객체입니다

함수 유형을 결정하기 위해 JavaScript에서 typeof 연산자를 사용하면 "function"이 반환됩니다.

하지만 JavaScript 함수를 객체로 설명하는 것이 더 정확합니다.

JavaScript 함수에는 속성과 메서드가 있습니다.

arguments.length 속성은 함수 호출 중에 수신된 매개변수 수를 반환합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Running Instance »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

toString() 메서드는 함수를 문자열로 반환합니다.

인스턴스 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p> toString() 将函数作为一个字符串返回：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

Note函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数。