[21.06.02] 모각코 수요 스터디(온라인)

[Seunghun Kang]

❤ 수요 살롱

📅 6월 2일

☕ 장소 : 서울대입구역

⏱️ 시간 : 수요일 저녁 8시 ~ 10시

🙏 참석하실 분은 밑에 이슈 등록해주세요~!

[dbt]

참석

• JAVA 기말고사 공부

[hyunjun-kim]

참석

graphQL 혹은 함수형 프로그래밍 학습

[Seunghun Kang]

참석

• 모던 자바스크립트 Deep dive Prototype 파트 읽기

[김회준]

참석

• fp-ts Option 공부

[Seunghun Kang]

• 프로그래밍 추상화

  • 프로그램의 필요한 속성만 간추려내어 표현하는 것

• 객체

  • 속성을 통해 여러개의 값을 하나로 구성한 자료구조 (객체)

  • 상태 데이터(프로퍼티)와 동작(메서드)을 하나의 논리적인 단위로 묶은 복합적인 자료구조

  • (객체지향 프로그래밍) : 객체의 집합으로 프로그램을 표현하려는 프로그래밍

• 프로토타입

  • 객체의 상위 객체의 역할을 하는 객체로써 다른 객체에 공유 프로퍼티(메서드)를 제공 / 하위 객체는 상위 객체의 프로퍼티를 자유롭게 사용할 수 있음.

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

    • 프로토타입은 contructor 프로퍼티를 통해 생성자 함수에 접근 / 생성자함수는 자신의 prototype 프로퍼티를 통해 프로토 타입에 접근

    • 직접 접근할 수 없지만, __proto__ 접근자 프로퍼티를 통해 간접 접근 (단 직접 접근은 피하는게 좋다.)

      • 내부적으로 get, set 을 통해 호출됨

    • __proto__ 접근자 프로퍼티는 상속을 통해 사용된다.

      • 접근하는 객체에 접근하고자 하는 프로퍼티가 있는지 확인하고, 없으면 상위 객체를 순차적으로 검색한다. -> 최종 Object.prototype까지 타고 감

      • 단방향 링크드 리스트로 구현되어야 함. -> 서로간 순환참조시 무한 루프에 빠짐

• 함수 객체의 prototype 프로퍼티

  • 생성자 함수가 생성할 객체의 프로토타입을 가리킴 (화살표 함수와 메서드 축약 표현으로 정의시 prototype 프로퍼티를 생성하지 않음 - 없음 )

    • 프로토타입의 contructor 프로퍼티에 의해 생성자함수와 생성된 인스턴스가 연결됨

  • __proto__ 접근자 프로퍼티와 prototype 프로퍼티는 동일한 프로토타입을 가리킨다

구분	소유	값	사용주체	사용목적
__proto__	모든 객체	프로토타입 참조	모든 객체	객체가 자신의 프로토타입에 접근, 교채하기 위해 사용
Prototype	constructor	프로토타입 참조	생성자 함수	생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해 사용

---

반도 못 읽었네 흑흑

같이 읽어볼 자료들

• https://meetup.toast.com/posts/104
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

[김회준]

/*
 * 개념
 *
 * *** Option (https://gcanti.github.io/fp-ts/modules/Option.ts.html) ***
 * Some과 None으로 나뉘어지는 것. 있음과 없음의 개념
 * @see https://rinthel.github.io/rust-lang-book-ko/ch06-01-defining-an-enum.html?highlight=Option#option-%EC%97%B4%EA%B1%B0%ED%98%95%EA%B3%BC-null-%EA%B0%92-%EB%B3%B4%EB%8B%A4-%EC%A2%8B%EC%9D%80-%EC%A0%90%EB%93%A4
 * 위의 링크를 보면 왜 null, undefined 대신 Option을 써야하는지 잘 알려준다.
 * 그리고 여러 iterator, 다른 인터페이스와 상호작용으로 훨신 강력하게 사용할 수 있다.
 * */

import * as Opt from'fp-ts/Option'
import * as assert from'assert'
import {pipe} from 'fp-ts/lib/function'

/*** Constructor ***/

// type Option<A> = None | Some<A>
// * None의 인스턴스는 none
// * Some의 인스턴스는 some
// * isSome, isNone으로 체크 가능
Opt.some(1)
Opt.none

/* fromPredicate */
// 조건식에 통과되면 some(통과된 value) 아니면 none인 함수를 반환
const greaterThen10 = Opt.fromPredicate((d:number)=> d > 10)

greaterThen10(15)// some(15)
greaterThen10(5)// none

/*** destructors ***/

/* match(onNone, onSome) */
// none일때와 some일때와 분기 처리.
const matchOption = Opt.match(
  ()=> 'a none',
(a)=> `a some containing ${a}`
)
matchOption(Opt.some(10)) // a some containing 10
matchOption(Opt.none) // a none

/* getOrElse(onNone) */
// some이 있으면 some의 값을, none이면 onNone의 리턴 값을 줌
constgetOrElseFn = Opt.getOrElse(()=> 'hoejun')
getOrElseFn(Opt.some('kang'))// kang
getOrElseFn(Opt.some('im')) // im
getOrElseFn(Opt.none) // hoejun

/*** Guards ***/

Opt.isSome(Opt.some(1)) // => true
Opt.isNone(Opt.none) // => true

/*** interop ***/

/* fromNullable(v) */
// null, undefined => none
// value => some(value)

Opt.fromNullable(undefined) // none
Opt.fromNullable(null) // none
Opt.fromNullable(10) // some(10)
Opt.fromNullable('hi') // some(hi)

/* toNullable, toUndefined */
Opt.toNullable(Opt.none) // null
Opt.toUndefined(Opt.none) // undefined

/* fromNullableK(f) */
// fromNullable의 고차함수 버전
const stringOptionFn = Opt.fromNullableK((v)=>
typeof v === 'string' ? v :null
)
stringOptionFn(10) // none
stringOptionFn('hihi') // some('hihi')

/* tryCatch(f) */
// throw 되면 none, 아니면 반환된 값(v)이 some(v)

Opt.tryCatch(()=>{
throw newError()
})/*?*/ // none
Opt.tryCatch(()=>{
return 10
})/*?*/ // some(10)

/* tryCatchK(f)(v) */
// tryCatch의 고차함수 버전
constf = Opt.tryCatchK((v:number)=>{
if(v < 10) {
throwError()
  }
return v * 2
})/*?*/
f(5)/*?*/ // none
f(14)/*?*/ // some(28)

/*** instance ***/
// Option => Other Instance

import * as N from 'fp-ts/number'

/* getEq(Eq) */
// Option을 비교하는 Eq(비교기) 인스턴스를 만듬

// 이러면 이제 Eq<Option<number>>가 됨
const numEq = Opt.getEq(N.Eq)
numEq.equals(Opt.some(10), Opt.some(1))/*?*/ // false
numEq.equals(Opt.some(10), Opt.none)/*?*/ // false
numEq.equals(Opt.some(5), Opt.some(5))/*?*/ // true

/*** Model ***/

// interface None {
//   readonly _tag: 'None'
// }
// interface Some<A> {
//   readonly _tag: 'Some'
//   readonly value: A
// }
// type Option<A> = None | Some<A>

/*** Utils ***/

/* Do */
// 뭐하는 앤지 모르겠음..
Opt.Do /*?*/ // some({})

/* exists(f)(v) */
// pred를 받은 후 Option을 받아 some안의 value를 검증함

Opt.exists((n:number)=> n >= 1)(Opt.some(3))/*?*/ // true
Opt.exists((n:number)=> n >= 1)(Opt.some(0))/*?*/ // false
Opt.exists((n:number)=> n >= 1)(Opt.none)/*?*/ // false