[Tech-Talk] JS에서의 객체

⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용입니다.

출처 : 모던애자일 3기 이한결

https://velog.io/@leephoter/JS-Object-%EC%9E%90%EB%A3%8C

JS Object 자료

🔥

velog.io

먼저 컴퓨터 사이언스에서 객체는 클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조, 함수 또는 메소드가 될 수 있다
(즉)⭐️식별자로 참조할 수 있는 메모리에 있는 값⭐️이다
객체는 속성의 이름을 키로 사용하는 연관 배열이라고 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하지만 서로의 차이는 불확실합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 Function을 가리키는 참조라면 그 속성을 메서드라고 합니다.

식별자 : 어떤 대상을 유일하게 식별 및 구별할 수 있는 이름

메모리에 있는 값 : 할당된 값. (메모리 주소값 X)

자바스크립트에서, 객체는 속성들을 담고있는 가방으로 볼 수 있다. 1👉🏻 객체 리터럴 문법 (object literal syntax) 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다.
속성값은 객체를 포함한 어떠한 자료형도 될 수 있다. 그 덕분에 복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (접근자) (property) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다. 데이터 (Data) (값) Data(값)은 어떤 자료형이든 가능하다
key는 value에 값을 가지고 있다면 property, value에 어떤 기능을 하는 함수를 가지고 있따면 method 라고 부른다.

문서(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다

Symbol >> ES6에서 새롭게 추가된 type으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다.
// 키값이 String, symbol일 경우 예시
// Boolean, null, undefined, Number, Object인 경우 안 됨 예시
키값 - 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(Symbol)을 사용하기 때문에 'for', 'let', 'return' 등 변수명으로는 사용할 수 없는 예약어를 사용 가능하다.(지양)

메소드를 참조할 때 메소드 이름 뒤에 괄호(())를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 됩니다.

배열(Array) : 순서를 가진다.
객체(Object) : 의미를 가진다.

객체에서 사용하는 반복문은 for in
for( let key in obj )
for in문은 객체안에 모든 키를 찾아 ‘key’라는 변수에 할당한다.
// Object in for문 예시

const로 선언하더라도 Number값은 수정될 수 있다.

점표기법, 대괄호 표기법 차이 1. 키값이 숫자 2. alert창 3. 띄어쓰기

키가 정수 프로퍼티인 경우 자동으로 오름차순 정렬.
그외 키값은 추가한 순서대로 정렬.

Object Lookup table >> JS 공식문서 용어 X (다른 곳에서 유래)

1 👉🏻객체 리터럴 문법

속성명과 속성값의 변수명이 같다면 하나로 통일 (생략 가능) <단축 프로퍼티>
(Shorthand Properties), (Concise Method)
const NAME = 'LEE';
const object1 = {
    NAME : NAME
}
console.log(object1.NAME);
// >> 'LEE'

const NAME = 'LEE';
const object1 = {
    NAME
}
console.log(object1.NAME);
// >> 'LEE'
속성값으로 함수(function())가 정의 될 때 'function' 생략 가능
const object1 = {
    method1 : function() {
    	console.log('Wooahan-agile');
    },
};
object1.method1();
// >> 'Wooahan-agile'

const object1 = {
    method1() {
    	console.log('Wooahan-agile');
    },
};
object1.method1();
// >> 'Wooahan-agile'
동적 속성명 정의 가능 (Computed Property Name)
동적 속성명이란 속성명을 변수로 사용하는 것
property로 템플릿 리터럴 사용 가능 name1, name2 ... 예시
const object1 = {
	name: 'LEE',
};
var weight = "무게";
object1[weight] = 75;  

console.log(object1);
// >> 
//{
//  name : 'LEE',
//  무게 : 75,
//}

let weight = '무게';
const object1 = {
  name : 'LEE',
  [weight] : 75,
};
// >>
// {
// 	name : 'LEE',
// 	무게 : 75,
//}

객체 생성자

var obj1 = {};
obj1.name = 'Lee';

// Object() 생성자 함수
var obj2 = new Object();
obj2.name = 'Lee';

// 생성자 함수
function F() {}
var obj3 = new F();
obj3.name = 'Lee';