[JavaScript] Object 클래스 함수 / Array 클래스 함수 / JSON 기능

Object 클래스 함수

Object 클래스 함수는 요소가 하나도 선언되어 있지 않은 클래스 함수로, 요소가 하나도 없는 객체를 생성할 때 사용한다.
요소가 하나도 없는 객체를 생성하고, 생성된 Object 객체에 요소를 추가하여 사용할 수 있다.
필요한 요소가 포함된 하나의 객체를 생성하기 위해서 사용한다. (다수의 객체를 만들어주는 것 보다는 단일 객체를 만들 때 많이 사용한다.)

---

Object 객체를 생성해 변수에 저장 - Empty Object : 비어있는 객체 

var student=new Object();

alert(student);//[object Object]

 

Object 객체에 요소 추가 

//요소에 값을 저장 - 프로퍼티 추가 
student.num=1000;
student.name="홍길동";
student.address="서울시 강남구";

//객체 요소에 함수를 저장 - 메소드 추가 
student.display=function() {
	alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}

---

자바스크립트에서는 Object 객체를 보다 쉽게 생성하기 위해 JSON 기능을 제공한다.

JSON(JavaScript Object Notation) : 자바스크립트 객체 표기법 

→ 자바스크립트에서 객체를 쉽게 생성하기 위해 표현하는 방법 
→ Object 객체 : {}, Array 객체 : []

 

//Object 객체 생성 
var student={};
alert(student);//[object Object]

//Object 객체에 요소 추가
student.num=1000;//프로퍼티 추가 
student.name="홍길동";
student.address="서울시 강남구";
student.display=function() {//메소드 추가
	alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
	
student.display();//학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구

 

 

JSON을 이용하면 객체를 생성할 때 요소를 추가하여 초기화 처리할 수 있다는 것이 JSON을 이용하는 가장 큰 이유이다.

형식) var 변수명={"요소명":값, "요소명":값, "요소명":함수, ...}

 

var student={"num":1000, "name":"홍길동", "address":"서울시 강남구"
		, "display":function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);	
	}
};
	
student.display();//학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구

 

ES6에서는 Object 객체의 메소드를 간결하게 표현하여 저장이 가능하다.

var student={"num":1000, "name":"홍길동", "address":"서울시 강남구"
	, display() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);	
	}
};

student.display();//학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구

 

일반적으로 JSON으로 메소드를 만들진 않고 프로퍼티르 만들어 값을 저장하는 경우가 더 많다.

 

---

Array 클래스 함수

다수의 값(객체)를 저장하는 객체를 생성하기 위한 클래스 함수이다. Array 객체의 프로퍼티와 메소드를 제공한다.

---

Array 객체 생성 방법

 

1) 요소가 하나도 없는 Array 객체 생성 - Empty Array 

var array=new Array();

 

Array.length : Array 객체에 저장된 요소의 갯수를 저장하는 프로퍼티 

alert(array.length);//0

 

Array.toString() : Array 객체에 저장된 모든 요소값을 문자값으로 반환하는 메소드 

alert(array.toString());//객체 메소드를 호출하여 반환되는 값 출력 

//Array 객체를 저장한 변수를 출력할 경우 자동으로 toString() 메소드를 호출한다. 
alert(array);

 

 

2) Array(size) : 매개변수로 전달받은 숫자값(정수)의 갯수만큼 요소를 가진 Array 객체를 생성

→ Array 객체의 요소에는 자동으로 null이 저장된다. 

var array=new Array(5);//요소가 5개인 Array 객체 생성 
alert(array.length);//5
alert(array);//,,,,(요소 없음)

 

3) Array(value, value, ...) : 매개변수에 2개 이상의 값을 전달받아 전달값의 갯수만큼 요소를 가진 Array 객체를 생성

→ Array 객체의 요소값으로 전달값이 차례대로 저장된다. 

var array=new Array(10,20,30);
alert(array.length);//3
alert(array);//10,20,30

 

---

 

Array 객체의 요소는 첨자(0부터 1씩 증가되는 숫자값)를 사용하여 구분한다.

→ Array 객체의 요소는 [] 연산자에 첨자를 사용하여 표현한다. 

alert("array[0] = "+array[0]+", array[1] = "+array[1]+", array[2] = "+array[2]);
//array[0] = 10, array[1] = 20, array[2] = 30

 

Array 객체의 요소를 표현하는 첨자가 범위를 벗어난 경우 [undefined] 자료형으로 표현된다. 

alert("array[3] = "+array[3]);//array[3] = undefined

 

---

 

Object 객체와 마찬가지로 JSON을 이용하여 Array 객체를 생성할 수 있다.

var array=[];//Empty Array - Array 안에 요소가 없다 
alert(array.length);//0

 

JSON을 이용하여 Array 객체를 생성한 후, Array 객체의 요소에 초기값을 저장할 수 있다.

var array=[10, 20, 30];

 

---

 

Array 객체에 저장된 요소에 대한 일괄 처리

 

1) for 구문을 이용하여 Array 객체에 저장된 요소에 대한 일괄 처리가 가능하다. (가장 많이 사용) 

for(i=0;i<array.length;i++) {
	alert("array["+i+"] = " + array[i])
}
	
//array[0] = 10
//array[1] = 20
//array[2] = 30

 

 

2) in 연산자를 사용한 for 구문을 이용하여 Array 객체의 첨자를 제공받아 일괄 처리 할 수 있다.

for(index in array) {
	alert("array["+index+"] = "+array[index]);
}
//array[0] = 10
//array[1] = 20
//array[2] = 30

 

 

3) of 연산자를 사용한 for 구문을 이용하여 Array 객체의 요소값을 제공받아 일괄 처리할 수 있다. (ES6) 

for(value of array) {
	alert(value);
}
//10
//20
//30

 

 

4) Array.forEach() 메소드를 이용해 Array 객체의 요소를 일괄 처리할 수 있다.

 

Array.forEach(callback(element[, index][. array])) : Array 객체의 요소를 일괄 처리 하기위한 기능을 제공하는 메소드 

→ 메소드 매개변수에 콜백함수를 전달하면 Array 객체에 저장된 요소의 갯수만큼 반복 호출되며 콜백함수의 매개변수로 전달받은 값을 
이용하여 Array 객체를 콜백함수에서 처리할 수 있다. 
→ 콜백함수의 매개변수에는 요소값, 첨자, Array 객체가 자동 저장되어 콜백함수에서 사용할 수 있다. (첨자와 Array 객체 생략 가능)

array.forEach(function(elt, i) { 
	alert("array["+i+"] = "+elt);
});
//array[0] = 10
//array[1] = 20
//array[2] = 30

 

---

Array의 push(), pop(), unshift(), shift() 함수

 

Array.push(value) : Array 객체의 마지막 위치에 요소를 추가하여 매개변수로 전달받은 값을 요소값으로 저장하는 메소드 

var array=[10, 20, 30];
alert(array);//10,20,30

array.push(40);
alert(array);//10,20,30,40

 

Array.pop() : Array 객체의 마지막 위치에 요소를 삭제하고 삭제된 요소의 값을 반환하는 메소드

var value = array.pop();

alert(array);//10,20,30
alert(value);//40

 

Array.unshift(value) : Array 객체의 첫번째 위치에 요소를 추가하고 매개변수로 전달받은 값을 요소값으로 저장하는 메소드

array.unshift(value);
alert(array);//40,10,20,30

 

Array.shift(value) : Array 객체의 첫번째 위치에 요소를 삭제하고 삭제된 요소의 값을 반환하는 메소드

var value = array.shift();
alert(array);//10,20,30
alert(value);//40