[TIL]항해99 5주차 주특기 심화 회고록_18일차

항해[TIL] 2021. 11. 30. 10:28

Today I Learnd

(2021. 11. 29. 월)

1. Javascript Class

Class

객체를 생성하기 위한 템플릿이다.
클래스는 데이터와 클래스를 조작하는 코드를 하나로 추상화한다.
자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES6의 클래스와는 다른 문법과 의미를 가진다.

정의

특별한 함수다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다.

1. Class 사용

class 선언

class Student {
   constructor(String, num) {
      this.name = String;
      this.age = num;
   }
}

class의 이름도 함께 class를 선언해준다.
일반적인 함수는 선언식을 사용하게 되면 호이스팅이 되지만 클래스는 호이스팅이 적용이 되지 않는다.
즉, 클래스를 선언한 후에 객체를 생성할 수 있다.

// reference error가 일어나는 경우
const bob = new Student(); // Student클래스가 선언이 되지 않았는데 호출이 되어있다.

class student {}

Class 표현식

Class 표현식은 이름을 가질 수 있고, 가지지 않을 수도 있다.

(1) 클래스 이름이 없는 표현식

// Class 이름이 없는 표현식
const student = class {
    constructor(String, num) {
        this.name = String;
        this.age = num;
    }
}

(2) Class 이름이 있는 표현식

const Student = class Student2{
    constructor(String, num) {
        this.name = String;
        this.age = num;
    }
}

이름을 가진 Class 표현식의 이름은 Class의 body에 대해서 local scope에 한해 유효하다.

1. Class body

Class body는 중괄호 {}로 묶여 있는 안쪽 부분이다.

이 안쪽에는 method, constructor 같은 Class members를 정의한다.

(1) Strict mode

Class 선언과 Class 표형식의 본문인 body는 strict mode에서 실행이 된다.
strict mode가 아닌 상태에서는 무시되는 오류가 발생하니 주의를 해야한다.

* strict mode = 엄격모드, use strict를 이용해서 엄격모드를 사용할 수 있다.

(2) Constructor (생성자)

constructor 메서드는 Class로 생성이 된 객체를 생성하고 초기화하기 위한 특수 메서드다.
constructor는 Class안에 하나만 사용할 수 있다.
여러 개의 constructor가 있을 경우에는 SyctaxError가 발생한다.
부모 Class의 constructor를 호출하기 위해서는 super 키워드를 사용할 수 있다.

2. IIFE

1. IIFE란 (Immediately Invoked Function Expression)

정의와 동시에 즉시 실행되는 함수를 의미한다.

2. 즉시 실행 함수 표현식

즉시 실행 함수는 함수 리터럴을 소괄호()로 감싼 뒤 바로 실행하는 형태가 일반적이다.

(Function () { console.log('Hi') }) ();

(1) 함수 리터럴

Javascript에서 함수를 정의하는 표현식을 함수 리터럴이라고 한다.

함수 리터럴의 4개 요소는

예약어인 function _ 필수
함수이름 _ 선택
매개변수의 집합 _ 필수
함수 본문 _ 필수

// 함수 리터럴의 예

function add(a, b) {
    return a + b
}

아래는 잘못된 예시다.

function (a, b) {
    return a + b
}

함수 이름은 선택이었지만, 함수 이름이 없이 정의하는 경우에는 몇가지의 조건이 충족되어야 한다.

이 함수를 할당 받을 변수를 지정
이 함수를 즉시 호출

ex)
const add = function(a, b) { return a + b };
(function(a, b) { return a+ b }) (1, 2)

위와 같이 함수 리터럴 표현식을 통해서 즉시 실행 함수를 정의할 수 있다. 그리고 즉시 실행 함수라는 건 바로 위에 나와있는 예시 처럼 즉시 실행이 돼서 값으로 평가되는 함수를 의미한다.

3. 즉시 실행 함수 사용할 때

보편적으로 전역 스코프를 오염시키지 않기 위해서 사용하는 경우가 많다.

예를 들면, 어떤 버튼의 클릭 횟수를 조회하고 10번 이상 클릭한 뒤에는 클릭이 되지 않게 하고 싶다고 가정해본다. 전역 스코프에 클릭 횟수를 담는 변수를 만들어서 처리할 수 있지만 예시 코드와 같이 전역 스코프를 오염시키지 않고 처리가 가능하다.

<body>
  <button id="button">버튼</button>
  <script type="text/javascript">
    const buttonHandler = (function () {
      let count = 0;
      return function(event) {
        if (count > 9) { // 클릭 횟수가 10번 이상일 때는 클릭이벤트 무시
          event.preventDefault();
          alert('버튼을 열 번 이상 누르지 마세요.')
          return;
        }
    
        count += 1; // 이렇게 자체 스코프에서 변수를 관리할 수 있습니다!
        /* ... 이하 버튼 처리 코드 ... */
      }
    })()

    document.querySelector('#button').addEventListener('click', buttonHandler)  
  </script>
</body>

출처: https://velog.io/@doondoony/javascript-iife

4. 즉시 실행 함수의 다양한 표현식

즉시 실행 함수는 익명 or 기명도 가능하지만 함수를 ()를 감싸야하는 이유는

function() {} 과 같이 작성이 되면, 자바스크립트 코드를 해석하는 파서는 이것을 함수 선언문으로 인지한다.

문은 자바스크립트 해석기에 명령을 지시하고 사라지는 것이기 때문에 값으로 남지 않는다.

따라서, ()와 같이 소괄호로 묶어줘서 이것은 함수 선언문이 아니라 함수 표현식이라는 것을 명시적으로 나타내야 한다.

익명함수를 함수 표현식으로 만들어주기 위해서는 () 로 묶어주는 것 외에 연산자를 앞에 붙여줄 경우에는 즉시 실행이 된다.

!function(a, b) { return console.log(a + b) }(1, 2) // 3
void function(a, b) { return console.log(a + b) }(1, 2) // 3
+function(a, b) { return console.log(a + b) }(1, 2) // 3
-function(a, b) { return console.log(a + b) }(1, 2) // 3
~function(a, b) { return console.log(a + b) }(1, 2) // 3
*function(a, b) { return console.log(a + b) }(1, 2) // 3
^function(a, b) { return console.log(a + b) }(1, 2) // 3
&function(a, b) { return console.log(a + b) }(1, 2) // 3
/* ... 등등 연산자를 앞에 붙이면 됩니다 ... */

출처: https://velog.io/@doondoony/javascript-iife

보통은 ()로 묶는 표현을 사용한다.

(function(a, b) { return a + b })(1, 2) // 3

출처: https://velog.io/@doondoony/javascript-iife

앞의 구문에 semi-colon 이 없기 때문에 이어서 값으로 평가되는 것을 방지하기 위해 아래와 같은 형태로도 사용한다.

;(function(a, b) { return a + b })(1, 2) // 3

출처: https://velog.io/@doondoony/javascript-iife

IIFE 앞에 세미콜론을 붙여, ASI(자동 세미콜론 삽입) 처리가 되지 않았을 상황을 방지한다.

2. Javascript 호이스팅

1. 호이스팅

호이스팅은 var을 통해서 정의가 된 변수 선언문을 유효 범위의 최상단으로 끌어올리는 것을 호이스팅이라고 한다. (선언과 할당의 분리)

Javascript는 ES6에서 도입이 된 let, const를 포함해서 모든 선언 (var, let, const, function, class)을 호이스팅한다.

// 호이스팅 전 예시

console.log(a); // Undefined
var a = 'Hi!';  // Var 변수
console.log(a); // 변수 a의 값 'Hi'출력

// 호이스팅 후 예시

var a = 'Hi!';  // Var 변수
console.log(a)  // 변수 a의 값 'Hi'출력
a = 'Hi!';      // Var 변수 재할당
console.log(a)  // 변수 a의 값 'Hi'출력

이처럼 변수 a가 선언이 되기 전에 console.log를 이용해서 출력을 하더라도 에러는 발생하지 않고 Undefined를 출력을 한다. 그 이유는 Javascript 고유의 기능으로 변수를 선언한 var을 호이스팅을 해줘서 최상단으로 끌어올렸기 때문이다.

하지만 let으로 변수를 선언해주기 전에 참조를 하게 되면 참조 에러가 발생한다. (Reference Error) 그 이유는 let으로 선언이 된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대에 빠지기 때문이다.

변수는 선언 단계 > 초기화 단계 > 할당 단계에 걸쳐서 생성이 되는데, let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어서 진행이 된다.

// 스코프 선두에서 선언 단계가 실행됨
// 아직 변수가 초기화되지 않음. (메모리 공간 확보와 Undefuned로 초기화)
// 이러한 이유로 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(a);

let a;
console.log(a);

a = 1;
console.log(a);

1. Javascript 변수의 특징

(1) 변수 타입이 없다.

Javascript에는 변수의 타입이 존재하지 않는다. 정수, 문자등 어떤 데이터라도 var, let, const 안에 구분없이 담긴다.

(2) 데이터 타입이 동적이다.

Javascript 변수 데이터의 타입은 동적이다. 처음 초기화할 때 할당한 데이터와 다른 형태의 데이터가 담기더라도 동적으로 대응한다.

(2) 호이스팅

함수 안의 변수 선언을 모두 최상단으로 끌어 올려주는 Javascript 고유의 기능이다.

3. 주특기 심화 주차 1일차 소감 및 부족한 점

소감

주특기 주차의 마지막인 주특기 심화 과정에 들어서게 됐다. 이번주 과제는 테스트코드를 완성해서 제시한 조건에 맞게 테스팅을 해서 모든 조건을 통과하는 것이다.

Class를 이용해서 테스팅을 하는데, Class는 뭔가 자세히 배운 적이 없어서 과제에 대해서 해메고있다... 손을 아예 못 대고 있다. 그래서 테스팅 관련해서 이것 저것들을 구글링해서 찾아보는 중이다.

이번주 과제를 통과하기 위해서는 얕은 지식을 안은채 진행보다는 우선 관련된 함수 등을 공부부터 해봐야겠다.

부족한 점

이번 주차에 들어와서 느낀 점이 나는 4주동안 뭘 했을까라는 생각이 들었다. 근데 매니저님들도 당연한거라 하셨다. 아직은 다 알기에는 부족할 수 밖에 없고 이 과제를 통해서 배워나가는 거라고 말씀을 하셨다.

나는 뭔가 그래도 바로 코드를 칠 수 있었으면 좋겠다라는 생각을했다. 현실적으로 봤을 때는 개발을 한지 이제 막 한달이 됐다. 어떻게 보면 당연하다 생각할 수 있지만 항해99 과정에서 3분의 1이 와서 아마 내가 그런 생각을 했나보다.

다음주 부터는 프론트 분들과 협업을 통해서 8주차에 들어가는 실전 프로젝트를 대비해서 미니 프로젝트와 클론코딩을한다. 정말 협업할 때 내가 모르는게 있어서 민폐를 끼치면 안되니까 그 전에 기본 문법과 node.js 프로젝트를 한번 더 만들어 봐야겠다.

'항해[TIL]' 카테고리의 다른 글

[TIL] 항해 99 5주차 주특기 심화 회고록_20일차 (0)	2021.12.04
[TIL] 항해 99 5주차 주특기 심화 회고록_19일차 (0)	2021.11.30
[TIL] 항해 99 4주차 주특기 숙련 회고록_15일차 (0)	2021.11.29
[TIL] 항해 99 4주차 주특기 숙련 회고록_15일차 (0)	2021.11.28
[TIL] 항해 99 4주차 주특기 숙련 회고록_14일차 (0)	2021.11.27

ABOUT ME

개발 회고 창고 개발 회고 창고

Today I Learnd

(2021. 11. 29. 월)

목차

1. Javascript Class

Class

정의

1. Class 사용

1. Class body

2. IIFE

1. IIFE란 (Immediately Invoked Function Expression)

2. 즉시 실행 함수 표현식

3. 즉시 실행 함수 사용할 때

4. 즉시 실행 함수의 다양한 표현식

2. Javascript 호이스팅

1. 호이스팅

1. Javascript 변수의 특징

3. 주특기 심화 주차 1일차 소감 및 부족한 점

소감

부족한 점

'항해[TIL]' 카테고리의 다른 글

티스토리툴바

ABOUT ME

Today I Learnd

(2021. 11. 29. 월)

목차

1. Javascript Class

Class

정의

1. Class 사용

1. Class body

2. IIFE

1. IIFE란 (Immediately Invoked Function Expression)

2. 즉시 실행 함수 표현식

3. 즉시 실행 함수 사용할 때

4. 즉시 실행 함수의 다양한 표현식

2. Javascript 호이스팅

1. 호이스팅

1. Javascript 변수의 특징

3. 주특기 심화 주차 1일차 소감 및 부족한 점

소감

부족한 점

'항해[TIL]' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바