[구디아카데미]
✅ 자바스크립트 객체
- js에서 객체는 key:value 형식의 구조를 가짐
- 객체에 선언된 key는 객체에 속한 하나의 변수(속성)이며 모든 자료형값을 저장 할 수 있다
- key에 함수가 저장이되면, 멤버메소드로 보면된다
- key 값은 중복이 불가능하다
✅ 객체 생성 방법
- 리터럴로 생성하기 : {key:value,key:value,key:value.....}
<h4>리터럴로 생성하기</h4>
<script>
let obj={}; // 객체
console.log(obj,typeof obj);
// 생성과 동시에 초기화한 객체
obj={name:"유병승",age:19,gender:"남",hobby:["독서","코딩"],
item:{ // 객체 변수 item 만듬 (객체 안의 객체)
name:"컴퓨터",
price:150
},
getString:function(){ // 객체안의 메소드 정의 = 메소드 변수 이름 : getString
return this.name + " " + this.age + " " + this.gender+ " "+this.hobby;
}};
console.log(obj);
// 생성된 객체의 데이터에 접근하기
// 객체에 접근할 때는 키 값을 이용해서 접근한다.
// 객체명. 또는 객체명["키값"] 으로 접근
console.log(obj.name);
console.log(obj["age"]);
let key = "name";
// consol.log(obj.key); // .으로는 변수로 접근 못함
console.log(obj[key]); // []로는 변수로 접근 가능
// 객체 속성중 배열 접근하기
console.log(obj.hobby[0]);
console.log(obj["hobby"][1]);
// 객체 속성중 객체에 접근하기
console.log(obj.item.name);
console.log(obj["item"].price);
console.log(obj["item"]["name"]);
// 객체 속성중 함수에 접근하기
let result = obj.getString();
console.log(result);
// 객체에 있는 데이터 순회하기
// for in 구문사용 객체의 key 값을 가져오는 for문
for(k in obj){
console.log(obj[k]); // k는 변수이므로 .으로 접근 할수없어서 []로 접근해야함
}
</script>- 함수(생성자 함수, 일반함수)를 이용해서 객체를 생성하기
--> 일반함수 : 객체를 반환하는 함수
--> 생성자함수 : new연산자로 생성할 수 있게 해주는 함수- 자바의 생성자와 동일한 기능을 한다고 생각
- 선언된 함수가 자바의 클래스와 유사함
- 생성자함수로 선언된 객체는 new 연산자를 이용해서 생성함
- 생성자함수의 명칭을 첫글자를 대문자로 명명함
- prototype을 이용할 수 있다.(원본형)
<h2>함수를 이용해서 객체를 생성하기</h2>
<script>
// 이름, 나이, 학년, 반, 번호를 갖는 학생 3명을 저장하기
let s = getStudent("유병승",19,1,3,3);
let s1 = getStudent("최주영",26,3,1,1);
let s2 = getStudent("이은지",26,3,1,2);
console.log(s.toString());
console.log(s1.toString());
console.log(s2.toString());
console.log(s.name);
console.log(s["age"]);
for(k in s){
console.log(k,s[k]);
}
function getStudent(name,age,grade,classNum,number){
let s = {name:name, age:age, grade:grade, classNum:classNum, number:number,
// s 변수에는 각 필드들과, 멤버 함수 toString 값이 들어있다
toString:function(){
return this.name + this.age + this.grade + this.classNum + this.number;
}
};
return s;
}
</script>
<h3>생성자 함수를 이용해서 객체를 생성하기</h3>
<p>
자바의 생성자와 동일한 기능을 한다고 생각!<br>
선언된 함수가 자바의 클래스와 유사함
생성자함수로 선언된 객체는 new 연산자를 이용해서 생성함.<br>
생성자함수의 명칭을 첫글자를 대문자로 명명함. <br>
prototype을 이용할 수 있다.(원본형)
</p>
<script>
function Person(name, age, gender, height, address){
// 생성자 함수에서 속성을 설정할 때는 this 예약어를 사용함.
this.name = name;
this.age = age;
this.gender = gender;
this.height = height;
this.address = address;
// this.toString = function(){
// return this.name + this.age + this.gender + this.height + this.address;
// }
}
// 공통으로 사용하는 함수에대해 prototype을 이용해서 선언할 수 있다.
// 객체마다 함수를 만들면 각각 만들어지는데 데이터 낭비로인해, 공용으로 사용하는 함수 사용
Person.prototype.toString = function(){
return this.name + this.age + this.gender + this.height + this.address;
}
let p = new Person("김재훈",29,"남",188.3,"인천"); // p는 생성자 변수임
console.log(p);
// console.log(p.name);
// console.log(p['age']);
console.log(p.toString());
// for(k in p){
// console.log(k); // k는 키값임
// }
</script>
<h3>객체 속성에 값 대입하기</h3>
<script>
//속성을 지정하고 대입연산을 사용하면 된다.
p.age = 22;
p["height"] = 173.2;
console.log(p);
</script>
<h3>객체에 속성(멤버변수)을 추가하고, 삭제하기</h3>
<script>
let objTest = {};
console.log(objTest);
objTest.title = "오늘은 여기까지만!";
console.log(objTest); // 키가 title이고 값이 "오늘은 여기까지만!" 인 속성 추가
objTest.calc=(su,su2)=>su+su2;
console.log(objTest.calc(10,20)); // 30
console.log(p);
p.score=[100,10,10]; // 키 : score , 값 :[100,10,10]인 속성 추가
console.log(p);
objTest["content"] = "전 제데로 안나와요"; // 키 :content, 값 : "전제데로 안나와요" 인 속성 추가
console.log(objTest);
delete(objTest.title); // 키를 통해서 값까지 같이 삭제함 (title : 키)
console.log(objTest);
delete(objTest["content"]);
console.log(objTest);
</script>
✅ 객체 변경 금지
- Object.freeze() : 추가, 삭제, 수정이 모두 안됨
- Object.seal(): 수정만 가능
- Object.preventExtension() : 삭제, 수정이 가능
<script>
let freezeObj = {name:"test",content:"contentTest"};
let sealObj = {name:"test",content:"contentTest"};
let preventObj = {name:"test",content:"contentTest"};
Object.freeze(freezeObj); // freezeoObj 객체 freeze 처리함
freezeObj.name = "유병승";
console.log(freezeObj); // freeze는 객체의 추가, 삭제, 수정 불가능
freezeObj.count = 100;
delete freezeObj.content;
console.log(freezeObj);
Object.seal(sealObj); // sealObj 객체 seal 처리함
sealObj.name = "seal"; // seal은 수정만 가능함
sealObj.count = 100;
delete sealObj.content;
console.log(sealObj);
Object.preventExtensions(preventObj); // preventObj 객체 prvent 처리함
preventObj.name = "prevent"; // 수정
preventObj.count = 100;
delete preventObj.content; // 삭제
console.log(preventObj);
// 객체 freeze여부 확인하기
console.log(Object.isFrozen(freezeObj)); // true
console.log(Object.isSealed(sealObj)); // true
console.log(Object.isExtensible(preventObj)); // false
</script>✅ 객체를 배열로 관리
<script>
function Person(name, age, gender, height, address){
// 생성자 함수에서 속성을 설정할 때는 this 예약어를 사용함.
this.name = name;
this.age = age;
this.gender = gender;
this.height = height;
this.address = address;
// this.toString = function(){
// return this.name + this.age + this.gender + this.height + this.address;
// }
}
let persons = [
new Person("유병승",19,"남",180.5,"경기도 시흥시"),
new Person("최주영",26,"남",176.3,"경기도 안양시"),
new Person("김현영",26,"여",163.5,"서울시 구로구"),
new Person("최인호",26,"남",179.6,"서울시 금천구"),
new Person("이동제",25,"남",178.6,"경기도 군포시"),
];
console.log(persons);
console.log(persons[0].name); // 유병승
console.log(persons[1].name); // 최주영
persons.forEach(e=>{
console.log(e); // foreach문으로 모든 데이터 조회
})
persons.forEach(e=>{
console.log(e.name + " "+ e.age);
})
</script>✅ js 속성(멤버변수) 은닉하기
<script>
function Employee(name1, salary1, dept1){
let name = name1;
let salary = salary1;
let dept = dept1;
this.getName = function(){
return name;
}
this.setName = function(paramName){
if(typeof paramName == 'string'){ // string만 입력받도록 예외처리
name = paramName;
}else{
throw new Error("잘못된 인수입니다. string형을 사용하세요");
}
}
}
let e = new Employee("유병승",150,"강사부");
console.log(e); // 정보은닉으로 필드들을 볼 수 없지만, set과 get 함수를 통해 접근할 수 있다.
console.log(e.getName()); // 유병승
e.setName("최하리");
console.log(e.getName()); // 최하리
</script>
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!