[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #9 | 고급 문법 - this, Scope, Default Function Parameter, Rest Parameter, Arrow Function, Template Literals

JavaScript 주요 포인트 #9

this 키워드

this 키워드는 사용되는 위치에 따라 바인딩되는 객체가 달라진다.

this와 Window 객체

// this에 Window 객체가 바인딩 된 경우
<script>
  // this 키워드가 Window 객체인 경우, Window 객체 관련 모든 내장 함수 사용 가능하다.
  console.log(this); // Window(this는 Window 객체)

  function myFunction() {
    console.log(this); // this는 함수 내 Window 객체
  }
  myFunction(); // Window
</script>

 

this와 DOM 요소

<!-- this에 DOM 요소가 바인딩 된 경우 -->
<!-- 호출하는 함수에 this 파라미터로 전달하면, this는 클릭 이벤트가 발생한 <button> 태그 그 자체가 된다. -->
<button onclick="callFunction(this)">클릭</button>

<!-- 호출하는 함수에 this 파라미터로 전달하면, this는 onchange 이벤트가 발생한 <select> 태그 그 자체가 된다. -->
<select name="" id="" onchange="callFunction(this)">
  <!-- html 요소에서 this는 그 html 돔요소 자체 -->
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<script>
  // HTML DOM 요소에서 호출할 함수
  function callFunction(obj) {
    console.log(obj);
  }
</script>

 

this와 object

// this에 object가 바인딩 된 경우
<script>
  // object 안에서의 함수의 this는 object 자체를 가리킨다.
  let person = {
    firstName: "Jhon",
    lastName: "Doe",
    getFullName: function () {
      return this.firstName + " " + this.lastName;
    },
  };
  console.log(person.getFullName()); // Jhon Doe
</script>

object 내에 함수를 정의할 수 있고, 함수가 object 내에 정의된 다른 키에 접근할 때 this 키워드를 사용한다. 이러한 방식은 object 내에 이미 정의된 키로 새로운 데이터를 만들고자 할 때 많이 사용한다.

 

---

 

Scope

선언된 변수에 대한 접근성을 의미한다.

<script>
  // Scope, 선언된 변수에 대한 접근성을 의미한다.
  // 자식에서 부모의 변수는 접근할 수 있다. 따라서 함수 안에서 함수 밖의 변수에 접근 가능하다.
  let carName = "볼보";
  function myFunction() {
    let carName = "기아차";
    console.log(carName); // 기아차(변수명이 같을 경우, 함수 밖의 "볼보"에 접근할 수 있지만 우선순위가 높은 "기아차"를 출력한다.)
  }
  myFunction();

  console.log(carName); // 볼보(함수 밖에서는 함수 내의 변수에 접근할 수 없다.)
</script>

 

---

 

Default Function Parameter

함수 호출 시 인자를 넣지 않은 경우에 대한 기본값을 적용한다. 파라미터 값이 전달되지 않아 생기는 오류를 미연에 방지할 수 있다.

// default function parameter
<script>
  function log(msg) {
    console.log(msg);
  }

  // Default function parameter 미적용
  log("콘솔에 출력합니다."); // 콘솔에 출력합니다.
  log(); // undefined(인자를 넣지 않은 경우)

  // Default function parameter 적용
  function convertDateFormat(format = "YYYY-MM-DD") {
    let today = new Date();
    let year = today.getFullYear();
    let month = (today.getMonth() + 1).toString().padStart(2, 0);
    let day = today.getDate().toString().padStart(2, 0);

    let formatDate = format
      .replace("YYYY", year)
      .replace("MM", month)
      .replace("DD", day);

    console.log(formatDate);
  }

  // 인자를 넣지 않아도 지정한 기본값(디폴트 파라미터)이 적용된다.
  convertDateFormat(); // 2022-02-05(디폴트 파라미터인 YYYY-MM-DD 적용됨)
  convertDateFormat("YYYY-MM-DD"); // 2022-02-05
  convertDateFormat("MM-DD-YYYY"); // 02-05-2022
  convertDateFormat("DD-MM-YYYY"); // 05-02-2022
</script>

 

---

 

Rest Parameter

Rest Parameter는 실무에서 많이 사용한다. 함수 호출 시 파라미터 값의 개수에 상관없이 인자를 넣을 수 있다.  인자 값은 배열로 저장된다. 

<script>
  // Rest Parameter 미적용
  function sum(n1, n2) {
    return n1 + n2;
  }
  function sum2(n1, n2, n3) {
    return n1 + n2;
  }
  function sum3(n1, n2, n3, n4) {
    return n1 + n2;
  }
  console.log(sum(5, 7)); // 12

  // Rest Parameter 적용
  function add(...nums) {
    let total = 0;
    console.log(nums); // [5, 6, 7, 8, 9]
    for (const n of nums) {
      total += n;
    }
    return total;
  }
  console.log(add(5, 6, 7, 8, 9)); // 35
</script>

 

---

 

Arrow Function

화살표 함수는 함수를 정의하는 새로운 방법이다. 실무에서 많이 사용하므로 반드시 익숙해져야 한다.

// Arrow Function(화살표 함수)
<script>
  // 함수 선언식
  function hello(name) {
    return "Hello " + name;
  }
  console.log(hello("hello")); // Hello hello

  // 함수 표현식
  const hello2 = function (name) {
    return "Hello " + name;
  };
  console.log(hello2("hello2")); // Hello hello2

  // Arrow Function(화살표 함수)
  // function 생략 가능
  const hello3 = (name) => {
    return "Hello " + name;
  };
  console.log(hello3("hello3")); // Hello hello3

  // Arrow Function(화살표 함수) - () 생략 가능
  const hello4 = name => {
    return "Hello " + name;
  };
  console.log(hello4("hello4")); // Hello hello4

  // Arrow Function(화살표 함수) - {} 생략가능
  const hello5 = name => "Hello " + name; // 실무에서는 이 표현을 사용한다. 익숙해 져야 한다.
  console.log(hello5("hello5")); // Hello hello5
</script>

 

---

 

Template Literals

문자열 안에 변수를 바로 넣을 수 있다.

// Template Literals
<script>
  function hello(firstName, lastName) {
    console.log("Hello " + firstName + ", " + lastName + ". Welcome!"); // 기존 문자열 결합 방식
    console.log(`Hello ${firstName}, ${lastName}. Welcome!`); // Template Literals 방식(``는 백틱이라고 부른다.)
  }
  hello("길동", "홍"); // Hello 길동, 홍. Welcome!, Hello 길동, 홍. Welcome!
</script>

 

---

"어디 등짝을 바닥에 붙일 생각을 하는가?" 좋은 개발자는 자기가 짠 코드의 길이 만큼 성장한다. 좋은 도반에서 함께 공유할 때 더 빨리 성장할 수 있다!

 

실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/javascript