#함수

생활코딩에서 함수를 수납함에 비유하였는데, 그 이유를 정리정돈하여 하나의 기능을 분류하여 효율과 유지보수를 높여주는 것으로 들었다.

우선 함수의 기본 문법에 대해서 알아보면

function name() {
	// 함수의 기능
    document.write('Hello World!');
}

으로 사용하며 실행은 name(); 을 선언하여 실행할 수 있다.

 

#함수(매개변수Parameter와 인자Argument)

앞서 함수의 기본 문법에서는 정해진 기능에 대한 구현을 했었다면, 지금은 사용자가 원하는 정보를 위해 입력을 하고 그에 상응하는 값을 출력받고자 하는 함수를 학습해보자.

입력에 해당하는 것을 매개변수(Parameter)와 인자(Argument)라고 하는데, 두 수를 더하는 함수를 간단히 생성해보면.

function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); //5
      sum(3,4); //7

sum()이라는 함수안에 left와 right라는 변수를 생성하고 left+right의 결과값이 출력되도록 함수를 코딩했다면, left, right를 매개변수라고 부른다.

함수를 출력하기 위해 사용한 sum(2,3); 과 sum(3,4);와 같이 함수로 전달하는 2,3,4를 인자라고 부른다.

 

#함수(리턴Return)

함수가 어떠한 기능을 출력까지 한다면 우리는 조금은 활용도가 제약적일 수 있다.

예를 들어, sum(left, right)라는 함수가 document.write(left+right)의 출력을 하는 함수라고 한다면 우리는 수정요소에 대한 번거로움이 있을 수 있고, 이런 번거로움을 줄이고 활용도를 높이는데에는 sum(left, right)라는 함수의 기능을 단순히 '더하기'의 기능만을 주고 출력때에 우리가 활용한다면 필요에 따라 효율성이 증가될 것이다.

내가 만약 2와 3을 더한 값을 다음과 같이 세가지로 출력하고 싶다면,

  1. 일반적인 결과값 '5'
  2. 글씨색이 빨간 결과값 '5'
  3. 글씨 크기가 3rem인 결과값 '5'

이때 활용하는 것이 함수의 리턴(Return)이다.

// 단순 더하기 함수 sum()
function sum(left, right){
        return left+right;
      }

// 세가지의 결과값 출력
document.write(sum(2,3)+'<br>');
document.write('<div style="color:red">'+sum(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum(2,3)+'</div>');

 

#함수의 적용

앞 전에서 사용하였던 day, night 테마 변경에 대해서 우리는 html내의 <input type="button">의 onclick을 통해서 구현을 하였는데 이러한 사용에 있어서 동일한 기능의 버튼이 여러개라면 우리는 수정하는데에 있어서 비효율적인 환경이 될 것이다.

<input type="button" name="" value="night" onclick="
	var target1 = document.querySelector('body');
    var alist = document.querySelectorAll('a');
    var i=0;
    
    if(self.value==='day'){
      target1.style.backgroundColor='white';
      target1.style.color='black';
      while(i<alist.length){
        alist[i].style.color='black';
        i++;
      }
      self.value='night';
    }
    else{
      target1.style.backgroundColor='black';
      target1.style.color='white';
      while(i<alist.length){
        alist[i].style.color='powderblue';
        i++;
      }
      self.value='day';
    }
  ">

위와 같이 버튼하나에 기능하나를 일일이 구현하게 되는 것과 같다. 

그런데 하나의 기능을 수납함에 넣어두고 필요할 때에 꺼내어 쓰는 함수를 이용한다면  html의 문법은 보다 간결해져 가독성이 높아질 것이다. day와 night로 변경하는 기능의 Javascript문을 themeChanger()이라는 함수에 담고 <input>태그를 수정해보면

<!-- themeChanger()함수 구현 -->
<script>
  function themeChanger(self){
    var target1 = document.querySelector('body');
    var alist = document.querySelectorAll('a');
    var i=0;
    if(self.value==='day'){
      target1.style.backgroundColor='white';
      target1.style.color='black';
      while(i<alist.length){
        alist[i].style.color='black';
        i++;
      }
      self.value='night';
    }
    else{
      target1.style.backgroundColor='black';
      target1.style.color='white';
      while(i<alist.length){
        alist[i].style.color='powderblue';
        i++;
      }
      self.value='day';
    }
  }
</script>

<!-- 버튼의 onclick에 themeChanger() 함수 삽입 -->
<body>
	<input type="button" name="" value="night" onclick="themeChanger(this)">
</body>

과 같이 function themeChanger(self)로 구현하였다. themeChanger() 내에 있는 self는 매개변수이고 사용되는 onclick="themeChanger(this)">에서 this를 통해 태그를 전달하는 것이다.

즉, 함수에서 this를 self라는 배개변수에 받아오게 되고, 이를 통해 나머지 코드가 진행된다.

<참고자료 : boostcourse : 생활코딩> https://www.boostcourse.org/cs124/joinLectures/43687?isDesc=false
 

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

저작자표시

'ocean floor > js floor' 카테고리의 다른 글

JavaScript 연동과 라이브러리(Library)  (0) 2021.03.14
JavaScript 객체(Object)  (0) 2021.03.13
Javascript 반복문  (0) 2021.03.12
Javascript 조건문  (0) 2021.03.12
JS 기초 챕터 1  (0) 2021.03.09