javascript object

리터럴로 객체(object) 생성 예제

var card1 = {suit:"클로버", rank:"Q"};
var card2 = {"suit":"하트", "rank":"K"};

//object의 값을 불러올때는 .키값 이나 대괄호[] 안에 키값을 사용합니다. 
console.log(card1.suit);
console.log(card2["rank"]);

//object에 새로운 property를 추가 삭제 할 수 있습니다.
card1.value = 11;
console.log(card1); 	//{suit:"클로버", rank:"Q", value:11}
delete card1.rank;
console.log(card1); 	//{suit:"클로버", value:11}

//property 존재 확인
console.log("suit" in card1); 	//ture
console.log("color" in card1); 	//false

 

생성자로 객체 생성 예제

자바에서는 객체를 생성하는 틀로 클래스라는 개념을 사용하지만 자바스크립트에는 클래스가 없어서 함수로 생성자를 만들어 사용합니다.

일반적으로 캐멀(낙타등)표기법에서는 함수이름을 소문자로 시작하는게 관습이지만 생성자는 객체를 생성하기 위한 함수여서 함수 이름을 클래스처럼 대문자로 표기하기도 합니다. 

function Card(suit, rank){
    this.suit = suit;
    this.rank = rank;
}

var card1 = new Card("스페이드", "A"};

//생성자를 리터럴로 정의 할 수도 있습니다.
function Trump = {};
Trump.suit = "하트";
Trump.rank = "2";

생성자로 생성된 객체를 인스턴스(instance)라고 부릅니다. 이때 생성된 인스턴스를 가리키는 키워드가 this입니다. 

 

변수의 유효 규칙(scope rule)

자바스크립트의 변수 유효 규칙은 다른 언어들과 거의 같습니다.

하지만 변수의 데이터 타입을 지정하지 않아도 되고, 변수를 선언하는 키워드 var 나 let을 생략 할 수도 있는데 그런 경우 전역 변수가 되는 점이 다르다고 할 수 있습니다.

 

함수(function)

자바스크립트는 함수가 객체입니다.

그래서 함수를 변수에 할당하면 변수 이름으로도 함수를 호출 할 수 있습니다.

인수(argument)가 객체인경우 예제

function add1(p){
	p.x = p.x + 1;
    p.y = p.y + 1;
    return p;
}

var a = {x:2, y:3};
var b = add1(a);
console.log(a,b); 	//Object {x=4, y=5} Object {x=4, y=5}
//변수 a 와 인수 p 가 같은 객체를 참조하고 있습니다.
//인수로 object와 함수를 전달 할수 있습니다.

 

익명 함수(anonymous function)

함수의 이름을 지정하지 않고 object처럼 리터럴로 정의해서 사용하는 함수를 익명 함수라고 부릅니다.

var square = function(x){ return x*x };
console.log(square(5)); 	//25

//다만 이런 익명함수에도 이름을 붙일 수 있으나 외부에서 호출할 수는 없습니다.
//내부적으로 익명함수는 anonymous function이라고 구분하기 때문입니다.
var square2 = function sq(x){return x*x;};
console.log(sq(3)); 	//익명함수는 이름을 붙였다고 해서 이렇게 외부에서 호출 할 수 없습니다.
console.log(square2(3)); 		//9

 

메서드(method)

객체의 프로퍼티(property or member)이 함수로 되어있는 경우 method라고 부릅니다.

자바스크립트에서는 메서드도 프로퍼티의 일종입니다.

메서드는 객체 내부의 값을 바꾸는 용도로 사용합니다.

var circle = {
    center: {x:2.0, y:3.0},
    radius: 4,
    area: function(){
        return Math.PI * this.radius*this.radius;
    }
};
console.log(circle.area()); 	//반지름이 4인 원의 넓이가 출력됩니다.

 

내장 객체

자바스크립트에 기본적으로 포함되어 있는 생성자들이 있는데 이 내장 생성자로 객체를 생성하여 내장 객체를 사용할 수 있습니다.

Object, String, Array, Date, Function, JSON, Math ... 등이 있습니다.

전역 객체 : 프로그램 전체에서 사용할 수있습니다.
네이티브 객체: Object, String, Boolean, Array 등 ECMAScript에서 정의 된 객체
호스트 객체: Window, Document등 브라우저 객체나 DOM, XMLHttpRequest, HTML5 API 등을 말합니다.

Date 객체 예제

var start = new Date();
sleep(1000);
var end = new Date();
console.log(end - start);

start.getFullYear(); 		//년도: 2022
start.getMonth(); 			//월: 단 0부터 시작하므로 실제 월은 1을 더해야 함
start.getDate(); 			//날짜
start.getDay();				//요일: 일요일이 0 임.
start.getHours(); 			//시각
start.getMinutes(); 		//분
start.getSeconds();			//초
start.getMilliseconds(); 	//밀리초
start.toString(); 			//Thu Mar 19 2022 15:10:44 GMT+0900(KST) 포멧으로 출력

Array

자바, C++등에서는 배열이 메모리의 연속된 데이터들을 의미하지만 자바스크립트에서 Array는 기능적으로 배열의 기능을 구현해 놓았지만 사실은 object이기 때문에 인덱스가 반드시 0부터 순서대로 있지 않을 수도 있습니다. 자바스크립트에서는 실행 중간에 객체의 프로퍼티를 삭제하거나 추가할 수 있기 때문입니다.