분노 그 잡채

2024/01/30

대상을 객체화 해서 표현하는 경우, 

calculatorCircleArea(); 

calculatorRectArea();

circle.area();

rect.area();

이런식으로 일반 함수 vs class를 이용해 인스턴스객체으로 영역을 구하는 방법 예시를 보여주셨다. 

이 개념을 확장하고 다양한 패턴으로 응용해서, 객체로서 어떤 대상을 어떻게 모델링 할 수 있는가에 대한 훈련을 꾸준히 해야할 것이다. 

+ JS에서도 TS처럼 class에서 private 처럼 보호할 수 있는 문법이 생겼다고 한다. #을 붙이면, 순수 js에서도 외부로부터 데이터를 보호할 수 있다.

이건 브라우저 호환성에 따라 바벨을 이용해 번역을 해서 사용해야할 수도 있다. 

class Rect {
	#width; 
	#height;
    ...

2024/01/30

어떻게 생성하고, 접근하고, 조작하냐에 대한 내용

{
	['class name']: 'dody'
}

이런식으로 computed property를 불러올 수 있다.  (?, 내가 글로 적고도 아직 이해 안되는 부분) 

- 객체 생성 방법 

(1) 객체 리터럴 

(2) 함수를 이용해 객체를 리턴하는, 마찬가지 이것도 객체 리터럴을 리턴하는 것이다. 

(3) class를 이용해 인스턴스 객체를 리턴하는 것

if(boxshape instanceof Shape){}

Shape라는 class로 만든 인스턴스 인지 확인해보는 연산자

- 객체를 변형하는 방법

(추가) box.color = 'blue'; 

(삭제 연산자 사용) delete box.color;

- 데이터 복사 방법

const box1 = box;

=> 객체는 참조타입이기 때문에, 원본이 바뀌지 않지 (???, 이거 배웠었는데 기억이 안나네 )

(1) Object.assign({}, box); 

(2) {...box, color: 'blue'};  - 전개연산자 

(3) JSON.parse를 이용해 객체를 문자열로 바꾸고, 다시 객체로 변환하는 작업

2024/01/29

생성기 함수는 제너레이터 함수 라고도 한다. 놀랍게도 초면인 내용.. 아직 갈길이 상당히 멀다는 것.

보통의 함수들과는 메커니즘이 다르다.

1. 값을 반환하는데 함수를 종료되지 않기도 한다. 종료되는 시점을 정할 수 있다. 

2. 클로저 공간에 데이터를 가두는 테크닉을 사용하지 않는다.

생김새, yield, next를 위주로 알게 되었다. 

기존의 함수를 하나 만들어 예시를 살펴보자. 

function makeInfiniteEnergyGenerator() {
  let energy = 0;
  return function (booster = 0) {
    if (booster) {
      energy += booster;
    } else {
      energy++;
    }
    return energy;
  };
}

const energy = makeInfiniteEnergyGenerator();

for(let i =0; i<5; i++){
    console.log(energy());
}

console.log(energy(5));

 위의 예시를 제너레이터 함수로, 같은 목적을 수행하도록 해보자. 

function * infiniteEnergyGenerator() {
    let energy = 1;
    while(true){
        const booster = yield energy;

        if(booster){
            energy += booster;
        } else {
            energy++;
        }
    }
}

const energyGenerator = infiniteEnergyGenerator();


for(let i =0; i<5; i++){
    console.log(energyGenerator.next());
}
console.log(energyGenerator.next(5))

선생님께서 말씀하시길, 아주 무섭게 생긴 함수가 아닐수 없다 하셨다. while(true)에서 벌써 후덜덜 거리는거다. 거기에 return 이없다. 어쩌면 무한으로 코드가 실행되다가 끝나버릴 수도 있는 것이다. 

return을 따로 해주지 않는데, console 찍힌 값을 살펴보면, {value: ~, done: ~} 이렇게 생긴 객체를 리턴해주고 있다. 

제너레이터 함수는 본인을 실행시키지 않고, 실행시키는데 필요한 도구를 객체에 담아 넘긴다. 

위의 예시에서 next()라는 함수로 제너레이터 함수를 실행시킨다.

그리고 next()함수로 얻게 된 결과 값 중 done은 return여부를 알려준다. 

이 제네레이터 함수는 리액트나 뷰 프레임워크를 사용하게 되면 자주 만날 수 있다고 하는데.. 나는 도대체 언제 만날수 있을까?

2024/01/26

자바스크립트가 작동하는 방식에는 호출스택과 이벤트 루프가 있구나. 

함수에 선언했다는 것은 메모리에 올렸다는 뜻. 

호출스택만으로 모든 자바스크립트를 실행 시킬수는 없다.

이벤트 루프가 호출스택의 나머지를 채워주려나? 비동기를 설명하는 데는 이벤트루프 개념이 필요하다. 

2024/01/26

promise에 대한 세션

동기 코드란, 5번째 라인이 실행되기 전에 6번째 라인이 실행될 수 없는것. 순차적으로 실행하는 상황

비동기 코드란, 앞의 상황이 확정되지 않아도 그 다음 코드를 실행할 수 있는 동시 실행하는 상황

그럼 내가 해왓던 js는 동기적언어이다? > 응응

그걸 비동기적으로 사용하려면, setTimeout, promise, async await으로 할 수 있다. 

여기서 내 뇌가 심히 꼬이기 시작. 일단 1차 회독은 대충 와이어프레임만 볼것.

06:20 초 쯤부터 promise가 제대로 시작하니 다음에는 그쯤 부터 볼 것. 

2024/01/26

비동기 함수는 promise의 메커니즘 위에서 작동하는 코드이기 때문에 충분히 이해하는 것이 중요하다.

선생님께서 예시로 한줄한줄 동기적으로 작동하는 코드를 만들어 본다고 하셨다. 

setTimeout을 이용한 delay 함수를 만들어서 then then then 으로 호출했는데, promise만으로선 동기적으로 작동하지 않았다. 

그래서 async와 await를 사용해서 동기적으로 보이게 만들기 성공했다. 어찌됐든 js는 비동기로 작동하기 때문에 이건 동기적으로 보이게 하는 작업에 불과하다.  

<나에게 주는 과제 >

- 직접 예시 코드를 실행해보고 본질을 느끼고 올것

그러하다 promise와 thenthenthen으로는 동기적으로 코드를 실행 할 수없다.  그러면 async await를 사용하면? 옳다구나! await를 사용하니 완전 동기적으로 작동하는걸 볼 수 있다. 아주 아름답군. async await가 조금 이쁘게 보일지도? 

- promise를 다시 한번 더 살펴보고 올 것

CH06_31 개념과 구조-동기와 비동기

2024/01/26 

일급함수는 함수를 일반적인 값으로 취급하는 개념을 말한다.

값으로 취급한다는건, 인자나 리턴 값으로도 함수를 사용할 수 있다는 뜻이다.

함수를 인자로 받는 경우, 함수를 리턴하는 경우 를 break point를 걸어서 헷깔린 코드를 하나하나 짚어주셨다. 

이중 리턴을 함수로 하는 경우는 리턴된 값을 변수에 담아서 이름을 지어줄 수 있다. 

이건, 호출하는 부분에서 이것이 여름세일 데이터인지, 겨울세일 데이터인지 알 수 있기 때문에

코드 자체의 표현력이 커진다.  > 이 부분이 이번 강의의 핵심인듯하다. 재밌었다. 

+ 일급함수의 이름은 왜

함수 자체를 일급객체로 간주한다는 뜻. 일급 객체는 first class object

일급 객체의 조건은, (1) 변수나 데이터 구조 안에 담을 수 있다. (2) 인자로 전달 할 수 있다. (3) 리턴 값으로 사용할 수 있다.

일급 객체의 조건을 들으니, 함수가 일급객체 취급을 받는 지 알겠고, 그런 함수에게 '호' 로써 일급을 붙였는지 알겠다.

완전 일급함수 찰떡이잖어!? 

+ 일급 함수의 사용법은 무궁무진 하다고 한다.

흠, 이번 강좌는 자주쓰는 코어한 객체메소드에 대한 내용이다. 이런 강좌 재밌다! 분명 자주 사용하는 메소드임에도 잘 모르고 사용하고 있다던가, 숨겨진 약점을 파악하고 보완할 수 있다! 

Object.assign()

- 객체 복제하는 메소드

- 복제 말고 객체를 병합할 때도 사용하기 편리한 메소드

const user = {name: 'dody' , age: 30}
const user2 = user;

위의 예시를 보면 user2는 user 객체를 복사한게 아니라, 하나의 객체에 두 변수가 접근하는것이다.

user2를 수정하면 user 값도 바뀐다. 그렇기 때문에 assign 메소드로 객체를 복제해서 컨트롤해야한다.

const user = {name: 'dody' , age: 30};
Object.assign({}, user);

{}와 user 객체가 병합된다. {}가 초기값이 되는 셈

이름을 바꿔도, 잘 바뀐다.  독립성을 가진 다른 객체가 된 것이다. assign으로 자유를 얻은 객체에게 박수를,,

Object.assign({name: 'dodody'}, user)

이렇게 코드를 적어본다면, 결과물은 user의 값이 리턴 될 것이다.  덮어쓰기가 된다.

Object.assign({gender: 'female'}, user)

이건 gender 프로퍼티가 추가될 것이다. 

한번에 여러개 객체를 합쳐줄 수도 있다.

Object.keys()

객체의 프로퍼티의 key 값을 배열로 반환한다. 

Object.values()

객체 프로퍼티의 value 값을 배열로 반환한다.

Object.entries()

key, value 두 값을 모두 쌍으로 묶어 배열로 반환한다.

Object.fromEntries()

쌍으로 묶여있는 key, value의 배열을 다시 객체로 전환해준다.

todo: 자바스크립트 중급 강좌: 140분 완성 듣고 정리하기

https://youtu.be/4_WLS9Lj6n4

생성자 함수 공부

객체를 만들때 아래와 같이 생성하는걸 객체리터럴이라고 함. 

const user = {
    name: 'dody', 
    age: 30
}

객체리터럴 말고 생성자 함수를 이용해서도 객체를 만들 수 있다. 같은 형태 객체를 여러개 만들어야 할때 생성자 함수로 하곤 한단다.

생성자 함수에는 룰이 2가지 있는데, 보통 생성자 함수 이름 첫글자를 대문자로, new 연산자로 호출하기

function User(name, age){
    this.name = name;
    this.age = age;
}

let user1 = new User('dody', 30);

작동시키는 코드를 보면, new 함수명(); 로 생성자 함수를 호출한다.

function User(name, age){
    // this = {}; 
    this.name = name; // this에 프로퍼티 추가
    this.age = age; // this에 프로퍼티 추가
    this.sayName = function (){
        console.log(this.name)
    } 
    // return this;
}

let user1 = new User('dody', 30);

생성자 함수를 사용하면,

1) 일일히 객체리터럴로 객체를 만드는것보다, 간편하고 일관적이게 객체를 만들어 사용할 수 있다.

2) 맨 첫줄, this 객체가 자동 생성된다고 볼 수 있음.

3) return을 따로 하지 않아도 this가 자동으로 리턴됨

4) 함수를 넣을 수 도 있고, user1.sayName(); // 'dody' 이런식으로 사용할 수 도 있다.

todo: 자바스크립트 중급 강좌: 140분 완성 듣고 정리하기

https://youtu.be/4_WLS9Lj6n4

변수 var, let, const 차이 공부

변수 (let, const, var)

- let const : es6에 나온 변수

- var 와 let은 미리 할당해두지 않아도 된다는 점에서 크게 다르지 않아, 바꾸어 사용해도 크게 문제가 없다. 

- var과 let의 차이점은? var은 한번 선언된 변수를 다시 선언할 수 있다. let은 한번 선언되면 변수를 다시 바꿀 수 없다.

var name = 'dody';
console.log(name); // dody
var name = 'dorothy';
console.log(name); // dorothy

let name = 'dody';
console.log(name); // dody
let name = 'dorothy';
console.log(name); // error!

변수와 호이스팅? 

- var은 선언하기 전에 사용할 수 있다.

console.log(name); // undefined, name이 나오기 전에 사용했는데 에러를 일으키지 않았다. 
var name = 'mike';

- var 변수가 스코프 최상위로 끌어올려진 것처럼 작동하기 때문. 이건 호이스팅이라는 개념이 작동하기 때문.

- console.log 값이 undefined가 나온다는 것은 선언(name)은 호이스팅이 되지만, 할당('mike')은 호이스팅이 되지 않기 때문.

var name;
console.log(name); // undefined
name = 'mike';

- 같은 상황에서 let은 에러가 나는데, let은 호이스팅이 되지않는걸까? 그건 아니다. 모든 변수는 호이스팅이 된다.

console.log(name); // ReferenceError!
let name = 'mike';

- 호이스팅 : 스코프 내부 어디에서든 변수 선언은 최상위에 선언된 것처럼 행동

- 근데 왜 let const 는 오류를 뱉는 것일까?

- 이유는 Temporal Dead Zone, TDZ 라는것 때문. TDZ에 있는 영역의 변수들은 사용할 수 없다.

- let과 const는 TDZ의 영향을 받는다. 그렇기 때문에 변수선언을 하기 전에는 에러가 발생한다.

- 강제로 TDZ의 영향을 받게 한 이유로는 코드를 예측가능하게 하고, 잠재적인 버그를 줄일 수 있기 때문이다. 안정적인 코드를 위해 let, const를 주로 사용하자.

- 아래 예시를 보면, 호이스팅은 스코프 단위로 작동하기 때문에 let age = 30; 을 위에서 선언해주었다 한들, 스코프는 함수영역이기 때문에 console.log(age); 는 TDZ에 속했다는 판단을 받아 에러가 발생!

변수의 생성과정

1. 선언단계 ->  2. 초기화단계 ->  3. 할당단계

var

- 1. 선언단계, 초기화단계가 동시. 2. 할당단계

- 선언단계, 초기화단계가 동시에 되기 때문에, 할당하지 않고 호출해도 에러가 나지 않고 Undefined가 나오게 되는 것. 

let

- 1. 선언단계 2. 초기화단계 3. 할당단계

- 선언단계와 초기화 단계가 분리되어서 작동, 초기화 단계는 실제 코드에 도달했을때 작동하기 때문에 reference error가 발생하는 것

const

- 1. 선언 + 초기화 + 할당 

- let과 var는 값을 바꿀 수 있기 때문에 할당 단계가 나뉘어져있는 것

var age;
age = 20; // 가능
let name;
name = 'dody'; // 가능
const gender;
gender = 'female' // 불가능, 선언+초기화+할당 이 동시에 작동하기 때문

변수의 스코프

var: 함수스코프 function-scoped

function dody(){
    var say= 'hello';
}
console.log(say); // error. 함수 밖에서 호출하는 경우 오류

let, const : 블록스코프 block-scoped

블록에서만 접근 가능하며, 외부에서는 접근 불가능하다. 즉 지역변수라는 뜻

ex. 함수, if문, for문, while문, try catch문 등..