[apple-js] Part 1:

1. OT

뭘 배우는가

• this, prototype, class, constructor, ... 어렵고 불편한 문법들이 지금과는 맞지 않은 것들이 많다. 자바스크립트의 최신 문법을 배워볼 것임.

 

JavaScript ES6(신버전) + 객체 지향

• 2009: ES5 출시
• 2015: ES6 출시 (대규모 레볼루션 업데이트)
• 2016: ES7 출시

 

필요한 사전지식

• var
• function
• if
• for
• forEach
• eventListener
• Array
• Object
• Array, Object를 만들고 내부 자료를 수정할 줄 안다
• 위들을 다른 언어에서 다뤄봤다

 

강의가 필요한 이유

1. 어려운 용어 사용

• "객체, 인스턴스, 생성자, ... 등 어려운 프로그래밍 용어로 설명하니까 못 알아듣겠어요!"
• (이미 OOP 경험이 있다면 쉽게 알아듣는 용어지만)
• ➡️ 쉬운 용어로 설명해줌

 

2. 알아보기 힘든 예제

• "문법 설명 예제가 왜 이렇게 어렵죠?"
• var foo, bar, baz, ... 등
• 모질라 사이트에서 읽어봐도 뭔소린지 모르겠음
• ➡️ 친절한 한글 변수/함수명
• ➡️ 실제로 맞닥뜨릴 수 있는 실전예제 문제 포함

 

3. 문법 배워봤자 활용을 못함

• "문법을 배워봤자 활용을 못하겠어요"
• 문법의 용도를 배워야 함
• ➡️ 문법의 용도와 목적을 알려주는 문법 강좌
• ➡️ 문법을 배우면 실제로 어떤 상황에서 쓰이는지 바로 알려줌

 

 

2. 강의 듣기 전 자바스크립트 기본 문법 총정리

JavaScript 쓰는 이유

• HTML을 변경하려고

 

1. HTML 변경하는 법

 

2. HTML 누르면 뭐 실행하고 싶을 때 ➡️ 이벤트 리스너

 

3. 잠깐 자료를 저장해두고 싶으면 ➡️ 변수 만들어 쓰셈

• var, let, const

var name = 'kim';
var age = 20;

 

4. 코드 긴 거 짧게 축약하려면 ➡️ 함수 만들어 쓰셈

 

5. 함수 다양하게 쓰려면 ➡️ 파라미터로 업그레이드

• 화살표 함수 () => {}

 

6. 자료 한 번에 여러 개 저장하려면 ➡️ array, object

 

7. 코드를 조건부로 실행하고 싶을 때 ➡️ if/else

• ==(느슨한 비교), ===(엄격한 비교), ||, &&, ...

 

8. 반복되는 코드를 줄이고 싶을 때 ➡️ 반복문

• for

• forEach

 

 

3. this 키워드를 알아보자

3-1. 함수와 Object에서 사용하면?

• this 키워드는 뜻이 3~4개임

 

1) 그냥 아무데서나 쓰거나 일반(전역) 함수에서 쓰면 ➡️ window

 

• window는 자바스크립트 기본 함수들의 수납공간임
• 그냥 this를 찍어보면 window가 뜬다.

console.log(this)

 

• 그리고 함수를 만들어서 console.log(this)를 찍어봐도 window가 뜬다.

 

2) strict mode + 일반 함수 내에서 쓰면 ➡️ undefined

❗키워드 use strict: 자바스크립트 strict mode(엄격한 모드)

• 자바스크립트를 더 엄격하게 사용할 수 있도록 해준다.
• explorer 10 이상에서 사용 가능
• js 최상단에 작성해주면 됨

 

변수 x를 그냥 정의해보자.

<script>
  "use strict";

  x = 300;

  function test() {
    console.log(this);
  }

  test();
</script>

그럼 에러가 발생함 (원래는 에러가 발생하지 않음)

변수에 var을 붙여주자

<script>
  "use strict";

  var x = 300;

  function test() {
    console.log(this);
  }

  test();
</script>

그럼 에러 발생 안함. 대신 this값이 undefined로 달라졌다.

strict mode에서 함수 내에 this를 쓰면 window가 아니라 그냥 undefined(정의가 되지 않음)으로 뜬다. 근데 뭐 중요한 건 아니니까 그냥 무시하자.

 

3) 오브젝트 내 함수(메서드) 안에서 쓰면 ➡️ 그 함수를 가지고 있는 오브젝트를 뜻함

• 오브젝트 안에 함수를 넣을 수도 있는데 이 함수 안에서 this를 출력하면 그 함수를 가지고 있는 오브젝트를 가져온다.
• 예로 들면,

<script>
  console.log(this);

  var 오브젝트 = {
    data: "Kim",
    함수: function () {
      console.log(this);
    },
  };

  오브젝트.함수();
</script>

 

• 또한 오브젝트 안에 오브젝트를 넣을 수 있는데, 그 안에 함수를 넣으면 또한 동일하다.

<script>
  console.log(this);

  var 오브젝트 = {
    data: {
      함수: function () {
        console.log(this);
      },
    },
  };

  오브젝트.data.함수();
</script>

• 즉, 여기서 this = 오브젝트.data

 

(+) arrow function

• 기존 문법: function() {}
• 신 문법: () => {}
• 특징: 부모(상위) this 값을 받아옴. 즉, this 값을 함수 밖에 있던 거 그대로 씀

<script>
  console.log(this);

  var 오브젝트 = {
    data: {
      함수: () => {
        console.log(this);
      },
    },
  };

  오브젝트.data.함수();
</script>

 

(+) 오브젝트 안에 함수 넣을 때 신문법

• key() { ... }    =    function key() { ... }
• key: value로 작성할 필요 없이 바로 작성하면 됨

<script>
  console.log(this);

  var 오브젝트 = {
    data: {
      함수() {
        console.log(this);
      },
    },
  };

  오브젝트.data.함수();
</script>

 

 

 

3-2. event listener와 constructor

 

 

 

3-3. Arrow function은 function을 대체하는 신문법이 아님

 

 

 

 

3-4. this & arrow function 연습문제 3개

 

 

 

 

4. 변수 신문법

4-1. var let const와 선언, 할당, 범위

 

 

 

 

 

4-2. Hoisting, 전역변수, 참조

 

 

 

4-3. 변수 연습문제 6개

 

 

 

 

5. Template literals

5-1. Template literals: 자바스크립트가 문자를 다루는 신기한 방법

 

 

 

5-2. Template literals / tagged literals 연습문제 2개

 

 

 

 

 

6. Spread Operator

6-1. Spread Operator: 모든 괄호를 없애주는 Spread Operator 활용 방법

 

 

 

 

6-2. apply, call 함수 알아보기