✔ 함수의 구분

• ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다
• 일반적으로 메서드라고 부르던 객체에 바인딩된 함수 역시 callable 이며, constructor 이다
• 객체에 바인딩된 함수가 constructor라는 것은 protytype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 것을 의미하기 때문에 성능 면에서도 문제가 있다
• 이를 해결하기 위해 npn-constructor인 ES6의 메서드와 화살표 함수가 등장했다

✔ 메서드

• ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다
• ES6 사양에서 메서드는 인스턴스를 생성할 수 없는 non-contructor다. 따라서 생성자 함수로 호출할 수 없다
• ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다
• ES6 메서드가 아닌 함수는 내부 슬롯 [[HomeObject]]를 갖지 않기 때문에 super키워드를 사용할 수 없다

✔ 화살표 함수

• 기존의 함수 정의 방식보다 간략하며 내부 동작도 기존 함수보다 간략하다
• 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다

1. 화살표 함수 정의

1. 함수 정의

   • 함수 선언문으로 정의할 수 없고 함수 표현식으로 정의해야 한다

2. 매개변수 선언

   • 소괄호 안에 매개변수를 선언한다
   • 매개변수가 한 개인 경우 소괄호를 생략할 수 있고, 없다면 생락햘 수 없다

3. 함수 몸체 정의

   • 함수 몸체가 하나의 문으로 구성된다면 중괄호를 생략할 수 있디
   • 이때 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다
   • 생략과 함께 객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호로 감싸 주어야 한다

2. 화살표 함수와 일반 함수의 차이

• 화살표 함수는 인스턴스를 생성할 수 없는 non-cunstructor다
• 중복된 매개변수 이름을 선언할 수 없다
• 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다

3. this

• this 바인딩은 함수의 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 주의할 것은 일반 함수로서 호출되는 콜백 함수의 경우다
• 고차 함수의 인수로 전달되어 고차 함수 내부에서 호출되는 콜백 함수도 중첩 함수라고 할 수 있다

  class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }
  

  add(arr) { // add 메서드는 인수로 전달된 배열 arr을 순화하며 배열의 모든 요소에 prefix를 추가한다 return arr.map(function (item){

  return this.prefix + item; // TypeError

  }); } }
  const prefixer = new Prefixer("-webkit-"); console.log(prefixer.add(['transition', 'user-select']));

  ```

• 위 예시에서 Array.prototype.map 메서드가 콜백 함수를 일반 함수로서 호출하기 때문에 this가 전역 객체를 가리키게 된다
• 그런데 클래스 내부의 모든 코드에는 strict mode가 암묵적으로 적용되고, 이 경우 this 에는 undefined가 바인딩된다

4. super

• 화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다
• 따라서 화살표 함수 내부에서 super를 참조하면 상위 스코프의 super를 참조한다

5. arguments

• 화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다
• 따라서 화살표 함수 내부에서 arguments를 참조하면 상위 스코프의 arguments를 참조한다

✔ Rest 파라미터

1. 기본 문법

• Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다

  function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest); // [2, 3, 4, 5]
  }
  

  foo(1, 2, 3, 4, 5);

  ```

• Rest 파라미터는 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이 할당된다

2. Rest 파라미터와 arguments 객체

• arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 잇는 순회 가능한 유바 배열 객체이며, 함수 내부에서 지역 변수처럼 사용할 수 있다
• 하지만 arguments 객체는 유사 배열 객체이므로 배열 메서드를 사용하기 번거로웠다. ES6의 Rest 파라미터는 배열로 직접 전달받을 수 있기 때문에 유용하다
• 특히, 화살표 함수에서는 반드시 Rest 파라미터를 사용해야 한다

✔ 매개변수 기본값

• 자바스크립트 엔진은 매개변수의 개수와 인수의 개수를 체크하지 않는다
• 인수가 전달되지 않은 매개변수의 값은 undefined다

  function sum(a = 0, b = 0) {
  return a + b;
  }
  

  console.log(sum(1)); // 1

✔ 클래스는 프로토타입의 문법적 설탕인가?

• 클래스를 프로토타입 기반 객체 생성 패턴의 단순한 문법적 설탕이라고 보기보다는 새로운 객체 생성 메커니즘으로 보는 것이 좀 더 합당하다

✔ 클래스 정의

• 클래스는 class 키워드를 사용하여 정의한다

  const Person = class {};  // 익명 클래스 표현식
  const Person = class MyClass{}; // 가명 클래스 표현식

• 클래스를 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미하고, 다음과 같은 특징을 갖는다

  • 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다
  • 변수나 자료구조에 저장할 수 있다
  • 함수의 매개변수에게 전달할 수 있다
  • 함수의 반환값으로 사용할 수 있다

✔ 클래스 호이스팅

• 클래스는 함수로 평가된다
• 클래스 선언문은 마치 호이스팅이 발생하지 않는 것처럼 보이나 그렇지 않다

  const Person = '';
  

  { // 호이스팅이 발생하지 않는다면 ''이 출력되어야 한다. console.log(Person); // ReferenceError: Cannot access 'Person' before initialization
  // 클래스 선언문 class Person {}; }

✔ 인스턴스 생성

• 클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다

  class Person {}
  

  // 인스턴스 생성 const me = new Person(); console.log(me); // Person {}
  class Person {}
  // 클래스를 new 연산자 없이 호출하면 타입 에러가 발생한다 const me = Person(); // TypeError: Class constructor Foo cannot be invoked without 'new'

✔ 메서드

• 클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다
• 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다

1. constructor

• constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드이며, 이름을 변경할 수 없다

  class Person {
  // 생성자
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }
  }

• 클래스는 평가되어 함수 객체가 된다
• 모든 함수 객체가 가지고 있는 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor 프로퍼티는 클래스 자신을 가리키고 있다
  
• 클래스가 생성한 인스턴스의 내부를 들여다보면 수퍼 클래스의 constructor 내부에서 this에 추가한 프로퍼티가 인스턴스의 프로퍼티로 추가된 것을 확인할 수 있다
• 즉, constructor 내부의 this는 생성자 함수와 마찬가지로 클래스가 생성한 인스턴스를 가리킨다
  
• 그런데 클래스가 평가되어 생성된 함수 객체나 인스턴스 어디에도 constructor 메서드를 확인할 수 없다
• 이는 constructor가 단순한 메서드가 아니라는 것을 의마한다
• constructor는 메서드로 해석되는 것이 아니라 클래스가 평가되어 생성한 함수 객체코드의 일부가 된다
• 즉, 클래스 정의가 평가되면 constructor의 기술된 동작을 하는 함수 객체가 된다
  • constructor는 클래스 내에 최대 한 개만 존재할 수 있다.
  • constructor는 생략할 수 있다. 생략하면 빈 constructor가 암묵적으로 정의된다.
  • 인스턴스를 초기화하려면 constructor를 생략해서는 안된다.
  • constructor는 별도의 반환문을 갖지 않아야 한다. 암묵적으로 this, 즉 인스턴스를 반환하기 때문이다.

2. 프토로타입 메서드

• 생성자 함수를 사용하여 프로토타입 메서드를 생성하기 위해서는 명시적으로 프로토타입에 메서드를 추가해야 한다
• 하지만 클래스 몸체에서 정의한 메서드는 기본적으로 프로토타입 메서드가 된다

  class Person {
  constructor(name) {
    this.name = name;
  }
  

  sayHi() { console.log(Hi, ${this.name}) } }
  const me = new Person("Lee"); me.sayHi(); // Hi, Lee

3. 정적 메서드

• 정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다
• 생성자 함수의 경우 정적 메서드를 생성하기 위해서 명시적으로 생성자 함수에 메서드를 추가해야한다
• 하지만 클래스에서는 메서드에 static 키워드를 붙이면 적적 메서드(클래스 메서드)가 된다

  class Person {
  constructor(name) {
    this.name = name;
  }
  

  static sayHi() { console.log("Hi") } }
  Person.sayHi(); // Hi

4. 정적 메서드와 프로토타입 메서드의 차이

• 정적 메서드와 프로토타입 메서드는 속해 있는 프로토타입 체인이 다르다
• 정적 메서드는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다
• 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다

5. 클래스에서 정의한 메서드의 특징

1. function 키워드를 생략한 메서드 축약 표현을 사용한다
2. 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요 없다
3. 암묵적으로 strict mode로 실행된다
4. for...in 문이나 Object.keys 메서드 등으로 열거할 수 없다. 즉, 프로퍼티의 열거 기능 여부를 나타내며, 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Ebumerable]]의 값이 false다
5. 내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. 따라서 new 연산자와 함께 호출할 수 없다

✔ 클래스의 인스턴스 생성 과정

• new 연산자와 함께 클래스를 호출하면 생성자 함수와 마찬가지로 클래스의 내부 메서드[[Constructor]]가 호출된다

1. 인스턴스 생성과 this 바인딩

• new 연산자와 함께 클래스를 호출하면 constructor 내부 코드가 실행되기에 앞서 암묵저긍로 빈 객체가 생성된다
• 이 빈 객체가 바로 클래스가 생성한 인스턴스다
• 이때 클래스가 생성한 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정된다, 그리고 인스턴스는 this에 바인딩된다

2. 인스턴스 초기화

• constructor의 내부 코드가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한ㄷ
• 즉, 인스턴스에 프로퍼티를 추가하고 constructor가 인수로 전달받은 초기값으로 인스턴스의 프로퍼티 값을 초기화한다
• 만약 custructor가 생략되었다면 이 과정도 생략된다

3. 인스턴스 반환

• 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다

✔ 프로퍼티

1. 인스턴스 프로퍼티

• 인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다

  class Person {
  constructor(name) {
    // 인스턴스 프로퍼티
    this.name = name;
  }
  }
  

  const me = new Person("Lee"); console.log(me); // Person {name: "Lee"}

  ```

• constructor 내부 코드가 실행되기 이전에 이미 this에는 빈 객체(인스턴스)가 바인딩되어 있다
• 생성자 함수에서 인스턴스의 프로퍼티를 정의하는 것과 마찬가지로 constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다
• 이로써 인스턴스에 프로퍼티가 추가되어 인스터스를 초기화한다

2. 접근자 프로퍼티

• 접근자 프로퍼티는 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다
• getter, setter 함수로 구성되어 있다

  class Person {
  

  constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // fullName은 접근자 함수로 구성된 접근자 프로퍼티다 // getter 함수 get fullName() { return ${this.firstName} ${this.lastName} }
  // setter 함수 set fullName(name) { [this.firstName, this.lastName] = name.split(" "); } }
  const me = new Person("bw", "Lee");
  // 데이터 프로퍼티를 통한 프로퍼티 값의 참조 console.log(me.firstName); // 'bw Lee'
  // 접근자 프로퍼티를 통한 프로퍼티 값의 저장 // fullName에 값을 저장하면 setter 함수가 호출된다. me.fullName = "Heegun Lee"; console.log(me); // {firstName: "Heegun", lastName: "Lee"}
  // 접근자 프로퍼티를 통한 프로퍼티 값의 참조 // fullName에 접근하면 getter 함수가 호출된다. console.log(me.fullName); // 'Heegun Lee'
  // fullName은 접근자 프로퍼티다 // 접근자 프로퍼티는 get, set, enumerable, configurable 프로퍼티 어트리뷰트를 갖는다 console.log(Object.getOwnPropertyDescriptor(Person.prototype, 'fullName')); // {get: f, set: f, enumerable: false, configurable: true}

  ```

• setter는 무엇인가를 프로퍼티에 할당해야 할 때 사용하므로 반드시 매개변수가 있어야한다

3. 클래스필드 정의 제안

• 클래스 필드는 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어다
• 자바스크립트에서 클래스가 생성할 인스턴스의 프로퍼티는 constructor 내부에서 this에 프로퍼티를 추가해야 한다고 위에서 기술하였다
• 클래스 몸체에서 클래스필드를 정의하는 경우 this에 클래스 필드를 바인딩해서는 안된다
• this는 constructor와 메서드 내에서만 유효하다

  class Person {
  name = "Lee";
  

  constructor() { console.log(name); // ReferenceError // 클래스 필드를 참조할 경우 this를 사용해야 한다. } }
  const me = new Person(); console.log(me); // Person {name: "Lee"}

  ```

• 인스턴스를 생성할 때 클래스 필드를 초기화할 필요가 있다면(외부의 초기값으로 초기화) constructor 밖에서 클래스 필드를 정의할 필요가 없다

4. private 필드 정의 제안

• 자바스크립트는 접근 제한자를 지원하지 않기 때문에 인스턴스 프로퍼티는 언제나 public이다
• 그러나 private 필드를 정의할 수 있는 새로운 표준 사양이 제안되어 있다

  class Person {
  #name = "";
  

  constructor(name) { // private 필드 참조 this.#name = name; } }
  const me = new Person("Lee");
  // private 필드 #name은 클래스 외부에서 참조할 수 없다. console.log(me.#name); // SyntaxError

  ```

• private 필드의 선두에는 # 을 붙여준다, 참조할 때도 마찬가지다
• private 필드는 클래스 내부에서만 참조할 수 있다
• 하지만 접근자 프로퍼티를 통해 간접적으로 접근하는 방법은 유효하다

✔ 상속에 의한 클래스 확장

1. 클래스 상속과 생성자 함수 상속

• 프로토타입 기반 상속은 프로토타입 체인을 통해 다른 객체의 자산을 상속받는 것이지만, 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로은 클래스를 확장하여 정의하는 것이다

2. extends 키워드

• 상속을 통해 클래스를 확장하려면 extends 키워드를 사용하여 상속받을 클래스를 정의한다
• 상속을 통해 확장된 클래스를 서브 클래스, 파생 클래스, 자식 클래스라 부르며, 상속된 클래스를 수퍼 클래스, 베이스 클래스, 부모 클래스라고 부른다

3. 동적 상속

• extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스를 확장할 수도 있다
• 단, extends 키워드 앞에는 반드시 클래스가 와야한다

  // 생성자 함수
  function Base(a) {
  this.a = a;
  }
  

  // 생성자 함수를 상속받는 서브클래스 class Derived extends Base {}
  const derived = new Drived(1); console.log(derived); // Derived {a: 1}

  ```

• exnteds 키워드 다음에는 클래스 뿐만이 아니라 [[Construct]] 내부 메서드를 갖는 함수 객체로 평과될 수 있는 모든 표현식을 사용할 수 있다

4. 서브클래스의 constructor

• 클래스에서 constructor를 생략하면 비어있는 constructor가 암묵적으로 정의된다
• 서브클래스에서 constructor를 생략하면 다음과 같은 constructor가 암묵적으로 정의된다

  constructor(...args) { super(...args); }

5. super 키워드

• super 키워드는 함수처럼 호출할 수도 있고 식별자처럼 참조할 수 있는 특수한 키워드다
• super를 호출하면 수퍼클래스의 constructor를 호출한다
• super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다

1. super 호출
   • super를 호출하면 수퍼클래스의 constructor를 호출한다

     class Base(a) {
     constructor(a) {
      this.a = a;
     }
     }
     

     class Derived extends Base { // 다음과 같이 암묵적으로 constructor가 정의된다. // constructor(...args) { super(...args); } }
     const derived = new Drived(1); console.log(derived); // Derived {a: 1}

     ```

• new 연산자와 함께 Drived 클래스를 호출하면서 전달한 인수1은 Drived 클래스의 Constructor에 전달되고 super 호출을 통해 Base 클래스의 constructor에 전달된다
• super를 호출할 때 주의할 사항은 다음과 같다
  1. 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 한다
  2. 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다
  3. super는 반드시 서브클래스의 constructor에서만 호출한다. 서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생한다

2. super 참조
   • 메서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다

     class Base {
     constructor(name) {
      this.name = name;
     }
     
     sayHi() {
      return `Hi, ${this.name}`
     }
     }
     

     // 서브클래스 class Derived extends Base { sayHi() { // super.sayHi는 수퍼클래스의 프로토타입 메서드를 가리킨다 return ${super.sayHi()}. how are you donig? } }
     const derived = new Derived("Lee"); console.log(derived.sayHi()); // Hi, Lee. how are you doing?

     ```

   • 위 상황에서 서브클래스의 this는 인스턴스를 가리킨다
   • 우리가 원하는 것은 Base.prototype에 존재하는 sayHi 메서드이기 때문에 this를 사용하면 안된다

6. 상속 클래스의 인스턴스 생성 과정

1. 서브클래스의 super 호출

   • 자바스크립트 엔진은 클래스를 평가할 때 수퍼클래스와 서브클래스를 구분하기 위해 base 또는 derived를 값으로 갖는 내부 슬롯 [[ConstructorKind]]를 갖는다
   • 이를 통해 서브클래스로 구분된 클래스는 자신이 직접 인스턴스를 생성하지 않고 수퍼클래스에게 인스턴스 생성을 위임한다
   • 이것이 바로 서브클래스의 constructor에서 반드시 super를 호출해야 하는 이유다
   • 서브클래스의 constructor 내부에 super 호출이 없으면 에러가 발생한다

2. 수퍼클래스의 인스턴스 생성과 this 바인딩

   • 수퍼클래스의 constructor 내부의 코드가 실행되기 이전에 암묵적으로 빈 객체를 생성한다. 이 빈 객체가 바로 클래스가 생성한 인스턴스다. 그리고 이 인스턴스는 this에 바인딩된다
   • 따라서 수퍼클래스 constructor 내부의 this는 인스턴스를 가리킨다

3. 수퍼클래스의 인스턴스 초기화

   • 수퍼클래스의 constructor가 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다

4. 서브클래스 constructor로의 복기와 this 바인딩

   • super의 호출이 종료되고 제어 흐름이 서브클래스 constructor로 돌아온다. 이때 super가 반환한 인스턴스가 this에 바인딩된다.
   • 서브클래스는 별도의 인스턴스를 생성하지 않고 super가 반환한 인스턴스를 this에 바인딩하여 그대로 사용한다.
   • 따라서, super가 호출되지 않으면 서브클래스 constructor에서 this가 생성되지 않는다.

5. 서브클래스의 인스턴스 초기화

   • super 호춣 이후, 서브클래스의 constructor에 기술되어 있는 인스턴스 초기화가 실행된다
   • this에 바인딩되어 있는 인스턴스에 프로퍼티를 추가한다

6. 인스턴스 반환

   • 완성된 인스턴스가 바인딩된 this가 반환된다

7. 표준 빌트인 생성자 함수 확장

• extends 키워드 다음에는 [[Construct]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식을 사용할 수 있다
• 주의할 것은 새로운 배열을 반환하는 메서드가 서브클래스의 인스턴스를 반환한다느 것이다

✔ this 키워드

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조 할 수 있다
• this가 가리키는 값, 즉 this바인딩은 함수 호출 방식에 의해 동적으로 결정된다

// 전역에서 this는 전역 객체 window를 가리킨다.
console.log(this); // window

// 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. function square(number) { console.log(this); // window return number*number; }

//메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다. const person = { name: "Lee", getName() { console.log(this); // {name: "Lee", getName: ƒ} return this.name; } }; console.log(person.getName()); // Lee

// 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다. function Person(name) { this.name = name; console.log(this); // Person {name: "Lee"} }; const me = new Person("Lee")

✔ 함수 호출 방식과 this 바인딩

• this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다

1. 일반 함수 호출

• 기본적으로 this에는 전역 객체가 바인딩된다
• 전역 함수는 물론이고 중첩 함수를 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩된다
• 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서 this는 의미가 없다
• 그리고 strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩된다

var value = 1;

const obj = { value: 100, foo() { console.log("foo's this", this); // {value: 100, foo: ƒ} setTimeout(function() { console.log("callback's this", this); // window console.log("callback's this.value", this.value); // 1 }, 1000) } }

2. 메서드 호출

• 메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호춣할 때 메서드 이름 앞의 마침표 연산자 앞에 기술한 객체가 바인딩된다

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function() { return this.name; }

const me = new Person("Kim"); console.log(me.getName()); // Kim

Person.prototype.name = "LEE" console.log(Person.prototype.getName()); // LEE

3. 생성자 함수 호출

• 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다

✔ 자바스크립트 객체의 분류

1. 표준 빌트인 객체
   • ECMAScript 사양에 정의된 객체를 말하며 애플리케이션 전역의 공통 기능을 제공한다
   • 자바스크립트 실행 환경에 관계없이 언제나 사용할 수 있다
   • 전역 객체의 프로퍼티로서 제공된다
2. 호스트 객체
   • ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다
   • 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch 등과 같은 클라이언트 사이드 웹 API를 호스트 객체로 제공한다
   • Node.js 환경에서는 Node.js 고유의 API를 호스트 객체로 사용한다
3. 사용자 정의 객체
   • 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체를 말한다

✔ 표준 빌트인 객체

• Object String Number Boolean Symbol Date Math RegExp Array Map/Set WeakMap/WeakSet Function Promise Reflect Proxy JSON Error 등 자바스크립트는 40여 개의 표준 빌트인 객체를 제공한다
• 이 중에서 Math Reflect JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체다

const numObj = new Number(1.5);

//프로토타입 메서드? //모든 인스턴스가 상속을 통해 사용할 수 있다. console.log(numObj.toFixed()); // 2

//정적 메서드? //인스턴스를 생성하지 않아도 생성자 함수를 통해 사용할 수 있다. console.log(Number.isInteger(0.5)); // false

✔ 원시값과 래퍼 객체

const str = "hello";

str.name = "Lee"
//래퍼 객체가 암묵적으로 생성되고, [[StringData]] 슬롯에 hello가 할당된다.
//name 프로퍼티가 동적 생성되며, 값으로 Sangjo가 할당된다
//그리고 str은 다시 [[StringData]] 슬롯의 문자열로 돌아간다.

console.log(str.name); // undefined
//위에서 생성되었던 래퍼 객체는 이미 가비지 컬렉션의 대상이 되어 사라졌다.
//이번에 생성된 래퍼 객체는 이전의 래퍼 객체와 다르다. 따라서 name 프로퍼티가 존재하지 않는다.

✔ 전역 객체

• 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체다
• 브라우저 환경에서는 window, Node.js 환경에서는 global이 전역 객체를 가리킨다
• 전역 객체의 특징
  1. 개발자가 의도적으로 생성할 수 없다(전역 객체를 생성할 수 있는 생성자 함수가 없다)
  2. 전역 객체의 프로퍼티를 참조할 때 window 또는 global을 생략할 수 있다
  3. 전역 객체는 모든 표준 빌트인 객체를 프로퍼티로 가지고 있다
  4. 자바스크립트 실행 환경에 따라 추가적인 프로퍼티와 메서드를 갖는다(호스트 객체)
  5. var 키워드로 선언한 전역 변수와 암묵적 전역, 그리고 전역 함수는 전역 객체의 프로퍼티다
  6. 브라우저 환경의 모든 자바스크립트 코드는 전역 객체 window를 공유한다

1. 빌트인 전역 프로퍼티

• 빌트인 전역 프로퍼티는 전역 객체의 프로퍼티를 의미한고, 주로 애플리케이션 전역에서 사용하는 값을 제공한다

1. Infinity
   • Infinity 프로퍼티는 무한대를 나타내는 숫자값 Infinity를 갖는다

     console.log(3/0); // Infinity
     console.log(-3/0); // -Infinity
     console.log(typeof Infinity); // number

2. NaN NaN 프로퍼티는 숫자가 아님을 나타내는 숫자값 NaN을 갖는다

   console.log(window.NaN); // NaN
   

   console.log(Number("str")); // NaN console.log(1 * "str"); // NaN console.log(typeof NaN); // number

   ```

3. undefined
   • undefined 프로퍼티는 원시 타입 undefined를 값으로 갖는다

     console.log(window.undefined); // undefined
     

     var foo; console.log(foo); // undefined console.log(typeof undefined); // undefined

     2. 빌트인 전역 함수

• 빌트인 전역 함수는 애플리케이션 전역에서 호출할 수 있는 빌트인 함수로서 전역 객체의 메서드다

1. eval

   • eval 함수는 자바스크립트 코드를 나타내는 문자열을 인수로 전달받는다

     const x = 1;
     

     function foo() { eval("var x = 2;"); console.log(x) // 2 }

     foo() console.log(x) // 1

   • eval 함수를 통해 사용자로부터 입력받은 콘텐츠를 수행하는 것은 보안에 매우 취약하다

   • 또한 eval 함수를 통해 실행되는 코드는 자바스크립트 엔진에 의해 최적화가 수행되지 않으므로 일반적인 코드 실행에 비해 처리 속도가 느리다

   • 따라서 eval 함수의 사용은 금지해야 한다

2. isFinite

   • 전달받은 인수가 유한수이면 true를, 무한수이면 false를 반환한다

3. isNaN

   • 전달받은 인수가 NaN인지 검사하여 결과를 불리언 타입으로 반환한다

4. parseFloat

   • 전달받은 문자열 인수를 부동 소수점 숫자, 즉 실수로 해석하여 반환한다\

5. parseInt

   • 전달받은 문자열 인수를 정수로 해석하여 반환한다
   • 전달받은 인수가 문자열이 아니면 문자열로 변환한 다음 정수로 해석하여 반환한다

6. encodeURI / decodeURI

   • encodeURI 함수는 완전한 URI를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다
   • decodeURI 함수는 인코딩된 URI를 문자열로 전달받아 이스케이프 처리 이전으로 디코딩한다.

3. 암묵적 전역

var x = 10; // 전역 변수

function foo() { // 선언하지 않은 식별자에 값을 할당 y = 20; // window.y = 20; } foo();

// 선언하지 않은 식별자 y를 전역에서 참조할 수 있다 console.log(x + y); // 30

• 식별자 y는 선언된 전역 변수처럼 동작하는데, 이는 선언하지 않은 식별자에 값을 할당하면 전역 객체의 프로퍼티가 되기 때문이다
• 이러한 현상을 암묵적 전역이라 한다

✔ strict mode란?

function foo() {
  x = 10;
}
foo();

console.log(x); // 10

• 자바스크립트 엔진은 foo 함수의 스코프에서부터 출발하여 전역 스코프까지 x를 찾게 된다
• 어디에도 없는 x 변수로 인해 에러가 발생할 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다
• 이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있고, 이러한 현상을 암묵적 전역이라 한다
• strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다

✔ strict mode의 적용

• strict mode를 적용하려면 전역의 선두, 혹은 함수 몸체의 선두에 'use strict';를 추가한다

✔ 전역에 strict mode를 적용하는 것은 피하자

• 전역에 적용한 strict mode는 스크립트 단위로 적용된다
• strict mode 스크립트와 non-strict mode 스크립트를 혼용하는 것은 오류를 발생시킬 수 있다
• 특히, 외부 서드파티 라이브러리를 사용하는 경우 라이브러리가 non-strict mode인 경우도 있기 때문에 전역에 strict mode를 사용하는 것은 바람직하지 않다

✔ 함수 단위로 strict mode를 적용하는 것도 피하자

• 어떤 함수는 strict mode를 적용하고, 어떤 함수는 적용하지 않는 것도 바람직하지 않다 또한 일일히 적용하는 것이 번거롭기도 하다.

  (function() {
  var let = 10; // non-strict mode에서는 에러가 발생하지 않음
  function foo() {
    'use strict';
    let = 20 // syntaxError
  }
  foo();
  };)()

strict mode가 발생시키는 에러

• strict mode를 적용했을 때 에러가 발생하는 대표적인 사례

1. 암묵적 전역

• 선언하지 않은 변수를 참조하면 ReferenceError가 발생한다

  (function () {
  'use strict';
  

  x = 10; console.log(x); // ReferenceError })()

2. 변수, 함수, 매개변수의 삭제

• delete 연산자로 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생한다

  (function () {
  'use strict';
  
  x = 10;
  delete x; // SyntaxError
  })()

3. 매개변수 이름의 중복

• 중복된 매개변수 이름을 사용하면 SyntaxError가 발생한다

  (function () {
  'use strict';
  
  // SyntaxError
  function foo(x, x) {
    return x + x;
  }
  console.log(foo(1, 2));
  })()

4. with문의 사용

• with 문을 사용하면 SyntaxError가 발생한다
• with 문은 전달된 객체를 스코프 체인에 추가한다
• with문은 동일한 객체의 프로퍼티를 반복해서 사용할 때 객체 이름을 생략할 수 있어서 코드가 간단해지는 효과가 있지만, 성능과 가독성이 나빠지는 문제가 있다

  (function () {
  'use strict';
  
  // SyntaxError
  with({x: 1}) {
    console.log(x);
  }
  })()

✔ strict mode 적용에 의한 변화

1. 일반 함수의 this

• strict mode에서 함수를 일반 함수로서 호출하면 this에 undefined가 바인딩된다
• 생성자 함수가 아닌 일반 함수 내부에서는 this를 사용할 필요가 없기 때문이다, 이때 에러는 발생하지 않는다

2. arguments 객체

• strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않는다
• 초기값을 유지하는 듯 하다.

  function foo(a) {
  'use strict';
  
  a = 2;
  console.log(arguments); // {0: 1, length: 1}
  }
  

  foo(1);

• JavaScript는 객체 기반의 프로그래밍 언어이며, JavaScript를 이루고 있는 거의 모든 것이 객체다

✔ 객체지향 프로그래밍

• 객체(Object)의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다
• 특징이나 성징을 나타내는 속성(Property)을 가지고 있고, 이를 통해 실체를 인식하거나 구별할 수 있다
• "이름"과 "주소"라는 속성을 갖는 person이라는 객체를 JavaScript로 표현하면 다음과 같다

  // 이름과 주소 속성을 갖는 객체
  const person = {
  name: 'Lee',
  address: 'Suwon'
  };
  

  console.log(person); // {name: "Lee", address: "Suwon"}

✔ 상속과 프로토타입

• 상속은 어떤 객채의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다
• JavaScript는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getArea = function () {
    // Math.PI는 원주율을 나타내는 상수다
    return Math.PI * this.radius ** 2;
  };
}

// 반지름이 1인 인스턴스 생성 const circle1 = new Circle(1); // 반지름이 2인 인스턴스 생성 const circle2 = new Circle(2);

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는 // getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다 // getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다 console.log(circle1.getArea === circle2.getArea); // false

console.log(circle1.getArea()); // 3.141592653589793 console.log(circle2.getArea()); // 12.566370614359172

• 위 예제의 생성자 함수에는 문제가 있다
• Circle 생성자 함수는 인스턴스를 생성할 때마다 getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다
• 상속을 통해 불필요한 중복을 제거할때, JavaScript는 프로토타입(Prototype)을 기반으로 상속을 구현한다

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를 // 공유해서 사용할 수 있도록 프로토타입에 추가한다. // 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Circle.prototype.getArea = function () { return Math.PI * this.radius ** 2; };

// 인스턴스 생성 const circle1 = new Circle(1); const circle2 = new Circle(2);

// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 // 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다. // 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다. console.log(circle1.getArea === circle2.getArea); // true

console.log(circle1.getArea()); // 3.141592653589793 console.log(circle2.getArea()); // 12.566370614359172

• Circle 생성자 함수가 생성한 모든 인스턴스는 상위 객체 역할을 하는 Circle.prototype의 모든 프로퍼티와 메소드를 상속받는다
• 자신의 상태를 나타내는 radius 프로토타입만 개별적으로 소유하고 내용이 동일한 메소드는 상>속을 통해 공유하여 사용하는 것이다

✔ 프로토타입 객체

• 모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가지며, 내부 슬롯의 값은 프로토타입의 참조다
• [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 따라 결정된다

1. proto 접근자 프로퍼티

• 모든 객체는 _proto_ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉[[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다

  
  1. __proto__는 접근자 프로퍼티다
     • 접근자 프로퍼티는 자체적인 값[[Value]]을 갖지 않고, 접근자 함수[[Get]], [[Set]] 프로퍼티 어트리뷰드로 구성된 프로퍼티이다
  2. _proto_ 접근자 프로퍼티는 상속을 통해 사용된다
     • _proto_ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티이다
  3. _proto_ 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유
     • [[Prototype]] 내부 슬롯의 값에 접근할때 접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토 타입 체인이 생성되는 것을 방지하기 위해서다
  4. _proto_ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다

2. 함수 객체의 prototype 프로퍼티

• 함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다

  // 함수 객체는 prototype 프로퍼티를 소유한다
  (function () {}).hasOwnProperty('prototype'); // true
  

  // 일반 객체는 prototype 프로퍼티를 소유하지 않는다 ({}).hasOwnProperty('prototype'); // false

• 생성자 함수로서 호출할 수 없는 함수,즉 non-constructor인 화살표 함수와 ES6 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않는다

  // 화살표 함수는 non-constructor다
  const Person = name => {
  this.name = name;
  };
  

  // non-constructor는 prototype 프로퍼티를 소유하지 않는다 console.log(Person.hasOwnProperty('prototype')); // false

  // non-constructor는 프로토타입을 생성하지 않는다 console.log(Person.prototype); // undefined

  // ES6의 메서드 축약 표현으로 정의한 메서드는 non-constructor다 const obj = { foo(){} };

  // non-constructor는 prototype 프로퍼티를 소유하지 않는다 console.log(obj.foo.hasOwnProperty('prototype')); // false

  // non-constructor는 프로토타입을 생성하지 않는다 console.log(obj.foo.prototype); // undefined

  ```

• 모든 객체가 가지고 있는(Object.prototype으로부터 상속받은) _proto_ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다. 하지만 이들 프로퍼티를 사용하는 주체가 다르다.

3. 프로토타입의 constructor 프로퍼티와 생성자 함수

• constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 모든 생성자 함수(인스턴스를 생성한 생성자 함수)를 가리키고, 이 연결은 함수 객체가 생성될 때 이뤄진다

  // 생성자 함수
  function Person(name) {
  this.name = name;
  }
  

  const me = new Person('Lee');
  // me 객체의 생성자 함수는 Person이다. console.log(me.constructor === Person); // true

• me 객체에는 constructor 프로퍼티가 없지만, me 객체의 프로토타입인 Person.prototype에는 constructor 프로퍼티가 있다
• 따라서 me 객체는 프로토타입인 Person.prototype의 constructor 프로퍼티를 상속받아 사용할 수 있다

✔ 일급 객체

• 다음과 같은 조건을 만족하는 객체를 일급 객체라고 한다
  1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다
  2. 변수나 자료구조에 저장할 수 있다
  3. 함수의 매개변수에 전달할 수 있다
  4. 함수의 반환값으로 사용할 수 있다
• javaScript의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다

  // 1. 함수는 무명의 리터럴로 생성할 수 있다
  // 2. 함수는 변수에 저장할 수 있다
  // 런타임에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수가 할당된다
  const increase = function (num) {
  return ++num;
  };
  

  const decrease = function (num) { return --num; };
  // 2. 함수는 객체에 저장할 수 있다 const auxs = { increase, decrease };
  // 3. 함수의 매개변수에 전달할 수 있다 // 4. 함수의 반환값으로 사용할 수 있다 function makeCounter(aux) { let num = 0;
  return function () { num = aux(num); return num; }; }
  // 3. 함수는 매개변수에게 함수를 전달할 수 있다. const increaser = makeCounter(auxs.increase); console.log(increaser()); // 1 console.log(increaser()); // 2
  // 3. 함수는 매개변수에게 함수를 전달할 수 있다. const decreaser = makeCounter(auxs.decrease); console.log(decreaser()); // -1 console.log(decreaser()); // -2

✔ 함수 객체의 프로퍼티

• 함수도 프로퍼티를 가질 수 있다
  1. arguments
  2. caller
  3. length
  4. name
  5. prototype

function square(number) {
  return number * number;
}
console.dir(square);

1. arguments 프로퍼티

• arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체이다
• 함수 내부에서 지역 변수처럼 사용되며, 외부에서는 참조가 불가능하다
• javaScript의 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않고, 에러도 발생하지 않는다

function multiply(x, y) {
  console.log(arguments);
  return x * y;
}

console.log(multiply()); //NaN console.log(multiply(1)); //NaN console.log(multiply(1, 2)); //2 console.log(multiply(1, 2, 3)); //2

• 선언된 매개변수의 개수보다 인수를 적게 전달했을 경우, 전달되지 않은 매개변수는 undefined로 초기화된 상태를 유지한다
• 더 많은 인수를 전달한 경우에는 무시된다
• 다만, 버려지는것은 아니고, 암묵적으로 arguments 객체의 프로퍼티로 보관된다

2. caller 프로퍼티

• ECMAScript 사양에 포함되지 않은 비표준 프로퍼티로, 함수 객체의 caller 프로퍼티는 함수 자신을 호출한 함수를 가리킨다

3. length 프로퍼티

• 함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다

  function foo() {}
  console.log(foo.length); // 0
  

  function bar(x) {} console.log(bar.length); // 1

4. name 프로퍼티

• 함수의 이름을 나타낸다
• ES6에 정식 표준이 되었고, ES5에서는 다르게 동작하므로 주의해아한다

5. proto 접근자 프로퍼티

• 모든 객체는 [[Protytype]]라는 내부 슬롯을 갖는다
• [[Protytype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티이다
• [[Protytype]] 내부 슬롯에 직접 접근할 수 없으며, _proto_ 접근자 프로퍼티를 통해 간접적으로 접근 할 수 있다

  const obj = { a: 1 };
  

  // 객체 리터럴 방식으로 생성한 객체의 프로토타입 객체는 Object.prototype이다 console.log(obj.proto === Object.prototype); // true
  // 객체 리터럴 방식으로 생성한 객체는 프로토타입 객체인 Object.prototype의 프로퍼티를 상속받는다 // hasOwnProperty 메서드는 Object.prototype의 메서드다 console.log(obj.hasOwnProperty('a')); // true console.log(obj.hasOwnProperty('proto'); // false

6. prototype 프로퍼티

• 생성자 함수로 호출할 수 있는 함수 객체, 즉 constructor만이 소유하는 프로퍼티이다
• 일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다

  // 함수 객체는 prototype 프로퍼티를 소유한다
  (fuction () {}).hasOwnProperty('prototype'); // true
  

  // 일반 객체는 prototype 프로퍼티를 소유하지 않는다 ({}).hasOwnProperty('prototype'); // false

✔ Object 생성자 함수

• new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다
• 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다
• 하지만 리터럴로 생성하는 것이 더 간편하기 때문에 유용하게 사용하지는 않는다

  // 빈 객체의 생성
  const person = new Object();
  

  // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); };
  console.log(person); // {name: "Lee", sayHello: f} person.sayHello(); // Hi! My name is Lee

✔ 생성자 함수

1. 객체 리터럴에 의한 객체 생성 방식의 문제점

• 객체 리터럴에 의한 생성 방식은 직관적이고 간편하다
• 하지만 리터럴에 의한 생성 방식은 단 하나의 객체만 생성한다

2. 생성자 함수에 의한 객체 생성 방식의 장점

• 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있다

3. 생성자 함수의 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩
   • 암묵적으로 빈 객체가 생성된다
   • 이 빈 객체가 생성자 함수가 생성한 인스턴스이다
2. 인스턴스 초기화
   • 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다

     function Circle(radius) {
     // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩된다
     

     // 2. this에 바인딩되어 있는 인스턴스를 초기화한다 this.radius = radius; this.getDiameter = function () { return 2 + this.radius; }; }

     ```

3. 인스턴스 반환
   • 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩한 this가 암묵적으로 변환된다

4. 내부 메서드 [[Call]] & [[Construct]]

• 함수는 객체이므로 일반 객체와 동일하게 동작할 수 있다
• 다만 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다
• 함수가 일반 함수로서 호출되면 함수 객체의 내부 메서도 Call이 호출되고 new 연산자와 함께 생성자 함수로서 호출되면 내부 메서드 Construct가 호출된다

5. constructor와 non-constructor의 구분

• constructor : 함수 선언문, 함수 표현식, 클래스
• non-constructor : 메서드, 화살표 함수

6. new 연산자

• 일반 함수와 생성자 함수에 특별한 형식적 차이는 없다
• new 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작한다
• 즉, 함수 객체의 내부 메서드 Call이 호출되는 것이 아니라 Construct가 호출된다

✔ 내부 슬롯과 내부 메서드

• 내부 슬롯과 메서드는 JS 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다
• ECMAScript 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드이다

✔ 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

• JS 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다
• 프로퍼티의 상태란 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말한다
• 프로퍼티 어트리뷰트에 직접 접근할 수는 없지만, Onject.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수 있다

  const person = {
  name: 'Lee' 
  };
  

  person.age = 100;
  console.log(Object.getOwnPropertyDescriptors(person)); /* { name: {value: "Lee", writable: true, enumerable: true, configurable: true} age: {value: 100, writable: true, enumerable: true, configurable: true} }
• /

✔ 데이터 프로퍼티와 접근자 프로퍼티

1. 데이터 프로퍼티 (Data Property)

• 키와 값으로 구성된 일반적인 프로퍼티이다
• 

2. 접근자 프로퍼티 (Accessor Property)

• 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다
• 

const person = {
 // 데이터 프로퍼티
 firstName: "bw",
 lastName: "Lee",

 // getter 함수 (접근자 프로퍼티)
 get fullName() {
   return `${this.firstName} ${this.lastName}`; 
 },
 // setter 함수  
 set fullName(name) {
   // 배열 디스트럭처럼 할당
   [this.firstName, this.lastName] = name.split(' ');
 }
};

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조 console.log(person.firstName + ' ' + person.lastName); // bw Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조 // 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다 person.fullName = "Heegun Lee"; console.log(person); //{firstName: "Heegun", lastName: "Lee"}

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조 // 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다. console.log(person.fullName); // Heegun Lee

// firstName은 데이터 프로퍼티다 // 데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 프로퍼티 어트리뷰트를 갖는다 let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName'); console.log(descriptor); // {value: "Lee", writable : true, enumerable : true, configurable: true}

// fullName은 접근자 프로퍼티다 // 접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]] 프로퍼티 어트리뷰트를 갖는다 descriptor = Object.getOwnPropertyDescriptor(person, 'fullName') console.log(descriptor); // {get: f, set: f, enumerable: true, configurable: true}

✔ 프로퍼티 정의

• Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다
• 디스크럽터 객채의 프로퍼티를 누락시키면 undefined, false가 기본값이다
• Enumerable의 값이 false인 경우, 해당 프로퍼티는 열거할 수 없다
• Writeable의 값이 false인 경우, 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없다
• Configurable의 값이 false인 경우, 해당 프로퍼티를 삭제 또는 재정의 할 수 없다
• 

const person = {};

// 데이터 프로퍼티 정의 Object.defineProperty(person, 'firstName', { value: 'Ungmo', writable: true, enumerable: true, configurable: true });

// 디스크럽터 객채의 프로퍼티를 누락시키면 undefined, false가 기본값이다 Object.defineProperty(person, 'lastName', { value: 'Lee' })

✔ 객체 변경 방지

• 객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다

1. 객체 확장 금지

• Object.preventExtensions 메서드는 객체의 확장을 금지한다
• 확장이 금지된 객체는 프로퍼티 추가가 금지된다

  const person = { name : 'Lee'};
  

  // person 객체는 확장이 금지된 객체가 아니다 console.log(Object.isExtensible(person)); // true
  // person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다 Object.preventExtensions(person);
  // person 객체는 확장이 금지된 객체다 console.log(Object.isExtensible(person)); // false
  // 프로퍼티 추가가 금지된다 person.age = 20; // 무시. strict mode에서는 에러 console.log(person); // {name : "Lee"}
  // 프로퍼티 추가는 금지되지만 삭제는 가능하다 delete person.name; console.log(person); // {}
  // 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다 Object.defineProperty(person, 'age', {value:20}); // TypeError: Cannot define property age, object is not extensible

2. 객체 밀봉

• Object.seal 메서드는 객체를 밀봉한다
• 밀봉된 객체는 읽기와 쓰기만 가능하다

  const person = {name: 'Lee'};
  

  // person 객체는 밀봉된 객체가 아니다 console.log(Object.isSealed(person)); // false
  // person 객체를 밀봉하여 프로퍼티 추가, 삭제, 재정의를 금지한다 Object.seal(person);
  // person 객체는 밀봉된 객체다 console.log(Object.isSealed(person)); // true
  // 밀봉된 객체는 configurable이 false이다 console.log(Object.getOwnPropertyDescriptors(person)); /* { name: {value: "Lee", writable: true, enumerable: true, configurable: false}, }
• /
  // 프로퍼티 추가가 금지된다 person.age = 20; // 무시. strict mode에서는 에러 console.log(person); // {name: "Lee"}
  // 프로퍼티 삭제가 금지된다 delete.person.name; // 무시. strict mode에서는 에러 console.log(person); // {name: "Lee"}
  // 프로퍼티 값 갱신은 가능하다. person.name = "Kim"; console.log(person); // {name : "Kim"}
  // 프로퍼티 어트리뷰트 재정의가 금지된다. Object.defineProperty(person, 'name', {configurable : true}); // TypeError: Cannot redefine property: name

3. 객체 동결

• Object.freeze 메서드는 객체를 동결한다
• 동결된 객체는 읽기만 가능하다

  const person = {name: 'Lee'};
  

  // person 객체는 동결된 객체가 아니다 console.log(Object.isFrozen(person)); // false
  // person 객체를 동결하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지한다 Object.freeze(person);
  // person 객체는 동결된 객체다 console.log(Object.isFrozen(person)); // true
  // 동결된 객체는 writable과 configurable이 false이다 console.log(Object.getOwnPropertyDescriptors(person)); /* { name: {value: "Lee", writable: false, enumerable: true, configurable: false}, }
• /
  // 프로퍼티 추가가 금지된다 person.age = 20; // 무시. strict mode에서는 에러 console.log(person); // {name: "Lee"}
  // 프로퍼티 삭제가 금지된다 delete.person.name; // 무시. strict mode에서는 에러 console.log(person); // {name: "Lee"}
  // 프로퍼티 값 갱신은 가능하다. person.name = "Kim"; console.log(person); // {name : "Kim"}
  // 프로퍼티 어트리뷰트 재정의가 금지된다. Object.defineProperty(person, 'name', {configurable : true}); // TypeError: Cannot redefine property: name

4. 불변 객체

• 지금까지 살펴본 변경 방지 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고, 중첩 객체까지는 영향을 주지는 못한다
• Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다
• 객체의 중첩 객체까지 불변 객체로 구현하려면 객채를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다

✔ var 키워드의 문제점

1. 변수 중복 선언 허용

• var 키워드로 선언한 변수는 중복 선언이 가능하다

  var x = 1;
  var y = 1;
  

  // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y;
  console.log(x); // 100 console.log(y); // 1

2. 함수 레벨 스코프

• var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다
• 따라서, 함수 외부에서 var 키워드로 선언한 변수는 코트 블록 내에서 선언해도 모두 전역 변수가 된다

  var i = 10;
  

  // for문에서 선언한 i는 전역 변수이고, 이미 선언된 전역 변수 i가 있으므로 중복 선언된다. for (var i = 0; i < 5; i++){ console.log(i); // 0 1 2 3 4 }
  // 의도치 않게 i 변수의 값이 변경되었다. console.log(i); // 5

3. 변수 호이스팅

• var 키워드로 변수를 선언하면 변수 호이스팅에 의해, 변수 선언문이 스코프의 선두로 끌어 올라간 것처럼 동작한다

  // 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다
  // 변수 foo는 undefined로 초기화된다
  console.log(foo);
  

  // 변수에 값을 할당 foo = 1;
  console.log(foo); // 1
  // 변수 선언은 런타임 이전에 JS 엔진에 의해 암묵적으로 실행된다 var foo;

✔ let 키워드

• var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 선언 키워드인 let과 const가 도입되었다

1. 변수 중복 선언 금지

• let 키워드로 같은 이름의 변수를 중복되게 선언하면 에러가 발생한다

2. 블록 레벨 스코프

• let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다

  let foo = 1; // 전역 변수
  

  if (true) { let foo = 2; // 지역 변수 let bar = 3; // 지역 변수 }
  console.log(foo); // 1 console.log(bar); // ReferenceError: bar is not defined

3. 변수 호이스팅

• var 키워드와는 달리 변수 호이스팅이 발생하지 않는 것처럼 동작한다

  console.log(foo); // ReferenceError
  let foo;

✔ const 키워드

• 보통 상수를 선언하기 위해 사용된다

1. 선언과 초기화

• const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화하여야 한다

2. 재할당 금지

• const 키워드로 선언한 변수는 재할당이 금지된다

3. 상수

• 재할당이 금지된 특징을 이용해 const 키워드로 상수를 표현하는데 사용하기도 한다

  // 세율을 의미하는 0.1은 변경할 수 없는 상수로서 사용될 값이다
  // 변수 이름을 대문자로 선언해 상수임을 명확히 나타낸다
  const TAX_RATE = 0.1;
  

  // 세전 가격 let preTaxPrice = 100;
  // 세후 가격 let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);
  console.log(afterTaxPrice); //110

const 키워드와 객체

• const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다
• const 키워드는 재할당을 금지할 뿐, "불변"을 의미하지는 않는다
• 새로운 값을 재할당하는 것은 불가능하지만, Property의 동적 생성, 삭제, 변경을 통해 객체를 변경하는 것은 가능하다

  const person = {
  name : 'Lee'
  };
  

  // 객체는 변경 가능한 값이다. 따라서 재할당 없이 변경이 가능하다. person.name = 'Jo';
  console.log(person); // {name : 'Jo'}

✔ 산술 연산자

• 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자값을 만든다
• 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다

1. 이항 산술 연산자

• 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다
• 

2. 단항 산술 연산자

• 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다
• 증가/감소 연산자는 위치에 의미가 있다
• 

3. 문자열 연결 연산자

• '+' 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다

  /// 문자열 연결 연산자
  '1' + 2; // '12'
  1 + '2'; // '12'
  

  // 산술 연산자 1 + 2; // 3
  // true는 1로, false는 0으로 변환된다 // null도 0으로 변환된다 1 + true; // 2
  // undefined는 숫자로 변한되지 않는다
• undefined; // NaN 1 + undefined; // NaN

• 테이터 타입은 값의 종류를 말한다
• JavaScript는 7개의 데이터 타입을 제공한다
  • 원시 타입
    1. 숫자 타입
    2. 문자열 타입
    3. Boolean 타입
    4. undefined 타입
    5. null 타입
    6. 심벌 타입
  • 객체 타입

✔ 숫자 타입

• 다른 언어와는 다르게 JavaScript는 하나의 숫자 타입만 존재한다
• 숫자 타입은 모두 실수로 처리된다
• 추가적으로 세가지 특별한 값도 표현할 수 있다
  1. Infinity : 양의 무한대
  2. -Infinity : 음의 무한대
  3. NaN : 산술 연산 불가(Not a Number)

     // 모두 숫자 타입이다
     var integer = 10;   // 정수
     var double = 10.12;   // 실수
     

     var bin = 0b1011; // 2진수 var oct = 0o307; // 8진수 var hex = 0x1AB; // 16진수

✔ 문자열 타입

• 문자열 타입은 텍스트 데이터를 나타내는 데 사용한다
• 문자열은 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다

1. 멀티라인 문자열

• 템플릿 리터럴은 일반 문자열과 비슷해 보이지만 따옴표 대신 백틱을 사용해 표현한다
• 일반 문자열 내에서는 줄바꿈이 허용되지 않는다
• 따라서 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야 한다
• 백틱을 사용하면 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 허용된다

2. 표현식 삽입

• 문자열은 문자열 연산자 + 를 사용하여 연결할 수 있다

  var first = 'bw';
  var last = 'Lee';
  

  console.log('My name is ' + first + ' ' + last) .. My name is bw Lee

• 표현식을 삽입하려면 ${}으로 표현식을 감싸면 되고, 이때 표현식의 결과가 문자열이 아니더라도 문자열로 강제 변환된다

  var first = 'bw';
  var last = 'Lee';
  

  console.log(My name is ${first} $(last)) .. My name is bw Lee

✔ Boolean 타입

• Boolean 타입은 참, 거짓을 나타내는 true와 false 뿐이다

  var boo = true;
  console.log(boo) // true
  

  boo = false; console.log(boo) // false

✔ undefined 타입

• undefined 타입의 값은 undefined가 유일하다
• 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 될때까지 빈상태로 두지 않고 JavaScript 엔진이 undefined로 초기화한다

✔ null 타입

• null 타입의 값은 null이 유일하다
• null은 변수에 값이 없다는 것을 의도적으로 명시한다

✔ Symbol 타입

• 변경 불가능한 원시 타입의 값이고, 다른 값과 중복되지 않는 유일무이한 값이다

✔ 값

• 값은 식이 평가되어 생성된 결과를 말한다

✔ 리터럴

• 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다
• 대표적인 리터럴
  1. 정수 리터럴 : 100
  2. 부동소수점 리터럴 : 10.5
  3. 2진수 리터럴 : 0b00011011
  4. 16진수 리터럴 : 0x33
  5. 문자열 리터럴 : Hello, "World"
  6. Boolean 리터럴 : true, false
  7. 객체 리터럴 : {name: 'Lee', age: '29'}
  8. 함수 리터럴 : function () {}
  9. 정규 표현식 리터럴 : /[A-Z]+/g
• 등등....

✔ 문

• 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다

  // 변수 선언문
  var x;
  // 할당문
  x = 5;
  // 함수 선언문
  function foo () {}
  // 조건문
  if (x > 1) { console.log(x); }
  // 반복문
  for (var i = 0; i < 2; i++) { console.log(i); }

✔ 세미콜론

• 세미콜론(;)은 문의 종료를 나타낸다
• JavaScript에서는 생략이 가능하다 (세미콜론 자동 삽입 기능(ASI))

⬛ 변수란?

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다

✔ 변수에 여러 개의 값을 저장하는 방법

• 변수는 하나의 값을 저장하기 위한 메커니즘이다
• 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 한다
• 단, 배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용 할 수 있다

// 변수는 하나의 값을 저장하기 위한 수단이다
var userId = 1;
var userName = 'Lee';

// 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용>할 수 있다
var user = { id: 1, name: 'Lee'};

var users = [
 {id: 1, name: 'Lee'},
 {id: 2, name: 'Kim'}
];

---

### ✔ 변수 선언
- 변수를 사용하기 위해선 선언이 필요하다
- var, let, const 같은 키워드를 사용한다

>```
>var name; // 변수 선언
>```

---

### ✔ 변수 선언의 실행 시점

>```
>console.log(name);
>
>var name;

• 위의 보기에서 변수가 선언되기 전 log함수가 사용되고 있으므로 Error가 발생할 것 같지만, 그렇지 않다
• JavaScript에서 변수의 선언은 순차적인 런타임이 아니고 그 이전에 먼저 실행된다
• 이것은 JavaScript만의 특징이다

✔ 값의 할당

• 변수에 값을 할당할 때에는 할당 연산자 '='를 사용한다

var name = 'Lee';

• 변수 선언과 할당을 위와같이 하나의 문으로 단축할 수도 있고, 분리할 수도 있다

✔ 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용되지 않는다
• 예약어는 식별자로 사용할 수 없다
  • 예약어란, 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다

⬛ CSS Flex

• 1차원 레이아웃 구조를 위한 속성이다
• Fexible box라고 부르기도 한다
• 정렬을 할 요소들의 부모요소의 display 속성에 flex라는 값을 넣어주어야 한다
• Container와 Items, 2개의 개념으로 나뉜다

✔ Flex Container 의 속성들

1. display

• display 속성으로 Flex Container를 정의한다
  1. flex : Block형식의 Flex Container를 정의
  2. inline-flex : inline형식의 Flex Container를 정의

2. flex-flow

• Flex Items의 main 축을 설정하고 줄바꿈도 설정한다.
• 단축 속성이다.
  1. flex-direction : items의 주 축을 설정 (default : row)
     • row : items를 좌->우, 수평으로 표시
     • row-reverse : row를 역방향으로 표시
     • col : items를 상->하, 수직으로 표시
     • col-reverse : col을 역방향으로 표시
  2. flex-wrap: items의 줄바꿈을 설정 (default : nowrap)
     • nowrap : items를 줄바꿈 하지 않음, 한 줄에 표시
     • wrap : items를 여러줄로 표시
     • wrap-reverse : wrap의 역방향으로 표시

3. justify-content

• main축의 정렬 방법을 설정한다 (default : flex-start)
  1. flex-start : items를 container의 시작점에서 부터 정렬
  2. flex-end : items를 container의 끝에서 부터 정렬
  3. center : items를 container의 가운데 정렬
  4. space-between : 첫 item과 마지막 item은 container의 양쪽에 배치되고, 사이에 있는 나머지 items는 모두 간격이 일정하게 정렬
  5. space-around : items를 모두 동일한 여백으로 정렬

4. align-content

• 교차축의 정렬 방법을 설정 (default : stretch)
• items가 여러 줄 이상이여야 사용 가능하다. (flex-wrap이 nowrap이면 사용 불가)
• justify-content 속성과 비슷하다
  1. stretch : Container의 교차 축을 채우기 위해 items의 width가 늘어난다
  2. flex-start : items를 Container의 시작점에서 부터 정렬
  3. flex-end : items를 Container의 끝에서 부터 정렬
  4. center : items를 Contatiner의 가운데 정렬
  5. space-between : 첫 item과 마지막 item은 container의 위아래에 배치되고, 사이에 있는 나머지 items는 모두 간격이 일정하게 정렬
  6. space-around : itmes를 모두 동일한 여백으로 정렬

5. align-items

• 교차축의 정렬 방법을 설정 (items가 한 줄 일때) (default : stretch)
• flex-wrap이 기본값(stretch) 일때만 사용 가능
  1. stretch : Container의 교차 축을 채우기 위해 items를 늘린다
  2. flex-start : align-content와 동일
  3. flex-end : align-content와 동일
  4. center : align-content와 동일
  5. baseline : 문자의 기준선에 정렬

✔ Flex Items 의 속성들

1. order (default : 0)

• items의 순서를 설정한다
• items에 숫자를 지정하면, 숫자가 클수록 순서가 뒤로 가게된다
• 음수도 설정할 수 있다

2. flex

• item의 너비(증가, 감소, 기본)를 설정하는 단축 속성
• flex-grow, flex-shrink, flex-basis의 단축 속성이다
  1. flex-grow (defualt : 0)
     • 증가 너비 비율
     • 숫자가 크면 클수록 증가하는 너비가 커진다
     • Item이 가변 너비가 아니거나, 0이면 효과가 없다
  2. flex-shrink (defualt : 1)
     • 감소 너비 비율
     • 숫자가 작을수록 감소하는 너비가 커진다
     • Item이 가변 너비가 아니거나, 0이면 효과가 없다
  3. flex-basis (defualt : auto)
     • item의 기본 너비를 설정
     • 값이 auto라면 width, height 등의 속성으로 item의 너비를 설정 할 수 있다
     • 값이 단위면 item의 너비를 설정 할 수 없다

 .item {
  flex: 1 2 100px; // 증가너비 감소너비 기본너비
  flex: 1 2;       // 증가너비 감소너비
  flex: 1 100px;   // 증가너비 기본너비
 }

```

• flex-grow를 제외한 개별 속성은 생략할 수 있다
• flex: 1와 flex-grow: 1;은 동일하다
• 증가너비 다음 단위를 사용하면 감소너비가 생략되고 기본너비가 설정된다
• 기본너비를 생략하면 기본값이 설정되는 것이 아닌, 0이 적용된다

3. align-self

• align items를 개별적으로 지정하는 속성 (default : auto)
• 일부 item만 정렬 방법을 변경하려고 할 때 사용
  1. auto : Container의 align-items속성을 상속
  2. stretch : Container의 교차축을 기준으로 item을 늘림
  3. flex-start : Line의 시작점으로 정렬
  4. flex-end : Line의 끝점으로 정렬
  5. center : 가운데 정렬
  6. baseline : 문자의 기준선에 정렬

  ---

⬛ CSS Style 상속

• 부모(조상)요소의 속성이 하위요소까지 영향을 받는것을 뜻함

✔ 상속되는 CSS의 속성들..

• 모두 글자/문자 관련 속성들이다
• 모든 글자/문자 관련 속성들은 아니다
• 예시
  1. font-style : 글자 스타일
  2. font-weight : 글자 두께
  3. font-size : 글자 크기
  4. line-height : 줄 높이
  5. font-family : 폰트(서체)
  6. color : 글자 색상
  7. text-align : 글자 정렬

강제 상속

• inherit : 부모의 속성 값을 상속한다

.parent {
  width: 300px;
  height : 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

⬛ 선택자 우선순위

• 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언이 CSS 속성을 우선 적용할지 결정하는 방법

<div 
  id="color_yellow" 
  class="color_green" 
  style="color: pink">
  Hello World!
</div>

div {
  color: red !important;
}
#color_yellow {
  color: yellow;
}
.color_green {
  color: green;
}
div {
  color: blue;
}
* {
  color: darkblue;
}
body {
  color: violet;
}

• 우선순위

1. !important
2. inline 선언
3. id 선택자
4. class 선택자
5. tag 선택자
6. 전체선택자

• 웹 문서의 전반적인 스타일을 미리 저장해 둔 Style Sheet이다
• HTML로 작성된 문서의 표현되는 방법을 정해준다

✔ 기본 문법

• 스타일을 적용할 대상
• 선택자 {속성: 값;}

div {
  color: red;
  padding: 10px;
}

⬛ 선언 방식

✔ 내장 방식

• <style></style> 내용으로 스타일을 작성하는 방식

<style>
  div {
  color: red;
  padding: 10px;
}
</style>

✔인라인 방식

• 요소의 style 속성에 직접 작성하는 방식
• 선택자가 없다

<div style="color: red; padding: 10px;"></div>

✔ 링크 방식

• 외부 CSS파일을 가져와서 연결하는 방식

<link rel="stylesheet" href="./main.css">

✔ import 방식

• CSS의 @import 규직으로 CSS파일 안에서 다른 CSS파일을 가져와 연결하는 방식

@import url("./box.css");

💡 선택자 (Selector)

⬛ 기본 선택자

✔ 전체 선택자

• *(asterisk) : 모든 요소를 선택

* {
  color: red;
}

✔ 태그 선택자

• 태그의 이름으로 요소를 선택하는 선택자

li {
  color: red;
}

✔ 클래스 선택자

• HTML 파일 내, class속성의 값으로 선택하는 선택자
• 클래스 선택자를 의미하는 "."을 class이름 앞에 붙혀준다

.class_value {
  color: red;
}

✔ 아이디 선택자

• HTML 파일 내, id속성의 값으로 선택하는 선택자
• 아이디 선택자를 의미하는 "#"을 id이름 앞에 붙혀준다

#id_value{
  color: red;
}

⬛ 복합 선택자

• 기본 선택자를 조합하여 선택하는 선택자

✔ 일치 선택자 (Basic Combinator)

• 선택자 A,B를 동시에 만족하는 요소를 선택하는 구조

EX) class의 값이 "value"인 span tag내의 요소

span.value {
  color: red;
}

✔ 자식 선택자 (Child Combinator)

• 선택자 A의 자식요소 B를 선택하는 구조
• ">"가 선택자의 기호이다

EX) class의 값이 "value"인 ul의 자식요소

ul > .value{
  color: red;
}

✔ 하위(후손) 선택자 (Descendant Combinator)

• 선택자 A의 하위요소 B를 선택하는 구조
• "띄어쓰기"가 선택자의 기호이다

EX) class의 값이 "value"인 div의 하위요소

div .value {
  color: red;
}

✔ 인접 형제 선택자 (Adjacent Sibling Combinator)

• 선택자 A의 다음 형제요소 B를 선택하는 구조
• "+"가 선택자의 기호이다

EX) class의 값이 "value"인 요소의 바로 다음 div 요소 '하나'

.value + div {
  color: red;
}

✔ 일반 형제 선택자 (General Sibling Combinator)

• 선택자 A의 다음 형제요소를 모두 선택하는 구조
• "~"가 선택자의 기호이다

EX) class의 값이 "value"인 요소의 다음 div 요소 '모두'

.value ~ div {
  color: red;
}

⬛ 가상 클래스 선택자 - 동작 관련 (Pseudo-Classes)

• 각 요소들의 상태에 따른 선택이 이루어지는 선택자를 의미한다

✔ :hover

• 마우스 커서를 올렸을 때 동작한다

EX) A tag위에 마우스를 올리면 빨간색으로 변경

A:hover{
  color: red;
}

✔ :active

• 요소에 마우스 클릭을 하고 있는 동안 동작한다

EX) A tag를 클릭하고 있는 동안 빨간색으로 변경

A:active {
  color: red;
}

✔ :focus

• 요소가 포커스되면 선택
• 포커스가 가능한 요소에서만 동작한다

EX) input tag가 포커스되면 backgrount color를 빨간색으로 변경

input:focus {
  background-color: red;
}

⬛ 가상 클래스 선택자 - 특정 요소 선택 관련

✔ :first-child

• 선택자의 형제 요소 중 첫째라면 선택

EX) Class A의 자식 요소 중, 첫번째 요소가 span이라면 color 변경

.A span:first-child {
  color: red;
}

✔ :last-child

• 선택자의 형제 요소 중 마지막이라면 선택

EX) Class A의 자식 요소 중, 마지막 요소가 span이라면 color 변경

.A span:last-child {
  color: red;
}

✔ :nth-child(n)

• 선택자의 형제 요소 중 n번째라면 선택
• 상수를 사용해도 되지만 2n, 2n+1, n+3 등의 방식으로 사용할 수 있다
  • 위와 같이 사용할 때, n은 0부터 시작한다

EX1) Class A의 자식 요소 중, 3번째 요소가 span이라면 color 변경

.A span:nth-child(3) {
  color: red;
}

EX2) Class A의 자식 요소 중, 3번째 요소의 color 변경

.A *:nth-child(3) {
  color: red;
}

EX3) Class A의 자식 요소 중, (2 x n) 번째 요소의 color 변경

.A *:nth-child(2n) {
  color: red;
}

✔ :not(X)

• 부정선택자
• 선택자 X가 아닌 다른 요소들을 선택

EX) Class A의 자식 요소 중, span을 제외한 요소들의 color 변경

.A *:not(span) {
  color: red;
}

⬛ 가장 요소 선택자

• 콜론(":") 2개를 사용한다
• 반드시 Content 라는 속성을 사용하여야 한다

✔ ::before

• 선택자 요소 내부의 앞에 내용(Content)을 삽입
• 가상의 인라인 요소를 만들어 삽입한다

EX) Class A 내부의 앞에 "앞"이라는 텍스트를 출력

.A::before {
  content: "앞";
}

✔ ::after

• 선택자 요소 내부의 뒤에 내용(Content)을 삽입
• 가상의 인라인 요소를 만들어 삽입한다

EX) Class A 내부의 뒤에 "뒤"이라는 텍스트를 출력

.A::before {
  content: "뒤";
}

⬛ 속성 선택자 (Attribute)

• 대괄호를 포함하여 사용

✔ disabled

• 비활성화가 되어있는 속성들을 선택

EX) 비활성화 되어있는 속성들의 color를 변경

[disabled] {
  color: red;
}

✔ type

• type 속성을 가지고 있는 속성들을 선택
• type의 value를 특정하여 선택 할 수도 있다

EX) type의 값이 "value"인 것들의 color를 변경

[type="value"] {
  color: red;
}

• 전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성이다.
• 일부 요소에는 아무런 효과도 없을 수 있다.
• 전역 특성은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있다.

title

• 요소의 정보나 설명을 지정
• 요소에 마우스 커서를 올리면 title 속성에 들어간 텍스트가 보임

  <a href="https://www.naver.com" title="네이버로 이동">네이버</a> 네이버

  

style

• 스타일은 별도의 파일에 정의하는 것으로 권장됨
• 요소에 적용할 스타일(CSS)을 지정

class

• 요소를 지칭하는 중복 가능한 이름

• CSS 또는 JavaScript로 제어하기 위한 Tag

• 대소문자를 구분하지 않음

• 하나의 요소가 여러 클래스를 가질 수 있음, 공백으로 구분

  • class="VE Log" -> VE와 Log, 2개 클래스를 가진 Tag

  <span>요소</span>를 지칭하는 <span class="red">중복</span> 가능한 이름 CSS 👇 .red { color: red; } <<출력>> 요소를 지칭하는 중복 가능한 이름

id

• 요소를 지칭하는 고유한 이름
• 하나의 요소에 하나의 이름만 사용 가능
• CSS에서 제어 할때는 class를 제어하는 것과 비슷함

  <span id="blue">요소</span>를 지칭하는 <span class="red">중복</span> 가능한 이름 CSS 👇 .red { color: red; } #abc { color: blue; } <<출력>> 요소를 지칭하는 고유한 이름

data

• 요소에 데이터를 지정
• data-{사용자 지정} 형태로 사용
• HTML에서 body Tag가 만들어지기 전, 호출되므로 defer 라는 속성을 추가

  <HTML> <head> <script defer src="main.js"></script> </head> <body> <div data-wepsite="naver">네이버</div> <div data-wepsite="google">구글</div> </body>

  <JavaScript> const els = document.querySelectorAll('div') els.forEach(el => {console.log(el.dataset.fruitName)})

  <출력> naver google

• 컴퓨터가 정보를 읽고, 이해, 가공하여 새로운 정보를 만들어 낼 수 있도록 만든 지능형 웹

Layout Tag

<header>

• 일반적으로 웹 페이지의 가장 윗부분에 위치함
• 웹 페이지의 제목이나, 상단바 혹은 검색창 등이 포함됨.

  <nav>

• navigation의 약자로, 사이트의 탭을 포함하고 있음
• <nav> tag안에 list tag들을 넣어 사용

  <main>

• 사이트의 메인 콘텐츠를 포함

  <section>

• 웹 페이지의 섹션을 나타내는 Tag
• 페이지를 Part별로 나누기 위해서도 사용됨

  <aside>

• 본문이 끝나고 추가 내용을 포함하는 Tag
• 광고 등이 들어가기도 함

  <footer>

• 보통 페이지의 가장 하단부에 위치
• CopyRight 및 라이센스 등이 포함됨

👉 예시

<!DOCTYPE html>

• Hyper Text Markup Language
• 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이고, 하이퍼텍스트를 작성하기 위해 개발됨

🧾 HTML의 구조

• EX)

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  </head>
  <body>
  <h1>오늘의 날씨</h1>
  <p>많이 추워지니 따듯하게 입으세요!</p>
  <br>
  </body>
  </html>

  !DOCTYPE

• 문서 형식을 정의
• HTML5는 현재 HTML의 최신 규격
• !DOCTYPE HTML은 HTML5를 표현

lang

• 웹문서의 전체 또는 일부에 관련 언어를 지정하는 속성

기본 구조

• <html> Tag는 <head>와 <body>로 구성
• <head>
  • HTML의 속성이 포함되어있는 Tag, 제목이나 정보등이 들어있음
• <body>
  • HTML의 구조를 담고있는 Tag
  • 표현할 웹 페이지의 레이아웃이 포함되어 있음

head 관련 Tag

<meta>

• 웹 페이지의 부가 정보들을 표기하는 Tag

  <title>

• 웹 페이지의 제목을 설정하는 Tag

  <link>

• 다른 파일들과 연결을 하는 Tag
• 대표적으로 CSS, 파비콘 등이 있음

텍스트 관련 Tag

<h[1~6]>

• 제목 관련 Tag
• 보통 <h1> 부터 <h6> 순으로 중요도를 표현

<h1>제목1<h1>
<h2>제목2<h2>
<h3>제목3<h3>
<h4>제목4<h4>
<h5>제목5<h5>
<h6>제목6<h6>

<p>

• 문단을 표현하는 Tag
• <p> Tag 안에서는 줄바꿈을 하여도 하나의 문단으로 인식

  <p>P 태그 안에서는
  줄바꿈을 하여도 하나의 문단으로
  인식한다.</p>

  <b>

• 굵은 글씨 효과를 주는 Tag

<ins>

• 밑줄 효과를 주는 Tag

  <del>

• 취소선 효과를 주는 Tag

  <br>

• 문단 내의 줄바꿈 Tag

목록 관련 Tag

<ul>

• Unordered list, 순서가 없는 목록

<ul>
 <li>1번</li>
 <li>2번</li>
</ul>
<<출력>>

• 1번
• 2번

<ol>

• Ordered list, 순서가 있는 목록

<ol>
 <li>1번</li>
 <li>2번</li>
</ol>

1. 1번
2. 2번

<li>

• list item, 항목 Tag

링크 관련 Tag

<a>

• Anchor, 하이퍼링크 Tag <a href="https://www.google.co.kr">구글</a> 구글

  <img>

• image Tag <img src="https://www.google.com/favicon.ico" alt=구글 로고"> #### `
• SVG 형식의 그래픽 Tag
• 별도의 파일 없이 HTML 안에서 코딩으로 넣을 수도 있음

테이블 관련 Tag

<table>

• 테이블을 만드는 Tag

  <tr>

• Table row, 테이블의 행을 뜻하는 Tag

  <td>

• Table data, 테이블의 내용, 즉 셀을 표현
  　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　

  A	B	C
  D	E	F

  >``` 　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　

  A	B	C
  D	E	F

<th>

• Table heading, 테이블의 행
• Default로 가운데 정렬이고 굵은 글씨로 표시됨
  　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　

  A	B	C
  a	b	c

  >``` 　　 　　　　 　　　　 　　　　 　　 　　 　　　　 　　　　 　　　　 　　

  A	B	C
  a	b	c