다연이네

[days05] js 객체와 함수 본문

Web/JavaScript

[days05] js 객체와 함수

　다연　 2020. 12. 15. 22:20
반응형

 js 객체 
- js 기본형을 제외하면 모두 객체이다.
- js 기본형 : string, number, boolean, null, undefined
- js 객체(object) : Math, Date, 정규표현식, 배열, 함수(function), object

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
	
	//var person = "admin"; //string (객체 아님, 기본형)
	//하.지.만
	//var person ={}; //object (객체)
	//클래스 선언x -> {} 객체(object)
	var person = {name:"admin", age:20};
	
	//[js 객체를 만드는 가장 쉬운 방법]
	var person = {
		firstname:"john",
		lastname:"Doe",
		age:50,
		eyecolor: "blue",
		//메소드 선언
		fullName: function() {
			//this는 객체 자기 자신
			return this.firstname+" "+this.lastname;
		}
	}; 
	
	//1 새로운 속성(필드) 추가
	//person.새로운속성명 = 속성값
	person.nationality = "korea"; 
	
	//2 속성 삭제
	delete person.eyecolor;
	//delete person["eyecolor"]; 도 가능
	
	//3 객체의 메소드 호출
	//객체명.메소드명()
	var name = person.fullName();
	//alert(name); //John Doe 
	
	//4 메소드를 객체에 추가
	//객체명.메소드명 = function(){}
	person.name = function() {
		return this.firstname+"/"+this.lastname;
	}
	//var name2 = person.name();
	//alert(name2); //john/Doe
	
	//5 객체의 모든 속성(필드) 출력
	/* for ( var pn in person) {
		document.write(person[pn]+"<br>");
	}
	 */
	//5-2 객체의 모든 속성 출력
	//[Object.values() 사용해서 출력]
	 var myArray =Object.values(person);
	 document.write(myArray.join("<br>"));
	
	//[js 객체를 만드는 또다른 방법] (권장x)
	/* 	
	var person = new Object();
	person.firstname = "john";
	person.lastname = "Doe";
	person.age = 50;
	person.eyecolor="blue";
	 */
	
	
</script>
</body>
</html>

 

ES5 (ECMAScript 2009)
Getter, Setter 개념 도입

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
	//ES5 (ECMAScript 2009)
	//Getter, Setter 개념 도입
	var person = {
			fname : "john",
			lname : "Doe",
			language : "kr",
			get lang(){
				//기본 속성값을 대문자로 변환하여 반환 가능 (조작 가능)
				return this.language.toUpperCase(); 
			},
			set lang(lang){ //매개변수 
				this.language = lang.toUpperCase(); //집어넣을때도 조작 가능
			},
			/* 
			fullName : function() {
				return this.fname +" "+this.lname;
			}
			 */
			 get fullName(){
				 return this.fname +" "+this.lname;
			 }
	};
	
	//document.write(person.language); //kr
	//document.write(person.lang); //KR	getter 사용된 것
/* 	
 	person.lang="en";//setter
	document.write(person.lang); //EN	getter 호출
*/
	
	document.write(person.fullName);
	
</script>
</body>
</html>

 

 

js Object Constructor(객체 생성자)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
	//[js Object Constructor(객체 생성자)]
	function Person(fname, lname, age, eyecolor) {
		this.fname = fname;
		this.lname = lname;
		this.age = age;
		this.eyecolor = eyecolor;
		//ex09에서는 (ES6에서는) 생성자 선언했는데
		//
		this.name = function () { //객체생성자함수 안에 메소드 선언 가능
			return this.fname+" "+this.lname;
		};
		this.changeName=function(name){
			this.lname = name;
		}
	}
	
	//아까 Car class
	class Car{
		constructor(name, year){
			this.name=name; 
			this.year =year;
		}
	//Car [객체 생성자 함수] (이렇게 해도 된다)
	function  Car(name, age){
			this.name=name; 
			this.year =year;
		}
	
	//객체 생성자를 통해 myFather, myMother 객체 생성
	var myFather = new Person("john","doe",40,"blue");
	var myMother = new Person("saily","doe",44,"black");
	
	//1. myFather 생성된 객체에 새로운 속성 추가 
	myFather.nationality ="korea";
	//document.write(myFather.nationality+"<br>"); //korea
	
	//1-1 Person [객체 생성자](Person)를 사용해 [새로운 속성 추가]  => X
	//Person.test = "ttt";
	//document.write(myFather.test+"<br>"); //undefined
	
	
	//2. 생성된 객체에 새로운 메소드 추가
	myFather.name =function(){
		return this.fname+" "+this.lname;
	}
	//document.write(myFather.name()+"<br>"); //john doe
</script>
</body>
</html>

또는 js prototype 속성을 사용해서 객체 생성자에 새로운 속성을 추가할 수 있다.

<script>
Person.prototype.eyecolor = "blue";

//js prototype 속성을 이용하면 새로운 메소드 추가도 가능하더라
Person.prototype.name = function() {
	return this.fname +" "+this.lname;
}
</script>

 

 

 

 js 함수 


 closures(크로저) *** 나중에 중요하다 이게

 

function 함수명(매개변수...) {
return 반환값;
}  

 

<script>
function sum(a,b) {
	return a+b;
} 
document.write(sum(10,20)+"<br>"); //30
</script>

 

익명 함수를 x라는 변수에 담기

<script>
var x = function (a,b) {
	return a+b;
}
document.write(x(1,2)+"<br>"); //3
</script>

화살표 함수 사용

<script>
var x = (a,b) => a+b;
document.write(x(3,4)+"<br>"); //7
</script>

 js Function() 생성자

<script>
var x = new Function ("a","b","return a+b") ;
	document.write(x(1,2)+"<br>");  //3
</script>

자체 호출 함수 : 함수가 호출부가 없어도 자동으로 호출된다.
   함수 선언부를 괄호()로 묶는다 -> 그 뒤에 ();를 붙힌다

<script>
(function test() { //함수명 지워도 상관없음
	document.write("함수 자체 호출된다.<br>");
})();

//test(); 필요없음
</script>

 

<script>
	function sum(a,b=0) { //ES6부터 이렇게 기본값 허용
		//arguments 컬렉션
		//if(b===undefined) b=0; 안넘어왔을때 기본값 설정하기 => 옛날버전
		return arguments.length;
	}
	 //document.write(sum(1,2)); //2
	 //document.write(sum(1,2,3,4,5)); //5
	 document.write(sum(1)); //1
	 //매개변수 개수 상관없다
	/*  window.addEventListener(type, function(e) {
	 	
	 }, true)//그래서 여기 true 지워도 된다는 것 */
	 
	 
	 
</script>

 

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days06] 클로저(Closure) (중요! 취업질문 多)  (0) 2020.12.16
[days06] js call()/apply() 메소드  (0) 2020.12.16
[days05] 1) js 클래스 + constructor 2) form태그 유효성 검사  (0) 2020.12.15
[days05] Arrow Function (화살표 함수)와 this  (0) 2020.12.15
[days05] 변수, var /let /const 키워드  (0) 2020.12.15
'Web/JavaScript' Related Articles more
Comments