[js] 5. Object 클래스함수 | Array 클래스함수 | JSON | 구조분해할당

1. Object클래스 함수

22_Object.html

• 언제 사용? 원하는 요소의 객체를 "딱 하나만 생성"하고 싶을 때
• 자바스크립트에서 이미 만들어진 클래스 함수임
• 요소가 하나도 선언되어 있지 않은 클래스 함수 - 요소가 없는 객체 생성
• 생성된 Object 객체에 필요한 요소를 추가하여 사용

1) Object클래스 함수로 "Object객체" 생성

//1. 🖤 Object객체생성
//💙요소가 하나도 없는 객체 생성 - Empty Object
var student=new Object();
//객체변수를 출력하면 객체를 생성한 클래스 함수명을 제공받아 출력
alert(student);
//[object Object] : 해석) Object클래스함수로 만든 객체 입니다.



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



//3. 🖤 Object객체의 요소 사용
//프로퍼티 호출
alert("학번 = " + student.num + " , 이름 = " + student.name + " , 주소 = " + student.address);
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구
//메소드호출
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구

2) JSON 기능을 이용한 "Object객체" 생성

• 자바스크립트에서는 Object 객체를 보다 쉽게 생성하기 위해 JSON 기능 제공
• JSON(JavaScript Object Notation) : 자바스크립트 객체 표기법, 자바스크립트에서 객체를 쉽게 생성하기 위해 제공되는 방법

//방법1.
//Object 객체 { }
{ 
	"요소명":값 , 
	"요소명":함수 , 
	... 
}

//방법2.
//Array객체 [ ]
[ 요소명, 요소명, 요소명, ... ]

//1)
//💙요소가 하나도 없는 객체 생성 - Empty Object
//1. 🖤 Object객체생성
var student={};

alert(student);
//[object Object] : 해석) Object클래스함수로 만든 객체 입니다.

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

//3. 🖤 Object객체의 요소 사용
//메소드호출
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구




//2)
//💙요소를 가진 Object 객체 생성 : JSON을 이용해 객체를 생성하면 객체 생성 시 요소 추가 가능
//🖤방법1. Object객체생성 및 Object객체에 요소 추가
var student={
		"num":1000,
		"name":"홍길동",
		"address":"서울시 강남구",
		"display":function() { alert("학번 = " + this.num + " , 이름 = " + this.name + " , 주소 = "+ this.address); }
};
//🖤방법2. 요소명은 문자값으로 표현하여 사용하는 것을 권장
var student={
		num:1000,
		name:"홍길동",
		address:"서울시 강남구",
		display:function() { alert("학번 = " + this.num + " , 이름 = " + this.name + " , 주소 = "+ this.address); }
};
//🖤방법3. ES6에서는 Object 객체에서 메소드를 간결하게 표현 가능
var student={
		num:1000,
		name:"홍길동",
		address:"서울시 강남구",
		display(){ alert("학번 = " + this.num + " , 이름 = " + this.name + " , 주소 = "+ this.address); }
};



//🖤 Object객체의 요소 사용
//메소드호출
student.display();
//학번 = 1000 , 이름 = 홍길동 , 주소 = 서울시 강남구

 

 

 

 

 

 

2. Array클래스 함수

23_Array.html

• 값(객체)를 여러개 저장하기 위한 객체( 배열 )을 생성하기 위한 클래스 함수 - 객체에 대한 프로퍼티와 메소드 제공

1) Array클래스 함수로 "Array객체" 생성

//1)
//💙요소가 하나도 없는 Array객체 생성
//1. 🖤Array객체생성
//요소가 하나도 없는 Array 객체 생성 - Empty Array
var array=new Array();

//2. 🖤Array객체가 제공해주는 프로퍼티 & 메소드 사용
//Array.length : Array 객체에 저장된 요소의 갯수를 저장한 프로퍼티
alert(array.length); //0
//Array.toString() : Array 객체에 저장된 모든 요소값을 문자값으로 변환하여 반환하는 메소드
alert(array.toString()); //아무것도 출력되지 않음
//Array객체가 저장된 객체변수를 출력할 경우 자동으로 toString() 메소드 호출
alert(array);


//2)
//💙요소를 가진 Array객체 생성
//🖤방법1. 
//1. 🖤Array객체생성
//Array(size) : 매개변수에 전달된 정수값의 갯수만큼 요소를 가진 Array 객체 생성
//=> Array 객체의 요소에는 자동으로 null 저장
var array=new Array(5);
//2. 🖤Array객체가 제공해주는 프로퍼티 & 메소드 사용
alert(array.length); //5
alert(array); //요소값들이 모두 null이라 ,,,,, 출력됨

//🖤 방법2.
//1. 🖤Array객체생성
//Array(value,value,...) : 매개변수에 전달된 값이 요소값으로 저장된 Array 객체 생성
//=> 매개변수에 전달된 값의 갯수만큼 Array 객체의 요소 생성
var array=new Array(10,20,30,40,50);
//2. 🖤 Array객체가 제공해주는 프로퍼티 & 메소드 사용
alert(array.length); //5
alert(array); //10,20,30,40,50

2) JSON 기능을 이용한 "Array객체" 생성

//1)
//💙요소가 하나도 없는 Array 객체 생성 
//🖤 Array객체생성
//JSON 기능을 사용하여 Array 객체 생성 - [] 연산자
var array=[]; //Empty Array


//2)
//💙요소가 하나도 없는 Array 객체 생성
//🖤 Array객체생성
//JSON 기능을 사용하여 Array 객체 생성시 요소의 초기값 설정 가능
var array=[10,20,30];
//🖤 Array객체의 요소 사용
//=> Array객체에 저장된 요소는 첨자(Index - 0부터 1씩 증가되는 정수값)를 사용하여 구분함
//=> Array 객체의 요소를 표현할 경우 []연산자에 첨자를 사용하여 요소 표현
alert("arrary[0] = " + array[0]); //arrary[0] = 10
alert("arrary[1] = " + array[1]); //arrary[1] = 20
alert("arrary[2] = " + array[2]); //arrary[2] = 30
//Array객체의 요소를 표현하는 첨자가 범위를 벗어난 경우 [Undefined] 자료형으로 표현
alert("arrary[3] = " + array[3]); //arrary[3] = undefined , 정의되어있지않아~

3) Array객체의 일괄처리

• 배열을 사용하는 가장 중요한 목적 : 일괄처리하기위해

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

//🎀 for 구문
//=> for 구문을 사용하여 Array 객체의 요소를 일괄처리
for(i=0; i<array.length; i++){
	alert("arrary["+i+"] = " + array[i]);
}
//arrary[0] = 10
//arrary[1] = 20
//arrary[2] = 30

//🎀 in 연산자
//=> for 구문에 **in 연산자**를 이용해 Array객체의 첨자 (Array 객체의 요소명 = 첨자) 를 제공받아 일괄 처리
for(index in array){
	alert("arrary["+index+"] = " + array[index]);
}
//arrary[0] = 10
//arrary[1] = 20
//arrary[2] = 30

//🎀 of 연산자
//=> for 구문에 **of 연산자**를 이용해 Array객체의 요소값을 하나씩 제공받아 일괄처리
for(value of array){
	alert(value);
}
//10
//20
//30

//🎀 Array.forEach( ) 메소드
//=> Array.forEach(callback ( element [,index] [,array] ) : Array 객체의 요소를 일괄처리 하기 위한 기능을 제공하는 메소드
//=> 콜백함수가 Array 객체에 저장된 요소의 갯수만큼 반복 호출됨
//=> 콜백함수의 매개변수에는 Array 객체의 요소값 , 첨자 , Array 객체가 자동 저장됨
//=> 콜백함수는 forEach함수의 내부에서 자동으로 호출해줄 것이므로 element , index , array 매개변수만 잡아주면 매개변수에 해당하는 값들이 자동으로 저장됨
array.forEach(function(element, index, array) {
	alert("arrary["+index+"] = " + element);
	//alert(array); //10,20,30
});
//arrary[0] = 10
//arrary[1] = 20
//arrary[2] = 30

4) Array객체의 요소 추가, 삭제

• 자바의 ArrayList 객체와 비슷
• 자바의 배열은 요소에 대한 추가, 삭제 불가능
• 자바스크립트의 Array객체는 요소에 대한 추가, 삭제 가능

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

//Array.push(value) : Array 객체의 마지막 위치에 요소를 추가하여 전달값을 저장하는 메소드
array.push(40)
alert(array); //10,20,30,40

//Array.pop() : Array 객체의 마지막 위치에 요소를 제거하고 요소값을 반환하는 메소드
var num = array.pop();
alert(num); //40
alert(array); //10,20,30

//Array.unshift(value) : Array 객체의 첫번째 위치에 요소를 추가하여 전달값을 저장하는 메소드
array.unshift(40);
alert(array); //40,10,20,30

//Array.shift() : Array 객체의 첫번째 위치에 요소를 제거하고 요소값을 반환하는 메소드
var num = array.shift();
alert(num); //40
alert(array); //10,20,30

 

 

 

 

 

 

 

3. 구조분해할당(Destructuring Assignment)

24_destructing.html

• Array객체(배열) 이나 Object객체의 요소를 해체하여 요소값을 개별변수에 저장하여 제공하기 위한 기능 - ES6

1) Array객체의 구조분해할당

🍀 Array객체의 구조분해할당 없이 사용

var array = ["홍길동","임꺽정","전우치"];
//요소의 요소값을 각각 변수에 저장
var one = array[0];
var two = array[1];
var three = array[2];
alert(one +","+two+","+ three); //홍길동,임꺽정,전우치

 

🍀 Array객체의 구조분해할당 사용

//1)
//🐰 Array객체 따로 생성 후 변수에 구조분해할당
//요소값만큼 변수선언
var array = ["홍길동","임꺽정","전우치"];
//요소의 요소값을 각각의 변수에 차례대로 전달되어 저장
var [one, two, three] = array;
alert(one +","+two+","+ three); //홍길동,임꺽정,전우치

//요소값보다 "적게" 변수선언
var array = ["홍길동","임꺽정","전우치"];
var [one, two] = array;
alert(one +","+two); //홍길동,임꺽정


//2)
//🐰 Array객체 직접 생성해 변수에 구조분해할당
//요소값만큼 변수선언
var [one, two, three] = ["홍길동","임꺽정","전우치"];
alert(one +","+two+","+ three); //홍길동,임꺽정,전우치

//요소값보다 "많이" 변수선언
var [one, two, three] = ["홍길동","임꺽정"];
alert(one +","+two+","+ three); //홍길동,임꺽정,undefined

//기본값 설정
//Array객체를 분리 할당할 경우
//할당 받을 값이 없을 때 변수에 저장될 기본값 설정 가능
var [one, two, three="홍경래"] = ["홍길동","임꺽정"];
alert(one +","+two+","+ three);  //홍길동,임꺽정,홍경래
var [one, two, three="홍경래"] = ["홍길동","임꺽정","전우치"];
alert(one +","+two+","+ three);  //홍길동,임꺽정,전우치

//함수에서의 기본값 설정 : 함수 선언 시 매개변수에 저장될 전달값이 없는 경우 저장된 기본값 설정 가능
function sum(num1,num2){//기본값 설정 안한 함수
	return num1+num2;
}
alert("합계 = "+ sum(10,20)); //합계 = 30
alert("합계 = "+ sum(10)); //합계 = NaN

function sum(num1=10,num2=20){//기본값 설정한 함수
	return num1+num2;
}
alert("합계 = "+ sum()); //합계 = 30
alert("합계 = "+ sum(100)); //합계 = 120
alert("합계 = "+ sum(100,200)); //합계 = 300


//3)
//🐰요소의 변수 값 치환 가능
var [num1,num2] = [10,20];
alert("num1 = "+num1+", num2 = "+num2);
//num1 = 10, num2 = 20

//두 변수의 값을 서로 치환
[num1,num2] = [num2,num1];
alert("num1 = "+num1+", num2 = "+num2);
//num1 = 20, num2 = 10


//4)
//🐰Array객체를 반환하는 함수
//return 은 기본적으로 값 하나만 반환하지만, 배열을 이용하여 여러개 반환 가능
function returnArray() {
	return [10,20,30]; //Array객체 반환
}

//방법1.
//반환되는 Array 객체의 요소값을 변수에 저장
var array = returnArray();
alert(array); //10,20,30
//배열의 요소들을 사용하기 위해서는 첨자를 이용해야하지만,
//alert(array[0]+","+array[1]+","+array[2]); //10,20,30

//방법2.
//반환되는 Array 객체의 요소값을 구조 분해하여 각각의 변수에 개별 저장
var [num1,num2,num3] = returnArray();
//구조 분해할당을 하면 변수로 이용하면 됨
alert(num1+","+num2+","+num3); //10,20,30

//var phone = "010-1234-5678";
var phone = "010-1234-5678";
//var phoneArray = phone.split("-"); //반환받은 배열을 배열변수에 저장
//alert(phoneArray[0]); //010
//alert(phoneArray[1]); //1234
//alert(phoneArray[2]); //5678
var [phone1,phone2,phone3] = phone.split("-");	//반환받은 배열을 일반변수에 각각 저장
alert(phone1); //010
alert(phone2); //1234
alert(phone3); //5678

//방법3.
//반환되는 Array객체의 요소값을 구조 분해하여 필요한 값만 전달받아 저장
var [num1,,num3] = returnArray();
alert(num1+","+num3); //10,30

//방법4.
//...연산자(전개연산자)를 사용하여 할당된 나머지 값들을 Array 객체로 전달받아 저장
var [num1, ...num2] = returnArray();
alert(num1); //10 : num1 = 10
alert(num2); //20,30 - Array객체 : num2 = [20,30]
alert(num1+","+num2); //10,20,30

•  

2) Object객체의 구조분해할당

🍀 Object객체의 구조분해할당 없이 사용

//Object 객체를 생성하여 객체변수에 저장
var student = {num:1000,name:"홍길동"};
alert("학번 = " + student.num + ", 이름 = "+student.name);
//학번 = 1000, 이름 = 홍길동

 

🍀 Object객체의 구조분해할당 사용

//1)
//🐰Object객체 따로 생성 후 변수에 구조분해할당
//1.
//변수의이름 = 요소의이름과 동일
//Object 객체의 요소값을 구조 분해하여 개별적인 변수에 저장
//=> 주의 ) 변수의 이름이 반드시 요소의 이름과 동일하게 생성
var {num,name} = student;
alert("학번 = " + num + ", 이름 = "+name);
//학번 = 1000, 이름 = 홍길동
//2.
//변수의이름 != 요소의이름과 다름
//변수의 이름을 요소의 이름과 다르게 설정하여 저장 가능
var {num:number,name:irum} = student;
alert("학번 = " + number + ", 이름 = "+irum);
//학번 = 1000, 이름 = 홍길동


//2)
//🐰Object객체 직접 생성해 변수에 구조분해할당
var {num,name} = {num:1000,name:"홍길동"};
alert("학번 = " + num + ", 이름 = "+name);
//학번 = 1000, 이름 = 홍길동


//3)
//🐰for구문 + of연산자 : 일괄처리
var people=[
	{name:"홍길동",subject:{name:"Java",grade:"초급"}},
	{name:"임꺽정",subject:{name:"JSP",grade:"중급"}},
	{name:"전우치",subject:{name:"Spring",grade:"고급"}}
];
for(i=0; i<people.length; i++){
	alert("이름 = "+people[i].name+
          ", 과목명 ="+people[i].subject.name+
          ", 등급 ="+people[i].subject.grade);
	}
//이름 = 홍길동, 과목명 =Java, 등급 =초급
//이름 = 임꺽정, 과목명 =JSP, 등급 =중급
//이름 = 전우치, 과목명 =Spring, 등급 =고급

//for 구문에 of 연산자를 사용하여 Array 객체의 요소값을 하나씩 제공받아 반복 처리 가능
//형식)for(변수명 of 객체){명령; 명령; ...}
for({name:irum,subject:{name,grade}} of people){
	alert("이름 = "+irum+", 과목명 ="+name+", 등급 ="+grade);
}


//4)
//🐰 매개변수로 Object객체를 전달받는 함수
var student = {num:1000, name:"홍길동"};
//방법1.
//매개변수로 Obejct 객체를 전달받아 요소값을 구조 분해하여 개별적인 변수에 저장
function display({num}) {
	return num;
}
alert(display(student)); //1000

//방법2.
//매개변수로 Obejct 객체를 전달받아 요소값을 구조 분해하여 개별적인 변수에 저장
function display({num,name}) {
	alert("학번 = " + num + ", 이름 = "+name);
}
display(student); //학번 = 1000, 이름 = 홍길동
//값이 제대로 전달되려면 반드시 object 객체로 전달
display(1000,"홍길동"); //학번 = undefined, 이름 = undefined
display({num:2000, name:"임꺽정"}); //학번 = 2000, 이름 = 임꺽정