함수: 상자 함(函) 셈 수(數)
function: 기능
함수란?
함수는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다
재사용성이란?
1.내가 작성한 코드를 여러 맥락에서 다시 사용 할 수 있도록 도와준다.
2. 코드 작성 시간을 단축 할 수 있다.
3. 코드 자체의 변화가 생기면, 모든 코드가 동시에 변화가 일어난다.
4. 코드의 가독성 증가
즉, 유지 보수의 용이한 특성을 가졌다.
함수(function)의 기본 문법틀
function 함수명([인자...[,인자]]){
코드
return 반환값
}
function numbering(){
document.write(1);
}
//함수를 정의(선언)함, (변수를 선언하듯)
numbering();
//함수를 실행. 괄호()가 있기때문에 JS에서 함수 넘버링(상단)을 찾아서 호출
function numbering(){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering();
/*
numbering을 여러번 작성하면 작성한 값 만큼 출력된다.
이렇듯 함수는 재사용성의 성격을 지니고 있고 fuction안의 값을 변경함으로써 보다 쉽게 내가 작성한 코드를 다시 사용 할 수 있다.
*/
함수의 효용
function numbering(){
var i =0;
while(i <10);{
document.write(i + "<br />");
i += 1
}
}
for( var i =0; i <100; i++){
numbering();
}
반복문의 효용성과 함수의 효용성의 차이점
반복문 | 함수 |
기계적으로 일정한 반복을 그 자리에서 실행할때 의미가있다. | 반복적으로 실행되는 로직이, 여러가지 맥락에서 반복되서 사용해야하는 경우에 함수가 더 의미가 있다. |
함수의 입력과 출력
출력(return)
function get_number1(){
return "egoing";
}
function get_number2(){
return "k8805";
}
alert(get_number1());
alert(get_number2());
return이 등장하면 하는 일
1. 함수를 종료 return뒤에 코드가 있더라도 실행하지 않는다.
2. return뒤에있는 세미콜론(;)전에 있는 코드(값)를 함수의 출력 값으로 반환한다.
즉, return이 나오면 함수를 종료하고 return뒤에 값을 출력한다.
function get_number1(){
return "egoing";
return "coding";
return "log";
}
alert(get_number1());
이 함수의 출력은 egoing이다.
그 이유는 return값으로 함수가 종료되고 egoing을 출력했다.
그렇기에 밑의 값들은 함수들은 동작하지않는다.
입력(input)
function get_argument(arg){
return arg;
}
alert(get_argument(1));
alert(get_argument(2));
/*
arg라는 변수에 input을 넣을 시
return(함수 종료 후)뒤에 값을 출력한다.
arg를 매개변수(parameter)라 부른다.
get_argument(1)에서 숫자 1은 인자라 부른다.
*/
함수를 정의하는 다른 방법
numbering = function(){
i = 0;
while( i < 10 ){
document.write( i );
i += 1;
}
}
//numbering이란 변수가 함수를 가지게 된 case이다.
//상단의 코드와 하단의 코드는 같은 코드이다.
function numbering(){
i = 0;
while( i < 10 ){
document.write( i );
i += 1;
}
}
numbering();
<------------------------------>
(function numbering(){
i = 0;
while( i < 10 ){
document.write( i );
i += 1;
}
})();
/*함수를 정의 후 호출을 동시에 할 수 있는 함수.
익명함수라 부른다.이름 없이 즉시 호출하기 때문이다.
(일회성 함수에 많이 사용)
*/
'Front-end > JavaScript' 카테고리의 다른 글
[JavaScript ES6]객체(Object) (0) | 2021.10.22 |
---|---|
[JavaScript ES6]배열(array) (0) | 2021.10.21 |
[JavaScript]반복문(while문 ,for문) 제어와 중첩 (0) | 2021.10.19 |
[JavaScript]조건문(if else문,변수와 비교연산자, 논리 연산자) (0) | 2021.10.17 |
[JavaScript ES6] 변수(variable) (0) | 2021.10.16 |