객체(Object)

객체 생성 방식

1 ) 객체 리터럴, 2)생성자 함수, 3) Object.create()

객체 리터럴 객체 생성시, 컨텐츠를 그대로 대입 연속된 구조체, 연관된 데이터를 일정한 방법으로 변환하고자 할때 많이씀 ex) 서버에게 주소를 DB에 넣어달라고 요청할때, 하나의 객체로 전송한다. (각 아이템들을 하나하나 개별 전송하지 않음)

클래스 new 연산자로 객체 인스턴스 생성 extends 키워드로 상속 특정 구조의 객체를 여러곳에서 사용해야 하는 경우 클래스로 필요할 때마다 인스턴스를 생성하면 재사용성, 유지보수 편리함 등 장점이 있습니다.

1) 객체 리터럴 const person = {   name: "길동",   age:21,   printName(){     console.log(`${this.name}`)   } } 1. key 값이 숫자로 시작하거나, 공백, 특수문자를 포함한 경우 ''를 붙여서 사용 var emotion = {^^: 'smile} var emoticon= {'^^': 'smile'}; var id = { 0A: 10 }; var id = { '0A': 10}; 이 경우, 대괄호 [ ] 를 이용해서만 호출이 가능하다. console.log(emoticon.^^); console.log(emoticon['^^']) // smile 2. key값을 변수로 호출 가능 이 경우에도, 대괄호 [ ] 를 통해 접근 var profile = {   age  : 10,   name  : '철수' } var key = 'name'; console.log(profile.key); console.log(profile[key]); // '철수' 3. 프로퍼티 축약 var name = 'bar'; // 축약 var foo = {   name }; console.log(foo.name) // 'bar' 4. key에 계산식 사용 var num1 = 1; var num2 = 2; var strHello = 'hello'; var newObj = {     [1 + 1]: 'first',     [num1 + num2]: 'second',     [strHello + num1]: num2,     [`${strHello} - ${num1 + num2}`]: 'fourth'     }; console.log(newObj); //{ '2': 'first', '3': 'second', hello1: 2, 'hello - 3': 'fourth' }

2) 생성자 방식 2-1 . new Object() : new 연산자를 통해 Object 객체의 생성자 함수를 호출 var myObj = new Object(); myObj.name = '카레유'; myObj['age'] = 20; myObj.hello = function(){     return `이름은 ${this.name}이고, 나이는 ${this.age}입니다.`; }; 2-2. new 사용자 정의 생성자 : 직접 생성자 함수를 만들어 객체를 생성 class Person {   constructor(first, last, age, gender, interests) {     this.name = {       first,       last     };     this.age = age;     this.gender = gender;     this.interests = interests;   }   greeting() {     console.log(`Hi! I'm ${this.name.first}`);   } } let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']); han.greeting();

3) Object.create() : 프로토타입 상속을 통해 객체를 만드는 방식   var parent = {a:10, b:20};   var child = Object.create(parent); console.log(child.a);  // 10

 

this / 직접 객체 쓰기

this.name(o) / person.name(x)

만약 두 개의 다른 person 객체가, 각각 다른 이름으로 인스턴스가 생성된 상태에서 이름 출력을 위해 name을 참조할때, 

-> 멤버 컨택스트가 바뀌는 경우에도 정학한 값을 사용하게 해준다. this는 실행중인 코드가 속해있는 객체를 의미하기 때문

---

참고한 블로그글

[JS] 자바스크립트: ES6 객체 리터럴 기능 3가지

[JS, ES6] 객체 리터럴 한눈에 살펴보기