안녕하세요 백자까입니다. 이번에는 함수에 대해서 알아보겠습니다.


함수(Function)란 미리 만들어진 구문을 불러서 사용 또는 재사용하는 형태입니다. 주로 반복적으로 사용디는 구문을 미리 작성해 두고 활용할 때 호출하여 사용함으로써 반복적인 작업을 줄여 주므로 개발효율과 코드의 양을 줄여 주는데 많은 도움이 됩니다.


함수 선언하기

함수는 다음 소스코드와 같은 방법으로 선언합니다.

1
2
3
function send() {
    alert('전송');
}
cs

function은 함수를 사용하겠다는 선언부를 의미합니다. send는 함수의 이름입니다. 변수의 이름과 같은 의미로 생각할 수 있습니다. 함수의 이름 뒤에는 ()가 들어가고 옆에 {}가 오며 그 안에 함수가 호출되었을 때 수행되는 구문이 들어갑니다.



함수 호출하기

1
2
3
4
5
function send() {
    alert('전송');
}
 
send();
cs

1번 라인에서 send라는 함수가 미리 선언되어 있고, 5번 라인에서 send() 함수를 호출합니다. 함수가 호출되면 선언되어진 함수의 안의 구문인 2번 라인이 실행되어 alert 창에 "전송"이라는 메시지가 나타납니다. 


인자값과 매개변수


함수를 선언하면서 ()안에 매개변수를 설정할 수 있습니다. 

선언된 함수의 ()안에 인자값을 넘겨 매개변수를 통해서 함수안의 구문에 값을 전달할 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
var a = 10;
var a = 20;
 
var sum = add(a,b);
document.write(sum);
 
function add(v1, v2) {
    var sum = v1 + v2;
    return sum;
}
 
document.write(sum);
cs

4번 라인에서 add(a, b) 에서 a와 b가 '인자값'이라 하고 호출한 함수에 인자값을 넘겨줍니다. 그러면 7번 라인에 호출당한 add함수의 매개변수 v1, v2에 인자값이 들어가게 됩니다. v1에는 a의 값이 v2에는 b의 값이 들어갑니다. 8번라인에서 값을 더한 후 출력합니다.


반환값(return)

함수가 호출되면 함수를 호출한 구문으로 값을 반대로 보내줄 수 있습니다. 그 역할을 해주는 것이 반환(return)됩니다. 반환값을 이용하면 프로그램을 유연하게 개발할 수 있습니다.  반환값에 대해 조금 더 자세히 알아보겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
var a = 10;
var a = 20;
 
var sum = add(a,b);
document.write(sum);
 
function add(v1, v2) {
    var sum = v1 + v2;
    return sum;
}
 
document.write(sum);
cs

같은 코드인데 9번 라인에서 return을 해주게 되면 add(a,b)에서 함수를 호출했었던 곳으로 return 값이 들어가게 됩니다. 그래서 4번라인에 sum변수에 return값이 들어가게 됩니다.



참고서적 : JavaScript+jQuery입문+실전북

저작자표시 비영리 변경금지

안녕하세요 백자까입니다. 이번에는 javascript의 조건문에 대해서 알아보겠습니다.


조건문은 특정한 조건을 만족하는지 여부를 계산하여 조건을 만족한다면 프로그램 구문을 수행되도록 설정할 수 있습니다. 또한 여러 조건을 설정한 후 그 중 만족하는 조건을 찾을 수 있으며 모든 조건을 만족하지 않을 때 구문이 수행되도록 설정할 수 있습니다.



if문

1
2
3
4
5
6
var a = 10;
var b = 20;
 
if(a < b) {
    documnet.write("a가 b보다 작습니다.");
}
cs


if()를 호출하고 a가 b보다 작다면 이라는 조건을 만족한다면 {}안에 구문이 호출됩니다. a는 b보다 작기 때문에 그 아래 조건을 만족하여 document에 "a가 b보다 작습니다."라고 출력됩니다.



if, else문

1
2
3
4
5
6
7
8
var a = 10;
var b = 20;
 
if(a > b) {
    document.write("a가 b보다 큽니다.");
} else {
    document.write("a가 b보다 작습니다.");
}
cs


if()를 호출하고 a가 b보다 작다는 조건을 만족한다면 {} 안에 구문이 호출되고 그렇지 않으면 else의 {}가 호출됩니다. a는 b보다 작기 때문에 if의 조건을 만족하지 않아 else구문이 호출되어 document에 "a가 b보다 작습니다."라는 메시지가 출력됩니다.



if, else if, else문

1
2
3
4
5
6
7
8
9
10
11
var a = 10;
var b = 20;
var c = 30;
 
if(a > b) {
    document.write("a가 b보다 큽니다.");
} else if( b > c) {
    document.write("b가 c보다 큽니다.");
} else {
    document.write("모든 조건을 만족하지 않습니다.");
}

cs


5, 7라인의 조건은 만족하지 않기 때문에 조건문안의 구문이 실행되지 않습니다. 9, 11번은 조건을 만족하지만 9번의 조건문 안의 구문만 호출됩니다. 그 이유는 조건은 위부터 순차적으로 조건을 비교하며 만족하는 조건이 있으며 더 이상 비교하지 않기 때문에 위의 예를 실행 하면 10번 라인의 구문만 실행됩니다.



조금 특별한 조건문 ?


조건문을 조금 더 간결하게 사용할 수 있습니다. else if없이 if와 else만 사용한다면 조금 더 간결하게 작성할 수 있습니다.

1
(a > b) ? document.write("a는 b보다 큽니다.") : document.write("a는 b보다 작습니다.");
cs
위의 예는 if와 else문을 좀 더 간결하게 작성합니다. '?' 뒤가 조건을 만족할 때 이고, ':' 뒤가 조건을 만족하지 않을 때입니다.



참고서적 : JavaScript+jQuery입문+실전북


저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

6.javascript 반복문  (0) 2017.09.22
5.javascript객체  (0) 2017.09.22
2.Javascript 연산자  (0) 2017.09.19
1.Javascript변수  (0) 2017.08.15
Window 객체  (0) 2017.07.20



이번에는 연산자에 대해서 알아보겠습니다.


연산자는 값을 계산하거나 증가 또는 감소 그리고 문자열을 이어 붙이는 등 다양한 연산을 처리합니다.

다음은 연산자들을 정리한 표 입니다.


종류 

설명 

예시 

+,-,*,/ 

숫자 연산 

사칙연산을 수행합니다.

 +

문자열 연산 

문자열을 이어줍니다. 

%

숫자 연산 

나머지 값을 구합니다. 

++ 

숫자 연산 

1씩 증가합니다.

--

숫자 연산 

1씩 감소합니다. 

 +=,-=,*=,/=,%=

숫자 연산 

연사을 수행하고 값을 대입합니다.


그럼 연산자를 사용한 예를 들어 보겠습니다.

1.사칙 연산

1
2
3
4
5
6
var a = 10;
var b = 20;
var c = 30;
var d = 40;
var e = 50;
var result = a + b - c*d/e;
cs

결과 값 : 10 + 20 - 30*40/50 = 6



2.문자열 연산

1
2
3
var a = "baekjakka";
var b = "tistory";
var result = a + b;
cs

결과 값 : baekjakkatistory



3. 문자열 + 숫자 연산

1
2
3
4
var a = "baekjakka";
var b = 1;
var c = "tistory";
var result = a + b + c;
cs

결과 값 : baekjakka1tistory 

문자열과 숫자를 +연산하면 문자열끼리 연산하는 겻과 같이 연산합니다.


비교 연산자

조건문의 조건을 만들기 위해서는 비교연산자를 사용해야 합니다.


연산자

사용 예 

설명 

 ==

 a == b 

 a와 b가 같다면 

 != 

 a != b 

 a와 b가 다르면 

 && 

 a == b && a == c 

 a와 b가 같고 a 와 c가 같다면, 두 조건이 모두 참이어야 합니다. 

 ||

 a == b || a == c 

 a와 b가 같거나 a 와 c가 같다면, 두 조건 중 하나라도 만족해야 합니다. 

 >

 a > b 

 a 가 b보다 크다면 

 < 

 a < b 

 a가 b보다 작으면 

 >= 

 a >= b  

 a가 b보다 크거나 같으면 

 <=  

 a <= b 

 a가 b보다 작거나 같으면 



** 논리곱과 논리합 연산 부가 설명 **

논리곱(&&) 와 논리합(||)


&& 논리곱은 좌측 표현식의 평가가 false일 경우 우측 표현식은 실행되지 않는다.

|| 논리합은 좌측 표현식의 평가가 true일 경우 우측 표현식은 실행되지 않는다.


실습 예제로 살펴 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
&& 와 ||을 이용한 조건문
 
var arr;
 
//arr이 undefined일 경우 비어있는 배열 객체를 대입합니다.
arr=arr || [];
 
arr[0] = "홍길동";
arr[1] = "홍길서";
arr[2] = "홍길남";
arr[3] = "홍길북";
 
//arr이 배열 객체가 존재할 경우 arr 배열의 길이를 출력합니다.
arr && document.writeln("arr.length: " + arr.length + "<br/>");
cs







참고서적 : JavaScript+jQuery입문+실전북

코드작성 : https://colorscripter.com/

저작자표시 비영리 변경금지

'Language > Javascript' 카테고리의 다른 글

5.javascript객체  (0) 2017.09.22
3.javascript 조건문  (0) 2017.09.19
1.Javascript변수  (0) 2017.08.15
Window 객체  (0) 2017.07.20
오브젝트모델(Object Model)  (0) 2017.07.20

+ Recent posts

티스토리툴바