TIL 19. Object(객체)

만약 프로토타입글을 보지 않았다면 보고온뒤 객체로 올것.
이유는 읽다보면 알게될지도,,

1. 의의

---

JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다.
객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로, 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

Object= property+method
:: property: 데이터를 의미
:: method: 데이터를 참조하고 조작할 수 있는 동작(behavior)

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다.

1-1 프로퍼티(Property = key: value)

프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다.
프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다.

- key : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
(문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다.)
- value : 모든 값
 
const Obj = {
  key1 : 'value',
  key2 : 2021,
  key3 : [],
  key4 : function(){
         console.log('안녕? 난 메소드야 함수인줄 알았지?');
         }
}

• 이미 존재하는 프로퍼티 키를 중복 선언하면
  나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
• 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.
• 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다
  . 또한 문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다.
• 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다.
• 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다.

1-2 메소드(method)

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
즉, 메소드는 객체에 제한되어 있는 함수를 의미한다.

:: 여기서 프로토타입으로 가는게 더 좋을듯.. 다녀오..

## 2. 객체 생성 방법 ---

2-1 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식이다.
객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호({})로 묶인 형태이다.

//리터럴 표기법 (initializer syntax)
//객체 초기자(object initializer)
const obj1 ={
  first_name: 'olaf',
  'last-name': 'snowman' // 자바스크립트에서 '-'는연산자이므로 유효한 이름이아니다. 따라서 따옴표를 사용해야한다.
  [30-2]: 28, //표현식을 프로퍼티 키로 사용하려면 키로 사용할 표현식을 대괄호로 묶어야 한다.
  d: {}
}; 

console.log(obj1.a) //'olaf'

const a = 'dongee';
const b = 2021;
const c = 'FE';

const obj2 = { a, b, c};

console.log(obj1.b) //2021

• 전체 객체의 멤버가 {} 내부에 콤마(,)로 구분되어 있다.
• 각 프로퍼티는 콜론(:)으로 key와 value로 구분되어 있다.

2-2 new 와 object 생성자 함수

• 주어진 값의 객체 래퍼(wrapper)를 생성
• 주어진 값이 null이거나 undefined이면 빈 객체를 생성해 반환.

// 생성자
const fruits = new Object();
// 프로퍼티 추가
fruits.name: 'watermelon';
fruits.weight: 10;
fruits.sayHi = function() {
  console.log('Hi, I am a' + this.name);
  }

console.log(typeof fruits); // object
console.log(fruits); //{name: 'watermelon', weight: 10, sayHi: f}

fruits.sayHi(); // Hi I am a watermelon.

:: 그냥 객체리터럴을 쓰자,, 아무리봐도 그게 더 편해보인다.

2-3 생성자 함수

사용자 정의의 객체를 정의하기 위해 자바스크립트에서는 class라는 키워드 대신 function을 사용한다.
생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

fucntion Person(name, food) {
this.name = name;
this.food = food;
this.say = funtion(){
  console.log(this.name+'는'+this.food+'!')
  
// 인스턴스의 생성
var person1 = new Person('동이', '짬뽕');
var person2 = new Person('동2', '올때 메로나');

console.log(person1); //Person { name: '동이', food: '짬뽕', sayHi: ƒ () }

person2.sayHello(); // '동2는 올때 메로나'
}

• 함수를 정의할 때 사용하는 function과는 어떤 차이가 있을까 ?
  : 동일한 함수가 호출 가능한 요소로도 사용될 수 있고 다른 객체를 생성하는 요소로도 사용될수 있다. 어떤 역할로 사용될지는 주변 실행 환경, 즉 연산자에 따라 달라진다.

• new 와 함께 사용되면 메모리에 인스턴스를 생성하는 역할로 사용된다.

• 단순히 ()연산자를 사용해 Person("jusungPark") 과 같이 호출하면 일반 함수처럼 사용된다.

• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.

• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다.
  즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

일반 함수와 생성자를 구분하고자 일반 함수는 소문자로,생성자는 대문자로 시작하는 이름 작명 규칙을 사용한다.

2-4

객체는 new Object(), Object.create() 또는 리터럴 표기법 (initializer 표기법)을 사용하여 초기화될 수 있습니다.

3. 객체의 특징

3-1 객체의 종류

• 배열, 함수, 객체, 날짜, 정규표현식 등
• (new 키워드로 정의된 경우): Boolean, 숫자, 문자열

=> 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

원시값 : 어떤 특성 또는 방법이 없는 값
기본 데이터 형식 : 원시 값을 갖는 데이터

3-2 프로퍼티의 삭제

JavaScript의 프로퍼티는 undefined나 null을 할당한다고 삭제되지 않기 때문에
반드시 delete라는 keyword를 사용하여 프로퍼티를 삭제해주어야 한다.

var foo= new Object();
foo.name='foo';
console.log(foo.name);
> foo

foo.name=null;
console.log(foo.name);
> null

delete foo.name;
console.log(foo.name);
> undefined

4. 객체 접근 방법

4-1 점(.) 표기법

get = object.property;
object.property = set;
//이 코드에서, property는 유효한 JavaScript 식별자여야한다. 
//따라서 object.$1은 유효하지만 object.1은 안된다.

4-2 괄호([]) 표기법

get = object[property_name];
object[property_name] = set;
//괄호 표기법에서는 property_name으로 문자열이나 Symbol을 사용할 수 있다.
//문자열은 유효한 식별자가 아니어도 괜찮다. "1foo", "!bar!", 심지어 " "(공백)도 가능.

document['createElement']('pre');
//이 코드는 점 표기법의 예시와 동일.

//괄호 앞에 공백이 올 수도 있다.

document ['createElement']('pre');

4-3 객체에 Key / Value 추가 방법

var person = {
name: "Surim Son"
};

console.log(person.name); // 결과 : "Surim Son"
console.log(person.age); // undefined (존재하지 않는 key/value)

// 추가하는 방법
person.age = 22; 혹은 person["age"] = 22;

console.log(person.age); // 결과 : 22

4-4 객체 Key / Value 수정 방법

var person = {
  name: "Surim Son",
  age: 22
};

// 수정하는 방법
person.age = 23; //혹은 person["age"] = 23;

console.log(person.age); // 23

객체,,넘나도 내용 많은것,, 2편으로 나눠야겠다