TIL3 - JS 객체 기초

프리시온·2022년 2월 16일

TIL

목록 보기

3/5

(아래 글은 2022.02.16에 진행한 학습 내용을 정리한 글입니다.)

오늘 배운 것은 자바스크립트 기초 중 가장 어려우면서 자바스크립트에서 가장 많이 쓰인다고 알려진 객체에 대한 내용이었다. 오늘은 각 강의에 차례대로 번호를 붙여 배운 내용을 소개하겠다.

No.1 - 객체란?

객체란, 서로 연관된 함수와 변수를 같은 이름으로 그룹화하여 정리하는 것이다. 오늘 배운 부분은 객체 리터럴이다.
객체는 배열과 달리 중괄호를 사용해 생성한다. 객체 안에서 key : value를 정해줌으로써 프로퍼티를 생성한다.
변수.key = "value"를 사용하면 객체 안에 프로퍼티를 추가할 수 있다. 단, 여러 단어를 조합해 key를 지정할 경우 변수["key"] = "value"의 형태를 사용한다.
생성된 프로퍼티는 변수.key 또는 변수["key"]를 구문 사이에 넣어 출력할 수 있다.

    let human = {
        a : 10,
        b : 20,
    };
    document.write("a : " + human.a + "<br>");
	document.write("b : " + human.b + "<br>");
    human.c = "30";
	document.write("c : " + human.c + "<br>");
    human["c a"] = " 35 ";
    document.write("c a : " + human["c a"] + "<br>");

위와 같이 코드를 짤 경우 위 이미지와 같이 출력된다. 먼저, human이라는 변수를 지정하고, 프로퍼티로 a : 10과 b : 20을 가진 채 시작한다. 이후 document.write로 a와 b를 출력하고, human.c = "30"으로 새 프로퍼티를 추가하여 출력하고, 마찬가지로 human["c a"] = "35"로 새 프로퍼티를 추가하고 출력한 것이다.

No.2 - for문

for(let key in 변수) {}를 사용하여 객체의 key를 처음부터 끝까지 반복적으로 가져와서 코드를 실행한다.
key를 단독적으로 지정할 경우 객체 내의 모든 key만 불러오고, 변수[key]를 지정할 경우 해당 key가 가진 value를 불러온다.

for(let key in human) {
	document.write(key + "<br>");
}
for(let key in human) {
	document.write(human[key] + "<br>");
}
for(let key in human) {
	document.write(key + " : " + human[key] : "<br>");
}

No.3 - 메소드

메소드는 아래와 같이 두 가지 방식을 이용해 만들 수 있다.

let human = {
        a : 10,
        b : 20,
  		eat : function() {},
    };
	human.showAll = function() {};

아래는 메소드 안에 for문 코드를 작성한 것이다. human 객체 대신 this를 사용하여 변수가 바뀌었을 때 메소드를 함께 수정해야 하는 점을 보완했다.

human.showAll = function() {
	for(let key in this) {
		document.write(key + " : " + this[key] + "<br>");
	}
}

여기서, showAll 메소드 또한 객체 안에 포함되기 때문에 출력될 때 함께 출력하게 된다. 이는 IF문을 함께 사용해서 제거할 수 있다.

No.4 - 활용

TIL2에서 만들었던 주야간모드 변경 버튼에 객체를 적용시켜보자.

let link = {
    Color : function(color){
        let alist = document.querySelectorAll('a');
        let i = 0;
        while(i<alist.length) {
            alist[i].style.color = color;
            i = i + 1;
        }
    }
}
let body = {
    fontColor : function(color) {
        document.body.style.color = color;
    },
    backColor : function(color) {
        document.body.style.backgroundColor = color;
    }
}
function nightDayHandler(self) {
    let target = document.body;
    if (self.value === 'night')  {
        body.backColor('black');
        body.fontColor('white');
        self.value= 'day';
        link.Color('powderblue');
    } else {
        body.backColor('white');
        body.fontColor('black');
        self.value = 'night';
		link.Color('blue');
    }
}