[부스트코스] 5. 자바스크립트 기초 (자바스크립트 함수 'Function' )

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다.

1. 함수

1) 함수(메서드)

• 함수 혹은 메서드라 불리는 것은, 여러 줄의 코드를 하나의 묶으로 다룬다고 볼 수 있다.
• 함수를 사용함으로써 유지보수가 쉬워지고, 코드가 간결해진다.

2) 자바스크립트에서 함수의 사용

함수의 정의(function())

<script>
  function nightdayhandler(self) {
    // 아주 긴 Javascript 코드를 여기 넣어줍니다.
  }
</script>

함수 호출

<input id='night_day' type='button' value='night' onclick='nightdayhandler(this);'>

---

2. 함수 활용

함수에서의 this

onclick 이벤트 안에서 'this'란, 그 구문을 가르키며 사용한다.

하지만 함수안에서의 this란, 함수를 단일 객체로 인식하여, windows를 가르킨다.

 

[잘못된 코드]

<script>
  function nightdayhandler() {
    if(this.value === 'night') {
    // 생략
    // 아주 긴 Javascript 코드를 여기 넣어줍니다.
  }
</script>
<input id='night_day' type='button' value='night' onclick='nightdayhandler();'>

 

[this -> self로]

<script>
  function nightdayhandler(self) {
    if(self.value === 'night') {
    // 생략
    // 아주 긴 Javascript 코드를 여기 넣어줍니다.
  }
</script>
<input id='night_day' type='button' value='night' onclick='nightdayhandler(this);'>

즉, 함수에서는 this를 self라는 매개변수에 받아와서, 이를 이용해서 나머지 코드를 진행하는 것이다.