객체리터럴과 원시값,객체의 비교

객체란?

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 기와 값으로 구성된다.
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
자바스크립트의 함수는 일급 객체로 취급할수 있기 때문에 함수 또한 프로퍼티 값으로 사용할 수 있다.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부른다.

const object = {
number : 0,  //=> 프로퍼티
increase : function () {
	this.number++ ;
    }  // =>	 메서드
};

프로퍼티 : 객체의 상태를 나타내는 값
메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작

이처럼 객체의 상태를 나타내는 값과 프로퍼티를 참조하고 조작할 수 있는 동작을 모두 포함할수 있기때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

객체 리터럴에 의한 객체 생성

c++이나 자바 같은 클래스 기반 객체 지향 언어는 클래스를 사전에 정의하고 new 연산자와 함께 생성자를 호출해서 인스턴스를 생성하는 방식으로 객체를 생성한다.
(인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체)
하지만 자바스크립트는 프로토타입 기반 객체지향 언어이기에 다양한 객체 생성 방법을 지원한다.

객체 생성 방법

• 객체 리터럴
• object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

자바스크립트에서는 일반적으로는 객체 리터럴을 사용해서 객체를 생성하게된다.
중괄호 {...}내에 0개 이상의 프로퍼티를 정의하고, 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.

 let person = {
      name: 'jaehyun',
      sayHello : function() {
          console.log(`hello my name is ${this.name}.`);    
      }
  };  // 중괄호 안에 프로퍼티를 정의하지않으면 빈객체가 생성된다.

• 객체 리터럴의 중괄호는 코드블록을 의미하지 않음
• 객체 리터럴은 값으로 평가되는 표현식이므로, 객체 리터럴의 닫는 중괄호 뒤에 세미콜론;을 붙임

이러한 방식은 객체 리터럴에 프로퍼티를 포함시켜 객체를 생성함과 동시에 프로퍼티를 만들수도 있고,객체를 생성한 이후에 프로퍼티를 동적으로 추가도 할수있다.

원시값? 객체?

자바스크립트가 제공하는 7가지 데이터타입은 크게 원시타입과, 객체타입으로 구분할 수 있다.

원시타입

• 변경 불가능한 값이다. (읽기전용)
• 변수에 할당하면 변수에는 실제값이 저장된다.
• 원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다.(값에 의한 복사)

객체타입

• 변경 가능한 값이다.
• 변수에 할당하면 변수에는 참조 값이 저장된다.
• 다른변수에 할당시 원본의 참조 값이 복사되어 전달 된다.(참조에 의한 전달)

원시값은 변경불가능한 값으로 변수의 값을 재할당하면 변수는 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 뒤 변수가 참조하던 메모리 공간의 주소를 변경한다. 이런 값의 특성을 불변성 이라고한다.

문자열과 불변성

원시 값인 문자열은 다른 원시 값과 비교할 때 독특한 특징이 있다. 문자열은 0개 이상의 문자로 이루어진 집합을 말하며, 1개의 문자는 2바이트의 메모리공간에 저장된다. 따라서 문자열은 몇개의 문자로 이뤄졌느냐에 따라 필요한 메모리 공간의 크기가 결정된다.
숫자 값은 1이나, 1000000000이나 모두 동일한 8바이트가 필요하지만 문자열의 경우 1개의 문자로 이우러진 문자열은 2바이트, 10개의 문자로 이루어진 문자열은 20바이트가 필요하다.

문자열은 유사 배열 객체 형태를 가지고있다.
유사배열이란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할수있고 length 프로퍼티를 갖는 객체를 말한다.

let str = "string";
str[0] = "S";

console.log(str); // string

// 문자열은 유사 배열이므로 배열과 유사하게 인텍스를 사용해 각 문자에 접근할 수 있다.
// 하지만 원시 값이므로 변경할수는 없다. (이때 에러가 발생하지않는점에 주의하자)

값에 의한 전달

변수에 원시값을 갖는 변수를 할당하게되면 할당받는 변수 에는 할당되는 변수 의 원시값이 복사되어 전달되는데 이를 값에 의한 전달 이라고 한다.

let score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
let copy = score;

console.log(score, copy); // 80  80
console.log(score === copy); // true

위의 예시 처럼 score와 copy 각각의 변수는 같음 메모리에 저장된 값을 바라보는것이 아니라 다른 메모리 공간에 복사된 별개의 값을 갖게 되는 것이다.

참조에 의한 전달(객체)

객체를 가리키는 변수를 다른변수에 할당하면 원본의 참조 값이 복사되어 전달되는것을 말한다.

let person = {
  name: 'Lee'
};

// 참조값을 복사(얕은 복사)
let copy = person;

person을 copy에 할당하면 원본의 참조 값이 복사되어 전달된다. 각 변수 메모리 주소는 다르지만 모두 동일한 객체를 가르킨다.
따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.