dukDukz
2021.03.31 JS Object 객체란? 본문
객체는 값을 저장할 수 있는 공간이다.
1. 객체 생성
obj 라는 객체를 생성한다.
let obj = new Object();
console.log(obj); 
2. 객체 안에 값 넣어주기
obj라는 객체 안에 name 이란걸 만들어준다. 그 name 안에는 'Zero' 라는 값을 넣을거다.
obj라는 객체 안에 age 란걸 만들어준다. 그 name 안에는 '20' 라는 값을 넣을거다.
let obj = new Object(); //객체 생성 : 값을 저장할 수 있는 공간
obj.name = 'Zero';
console.log(obj); // name : 'zero'
obj.age = '20';
console.log(obj); // {name: "Zero", age: "20"} 배열로 넣어준것
3. 객체 안에 있는 값을 콘솔로 찍어보기
객체 obj에 있는 name 이란걸 찍어볼래
console.log(obj.name); // name return "Zero"
console.log(obj['name']); 결과 : Zero
Zero
4. 객체 안에 (유사)배열 만들기
1) 그냥 배열 만들기
let ullist={
'0':document.createElement('li'),
'1':document.createElement('li'),
'2':document.createElement('li'),
'3':document.createElement('li'),
'4':document.createElement('li')
}
console.log(ullist);
2) 객체 안에 배열 만들기
obj.list = ['1년 프로그래밍', '2년 서버개발자', '3년 프론트'];
console.log(obj);이런식으로 배열을 만들 수 있다.
5. 객체 반복문
1) for in 문
모든 item을 다 열거하겠다.
for in 문: 객체의 프로퍼티 키 열거 전용
=> for(const key in 객체){...반복 수행 코드...}
* (주의)해당 객체가 상속받는 프로토타입 체인상의 모든 프로퍼티 키를 열거한다.
출처: https://curryyou.tistory.com/202 [카레유]
for(item in obj){
console.log(item);
}결과 : name
age
list
이름만 보여줌
2) 더 안에 있는 걸 꺼내올때
for in 문으로 모든 프로퍼티를 열거하는데 obj 안에 [ ] 내용을 다 열거하라는 뜻
더 안쪽으로 들어가는 것
그러면 name 안에 있는 Zero
age 안에 있는 20
list 안에 있는 배열 값 전체를 열거하게 된다.
for(item in obj){
console.log(obj[item]);
}
안에 있는 내용을 보여준다.
여기서 item 은 변수이므로 아무 이름이나 정해주면 된다.
6. 함수와 객체
1) 그냥 함수 선언
function hello(){
console.log('hello world');
}
hello();
결과 : hello world
2) 함수를 변수에 넣는 법
익명의 함수를 hi라는 변수에 넣는다.
const hi = function(){ // 익명의 함수를 만들어서 hi라는 변수에 넣은것
console.log('hello world2');
}
hi();결과: hello world2
객체에다가 함수를 넣을 수도 있다.
7. 객체 안에 함수 만들기
1) obj 라는 객체 안에 hello 라는 함수를 만든다.
obj.hello = function(){
};
console.log(obj);
obj 안에 hello라는 함수를 만들어준다.
obj를 찍어보면 hello function이 생긴 것을 확인할 수 있다.
2) obj 라는 객체 안에 있는 hello 라는 함수에서 this 사용하기
obj.hello = function(){
console.log(this.name);
console.log(this.age);
};
결과 : Zero
20
함수 안에서 this를 사용하게 되면
. 앞에 있는 녀석의 name / age를 불러와라
여기서 this 는 obj
3) obj 라는 객체 안에 hello 라는 함수에 return 값
obj.hello = function(){
return 'Hello world3';
};
console.log(obj.hello());결과 : Hello world3
obj 안에 있는 함수를 찍어라.
앞에 return을 안해주면 undefined로 나옴
도움이 될 만한 블로그
총 정리 코드
object2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object practice</title>
<script>
//객체 선언하고 콘솔로 찍어보기
console.log("*****객체 선언**************************");
let obj = new Object();
obj.name = "Lee";
obj.age = "20";
obj.list = ["사과", "바나나", "딸기"];
console.log(obj);
console.log(obj.name);
console.log(obj.age);
console.log(obj.list);
console.log(obj['name']);
console.log(obj['age']);
console.log(obj['list']);
console.log("*****객체 반복문**************************");
/****************************************/
// 객체 반복문
for(key in obj){
console.log(key);
}
/*
name age list
*/
for(key_item in obj){
console.log(obj[key_item]);
}
/*
Lee 20 사과바나나딸기
*/
console.log("*****변수안에 함수**************************");
/******************************************/
//hi 라는 변수안에 익명인 함수를 넣는다
const hi = function(){
console.log('hello world');
}
hi();
/*
hello world
*/
console.log("*****함수를 Object에 넣기**************************");
/*******************************************/
// 함수를 Object 안에 넣는것
obj.newfunc = function(){
console.log(this.name);
console.log(this.age);
console.log(this.list);
};
// Lee 20 사과바나나딸기
obj.newfunc2 = function(){
return "hello good to see you";
};
console.log(obj.newfunc2());
// hello good to see you
</script>
</head>
<body>
</body>
</html>
'웹 개발 > JAVASCRIPT' 카테고리의 다른 글
| 21.04.12 ① display : flex; ② 단위 vw ③ 레이어 팝업 ④모바일ver (0) | 2021.04.13 |
|---|---|
| 21.04.12 forEach / callback 함수 / 익명함수 (0) | 2021.04.12 |
| 2021.03.31 Javascript 기본기 2_ let과 const 형변환 (2) | 2021.03.31 |
| 2021.03.30 Javascript 기본 문법 (0) | 2021.03.30 |
| 2021.03.30 버튼으로 슬라이드 제어 오류_해결 + 슬라이드 정지/재생 (0) | 2021.03.30 |
