2023/06 8

프로토타입 체인 찾기 재귀 함수

const checkJokbo = (para, count) => { if (typeof para !== "object") { console.log("객체만 써"); return; } else { if (!count || 0) { console.log(`조상님 찾기 시작!`); count = 1; } else { count = count; } if (para.__proto__ == Object.prototype) { console.log(`${count}촌 : Object`); console.log("조상님 찾기 끝!"); return; } else { console.log(`${count}촌 : ${para.__proto__.constructor.name}`); count++; checkJokbo(par..

getter, setter 프로퍼티

# 왜 포스팅하니? getter setter 프로퍼티를 접하고 신기해서 써봄.. 이 문법에대해서 사실 몰랐다. 근데 생각보다 꽤나 유용할것 같아서 포스팅하려고 함. # 내가 문제로 삼았던것. const obj = { dog1: "무찌", dog2: "도리", teamName: obj.dog1 + obj.dog2+'듀오', }; 위 코드는 에러가 뜬다 요렇게 참조에러가 뜬다. teamName프로퍼티가 dog1과 dog2를 참조하는건데 teamName프로퍼티가 자기자신 obj를 참조하는 시점이 실행컨텍스트의 코드평가할때 참조하려고해서 참조에러가 뜨는거다. 호이스팅이 발생하는거지. 그래서 이걸 억지로 만들어보려면..? - 즉시실행함수 const obj = { dog1: "무찌", dog2: "도리", }; (..

객체를 리턴하는 함수 vs 생성자함수 vs 클래스

객체지향을 모르고 걍 코더로써 코딩을 할때 이 세가지의 차이를 잘 몰랐었다. 근데 사실 계속 코드짜면서 굳이? 왜 클래스로 객체를 만들까? 이런 의문은 있었다. 뭐 이걸 공부하기 전까진 동작이되게 코드를 짜는정도 수준이었던것같다. 그래서 이번에 공부하다가 이 세가지의 차이점에 대해서 명확하게 구분하기위해 포스팅을 해보겠다. 일단 세가지 예시코드를 보자~ # 객체를 리턴하는 함수 const makeDog = (name, age) => { return { name, age }; }; 저 함수를 호출하면 객체가 튀어나온다. console.log(makeDog("무찌", 2)); //{ name: '무찌', age: 2 } 이렇게 함수에다가 적절한 파라미터를 넣고 함수를 호출하면 객체를 만들 수 있다. # 생성..

메서드가 뭐야?

흔히들 메서드는 객체안에 존재하는 함수? 같은걸로 생각을 한다. 뭐 기능면에서는 동작이야 다 잘되겠지만.. 일단 아래코드를 보자. const obj = { 화살표함수: () => { console.log("화살표함수"); }, 메서드() { console.log("메서드정의방식 메서드"); }, 표현식: function () { console.log("표현식"); }, }; 객체 obj에 저렇게 프로퍼티? 메서드를 써봤다. 일단 코드에서 봐서 알겠지만 저기서 메서드라고 적힌 함수?만 메서드다 일단 다 호출해보면 모두 제대로 호출된다. const obj = { 화살표함수: () => { console.log("화살표함수"); }, 메서드() { console.log("메서드정의방식 메서드"); }, 표현식..

생성자 함수, prototype, __proto__, constructor 관계 구조.

# 기본 코드 const Dog = function (name) { this.name = name; }; const dog1 = new Dog("무찌"); Dog라는 생성자 함수와 이 생성자 함수로 새로운 객체를 만들어, 식별자 dog1에 할당했다. 기본적인 생성자함수의 문법이다. # Dog의 프로퍼티 console.dir(Dog); 위 코드를 쳐보면 뭐 이렇게 생겼다. 우리가 주목할건 저 prototype이라는 프로퍼티다. 저 prototype프로퍼티를 또 펴보면 요렇게 생겼고 constructor이라는 프로퍼티가 또 들어있다. 저 constructor이라는 프로퍼티를 또 펴보면 얘는 Dog라는 함수란다.. 읭? 우리가 처음 만든 Dog 생성자 함수다. 여기엔 또 prototype이 들어있다. 저 pr..

운동을 시작해야겠다.

고질적인 허리통증때문에 허리운동은 가끔하고있다. 운동기구를 언제까지 빨랫대로만 쓸수는 없으니.. 근데 작년에 프로젝트 개발을 하면서 뭐 스트레스도 많이받고 법적문제도 해결해야했기에 혼술을 자주마셨다. 먹고싶은건 바로바로 시켜먹고.. 물론 모아둔 돈도 와장창 깨졌지만, 살이 엄청 쪘었다. 내 인생에서 하이스트웨이트를 찍은것같다.. 거의 90? 키로까지 됐었으니.. 그래서 올해초?에 편의점알바하다가 하루 아팠는데 꾸역꾸역 일을 해내고 집에오니 기절을 했던때가 있었다. 그때 너무 아파서 3일정도 물or음료만 처마셨었는데 살이 훅빠지더라.. 이때부터 다이어트?를 시작헀다. 지금 한 2개월 좀 넘게 지났고 약 12~13키로 감량이되서 70키로 중반정도 되었다. 이게 내 나이 남성 평균무게라고 하더라. 근데 이건 ..

personal/dailyLife 2023.06.13

객체를 커스텀해보자. 프로퍼티어트리뷰트 (플래그)

# 프로퍼티가 뭘까? 다시 생각해보자. const obj = { key: "value", }; 뭐 이런식으로 생긴게 객체라고 생각을 한다.. 저 코드만 봐서 보이는게 obj라는 식별자(객체참조)랑.. key, value라는 키,값이 쌍으로 보인다. 저 코드에선 객체, 키, 값은 명시적으로 보이지만 프로퍼티?라는건 사실 크게 안보인다. 그래서 프로퍼티라는 용어를 난 코딩할때 잘 안썼었음.. 정확히는 저 키와 값 한쌍을 프로퍼티 하나라고 부른단다. 메서드는 뭐 다른 개념이고.. 암튼 그룹개념으로 나눠보면.. 뭐 이렇게 생각을 해보장 # 내부슬롯 내부 메서드 근데 저 위에 그림은 뭔가 좀 음.. 조금 안맞는 느낌이 있어서 그림을 그려보겠다. 일단 이 이유는 아래코드를 쳐보자 console.log(Object...

즉시실행함수

# 일반적인 코드에서 식별자에 접근해서 참조해보자 - var선언 var dog = "무찌"; 개발자도구 콘솔에서 dog를 타이핑하면 저렇게 참조값을 가져와준다. 이게 전역변수로 선언된거다 ++ let이나 const는? 얘네는 개발자도구 콘솔에서 undefined로 뜬다. 그 이유는 실행컨텍스트에서 선언적환경레코드(declarative enviroment record)에 존재한다고 한다. 이건 아직 뭔지모르겠음. # 그럼 코드 전체를 즉시실행함수 리터럴로 감싸고 호출해보면? (function () { var dog = "무찌"; })(); 이렇게 식별자 참조를 할 수가 없게된다. 이렇게 즉시실행 함수로 코드 전체를 감싸면 전역변수생성을 막을 수 있다. # 모듈패턴 사실 오늘 포스팅은 이게 메인이다.. le..