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" }
*/더 공부할 내용
- 데이터타입과 리터럴(data type and literal)
- 프로토타입(prototype)
- 메소드(method)
- 객체 참조를 위한 this
