생활코딩 Javascript #10 함수

Javascript #10 함수

 

 

 

24. 함수 예고

1) 함수를 사용하는 이유

- 함수는 코드를 담고 있는 수납상자 같은 느낌

- 무수히 많은 코드를 수정하는 경우 함수를 사용하지 않았을 때 하나하나 다 바꿔줘야 하므로 현실적으로 불가능.

- 함수를 사용하면 무수히 많은 코드 전체를 수정할 수 있다.

- 중복된 코드를 함수로 지정하여 한줄로 단순화할 수 있다.

 

2) 함수 사용 시 좋은 점(장점)

- 유지보수가 쉬워진다.

- 코드가 단순해져서 웹 페이지의 크기가 줄어들 수 있다.

 

 

 

25. 함수 ( function )

1) 반복문을 쓸 수 없는 경우

연속적으로 반복되는 것이 아니라 연속적이지 않게 반복되는 것

→ 반복문을 사용하기 어렵거나 사용 불가

 

2) 함수 생성 및 호출

function 함수이름() {          → 함수 생성
   재사용하고 싶은 코드 
}
함수이름 () ;                        → 코드만 작성한 것과 동일한 효과(호출)

document.write('<li>box1</li>');             document.write('<li>box2</li>');             document.write('<li>box3</li>');             document.write('<li>box4</li>');             document.write('<li>box2</li>');             document.write('<li>box3</li>');	function two() {                                 document.write('<li>box2</li>');                 document.write('<li>box3</li>');             }             document.write('<li>box1</li>');             two();             document.write('<li>box4</li>');             two();
→ 같은 결과

 

 

 

26. 매개변수와 인자

Function
입력과 출력으로 이루어진 것

Parameter
함수의 입력에 해당되는 것
매개변수라고도 함

Argument
인자

Return
함수의 출력에 해당되는 것

 

 

1) 언제나 똑같이 동작하는 함수가 아닌,
어떤 입력 결과에 따라 다른 결과를 출력한다면?

함수, 매개변수, 인자란?

결괏값

 

 

 

27. 리턴

1) 표현식

> 2-1        → 1이라는 값에 대한 표현식
< 1

> 1==1       → true라는 값에대한 표현식
< true

 

2) 표현식 예시

- 두 수의 합을 구하는 sum이라는 함수를 정의하고자한다.

- 왼쪽에 있는 수를 left, 오른쪽에 있는 수를 right 라고 한다면,

function sum(){
    document.write();
}

sum(2,3); //5에 대한 표현식
sum(3,4); //7에 대한 표현식

 

- 매개변수에 left, right 라고 두고,

- write 안에 매개변수의 합을 화면에 출력하도록 코드 작성하면 두 수의 합을 화면에 표시할 수 있다.

function sum(left, right){
    document.write(left+right+'<br>');
}

sum(2,3); //5에 대한 표현식
sum(3,4); //7에 대한 표현식

 

- 스타일 지정도 가능하다.

function sumColorRed(left, right){
    document.write('<div style="color:red">'+left+right+'</div><br>');
}

sumColorRed(2, 3); // 5에 대한 표현식

 

3) 리턴

- 매개변수를 통해 들어간 값을 return 을 통해 출력함으로써 다양한 용도로 함수를 활용할 수 있다.

function sum2(left, right){
    return left+right;
}

document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:1.5rem">'+sum2(2,3)+'</div>');

결괏값