옥수수와 식빵 그리고 코딩

24. 함수..! 본문

2023/생활코딩

24. 함수..!

옥식 2023. 9. 29. 01:12

그분이 왔다! 함수!

두려워하면 지는거다...

 

함수 : 수납상자

객체 : 조금 더 큰 정리도구

 

일단은 구경해부자

함수를 사용하면 코드가 정말 간결해진다. 즉 유지보수가 쉬워지고, 알아보기도 쉬워진다.

물건이 아무리 많아도 정리정돈이 안 되어있다면 찾아서 사용하기 어렵듯이 코드도 마찬가지이다. 지금 당장은 잘 작동하는 코드더라도 유지보수는 항상 필요한데 그 때마다 정리가 너무 ㅎ미들다면 그건 좋은 코드라 할 수 없다.

 

함수(function)

*객체지향언어에서는 method라고 하기도 함

 

기본  html 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset=" utf-8">
    </head>
    <body>
        
    </body>
</html>

 

1. 기본적인 문법

 

반복을 하는데 만약 연속적인 반복이 아니라면? 반복문을 사용할 수 없음. 그렇다면 함수 사용.

<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
</script>

여기서 웹 브라우저는 function을 보고 two라는게 함수 이름이구나 기억함 ->

그리고 two를 만나면 뭔지 모르다가 ()를 보고 아 two라는건 함수의 이름이었고 이 코드는 two 함수를 실햄하는 코드라는걸 알게됨.

 

이게 함수의 기본적인 문법.

 

2. 매개변수와 인자

다른 입력에 따라 해당하는 다른 출력이 나온다면? 더 좋겠지?

 

함수에서 입력 = parameter = 매개변수

출력 = argument = 인자

출력은 return과 관련되어 있음.

 

예시로 더하기를 해보자

<h2>Parameter & Argument</h2>
<script>
function sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3);
sum(3,9);
</script>

sum(2, 3) 이런 형식을 적으면 출력값으로 5를 주는 함수를 만들고 싶음.

그럼 이 형식에 맞게 sum 함수를 만드는데 이 때 

function sum(left, right)

여기서 괄호 안의 left, right가 값을 받아서 함수안으로 매개하는 변수 즉 매개변수 parametera이라 함.

그리고 함수를 호출한 뒤 sum(2,3)에서 2, 3이 함수로 전달되는 값으로 인자 argument라고 함.

그러니까 함수에 인자를 넣으면 인자가 매개변수 안에 들어가서 함수가 작동되고 그 결과값이 출력되는 거임!

이 두가지는 함수로 들어오는 입력값과 관련된 것이라고 생각하명 됨.

그리고 코드내에서는 작동되는데 뭔가 오류나면 웹페이지 -검사-콘솔 확인해보기.

 

3. 리턴(return)

표현식(expression)이란 무엇인가?

ex) 1+1은 2에 대한 표현식

1===1 은 ture에 대한 표현식

 

이번에는 sum(2,3)을 했을 때 5가 나오는 것이 아니라 2+3 = 5 전체 표현식이 나오도록 만들거임.

그냥 단순히 식만 더한다고 생각하면 출력 할 떄 인자들 한번씩 더 출력하고 + 기호 나오게 하면 되는거 아닐까 할 수 있지만 그게 아니라 더 복잡하고 더 길고 더 많은 코드라면?

 

예를들어 아까 만든 코드에 색을 추가하면

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

이건데 이거 제대로 안나옴

4:04초의 결과가 붉은색 5가 아닌 붉은색 23이 된 이유는 자바스크립트는 문자와 숫자를 더하면 숫자를 문자로 간주합니다. +를 덧셈이 아닌 문자 결합 연산자로 사용합니다. 그래서 2와 3이 결합되서 23이 된 것입니다. 아래와 같이  괄호를 사용해서 2와 3을 먼저 더해주셔야 합니다. (left + right)
<div>태그에는 줄바꿈 기능이 있어서 <br>태그와 같이 쓰면 줄바꿈이 두번 일어나게 된다.

표현식이 나오는 결과를 출력하는게 아니라 그 결과값을 이용하고 싶다면..!  sum함수의 결과값을 돌려주면 되지 않을까?

돌려준다 = ruturn

 

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:3rem;">'+sum2(2,3)+'</div>');

 

계산이라는 기능만을 sum2라는 함수가 구현하면서 저 원자화된 기능을 다양하게 활용할 수 있는 자유도가 생김

이것이 return..!

 

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

 

*7분짜리 강의지만 실행해보고 오류고치고 개념 정리하고 하다보면 한시간이 걸린당... 이런 나 장하다!

 

 

저작자표시

'2023 > 생활코딩' 카테고리의 다른 글

29. 객체(object)  (0) 2023.09.30
28. 함수 활용 (실습)  (0) 2023.09.29
23. 배열과 반복문의 활용  (1) 2023.09.28
22. 배열과 반복문 하이브리드  (0) 2023.09.28
21. 반복문(loop)  (0) 2023.09.27
'2023/생활코딩' Related Articles more
Comments