TIL - 21.06.20 👨‍💻

생활코딩 js 객체 공부했다.

객체

우리가 흔히 사용하는 document.querySelector(); 역시도 객체다.
document 라는 객체 안의 querySelector라는 메소드를 이용하는 것.

배열이 순서대로 정보를 저장하는거라면, 객체는 무작위로 정보를 저장하는 것이라고 할 수 있다.

객체 선언

let object = {
  // dev 와 dream은 Property.
  // 프로퍼티 사이엔 콤마로 구분한다.
  'name': 'Sunghoon',
  'dream': 'being dev'
}

프로퍼티 추가

object.statue = 'sleepy';
object['property name'] = 'value'

이렇게 두가지가 있으며
대괄호를 이용한 방식은 프로퍼티 값에 띄어쓰기를 포함 할 수 있다는 장점이 있다.

객체 데이터 호출

object.dev // dot notation
object['dream'] // bracket notation

객체 데이터 호출하는 방식으로는 이렇게 두가지를 사용할 수 있는데,
프로퍼티 값에 띄어쓰기가 있으면 대괄호 방식으로만 호출할 수 있고, 후술할 루프에서도 대괄호 방식으로 값을 불러온다.

대괄호로 값을 호출할때는 프로퍼티 값에 따옴표를 꼭 붙혀줘야 한다는 것에 유의하자.

객체 반복문

// object의 프로퍼티 수 만큼 반복
// object의 프로퍼티 키 값을 key에 할당
// 반복할때마다 변수의 값이 바뀜.
// ex) 1번째 루프 / key = '1', 2번째 루프 / key = '2'
for(let key in object){
	document.write(key+' : '+object[key]);
}

반복문에서 데이터를 가져오려면 대괄호 방식을 사용해야한다.
key에는 따옴표가 포함된 프로퍼티 키가 할당되기 때문.

객체의 데이터로는 문자열, 불리언타입은 물론 배열과 함수도 담을 수 있다.
함수는 표현식과 유사한 방식으로 선언되며

object.funcName = function(){
	for(let key in this){
    	document.write(key+' : '+this[key]);
    }
}

와 같은 형식으로 프로퍼티에 할당할 수 있으며, 객체에 할당된 함수는 Method(메소드)라고 한다.

• this
  상기 메소드엔 객체의 이름 대신 this가 쓰였는데 this는 함수가 포함된 객체를 지칭하는 것이다.
  this를 사용함으로 객체의 이름이 바뀔때도 영향을 받지않게 할 수 있다.

GOOD 😉

우선순위가 밀리던 생활코딩js를 드디어 들었다.

BAD 😥

쿼리셀렉터에 대해 제대로 알아보지 못했다.
생활코딩만 보고 객체를 공부해서 모던 자바스크립트나 포이엠웹으로 더 공부해야한다.
늦잠도 잤는데 낮잠도 자버리고 심지어 지금 졸리기까지 하다.뭐하는 놈이야

TO DO 🔥

모던 자바스크립트, 포이엠웹으로 객체 더 공부하기
쿼리셀렉터 알아보기

Retrospect 🧐

주말이나 평일이나 큰 차이가 없는 입장에서 주말이라고 주변이 들뜨니까 본인도 들떠서 걍 태만하게 보내버렸다.
내일부터 다시 평일인데 제대로 정신줄 잡고 가자.

내일은 꼭 평소대로 일어나서 아침산책 가야지.

덤으로 국민취업지원제도 1유형 신청했는데 꼭 되었으면 좋겠다.
2유형은 의미없어

Reference 🙇

생활코딩 - https://opentutorials.org/