📝 JavaScript
🖥️ 1. 객체
1-1. 객체의 생성 과정
- 빈 객체의 생성
- 아무런 기능이 없는 상태의 빈 객체를 생성
-prototype
- 변수의 추가
- 빈 객체 안에 변수들을 추가해 넣는다.
- 용도에 따라서 객체를 생성하고, 변수를 그룹화하기 위해서 사용된다.
- 함수의 추가
- 빈 객체 안에 함수들을 추가해 넣는다.
- 기능은 서로 다르지만, 용도가 비슷한 함수들은 하나의 그룹으로 묶기 위한 단위가 객체이다.
1-2. 빈 객체의 생성
let people = {}
1-3. 변수의 추가
- 객체 안에 추가되어 있는 변수를 멤버변수 혹은 프로퍼티라고 한다.
- 변수를 추가하기 위해서는 '객체이름.변수명 = 값' 의 형식을 사용한다.
선언 위한 별도의 키워드는 사용되지 않는다.
people.name = "자바학생"; people.age = 20;
EX1)
<body>
<script>
let people = {};
people.name = "자바학생";
people.age = 20;
document.write("<h1>" + people.name + "님은 "
+ people.age + "살 입니다.</h1>");
</script>
</body>EX2)
<body>
<script>
let grade = {};
grade['aaa'] = 10;
grade['bbb'] = 20;
grade['ccc'] = 30;
for( key in grade ){ // key = 지역변수 (블럭 괄호 안에서 활용)
document.write( "key : " + key + ", value : "
+ grade[key] + "<br/>");
}
// key : aaa, value : 10
// key : bbb, value : 20
// key : ccc, value : 30
</script>
</body>EX3)
<body>
<script>
let grade = {
'list' : { 'a' : 10, 'b' : 20, 'c' : 30 },
'show' : function(){
document.write('Hello World');
}
};
document.write(grade.list + "<br/>");
// [object Object]
document.write(grade.list.b + "<br/>");
// 20
document.write(grade['list']['c'] + "<br/>");
// 30
grade.show();
// Hello World
document.write("<br/>");
grade['show']();
// Hello World
</script>
</body>EX4) this
<body>
<script>
/* this : 함수가 속해있는 객체를 가르키는 객체 */
let grade = {
'list' : {'a':10, 'b':20, 'c':30},
'show' : function(){
console.log(this.list);
}
};
grade.show();
</script>
</body>
☑️ 콘솔창에 뜨는 결과값
a: 10
b: 20
c: 30EX5)
<body>
<script>
let grade = {
'list' : {'aaa' : 10, 'bbb' : 6, 'ccc' : 80},
'show' : function(){
// this 키워드를 사용하여 로직
// document.write()
for( name in this.list ){
document.write(name + ": " + this.list[name] + "<br/>");
}
}
};
grade.show();
// aaa: 10
// bbb: 6
// ccc: 80
</script>
</body>EX6)
<body>
<script>
let people = {};
people.name = "자바학생";
people.gender = "여자";
// 객체 안에 함수를 포함시키기
people.sayName = function(){
document.write("<h1>" + this.name + "</h1>");
}
people.sayGender = function(){
document.write("<h1>" + this.gender + "</h1>");
}
people.saySomething = function(msg){
document.write("<h1>" + msg + "</h1>");
}
people.getName = function(){
return this.name;
}
people.getGender = function(){
return this.gender;
}
people.sayInfo = function(){
document.write("<h1>" + this.getName() + "님은 "
+ this.getGender() + "입니다.</h1></hr>");
}
people.sayName();
people.sayGender();
people.saySomething("Javascript");
people.sayInfo();
</script>
</body>