오늘은 IM koans를 하는데

  it('배열을 분해합니다', () => {
    const array = ['code', 'states', 'im', 'course']

    const [first, second] = array
    expect(first).to.eql('code')
    expect(second).to.eql('states','im','course')

    const result = []
    function foo([first, second]) {
      result.push(second)
      result.push(first)
    }

    foo(array)
    expect(result).to.eql(['states','code'])
    
    ['states','im','course','code']인데 안나온다.
    새로운 배열에 넣어줄때는 그냥 하나씩만 나온다? 
    11번째 줄에서는 restparameter인데
    15번쨰 줄에서는 그냥 하나의 property이다?
    배열에서 스트링으로 변환될때만 rest parameter
  })

인자를 넣어주면 key값과 value값이 나온데 근데 선언을 해주면 생략될 수 있다.

args는 key 값과 value의 객체가 복사가 되었다.

name이 원래 key 값이여서 value값이 나오는건가?

value값만 출력.

    const changedDepartment = {
      ...user,
      company: {
        ...user.company,
        department: 'Marketing'
      }
    }
    
    ...user.company 무슨 말이고?

https://hae-ong.tistory.com/17

Global property

https://m.blog.naver.com/PostView.nhn?blogId=dktmrorl&logNo=221732161839&proxyReferer=https:%2F%2Fwww.google.com%2F

https://poiemaweb.com/js-global-object

global this 를 사용한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/globalThis

  // node.js 환경에서는 브라우저 환경의 window와 비슷하게 작동하는 global이라는 객체가 존재합니다
  it('함수 선언식 호출시 this값을 확인합니다', () => {
    function foo() {
      return this
    }

    expect(foo()).to.eql(globalThis)
    /// window 객체이다.

  })

  it('함수 표현식 호출시 this값을 확인합니다', () => {
    const foo = function () {
      return this
    }

    expect(foo()).to.eql(globalThis)
  })

화살표 함수

  it('화살표 함수 호출시 this값을 확인합니다', () => {
    const foo = () => {
      return this
    }

>     expect(foo()).to.eql({})
  })

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

This

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

객체 지향적 언어 {}

함수도 어차피 객체이다. 결국은

단순하게 한다. javascript.

객체 지향 프로그래밍(영어: Object-Oriented Programming, OOP)은 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다.

객체 지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용된다. 또한 프로그래밍을 더 배우기 쉽게 하고 소프트웨어 개발과 보수를 간편하게 하며, 보다 직관적인 코드 분석을 가능하게 하는 장점을 갖고 있다. 그러나 지나친 프로그램의 객체화 경향은 실제 세계의 모습을 그대로 반영하지 못한다는 비판을 받기도 한다.

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메소드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

overwriting을 해서 바꿀 수 도 있는데

함수를 많이 써서 하는 이유는..

객체 지향적 언어가 중요 하게 된다.

java가 생각하는

value가 filed인데

filed를 바로 접근할 수 없기 때문에

함수를 써서 플러스 마이너스를 해준다.

사용자 입장에서 보면 마음대로 value값을 바꾸면안된다.

그래서 함수를 통하여서 총 실행되는 함수의 합산으로

field가 결정된다. --> field는 약간 기본값.

바로 interchangable이 안된다.

java의 개념이 아니라 객체 지향적 언어는 이렇게 사고하게 된다.

객체를 써서 모든 것을 다루는 연습을 하게 된다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

module.exports와 exports 차이 이해하기

https://jongmin92.github.io/2016/08/25/Node/module-exports_exports/

export mdn

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.

import

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

  it('화살표 함수로 작성된 메소드 호출시 this를 확인합니다', () => {
    module.exports.value = 100 
    ///filed값을 100

    const counter = {
      value : 0,
      increse: () => {
        this.value++
      },
      decrease: () => {
        this.value--
      },
      getValue: () => {
        return this.value
      }
    }
    

value:0; -> 객체 이기 때문에 '='이 아니고 ':'을 쓴다

javascript 는 객체 지향 언어가 아니였는데 객체 지향 언어로 되면서 key:value값이 중요하게 되었다?

increase가 함수의 역할을 하지만 사실 함수는 아니고 key값이다
method이다.

메서드 정의

주의 : 단축 구문은 익명(anonymous) 함수 (…foo: function() {}… 에서처럼) 대신 유명(named) 함수를 사용합니다. 유명 함수는 함수 본체에서 호출될 수 있습니다 (이는 참조할 식별자가 없기에 익명 함수에게는 불가능합니다). 자세한 사항은, function 참조.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions

var obj = {
  a : "foo",
  b(){ return this.a; }
};
console.log(obj.b()); // "foo"

var bar = {
  foo0 : function (){return 0;},
  foo1(){return 1;},
  ["foo" + 2](){return 2;},
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

메소드가 객체 지향적인 언어에서는 함수처럼 사용된다.

javacript도 객체 지향적인 언어가 아니여서

function인데

{} => 에서는 객체가 주체가 되기 때문에 function

객체로 생각하는 법을 알게 하기 위해서 method를 쓴다.

객체 method는 function과 같은 기능을 한다..

차이점은 있다.

다른 언어에서는 구분이 되어있지만 javascript에서는 2개다 쓴다.

객체 지향언어는 function이 없네요. 객체 안에서 이루어지는데. key value가 중요한것이고

   this를 설정하면 let을 설정한다.
   선언식이랑 비슷하다고 생각하면 된다.
   
   const mycar = new Car('mini', 'bmw', 'red')

mycar가 인스탄스를 만들어준다.

new라는 키워드가 인스탄스를 만들어주는 생성자이다. 
this 라는 존재이다.

생성자 호출

생성자 호출은 객체.메소드() 과 같이 객체 내에 메소드를 호출하는 방법과 비슷하지만, 객체가 new 키워드를 이용해서 만들어졌다는 것이 다릅니다. 이 때의 객체는 우리가 인스턴스라고 부릅니다. 즉 인스턴스.메소드() 의 형태의 호출입니다.

카운터를 클래스로 만들어봅시다.

class Counter {
  constructor() {
    this.value = 0; 
    생성자 호출을 할 경우, 
    this는 new 키워드로 
    생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() 
생성자 호출


counter1.increase()
counter1.getValue() // 1

let은 선언을 해야되는데

new 키워드를 선언해줌으로써

this 를 선언해주는 결과가 되면서

temporary한 선언식이 된다.

메모리를 덜 잡아서 추천되는 방식인것같다.

    function Car(name, brand, color) {
      this.name = name;
      this.brand = brand;
      this.color = color;

      this_value_in_constructor = this;
      name,brand,color
    }
    this를 설정하면 let을 설정한다.
    선언식이랑 비슷하다고 생각하면 된다.
    그동안 넣었던 name,brand,color가 this_value_in_constructor
    
    const yourcar = new Car('911', 'porsche', 'black') 
    
    new가 선언이 되어서 instance가 생성이 되어서
    
    console.log(this_value_in_constructor)

class는 대문자가 된다.

WebAssembly.Instance

new 키워드를 이용해 함수를 호출할 수 있습니다


    const secondcar = Car('spark', 'chevrolet', 'violet')
    expect(secondcar.name).to.eql('spark') 
    이 코드는 TypeError를 발생시킵니다
    expect(secondcar).to.eql(undefined) 
왜일까요?
  global property임.
    expect(this_value_in_constructor).to.eql(undefined)

https://redgolems.tistory.com/33

new 키워드를 이용해 함수를 호출할 수 있습니다

Function.prototype.apply()

@channel this 개념이 너무 어렵다고 하셔서, 참고자료로 쓸 수 있는 영상을 공유합니다.
*참고: this 개념에 대한 중요성은 갈수록 약화되고 있습니다. call, apply, bind 사용도 마찬가지죠. 그러나 legacy코드에서 this 사용은 여전하고요, 객체 지향에서는 최소한 new 키워드를 이용할 때의 this 는 알아야 합니다. 이후에 리액트에서도 bind 얘기가 나올거예요~ 그래서 “알면 좋다. 하지만 디테일을 다 알 필요는 없다” 고 말씀드리는겁니다 :미소짓는_얼굴:
https://vimeo.com/343945840/8ae87a0933
https://vimeo.com/343945867/acdb93b26a