객체(Object)

JavaScript는 객체 기반 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다. 다양한 데이터를 값으로 가질 수 있다.

// 하나의 값만 갖는 것 대신
const name = 'yeonju'
const age = 24.5

// 여러개의 값을 한번에 담을 수 있다.
const whoami = {
  name : 'yeonju'
  age : 24.5
}

배열도 객체이다. 그래서 배열을 따로 판별해주는 메서드(Array.isArray)가 있다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체라고 할 수 있다.

let arr = ['im array'];
console.log(typeof(arr)); // object 
console.log(Array.isArray(arr)); // true

객체의 생성

1. 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식이다. 클래스 기반 객체 지향 언어와 비교할 때 매우 간편하게 객체를 생성할 수 있다. 중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다. {} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.

// 객체의 생성과 프로퍼티 추가 
let obj = {
	name : 'yeonju'
};

2. Object 생성자

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다. 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.

생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다. 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다.

//객체 생성
let obj = new Object();

//프로퍼티 추가
obj.firstName = "yeonju";
obj.lastName = "son";

프로퍼티(Property)

let object = {
  key : value
}

• 키(key) : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• 값(value) : 모든 값

특징

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

• 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.
• 프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다.
• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
• 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

1. 프로퍼티 추가

JavaScript에서 사용하는 변수는 값을 할당하지 않고 선언만 할 경우 자동적으로 undefined를 할당한다. 하지만 객체의 정보를 담고 있어야 할 요소가 그 어떤 정보도 할당받지 않았다면 객체로서는 필요가 없기 때문에 프로퍼티를 추가하면서 값을 할당하지 않으면 syntax error가 뜬다.

• 결론 : 프로퍼티를 추가할 땐 key와 value 둘 다 넣어야 된다.

이미 만들어져있는 객체에 프로퍼티를 추가해보자

let person = {
  name: "yeonju Son"
};

person.age = 24.5; 
person["height"] = '161cm' 

console.log(person) // {name: "yeonju Son", age: 24.5, height: "161cm"}

2. 프로퍼티 삭제

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

let obj = new Object();
obj.name='obj';
console.log(obj); // {name:"obj"}


obj.name=null;
console.log(obj); // {name:null}


delete obj.name;
console.log(obj); // {}

3. 프로퍼티 값의 접근

객체

let person = {
  name: "yeonju", 
  age: 24.5, 
  height: "161cm"}

1. Dot Notation

변수이름.프로퍼티키

console.log(person.name) // "yeonju"
console.log(person.age) // 24.5

2. Bracket Notation

변수이름["프로퍼티키"]

console.log(person["name"]) // "yeonju"
console.log(person["age"]) // 24.5

4. 프로퍼티 값의 변경

객체 병합

let person = {
  name: "yeonju",
  age: 24.5,
  height: "161cm"
};

person = {name: "yeonju", age: 24.5, height: "165cm"}
console.log(person) // {name: "yeonju", age: 24.5, height: "165cm"}
// 한 명쯤은 내 이름과 나이, 키를 외웠을 것 같다•••

함수의 전달인자로 객체 만들기

 const func = (itemId, quantity) => {
    let obj = {itemId: itemId , quantity : quantity}
    return obj;
 }
 
func(3, 5)
console.log(func) // {itemId: 3, quantity: 5}

key 프로퍼티 : 변수
value 프로퍼티 : 전달인자가 들어가는 변수의 값

출처

• https://poiemaweb.com/js-object
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors