개인코딩개발공장

객체지향을 모르고 걍 코더로써 코딩을 할때 이 세가지의 차이를 잘 몰랐었다. 근데 사실 계속 코드짜면서 굳이? 왜 클래스로 객체를 만들까? 이런 의문은 있었다. 뭐 이걸 공부하기 전까진 동작이되게 코드를 짜는정도 수준이었던것같다. 그래서 이번에 공부하다가 이 세가지의 차이점에 대해서 명확하게 구분하기위해 포스팅을 해보겠다. 일단 세가지 예시코드를 보자~ # 객체를 리턴하는 함수 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("메서드정의방식 메서드"); }, 표현식..

# 기본 코드 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키로 중반정도 되었다. 이게 내 나이 남성 평균무게라고 하더라. 근데 이건 ..

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

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

# 변수의 목숨이 붙어있는 시간 딥다이브에선 이걸 변수의 생명주기라고 하는데.. 그냥 이 변수를 참조할수 있는 시간을 말한다. //존나 //오래 //걸리는 //코드1 var value = '멍청이'; //존나 //오래 //걸리는 //코드2 이런식으로 전역스코프에 변수 value를 선언하였다 이걸 그림으로 그려보면 자바스크립트는 선언부분을 다 끌어올린다. 그래서 모든 식별자에는 메모리주소가 연결되고 그곳에있는 값으로 참조할 수 있다. 그림을 좀 복잡하게 그렸는데 걍 전역에서 선언한 변수는 코드가 끝날때까지 참조할 수 있다는거다.. 사실 그림이 정확하지 않는데 순서대로라면 선언부분 var value부분만 먼저 실행되고 오래걸리는코드1동안 undefined로 참조되고, 그다음 value = '멍청이'재할당문이..

# 스코프란 무엇일까? {} //블록레벨 스코프? function fuc(){} //함수레벨 스코프? 스코프를 대충 중괄호다 라고 생각하는 사람들도 있을거다. 스코프에 대해서 어떤것인지 정확히 생각해보자. # 스코프란 식별자가 유효한 범위다. // --우주어딘가(전역) { // --집밖 var dog = "무찌"; { // -- 우리집 { // -- 무찌전용침대 다이소5천원짜리 } } } 얜왜 테두리 검은색이냐 // --우주어딘가(전역) { // --집밖 let dog = "무찌"; { // -- 우리집 { // -- 무찌전용침대 다이소5천원짜리 } } } 요렇게 var이나 let으로 선언한 dog이라는 변수에 값으로 무찌가 바인딩 되어있다. 그리고 블록문을 중첩해서 써놨다. 대충 이름붙여서 우주/집밖/..

# 일반적인 선언문 let value = "바보"; console.log(value); 일반적인 선언문은 이렇게 생겼다. 그런데 자바스크립트는 ㅈ같이도 아래와 같은 코드도 동작한다. # let var const없이 선언한 변수 value = "바보"; console.log(value); 잘불러온다..ㅡㅡ 이걸 use strict와 같이쓰면 에러뿜어준다. 될수있으면 선언문을 쓸때 let const를 써서 변수선언을 하자. 파이썬에서 온 사람들은 이거 짜증날거다 ㅠ 근데 이건 변수선언이 아니다! # 이러한 경우에서 호이스팅은? console.log(value); value = "바보"; 없는 value를 참조하려했다고 에러뿜어준다. 이 코드가 변수선언으로 동작할때는 호이스팅이 된다고 볼수 없다.(아래에 더씀..

# 호이스팅이란? https://jacobowl.tistory.com/136 변수 호이스팅, 그리고 초기화 initialize, Temporal Dead Zone 초기화는 변수선언시에 최초로 undefined가 할당이 되는것을 말한다. 먼저 그림으로 살펴보면, let value = 'hello world'; 라는 코드가 실행되면 먼저 식별자 value가 가르키는 메모리주소1이 생성되고 이 jacobowl.tistory.com 이전에 변수의 호이스팅에 대해서 포스팅을 했었다. 코드는 위에서 아래로 순차적으로 실행되지만 변수를 선언하기전에 참조가 가능한걸 변수호이스팅이라고 한다. 함수도 이렇게 정의(함수는 선언이 아니라 정의라고함)하기 이전에 호출이 가능한걸 함수 호이스팅이라고 한다. # 함수 선언문에서의 ..