[JavaScript] Object

Language/Java Script

[JavaScript] Object

yuns94 2022. 6. 10. 14:32

⚡️ JavaScript 객체(Object)란 무엇인가?

JavaScript는 객체기반의 스크립트 언어이다. JavaScript를 이루고 있는 거의 모든 것은 객체로,

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value pair를 저장할 수 있는 구조이다.

객체는 JS언어만이 가지고 있는 특징의 기초를 이루는 자료형으로 , 많은 기능을 내장하고 있다.

객체 리터럴

객체는 한꺼번에 여러 값을 담을 수 있는 통(container) 와 같은 자료구조(Data structure)이다.

객체안에는 이름 - 값 쌍 (key - value vair) 이 저장되는데, 이를 객체의 속성(property)라고 한다.

// Object literal { key : value }
// new object()
// object.. create();
// key - 문자, 숫자, 문자열, 심볼
// value - 원시값, 객체 (함수)

아래 코드를 보면서 객체 리터럴을 이용해 객체를 생성할 수 있다.

let apple = {
    name  : 'apple',   // 속성 이름 - 'name' , 속성 값 - 'apple'
    'hello-bye': '🥰', // 속성 이름 - 'hello-bye' , 속성 값 🥰
    ['hello-bye1']: '😍',
    
// 출력 { name: 'apple', 'hello-bye': '🥰', 'hello-bye1': '😍' }

객체의 특징

객체는 변수다. 그러나 객체에는 많은 값이 포함될 수 있다(자바스크립트 변수처럼 단일 값을 포함 할 수 있다.)
객체는 중괄호 표기를 이용해 만들 수 있다.
객체는 각각의 key / value에 대해 정보를 나열할 수 있다.
key는 문자열 또는 기호여야 한다.
value는 모든 유형이 될 수 있다.
객체는 한 쌍의 key/value 뒤에 쉼표를 이용해 그 뒤에 오는 key/value와 구분해주어야 한다.
객체에서 명명된 값을 프로퍼티스(Properties)라고 한다.
변수는 예약어의 이름을 가질 수 없지만 객체는 어떠한 이름이어도 상관없다.
객체 변수를 복사하면 참조가 복사되고 객체가 복제되지 않는다.

let user01 = {name : "yuns" };
let admin = user01; // copy the reference

객체의 종류

배열
함수
객체
날짜
수학
정규표현식
Boolean 은 객체일 수 있다. (new 키워드로 정의된 경우)
숫자는 객체가 될 수 있다. (new 키워드로 정의된 경우)
문자열은 객체가 될 수 있다. (new 키워드로 정의된 경우)

객체가 아닌 기본 데이터 유형

String
number
boolean
null
undefined

JavaScript 객체 구성

1. java Script 내장 객체(built-in Object)

JavaScript 엔진이 구동되는 시점에서 바로 제공되고 JS(JavaScript)코드 어디에서든지 사용가능하다.

아래 내장 객체들 외에 많은 내장 객체들이 있다.

Global
Object
String
Number
Boolean
Date
Array
Math

2. 브라우저 내장 객체 (Native Object)

브라우저 내장 객체 또한 JS(JavaScript)가 구동되는 시점에서 바로 사용이 가능한 객체들이며 내장 객체이다.

하지만 브라우저마다 브라우저 내장 객체를 사용함에 있어 구성을 달리하는 경우가 있기 때문에

JavaScript 내장 객체와 분류해 두었다. 하지만 브라우저 내장 객체는 브라우저, 즉 JavaScript 엔진을 구동하는것에서

빌드되는 객체들이다. 예시로 BOM 과 DOM 이 있다. 이 객체들은 자바스크립트 내장객체가 구성된 후에 구성이 된다.

브라우저 객체 모델(BOM)
문서 객체 모델 (DOM)

3. 사용자 정의 객체 (Host Object)

사용자가 생성한 객체들로 생성자 함수 또는 객체 리털을 통해 사용자 객체를 정의하고 확장시킨 객체들이기 때문에 내장 객체들이

구성된 이후에 구성되어 진다.

프로퍼티(Property)

프로퍼티 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태다. 특정 객체가 가지고 있는 정보를 품고 있어

그 객체가 가진 정보에 직접적으로 접근할 수 있게 해준다.

- Key : 빈 문자열 포함한 모든 문자열 또는 Symbole 값

-value : 모든 값

let apple = {   // apple 객체 생성 
    name  : 'apple',
    'hello-bye': '🥰', // name에 'apple 와 helloby 🥰 할당
    
    ['hello-bye1']: '😍', 

};
console.log(apple);

key에 문자열이나 symbol 이외 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 되고 이미 존재하는

프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

프로퍼티 추가 시 , 중의해야할 점

1. 프로퍼티 값을 할당하지 않으면

JavaScript에 사용되는 변수는 값을 할당하지 않고 선언만 하면 자동적으로 undefined를 할당한다.

하지만 객체의 정보를 담고 있어야 할 요소가 그 어떤 정보도 할당받지 않았다면 객체로서 필요가 없기 때문에

프로퍼티를 추가하면서 값을 할당하지 않으면 Syntax error 에러가 뜬다.

1. 프로퍼티 값을 할당하지 않으면

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

delete apple.emoji;
console.log(apple);

3. 프로퍼티 key로 예약어를 사용하는 경우

예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않지만 예상치 못한 에러가 발생할 수 있어서

예약어를 프로퍼티 키로 사용해서는 안된다.

메소드

메소드 : 객체가 가지고 있는 동작이며 객체 내의 함수를 메소드라 부른다.

메소드와 함수의 차이점

메소드는 객체가 가지고 있는 동작이기 때문에 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행해야 하며 그 동작을 수행하는 주체는 객체이다.

객체 생성 방법

1. 객체 리터럴을 사용해 단일 객체를 정의하고 만든다.

객체 리터럴 : 중괄호안에 Key : value 의 목록

let apple = {
    name : 'apple',
    color : 'red',
    display : '🍎',
};

객체 리터럴을 사용하면 한 명령문에서 객체를 정의하고 만들 수 있다.

2. new 키워드를 사용해 단일 객체를 정의하고 만든다.

let apple = new Object();
apple.name = 'apple';
apple.color = 'red';
apple.display = '🍎';

console.log(apple);

// 출력 : { name: 'apple', color: 'red', display: '🍎' }

가독성 , 단순성 및 실행 속도를 위해서라면 위에 만들었던 첫번째 방법을 사용하는 것을 권장한다.

객체 접근 방법

const YUN BLOG = {
    name : "Yun sung joog",
    age : 29,
    adress : '경기도 
};

let myName = YUNBLOG.name;
let myAge = YUNBLOG.age;

console.log(myName); // 결과 : Yun sung joong
console.log(myAge); // 결과 : 29

아래와 같은 방법으로도 할 수 있다.

const YUNBLOG = {
    name : "Yun sung joog",
    age : 29,
    adress : '경기도 성남'
};

let myName = YUNBLOG['name'];
let myAge = YUNBLOG['age'];

console.log(myName);
console.log(myAge);

객체에 Key / Value 추가 방법

const YUNBLOG = {
    name : "Yun sung joog",
};

console.log(YUNBLOG.name); // 결과 : 'Yun sung joong'
console.log(YUNBLOG.age); //undefined ( 존재하지 않은 key 와 value )

// 추가방법
YUNBLOG.age = 29;


console.log(YUNBLOG.age) // 29

console.log(YUNBLOG);  // { name: 'Yun sung joog', age: 29 }

객체 Key / Value 수정방법

const YUNBLOG = {
    name : "Yun sung joog",
    age : 29
};

console.log(YUNBLOG.name); // 'Yun sung joong'
console.log(YUNBLOG.age); // 29

// 수정방법
YUNBLOG.age = 30;  // 또는 YUNBLOG['age'] = 30;

console.log(YUNBLOG.age); // 30

객체 Key / Value 삭제방법

const YUNBLOG = {
    name : "Yun sung joog",
    age : 29
};

console.log(YUNBLOG.name); // 'Yun sung joong'
console.log(YUNBLOG.age); // 29

// 삭제방법
delete YUNBLOG.age;

console.log(YUNBLOG.age); // undefined (더 이상 존재하지 않는 key 와 Value)