#8. 자바스크립트의 이해 - 객체 (JavaScript)

qwerzxcvss·2020년 10월 11일
0

What is the JavaScript?

자바스크립트는 객체기반 패러다임이다. 객체는 프로퍼티의 모임이고, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다. 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티를 메소드라고 한다.

핵심키워드: 자바스크립트, 객체, 프로퍼티, 함수, 메소드

참조

객체(object)란?

객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)와 타입(type)을 가진다. 예를 들어 텀블러는 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(property)을 가진다. 이와 마찬가지로 자바스크립트에서 객체는 그 특징을 결정짓는 여러 프로퍼티들을 가진다.

객체와 프로퍼티

1. 표기법

도트 표기법 (프로퍼티 추가)

object.property
(예시)
myHouse.who = "H&W";
myHouse.when = 2020;
myHouse.where = "Seoul";
myHouse.what = "webDev";

대괄호 표기법 (프로퍼티 추가)

object["property"]
(예시)
myHouse["who"] = "H&W";
myHouse["when"] = 2020;
myHouse["where"] = "Seoul";
myHouse.["what"] = "webDev";

2. 객체 생성, 프로퍼티 추가

var myHouse = new Object(), // myHouse라는 이름을 가진 객체 생성
    clo = "myclothes",
    rand = Math.random(),
    obj = new Object(); // 변수4개를 콤마를 사용하여 한번에 생성 및 할당
    myHouse.type = "Dot syntax";
    myHouse["what"] = "webStudy";
    myHouse[clo] = "man to man";
    myHouse[rand] = "random number";
    myHouse[obj] = "property is object";
    myHouse[""] = "Even an empty string";
    console.log(myHouse);
    
//결과값
	"": "Even an empty string"
	"0.01302904548580397": "random number"
	"[object Object]": "property is object"
	myclothes: "man to man"
	type: "Dot syntax"
	what: "webStudy"
function showProps(obj, objName) {
    var result = "";
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            result += objName + "." + i + " = " + obj[i] + "\n";
        }
    }
    return result;
};
showProps(myHouse, "myHouse");

//결과값
"myHouse.type = Dot syntax
myHouse.what = webStudy
myHouse.myclothes = man to man
myHouse.0.01302904548580397 = random number
myHouse.[object Object] = property is object
myHouse. = Even an empty string
"

3. 객체의 프로퍼티 나열/순회하는 방법 3가지

(1) for...in 루프
이 방법은 객체와 객체의 프로토타입 체인 상의 열거 가능한 모든 프로퍼티를 순회한다.
(2) Object.keys(o)
이 메소드는 객체 o  자체에 속한(즉 프로토타입 체인 상에 있는 것은 제외)  열거 가능한 프로퍼티 이름들("keys")의 배열을 반환한다.
(3) Object.getOwnPropertyNames(o)
이 메소드는 객체 o 자체의 모든  프로퍼티(열거 가능 여부에 무관) 이름들의  배열을 반환한다.

4. 객체 생성하는 방법 2가지

(1) 객체 이니셜라이저(initializer)
: 리터럴 표기에 의한 객체 생성(creating objects with literal notation)

var obj = {
	property_1 : value_1,
   	1 : [0,0],
   	color : "red" };

obj는 새로 만들어질 객체 이름이고, property_i는 식별자 (이름, 숫자, 또는 스트링 리터럴), value_i는 수식인데 이 값이 property_i에 할당된다. 이 객체 이니셜라이저는 수식이고, 이 수식에 의해 만들어진 객체들은 Object의 인스턴스들이 된다.

var myDreamCar = {
color: "lightblue",
wheels: 4,
info: {brand: Lamborghini, model: Aventador}
};

(2) 생성자 함수를 정의한 후 이 함수와 new연산자를 이용한 인스턴스 만들기

생성자 함수를 작성하여 객체 타입을 정의하고, 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있다.

function MyDreamCar(brand, model, year) {
	this.brand = brand;
    this.model = model;
    this.year = year;
}
//객체의 인스턴스 2개 만들기
var mySecondCar = new MyDreamCar("LAMBORGHINI", "Aventador", 2028);
var myFirstCar = new MyDreamCar("Hyundai", "Genesis GV90", 2025);
//정의된 객체에 새로운 속성과 값을 추가할 수 있다.
mySecondCar.color = "lightblue";

//Object.create 메서드로 객체 (객체 인스턴스) 만들기
var myDreamCar = {
color: "lightblue",
wheels: 4,
info: {brand: Lamborghini, model: Aventador}
};
var myFirstCar = Object.create(myDreamCar);
myFirestCar.owner = "Jay";

5. 상속

JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 prototype 이라는 생성자 객체에서 찾을 수 있다. 예를 들어, 위의 MyDreamCar가 프로토타입이다.

6. 객체의 프로퍼티 정의

prototype 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 프로퍼티는 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다.

(ex)
MyDreamCar.prototype.customer = null;
mySecondCar.customer = "girlfriend";

7. 메소드

메소드는 한 객체와 연관된(associated) 함수이며, 간단하게 말해 객체의 프로퍼티 중에서 함수인 것을 메소드라고 한다.

objectName.methodname = function_name;

var myDreamCar = {
color: "lightblue",
wheels: 4,
info: {brand: "LAMBORGHINI", model: "Aventador"}
};

var myCar = {
	carProps: function showProps(obj, objName) {
    var result = "";
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            result += objName + "." + i + " = " + obj[i] + "\n";
        }
    }
    return result;
}
};
myCar.carProps(myDreamCar, "myDreamCar");

/*
결과값
"myDreamCar.color = lightblue
myDreamCar.wheels = 4
myDreamCar.info = [object Object]
"
*/

console.log(myDreamCar.info);
/*
결과값
Object { brand: "Lamborghini", model: "Aventador" }
*/

더 공부할 내용

  1. 데이터타입과 리터럴(data type and literal)
  2. 프로토타입(prototype)
  3. 메소드(method)
  4. 객체 참조를 위한 this
profile
Frontend Developer

0개의 댓글