[자바스크립트/javascript] 객체

www.boostcourse.org/cs124

자바스크립트의 시작

[부스트코스-자바스크립트의 시작] 강의에서 배운 내용 복습

 

객체는 함수와 마찬가지로 코드의 정리정돈을 위한 목적으로 사용되는 방법이다. 객체는 함수의 기반 위에서 존재하는 개념.

서로 연관된 함수와 변수가 많아지면 이를 정리하기 위해 사용하는 것.

함수가 아주 많아지게 된다면 이름이 중복될 수도 있고, 이를 방지하기 위해서는 함수의 이름이 복잡해질 것이다.

객체를 사용하면 함수들을 비슷한 것끼리 묶어줄 수 있고(예를 들면 우리가 폴더에 파일을 정리하는 것과 같이), 이렇게 나뉜 함수들은 서로 다른 그룹끼리는 겹쳐도 된다.

 

객체에 해당하는 함수는 메소드라고 부르며,

document.querySelector('body');라는 코드에서 document는 객체, querySelector는 메소드(Method)라고 할 수 있다.

즉, querySelector는 document라는 객체 안에 속해 있는 함수이다.

 

 

1. 객체의 쓰기와 읽기

객체에는 순서가 없는 대신 각각에 이름이 붙어 있고, 이름을 이용하여 값들을 넣고 꺼낼 수 있다.

 

객체 만들기

var fruitColor={
"apple":"red",
"banana":"yellow"
};

이런 식으로 객체를 만들 수 있다.

이름과 값 사이에는 :(콜론)으로 연결해 주고, 각각의 요소들은 ,(콤마)로 구분해 준다.

 

객체 불러오기

document.write(fruitColor.apple);
document.write(fruitColor["apple"]);

위의 두가지 방법으로 객체를 불러올 수 있다.

결과는 red

 

객체에 요소 추가

fruitColor.grape = "purple";
fruitColor["grape"] = "purple";

위의 두 가지 방법으로 요소를 추가할 수 있다.

만약 추가하고 싶은 이름 안에 공백이 있다면, 첫 번째 방법은 오류가 나기 때문에 두 번째 방법을 사용해야 한다.

 

 

2. 순회

객체의 모든 값을 가져오기 위해 for in을 사용

 

이름을 출력하기

for(var key in fruitColor){
document.write(key + "<br>");
}

 

이름에 해당하는 값을 출력하기

for(var key in fruitColor){
document.write(fruitColor[key] + "<br>");
}

우리가 배열에서 lst[0] 의 의미는 lst라는 배열의 0번째 값을 출력하라는 것과 같이

fruit[key]는 fruit라는 객체의 key에 해당하는 값을 출력하라는 의미이다.

key와 값을 동시에 출력하고 싶다면 둘의 코드를 적절히 합쳐서

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

이런 식으로 사용하면

apple : red

banana : yellow

grape : purple

과 같이 출력될 것이다.

 

 

3. 프로퍼티와 메소드

 

메소드(함수를 객체에 담는 방법)

fruitColor.showAll = function() {
  for (var key in fruitColor) {
    document.write(key + ' : ' + fruitColor[key] + '<br>');
  }
}

위에서 사용했던 객체의 값을 모두 가져오는 함수를 객체에 showAll이라는 메소드로 추가하였다.

하지만 이 방법은 만약 변수의 이름이 바뀌게 될 경우에는 함수도 일일이 수정해줘야 하기 때문에 좋은 방법은 방법은 아니다.

이럴 때 "this"를 이용하면 된다.

fruitColor.showAll = function() {
  for (var key in this) {
    document.write(key + ' : ' + this[key] + '<br>');
  }
}

위의 코드처럼, 함수 안의 객체의 이름을 this로 변경해준다.

this는 메소드가 쓰인 객체의 이름을 가리키는 것으로, this를 사용하면 변수의 이름이 변경되어도 함수를 일일이 수정하지 않아도 된다.

 

프로퍼티

위에서 객체에 해당하는 함수들은 메소드라고 하였다.

위에서 쓰인 showAll 은 메소드이다.

apple이나 banana처럼 함수가 아닌, 객체에 해당하는 변수들을 프로퍼티라고 부른다.