Class15(함수)
2022. 05. 26. 수업내용 정리 #1/2
함수.. 기본내용 정리
-
함수(function)
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 독립적인 블록을 의미합니다.
이러한 함수는 필요할 때마다 호출하여 해당 작업을 번복해서 수행할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Function</title> </head> <body> <h1>자바스크립트 함수</h1> <script> function addNum(x, y) { return x + y; } document.write(addNum(2, 3)); </script> </body> </html>웹페이지 화면 ▼
/함수기본예시1.png)
-
자바스크립트에서의 함수
함수도 하나의 타입(datatype)입니다.
따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다.
또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있습니다.
-
함수의 정의
자바스크립트에서 함수의 정의는 function키워드로 시작되며, 다음과 같은 구성요소를 가집니다.
- 함수의 이름
- 괄호 안에 쉽표(,)로 구분되는 함수의 매개변수(parameter)
- 중괄호({})로 둘러싸인 자바스크립트 실행문
<!--함수이름은 함수를 구분하는 식별자, 매개변수는 인수로 전달된 값을 함수 내부에서 사용할 수 있도록 해주는 변수--> 문법 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; }<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Function</title> </head> <body> <h1>함수의 정의</h1> <script> // addNum라는 이름의 함수를 정의함. function addNum(x, y) { // x, y는 이 함수의 매개변수임. document.write(x + y); } addNum(2, 3); // addNum() 함수에 인수로 x = 2와 y = 3을 전달하여 호출함. </script> </body> </html>웹페이지 화면 ▼
/함수기본예시2.png)
-
반환문(return)
함수는 반환문(return)을 포함할 수 있습니다.
이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있습니다.
반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환합니다.
반환문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Function</title> </head> <body> <h1>함수의 반환문</h1> <script> function multiNum(x, y) { return x * y; // x와 y를 곱한 결과를 반환함. } var num = multiNum(3, 4); // multiNum() 함수가 호출된 후, 그 반환 값이 변수 num에 저장됨. document.write(num); </script> </body> </html>웹페이지 화면 ▼
/함수기본예시3.png)
-
함수의 호출
정의된 함수는 프로그램 내에서 호출되어야 비로소 실행됩니다.
일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출할 수 있습니다.
function addNum(x, y) { return x + y; }var sum = addNum(3, 5); // 함수 addNum()을 호출하면서, 인수로 3과 5를 전달합니다. // 함수의 호출이 끝난 뒤에는 그 반환값을 변수 sum에 대입합니다. -
값으로서의 함수
함수는 문법적인 구문일뿐만 아니라 값(value)이기도 합니다.
따라서 함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Function</title> </head> <body> <h1>값으로서의 함수</h1> <script> function sqr(x) { // 제곱의 값을 구하는 함수 sqr를 정의함. return x * x; } var sqrNum = sqr; // 변수 sqrNum에 함수 sqr을 할당함. document.write(sqr(4) + "<br>"); // 함수 sqr을 호출함. document.write(sqrNum(4)); // 변수 sqrNum를 함수처럼 호출함. </script> </body> </html>웹페이지 화면 ▼
/함수기본예시4.png)
댓글남기기