1. 배열이란?<복습>
console 에서
var coworkers = ['sung', 'yaya']
을 배열을 묶어주고
coworkers[0] 을치면 sung 이 나오고 [1]을 치면 yaya가 나온다.
정보의 양이 많아졌을 때 서로 연관된 정보를 정리정돈하기 위한 도구
정보를 담는 그릇이면서 순서에 따라서 정보를 정리정돈하는 특징이 있다
그렇다면 순서 없이 정보를 저장하는 도구도 있지 않을까? = 객체 =이름이 있는 정리정돈 상자
2. 객체의 문법
coworkers라는 변수에 객체를 넣는 작업을 할 것이다.
배열은 대괄호, 객체는 중괄호를 쓴다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>object</h1>
<h2>Create</h2>
<script>
var coworkers = {
"programmer": "sung",
"designer": "yaya"
};
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>
</body>
</html>
programmer : sung
designer : yaya
bookkeeper : duru
data scientist : taeho
잘못한 점
- document.write를 coworkers.write 로 써서 안나왔었고
- coworkers["~"]에 coworkers.[~] .을 붙여서 안나왔었다.
<객체 생성법>
sung이라는 정보를 넣었을 때 이 객체는 이름이 필요하다. programmer라는 딱지를 붙여서 저장한 것이다.
yaya라는 정보를 designer라는 딱지를 붙여서 저장한 것이다.
<객체의 데이터를 가져오는 법>
이 정보를 꺼내오고 싶다면 document.write("programmer : "+coworkers.programmer);
여기에 있는 "."은 object access operator 라고 부른다. 즉, 여기있는 이 객체에 엑세스, 접근하는 오퍼레이터를 뜻함.
<데이터를 넣는 법>이미 객체가 만들어진 다음에 정보를 추가하고 싶다면 ?
coworkers.bookkeeper = "duru"; 를 추가 그 밑에 설명
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
하지만 data scientist 같이 공백을 줘야하는 단어는?
이름에는 공백을 쓸 경우 문법적 오류임으로 배열에서 어떤 정보를 가져올 때 쓰는 대괄호를 써주어야한다. 위에서 콘솔에서 했던 coworkers[0] 이나 [1] 같이 [] 안에 문자를 쓰면 띄어쓰기 가능과 함께 똑같은 효과를 볼 수 있다.
coworkers["data scientist"] = "taeho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
3. 객체와 반복문
생성된 객체에 어떤 데이터가 있는지 모조리 다 가져와야 하는 경우 배열에서 반복문으로 데이터를 다 가져와야 한다. 여기에서는 객체의 데이터를 순회하는 방법 배울 것이다.
구글링: js object iterate(반복하다)
<script>
var coworkers = {
"programmer": "sung",
"designer": "yaya"
};
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
</script>
</body>
</html>
programmer : sung
designer : yaya
bookkeeper : duru
data scientist : taeho
'for'을 쓰면 coworkers라는 변수가 가리키는 객체(ex)programmer : sung)에 있는 key 값들을 가져오는 반복문 사용이 가능하다. for ... in
for (var key in yourobject) {
console.log(key, yourobject[key]);
}
key 값은
programmer
designer
bookkeeper
data scientist
우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠 = key
반면, 배열에서는 순서대로 정리정된 되어 있기 때문에 key라는 표현을 안쓰고 index를 쓴다.
(참고 - 배열은 대괄호, 객체는 중괄호)
coworkers에 있는 key 를 하나하나 꺼내 중괄호-(객채용)에 있는 코드를 실행해 주는 명령이 for 이다.
coworkers라고 하는 객체에 있는 데이터들의 수만큼, 중괄호의 코드들이 실행이 되는데 실행될 때 마다, key값들 하나하나를 변수 값으로 세팅해준다.
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key+'<br>');
}
</script>
programmer
designer
bookkeeper
data scientist
이렇게 하면 coworkers에 있는 key값들을 모조리 출력한다.
coworkers에 있는 어떤 특정한 데이터를 가져올 때, 우리가 배열의 형식을 사용해서 index가 들어가는 곳에 key 값을 넣었더니 데이터를 가져올 수 있었다. 이걸 활용하면 객채의 정보들이 나온다.
아까 위에서 언급한 것.
하지만 data scientist 같이 공백을 줘야하는 단어는?
이름에는 공백을 쓸 경우 문법적 오류임으로 배열에서 어떤 정보를 가져올 때 쓰는 대괄호를 써주어야한다. 위에서 콘솔에서 했던 coworkers[0] 이나 [1] 같이 [] 안에 문자를 쓰면 띄어쓰기 가능과 함께 똑같은 효과를 볼 수 있다.
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(coworkers[key]+'<br>');
}
</script>
sung
yaya
duru
taeho
이 점을 착안해서 하면 Create랑 똑같은 결과가 나온다. 'string'은 '를 써주어야 한다는 것을 기억하렴. (':')
<h2>Iterate</h2>
<script>
for(var key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}
</script>
programmer : sung
designer : yaya
bookkeeper : duru
data scientist : techno
for in코드는 모든 데이터를 순회하면서 우리가 필요한 데이터가 있는지 없는지 확인할 수 있는 기능이다.
4. 객체프로퍼티와 메소드
객체에는 어떤 데이터를 닮을 수 있다. 문자, 배열, 숫자 심지어 함수도 담을 수 있다.
참고로 밑에 3개는 다 함수 만드는 식이다.
coworkers.showAll = function(){}
var showAll = function(){}
function showAll(){}
showAll을 통해
모든 coworkers에 있는 각각의 데이터들을 iterate해서 화면에 출력하는 코드를 만들어보자.
<h2>Property & Method</h2>
<script>
coworkers.showAll = function(){
for(var key in coworkers) {
document.write(key+' : '+coworkers[key]+'<br>');
}
}
coworkers.showAll();
</script>
이것은 좋지않은 코드인데 왜냐하면 객체 var coworkers의 이름이 바뀔 경우, 데이터를 못 가져올 수도 있다. 그러면? 어떻게 할까?
showAll이라고 하는 함수 안에서 이 함수가 소속된 객체를 가리키는 약속된 기호 'this'를 쓰면 된다!
이럴 경우, var coworkers의 이름이 뭐가 돼든 this는 자기 자신을 가리키기 때문에 영향을 받지 않는다.
coworkers.showAll = function(){
for(var key in this) {
document.write(key+' : '+coworkers[key]+'<br>');
}
}
coworkers.showAll();
다른 문제는 여기 있는 showAll 조차도 coworkers에 소속된 데이터이기 때문에 showAll도 화면에 표시가 됐다. 이런 문제를 없애기 위해서는 if 문을 써서 showall을 제외한다는 코딩을 하면 된다. 여기서는 안한다.
coworkers.bookkeeper = "duru"; 처럼 ~ 그래서 이름이 coworkers.showALL = 정보가 나머지 함수 가리킨다.
showAll : function(){
for(var key in this) { document.write(key+' : '+coworkers[key]+' ');
}
}
객체에 소속된 변수의 값으로 함수를 지정할 수 있고 → coworkers.showAll = function(){}
그렇게 되면 우리는 객체에 소속된 함수를 만들 수 있다. 이 함수를 'method메소드'라고 부른다.
객체에 소속된 변수는 그냥 변수라고 하지않고 'property프로퍼티'라고 부른다.
programmer
designer
bookkeeper
data scientist
5. 객체의 활용
원래 있던 함수의 코드를 중복되지 않도록 해놨던 이 코드들
function BodySetColor(color){
document.querySelector('body').style.color = color;
}
function BodysetBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
}
를 body라는 함수에 객체를 담는 작업
↓↓↓↓↓
var Body = {
setColor: function (color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
}
}
배열은 대괄호, 객체는 중괄호를 쓴다.
객체에 소속된 함수(function) = 메소드method / 객체에 소속된 변수(var) = 프로퍼티property
객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 콤마를 찍는다.
많이 나왔던 친구 document.querySelector('body') 여기서 document 는 사실 객체였고,
querySelector('body') 함수이면서 객체에 소속되어 있었기 때문에 메소드 였다.
생활코딩 JavaScript 수업을 들으면서 우리는 여러가지 코드를 사용해왔는데 무엇인지 모르고 사용하였지만 이제 모르는 코드는 없을 것이다. 익숙하지 않고 그 각각의 요소들이 서로 상호작용을 복잡하게 했을 때의 복잡도가 어마어마하게 높아지기 때문에 문제가 생겼을 때 해결하기가 어렵고 막막할 수도 있지만 기본적인 문법들은 다 배운셈이다.
함수는 코드가 많아지면 정리정돈 하는 도구이다.
객체는 함수와 변수가 많아지면서 연관된 것들을 서로 그룹핑해서 정리정돈하는 도구이다.
그러면 객체가 또 많아지면? 정리해야하고 또 정리해야하고... Thererfore, 우리는 무한히 많은 생각을 할 수 있게 된다. 객체 보다 더 큰 정리 정돈 도구도 있다. 다음 챕터에서... 확인
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| <생활코딩> 많이 보이는 DATABASE 살짝 맛보기 (0) | 2021.01.26 |
|---|---|
| <유튜버 - 생활코딩> WEB2 - JavaScript 34~ JS파일로 쪼개서 정리 하기 (0) | 2021.01.25 |
| <유튜버 - 생활코딩> WEB2 - JavaScript 24~ (0) | 2021.01.22 |
| <유튜버 - 생활코딩> WEB2 - JavaScript 14~ (0) | 2021.01.19 |
| <유튜버 - 생활코딩> WEB2 - JavaScript (0) | 2021.01.16 |
