객체 기초

 

 

 

---

 

객체는 무엇이며 어떻게 관리할까?

 

 

---

 

 

 

 

객체

 

--

객체라는 용어는 매우 포괄적이지만

자료형의 관점에서는 키(key)와 값(value)으로 구성된 속성(프로퍼티)의 집합이다.

 

객체는 기본 자료형과는 다르게

여러 개의 값을 가질 수 있고 서로 다른 자료형의 값도 가질 수 있다.

 

기본 형식

const 객체명 = {
    // 속성(프로퍼티)
    키1: 값1,
    키2: 값2
};

 

예시 코드

// 빈 객체
const person = {};

const person = { name: "gildong" };

const person = {
    name:["Hong", "AN"],            // 배열
    age:20,                         // 숫자
    isAdult:true                    // 논리
};

// 객체 안에 객체 또는 함수도 가능
const person = {
    name:{
        firstName:"Gildong",
        lastName:"Hong"
    },
    age:20,
    isAdult:true
    printInfo:function(){
        console.log('printInfo');
    }
};

 

 

객체의 속성에 접근하기

객체에 접근하는 방법은

마침표(.) 또는 대괄호([]) 연산자를 통해 접근할 수 있다.

여기서 대괄호 연산자를 통해 접근할 때에는 키에 작음 따옴표(') 또는 큰 따옴표(")를 통해 묶어야 한다.

 

기본 형식

객체명.키
객체명['키']

 

예시 코드

const person = { 
    name: "gildong",
    age: 25,
    color: {
        first: "blue",
        last: "yellow"
    },
    phone:["apple", "samsung"],
    printHello:function(){
        return "hello";
    }
};

console.log(person.name);
console.log(person['age']);
console.log(person["color"]["first"]);
console.log(person["phone"]);
console.log(person['phone'][0]);
console.log(person.phone[1]);
console.log(person['printHello']);
console.log(person['printHello']());

----------------------------------
gildong
25
blue
[ 'apple', 'samsung' ]
apple
samsung
[Function: printHello]
hello

 

 

객체에 속성(프로퍼티) 추가

객체 속성 접근 연산자를 통해 추가할 수 있다.

const person = {};

// 속성 추가
person.name = "hong";
person.age = 25;

-----------------------------------
const person = {
    name: "hong",
    age: 25
};

 

 

객체에 속성(프로퍼티) 수정

작성 방식은 추가와 동일하지만 이미 존재하는 속성을 추가하면 덮어씌우기로 변경(재할당)된다.

const person = {
    name: "hong",
    age: 25
};

person.name = "an";

--------------------------
const person = {
    name: "an",
    age: 25
};

 

 

객체에 속성(프로퍼티) 삭제

delete 연산자를 통해 속성을 삭제할 수 있다.

 

기본 형식

delete 객체명.키;
delete 객체명['키'];

 

예시 코드

const person = {
  name: '홍길동',
  age: 24,
  school: '한국대',
  major: '컴퓨터공학'
};

delete person1.age;
delete person1['major'];

console.log(person);

------------------------------
{ name: '홍길동', school: '한국대' }

만약 존재하지 않는 속성을 삭제하게 되어도 오류는 발생하지 않고 아무런 변화가 없다.

 

 

 

기존 식별자 작성 규칙에 벗어나는 키를 작성

키(속성명)를 작성하는 규칙 (=식별자 작성 규칙)에 벗어나는 키 이름으로 사용할 수도 있다.

(일반적으로 객체의 키에는 문자열로 작성하여 따옴표 생략이 가능하다.)

• 숫자
• 특정 기호 추가
• 공백 추가

하지만 이러한 경우 기존과 다른 방법으로 코드를 작성해야 한다.

 

const obj = {
  1: '하나',               // 숫자도 객체의 키로는 사용 가능
  'ab-cd': 'ABCD',         // 문자 포함 시 키도 따옴표로 감싸야 함
  's p a c e': 'Space'
}

 

속성 접근 방법은

마침표(.) 연산자가 아닌 대괄호([]) 연산자로만 접근이 가능하다.

console.log(
  obj[1],
  obj['ab-cd'],
  obj['s p a c e']
);

 

 

표현식을 통해 키값 정의

키에 대괄호([])를 통해 표현식으로 키 이름을 정의할 수 있다.

 

let idx = 0;

const obj = {
  ['key-' + ++idx]: 'value-' + idx,
  ['key-' + ++idx]: 'value-' + idx,
  ['key-' + ++idx]: 'value-' + idx,
  [idx * idx]: 'haha'
}

console.log(obj);
console.log(obj['key-1']);

-----------------------
{
  '9': 'haha',
  'key-1': 'value-1',
  'key-2': 'value-2',
  'key-3': 'value-3'
}
vlaue-1

--

 

 

 

 

함수를 통해 동적으로 객체 관리하기

 

--

const item = {
  name: '갤럭시 s25',
  color: 'black',
  price: 900000
}

function addItemProperty (obj, key, value) {
  // obj.key = value;		// 의도와 다른 작업 수행
  obj[key] = value;
}
function deleteItemProperty (obj, key) {
  // delete obj.key;		// 의도와 다른 작업 수행
  delete obj[key];
}

 

여기서는 대괄호 접근 연산자를 사용해야 한다.

매개변수로 받아온 값을 가지고 사용해야 하는데

마침표 접근 연산자는 그냥 "key"라는 문자열로 접근하기 때문에 의도와 다른 작업을 수행하게 되어

대괄호 접근 연산자를 통해 매개변수 key값을 가져와서 접근해야 한다.

(이때 대괄호에 따옴표를 생략한다.)

 

addItemProperty (item, 'ram', 32);		// item['ram'] = 32;  (속성 추가)

addItemProperty (item, 'price', 1200000);	// item['price'] = 1200000;   (속성값 변경)

deleteItemProperty (item, 'color');		// delete item['color'];  (속성 삭제)

--

 

 

 

 

ES6 추가 문법

 

--

객체를 선언할 때 키와 대입할 변수명이 동일하면 키를 생략할 수 있다.

const x = 1, y = 5;

const obj = {
   x: x,
   y: y
}

console.log(obj);

------------------------
{ x: 1, y: 5 }

const x = 1, y = 5;

const obj = { x, y }

console.log(obj);

------------------------
{ x: 1, y: 5 }

 

예시 코드

function fff (name, price, point) {
  return {name, price, point};
}

const v1 = fff('갤럭시 s25', 1000000, 80);
const v2 = fff('아이폰 16', 1600000, 80);

console.log(v1, v2);

--------------------------------------------------
{ name: '갤럭시 s25', price: 1000000, point: 80 } { name: '아이폰 16', price: 1600000, point: 80 }

 

 

 

객체에 함수를 속성으로 넣을 수 있었는데

이때 메서드 문법을 사용하여 function 키워드 없이 바로 정의할 수 있다.

(ES6부터 이렇게 표현된 함수만 메서드라고 부르기 시작했다.)

const person = {
    name: "지니",
    fff: function (test) {
        return test;
    }
}

console.log(person.fff(person.name));

const person = {
    name: "지니",
    fff (test) {
        return test;
    }
}

console.log(person.fff(person.name));

--