JS에서 객체(Object)란?
자바스크립트(JavaScript)는 객체 기반 스크립트 언어이고, 객체는 여러 속성을 하나의 변수에 저장할 수 있게 해주는 데이터 타입입니다. Key(속성)과 Value(값)을 한 짝으로 저장합니다. 자바스크립트에서는 배열도 객체에 해당됩니다. 객체 안에는 문자열, 숫자, 배열, 객체, 함수 등이 모두 들어갈 수 있습니다.
객체의 특징
- 객체는 변수의 타입
- 다양한 값들이 포함될 수 있다.
- 중괄호 '{ }' 를 이용
- 콤마 ' , ' 를 이용해서 속성과 값의 짝을 나열
- Key(속성)는 문자열 또는 기호
- Value(값)는 모든 유형
+ property는 Key : Value 한 쌍(pair)을 말합니다.
객체 선언 및 초기화
var student = new Object(); // 1. 생성자 방식
var student = {}; // 2. 리터럴 방식객체를 생성하기 위해서는 위 두 가지 방식이 있습니다.
var product = { 제품명: '사과', 가격: 1000 };선언과 초기화를 동시에 할 때는 위 방식을 사용합니다. 이 때 '제품명'과 '가격'은 Key(속성)입니다. '사과', 1000은 Value(값)입니다.
var product = {};
product.제품명 = '사과';
product.가격 = 1000;
/*
var product = {};
product['제품명'] = '사과';
product['가격'] = 1000;
*/위와 같이 먼저 빈 객체를 생성한 후, 프로퍼티를 추가할 수도 있습니다. 초기화 할때도 같은 방식을 사용하고, 두 가지 방식의 결과는 같으나 '[ ]'을 사용할 때는 ' '을 꼭 붙혀줘야 합니다.
delete(product.제품명);
// delete product.제품명;특정 프로퍼티를 삭제(제거)할 때는 delete연산자를 사용합니다.
객체 참조
product.제품명 = '사과';
alert(product.제품명);
/*
product['제품명'] = '사과';
alert(product['제품명']);
*/위 방식으로 객체의 값을 초기화 하거나 참조해서 사용할 수 있습니다.
var product = { 제품명: '사과', 가격: 1000 }
alert(product.제품명 + ' ' + product.가격);product의 제품명과 가격이라는 속성에 해당되는 값을 출력하는 코드입니다. 지금은 문제가 없어 보이지만, 코드가 많을 수록 product라는 쓸 데 없는 객체명이 반복될 것입니다.
var product = {
제품명: '사과',
가격: 1000 ,
출력: function(){ alert (this.제품명 + ' ' + this. 가격)} }객체 안에서 다른 속성값을 참조 할 때는 this를 사용합니다. this는 자신을 포함하는 객체를 가리킵니다.
with(product){
alert(제품명 + ' ' + 가격);
}with를 이용하면 객체 이름이 반복되는 구조를 더 효율적이고 가독성 있는 코딩을 할 수 있습니다.
var person = {
eat : function(){ alert('점심을 먹는다') },
sleep : function(){ alert('잠을 잔다') }
}
for(var key in person){
person[key]();
}for in문을 이용하면 함수에 있는 모든 속성값을 반복문을 통해 참조할 수 있습니다. 위 예제는 person안에 있는 모든 속성값(함수)들을 실행하는 코드입니다.
'제품명' in product'속성 in 객체'는 객체에 해당되는 이름의 속성값이 있다면 true 없으면 false가 됩니다.
배열 속 객체
var fruit = [
{ 제품명 : 사과 , 가격 : 1000 },
{ 제품명 : 포도 , 가격 : 2000 },
{ 제품명 : 참외 , 가격 : 1500 }];배열 또한 객체이기 때문에 안에 객체를 보관할 수 있습니다. 배열 안에 객체를 넣는 구조는 정말 많이 사용되고 있습니다.
var fruit = [];
fruit.push({ 제품명 : 사과 , 가격 : 1000});
fruit.push({ 제품명 : 포도 , 가격 : 2000});
fruit.push({ 제품명 : 참외 , 가격 : 1500});배열을 선언할 때 초기화 할 때 객체를 등록하지 않더라도, 나중에 따로 배열 속 객체를 추가할 때는 배열의 push 메서드를 사용합니다. push 메서드는 배열의 마지막에 새로운 요소를 추가 후, 변경된 배열의 길이를 반환합니다.
fruit.pop()pop 메서드는 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환합니다. push와 pop은 배열의 마지막에서 작업하는 메서드이고 첫 번째 자리에 요소를 추가하고 제거하는 메서드는 unshift와 shift 입니다.
이 외에도 map, filter, reduce, some, every 등 다양한 배열의 메서드를 이용해서 객체를 관리합니다.