분노 그 잡채

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

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문 등..

const test = ['a','b','c','d','e',null, undefined];

array 객체에서 null과 undefined가 들어있는 경우에 type이 맞지 않아 error가 발생하는 경험을 했다.

두번째 경험인거같아서 블로그에 메모할 때가 된거같아서 정리한다.

filter를 이용해서 쉽게 처리 가능! 

const test = ['a','b','c','d','e',null, undefined];
const newsTest = test.filter(el => el);

console.log(newsTest)
// ['a','b','c','d','e']​

객체 안의 함수

화살표함수에서는 this를 읽을 수 없음(? 더 알아보기) function 함수에서 this는 자기가 속해있는 곳으로 연결

// 예시1
const dody = {
    name: 'dody', 
    age: 30, 
    say: function saying(){
    	console.log(this.name);
    }
}

// 예시2
const dody = {
    name: 'dody', 
    age: 30, 
    say: function(){
    	console.log(this.name);
    }
}

// 예시3
const dody = {
    name: 'dody', 
    age: 30, 
    say(){
    	console.log(this.name);
    }
}

dody.say(); // dody 출력

getter, setter

getter: 값을 조회할 때 생성하는, 

setter: _name으로 이름을 짓는건, setter함수와 겹치지 않기 위해, param를 무조건 받아와야 함.

둘다 ()로 호출하지 않는다. get, set 둘 함수명이 같아도 된다. 배운 예시의 모든것은 아래와 같다. 

const number = {
    _a: 1, 
    -b: 2, 
    sum: 3, 
    calculate(){
    	this.sum = this._a + this._b
    },
    get a(){
    	return this._a;
    }
    get b(){
    	return this._b;
    }
    set a(value){
    	this._a = value; 
        this.sum = value + this._b
    }
    set b(value){
    	this._b = value; 
        this.sum = value + this._a
    }
}

// ex
number.a = 10
number.b = 8