[Javascript] 객체, 생성자 함수 숙지사항

객체

• 객체는 키와 값으로 구성된 프로퍼티의 집합이다.
• 당연히 null인 객체의 프로퍼티 참조 시 에러발생

for-in

• 객체의 문자열 키를 순회하기 위한 문법이다.
• 순서보장 x + 추가적인 프로퍼티까지 순회하기 때문에 배열에 사용 부적합
• 객체 순회 적합

for-of

• 위의 문제점 때문에 배열 순회 시 맞춤형 문법 만들어짐
• 순서보장 o + 배열 요소들만 순회함
• 배열 순회 적합

 

얕은 복사

• 객체의 복사는 참조이다.

Object.assign(target, ...source)

• 얕은복사는 Object.assign(target, ... source)를 이용해 복사 가능

const original = {name: '철수', age: 12};
const clone = Object.assign({}, original);
clone.name = '영희'

console.log(original) // {name: '철수', age: 12}
console.log(clone); // {name: '영희', age: 12}

• 다만, IE는 지원 x라는 점 + 객체내부의 객체(객체 프로퍼티로의 객체)는 그대로 참조된 상태라는게 문제다.

ES6 Spread Operator

• 마찬가지로 얕은 복사, 깔끔한 코드가 장점

const original = {name: '철수', age: 12};
const clone = { ...original};
clone.name = '영희'

console.log(original) // {name: '철수', age: 12}
console.log(clone); // {name: '영희', age: 12}

• Object.assign()과 마찬가지로 얕은복사만을 지원, 객체내부의 객체는 그대로 참조된 상태

 

깊은 복사

• JSON 메서드를 이용하는 방법과 외부 라이브러리 활용 방법이 있다.
• JSON 메서드는 객체 -> JSON스트링 -> 객체 변환을 통해 깊은 복사를 한다.

const original = {profile: {name:'철수', age:12}, grade: 'A'};
const clone = JSON.parse(JSON.stringify(original));

clone.profile.name = '영희';
clone.grade = 'B';

console.log(original) // {profile: {name: '철수', age: 12}, grade: 'A'}
console.log(clone); // {profile: {name: '영희', age: 12}, grade: 'B'}

• 이 방법은 복잡한 객체의 처리 속도가 느리다는 점이 있다.

StructuredClone

• structuredClone(value);로 깊은 복사 가능
• 다만 Function객체, DOM node, 몇몇 파라미터들에선 사용 제한이 있다.
• 완벽히 모든 브라우저에서 이 기능을 제공하는 것이 아니다.

 

프로퍼티

• 프로퍼티의 이름이 유효한 자바스크립트 이름이 아니거나 예약어라면
• 프로퍼티 값은 대괄호 표기법으로 읽어야 한다.
• -는 올 수 없으나 프로퍼티 값으로 사용했고, 이를 대괄호 표기법으로 읽는 모습

student['t-t'] = 1;

• c++의 map처럼 객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 주어진 키와 값으로 프로퍼티 생성해서 객체에 추가함
• delete person.gender; 처럼 delete를 이용해 객체의 프로퍼티 삭제 가능

생성자 함수

• 생성자 함수 이름은 일반적으로 대문자로 시작함
• this에 연결되어 있는 프로퍼티와 메소드는 public 속성을 가지고
• 생성자 함수 내에 선언된 일반 변수는 private 속성을 갖는다.

function Student(name, age){
	this.name = name;	// public
    this.age = age;		// public
    var p = 0;			// private
    this.study = ()=>{	// public
    	console.log('공부')
    }
}