Object

shorry·2022년 2월 11일

JavaScript TIL WeCode

JavaScript

목록 보기

8/9

✔️Object 객체

📌Object?

자바스크립트는 객체지향 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다. 원시 값을 제외한 나머지 값 (함수, 배열, 정규 표현식 등) 은 모두 객체다.

Primitive type(원시 타입) - 변경 불가능한 값 (immutable value)

Object(Reference) type (객체(참조) 타입) - 변경 가능한 값 (mutable value)

Primitive type

한번 생성된 원시 값은 읽기 전용 값으로서 변경 불가능한 값 이다.

변수와 값을 구분해서 생각해야한다.

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

값 : 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과

변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.

즉, ‘원시 값은 변경 불가능하다’는 말은 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다.

변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있다.

상수는 재할당이 금지된 변수일 뿐 변경 불가능한 값과 동일시 할 수 없다.

원시 값을 할당한 변수에 새로운 원시 값을 재할당 하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. 이때 변수가 참조하던 메모리 공간의 주소가 바뀐다. ⇒ 이러한 특성을 불변성 (immutability) 이라고 한다.

let str = 'string';

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

str[0] = 'S';
console.log(str);  // string

Array-like object

유사 배열 객체

배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.

원시 값을 객체처럼 사용하면 원시 값을 감싸는 래퍼 객체로 자동 변환된다.

📌Composition of Object

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key) 와 값(value)으로 구성된다.

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.

자바스크립트의 함수는 일급 객체이므로 프로퍼티 값으로 취급할 수 있는데, 이 경우 함수와 구분하기 위해 메서드(method)라고 부른다.

let circle = {
	
  // 프로퍼티
	radius: 5,
	

  // 메서드

	getDiameter1: function () {
		return 2 * this.radius;
	}

	// 메서드 축약표현
	getDiameter2 () {
		return 2 * this.radius;
	}

};

console.log(circle.getDiameter1());  // 10
console.log(circle.getDiameter2());  // 10

ES6 샤양에서부터 메서드는 메서드 축약표현으로 정의된 함수만을 메서드 라고 한다.

ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor다.

non-constructor : 생성자 함수로 호출할 수 없는 함수.

Property

Property Key : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

Property Value : 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키를 사용할때 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

📌Why should we use?

여러 다양한 타입의 데이터 값들을 하나로 선언할 수 있다.

배열과는 다르게 index가 없고, 키와 값으로 이루어진 프로퍼티들로 인해 좀 더 직관적으로 데이터를 저장하고 불러올 수 있다.

상태를 나타내는 프로퍼티와 그리고 그 프로퍼티를 참조하여 조작할 수 있는 메서드를 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

The reason why the type of Array is Ojbect

객체 지향 프로그래밍 언어인 자바스크립트에서 원시 값을 제외한 나머지 값들은 객체이다.

배열의 본질 또한 객체이다.
그러면 배열은 왜 만들어졌는가?

객체는 순서를 고려하지 않고 만들어진 자료구조이기 때문에, 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조로 배열이 만들어 졌다.

📌How to create Object?

자바스크립트는 프로토타입 기반 객체지향 언어로서 클래스 기반 객체지향 언어(C++, JAVA등)와는 달리 다양한 객체 생성 방법을 지원한다.

객체 리터럴

Object 생성자 함수

생성자 함수

Object.create 메서드

클래스 (ES6)

📌How to access Object Porperties

마침표 표기법 (Dot notation)

대괄호 표기법 (Bracket notation)

let person = {
	firstName: 'Subin',
	'last-name':  'Kim',
	1: 5
};

person.firstName;
person['firstName'];

// 식별자 네이밍 규칙을 따르지 않은 프로퍼티 키는 점 표기법을 사용할 수 없다.
person['last-name'];

person[1];
person['1'];

// 대괄표 표기법을 사용할때 숫자로된 프로퍼티 키는 따옴표를 생략할 수 있다.