객체 사용하는 방법
프로퍼티 접근 연산자
- .
const obj1 = {
name:"js"
};
console.log(obj1.name);- []
const obj1 = {
name:"js"
};
console.log(obj1["name"]);여기서 property key가 식별자 명명 규칙에서 벗어나는 경우
ex) "name":"js"
//이 경우 대괄호 접근 연산자만 사용 가능하다.key에 어떻게 string이 들어가지?
그러면 배열이나 객체도 들어갈 수 있을까?
=> 들어갈 수 없다.
배열이나 객체가 들어가는게 아니고 toStrig()으로 인해서 string으로 변환된 후에 들어간다.ㅇ
⚠️ 주의: 내용이 그대로 string으로 바뀌는 것이 아니다. ⚠️
"object"라고 바뀌는 경우도 존재한다.
객체에 관련한 메소드와 연산자는 어떤게 있을까?
- delete
- Object.assign(복사 될 객체, 복사 할 객체)
- Object.entries(객체) => 객체의 모든 property를 배열로 리턴
- Object.keys(객체) => 객체의 모든 property의 key를 배열로 리턴
- Object.freeze(객체) => 객체의 내부 값을 변경할 수 없도록 만든다.
- for in => 객체를 돌 수 있는 반복문
property랑 method랑 다른것 인가?
mdn을 참고 했을 때 property와 method는 다른 것이 아니다.
property 중에서 값이 function을 가리키는 참조라면 그 property를 method라고 부르곤 한다.
객체의 속성이 property이고, 객체안의 함수는 method라고 한다.
instance는 뭐지?
constructor method를 이용해서 만드는 객체
constructor method는 뭐지?
객체를 만들기 위해서 사용되는 함수
- 특징 1. new 연산자와 함께 사용된다.
- 특징 2. 생성될 instance의 property는 this로 정의한다.
- 특징 3. 여기서는 메서드를 정의할 수 없다.
그 이유는 생성자 함수에 메서드를 정의하면 instance가 생성될 때 마다 메서드가 생성되기 때문에 메모리 낭비가 심하기 때문이다.
instance는 constructor method로만 만들 수 있나?
방법은 2가지 이다.
1. function 키워드로 함수 생성 => new 사용해서 호출
-> 호이스팅이 가능하다, new 사용하면 undefined를 반환하고 안에 있는 함수는 프로토타입에 추가된다.
2. class내에서 constructor method 사용
-> 호이스팅은 되는데 초기화가x(결과적으로 참조오류 발생), new 사용하면 오류가 발생한다.
instance의 prototype안에 메서드를 추가할 수 있다 .
constructor로 객체를 만들었지 어떻게 알 수 있지?
- instanceOf라는 메서드 활용
- Prototype안에 :"constructor: 함수 이름" 이런 방식으로 나타난다.
호이스팅과 instance 생성 방식
위에서 첫번째 방법은 호이스팅이 되는데 두번째는 초기화가 안된다고 했다.
그 이유는 무엇일까?
=> 호이스팅이 되고 안되고의 기준은 뭔가요?
- 변수, 함수, 클래스의 선언방식과 스코프
함수 선언식은 실제 함수로 메모리에 저장되기 때문에 호이스팅과 초기화가 된다. => function 사용
하지만 함수 표현식은 호이스팅 되지 않는다. => 할당하는 방법
그래서 호이스팅과 instance 생성 방식에 무슨 관련이..?
- 첫번째 방법(function 키워드, new 이용)은 함수의 호이스팅 개념에 의해서 선언문 방식이기 때문에 호이스팅이 이루어지는 동시에 초기화가 된다. 따라서 참조 오류가 발생하지 않음
- 두번째 방법(class)은 let, const의 개념과 동일하다. 호이스팅은 되지만 초기화가 동시에 이루어지지 않아서 선언 전에 사용하려고 하면 참조 오류가 발생한다.
근데 호이스팅은 버그를 만들 가능성이 다분하다?
field
정의: constructor 밖에서 this 없이 instance의 proterty를 정의한다.
static field
this 사용 불가능
-> 이유는?
static field는 해당 클래스 자체에 포함되어 있는 필드 -> this를 사용하는 이유는? 인스턴스를 참조하기 위해서
클래스 자체에 포함되어있어서 this를 사용하면 클래스 자체를 참조할텐데 굳이 중복 참조할 필요가 없음
this를 사용하고 싶으면 static 메서드에서 사용할 수 있음
메서드에서 필드를 사용해서 가공을 하기 때문
getter / setter
getter: 반드시 값을 반환
setter: 하나의 인자를 필요
이 둘은 클래스에서 prototype이 된다.
둘 다 함수처럼
get getNo(){
return this.no+1;
}
set setNo(no1){
this.no = no1;
}이렇게 쓰이지만 접근 할 때에는 property와 같이 .을 사용해서 접근한다.
getter와 setter를 사용할 때 주의 할 점
필드 이름과 setter의 이름이 같은 것
encapsulation
객체 지향의 주요 요소 중 하나라고 한다.
JS는 기본적으로 은닉되지 않음 => 기본적으로 public
ES2019 이후 #를 사용해서 private class 필드를 선언할 수 있게 되었음
조건
- 클래스에서 첫번째로 정의해야된다.
- 클래스 안에서만 사용 가능 <-> 인스턴스에서 바로 접근 불가능
inheritance
extends를 이용해서 상속이 가능하다.
최종적으로 instance들은 Object이기 때문에 Prototype에서 어떤 class로 무엇을 상속 받았는지 확인 가능하다.
이렇게 상속하는 과정에서 기능을 덮어쓰는 등의 Overriding이 일어난다.
이때 super를 사용해서 부모 object의 함수를 호출할 수 있는데 super은 delete사용이 제한된다.
왜 super은 delete 사용이 제한되나?
super은 키워드지 프로퍼티가 아니기 때문
delete는 프로퍼티를 삭제하는 연산자이기 때문에
super와 this를 사용할 때
super로 먼저 함수를 호출 한 후에 this를 사용해야한다.
Why?
super은 자식 클래스의 생성자 함수에서 부모 클래스의 생성자 함수를 호출할 때 사용한다.
상속의 과정에서 부모의 클래스가 초기화 되어야 자식의 클래스도 초기화 될 수 있다.
하지만 this를 먼저 사용하면 부모의 클래스가 초기화 되고 자식의 클래스가 초기화 되기 전에 instance부터 생성하려하기 때문에 오류가 발생하는 것이다.
후기
호이스팅이 좋은게 맞나..? 버그를 발생시킬 위험이 높아서 선언문보다
함수 표현식을 더 자주 사용하고 싶다.
이번 객체 파트는 양도 많고 추가로 공부해야할 부분도 많아서 가장 더디고 정리하기 힘든 단원이었다. 하지만 결국 끝냈다 굿~
