JavaScript Function 자바스크립트 함수 알짜만 빼먹기
javaScript 함수는 특별한 일을 처리하기 위해 디자인된 코드의 블록입니다.
예)
function myFunction(p1, p2) {
return p1 * p2; // 이 함수는 p1*p2를 리턴하는 함수이다.
}
- 자바스크립트 함수 문법
자바스크립트 함수는 'function' 키워드, 다음에 이름(name), 다음에 괄호()로 정의됩니다.
함수명은 문자, 숫자, 언더라인(_), 달러표시($)를 포함할 수 있습니다.
괄호 안에는 콤마(,)에 의해 분리된 파라메터명을 포함 할 수 있고(parameter1, parameter2,...)
함수에 의해 실행되는 코드들은 중괄호(curly brackets) 안에 작성됩니다.{}
예)
function 함수명(파라메터1, 파라메터2, 파라메터3) {
실행되어지기 위한 코드 작성
}
함수 호출
함수 안에 코드들은 이것이 무언가에 의해 호출될 때 실행됩니다.
● 이벤트가 실행될 때(user가 버튼을 클릭했을 때와 같은..)
● 자바스크립트 코드로부터 호출될 때.
● 자동적으로(스스로 호출)
- 함수 리턴
자바스크립트가 return문에 도달하면, 그 함수는 실행을 중단합니다.
그리고 함수를 호출한 곳으로 값을 보냅니다.
예)
<html>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
id가 "demo"인 요소를 찾아 그 값을 myFunction(4, 3) 함수를 호출해 리턴된 값으로 변경하는 코드입니다.
myFunction함수에 4, 3 파라메터를 전달하고
실행된 함수는 4, 3 파라메터를 받아 그 값을 곱해서 return 하죠.
그래서 12라는 결과가 표시됩니다.
왜 함수를 쓰나?
코드를 재사용 할 수 있다: 한번만 작성하면 여러번 불러 쓸 수 있다.
예)
function plusFunc(f) {
return f+10;
}
document.getElementById("demo").innerHTML = toCelsius(33);
매개변수를 받으면 그 값에 10을 더해 리터하는 함수입니다.
어떤 값을 보내냐에 따라 다른 값을 리턴 받습니다.
그렇다면 괄호를 사용하지 않고 함수를 호출하면 무슨 결과가 나오게 될까요?
위의 예의 리턴값은 43이다. 결과값을 리턴하는 것입니다.
하지만 괄호를 사용하지 않은 함수는 object를 리턴합니다.
예)
function plusFunc(f) {
return f+10;
}
document.getElementById("demo").innerHTML = toCelsius;
위 예제의 결과는 function plusFunc(f) { return f+10; } 입니다.
- 함수는 변수로 사용될 수 있다.
var text = "The temperature is " + toCelsius(32) + " Centigrade";
위의 코드를 대신해
var x = toCelsius(32);
var text = "The temperature is " + x + " Centigrade";
를 사용하여도 같은 값을 얻는 것입니다.
함수 선언 방법
Javascript 에서 함수를 선언하는 방법에는 3가지가 있습니다.
선언문, 표현식, Function() 생성자 함수 사용.
// 선언문
function add(a, b){
return a+b;
}
// 표현식
var add = function(a,b){
return a+b;
};
//Function() 생성자 사
var add = Function('a', 'b', 'return a+b');3가지 방식 모두 호출은 add(1, 2); 와 같이 합니다.
'Programing > JavaScript' 카테고리의 다른 글
| 자바스크립트 지역변수, 전역변수, 로컬, 글로벌 변수 javaScript local variables, global variables, 변수의 범위 (0) | 2015.07.20 |
|---|---|
| 자바스크립트 오브젝트 javaScript object (0) | 2015.07.19 |
| 자바스크립트 undefined, null 의 개념 (0) | 2015.07.19 |
| 자바스크립트 데이터 타입, javaScript data types, typeof (0) | 2015.07.19 |
| 자바스크립트 연산자, javaScript Operators (0) | 2015.07.19 |
댓글