TIL-JavaScript(객체,객체지향프로그래밍)

22.05.18

👶🏻 객체(Object)

데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어지기 때문에 추가된 데이터에 대한 식별자가 됩니다. 이렇게 배열은 이 인덱스를 이용해서 데이터를 가져오게 되는데, 만약 인덱스로 문자를 사용하고 싶다면 객체(Dictionary)를 사용해야 합니다. 다른 언어에서는 연관배열(associative array)또는 맵(map), 딕셔너리(Dictionary)라는 데이터 타입이 자바스크립의 객체에 해당합니다.

👧🏻 객체의 생성

자바스크립트에서 객체를 만드는 방법은 아래 예시와 같습니다.

var grades = {'egoing':10, 'k8805':6, 'sorialgi':80};

위에 예제에서 egoing은 key가 되고, 10은 value가 됩니다.
아래의 예제는 객체를 만드는 다른방법의 예시입니다.

var grades = {};
grades['egoing'] = 10;
graeds['k8805'] = 6;
graeds['sorialgi'] = 80;

중괄호를 이용해 빈 객체를 만들어주고, 대괄호를 이용해서 객체에 여러가지 데이터를 담았습니다.
이러한 방법도 있습니다.

var grades = new object();
grades['egoing'] = 10;
graeds['k8805'] = 6;
graeds['sorialgi'] = 80;

중괄호로 이용해 빈 객체를 만드는 것과, new object를 이용해 객체를 만드는 것은 큰 차이가 없습니다.
아래의 예시처럼 다른 방법도 있습니다.

var grades = {'egoing':10, 'k8805':6, 'sorialgi':80};
alert(grades['sorialgi']);

다음은 sorialgi라는 이름(key)으로 저장된 값을 가져오는 방법입니다.
결과는 80입니다.

👩🏻‍🦰 객체와 반복문의 조우

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

위 코드에서 변수 'grades'의 담겨있는 객체의 값을 가져오려면 for in문을 사용해야 합니다.

• for in문: in을 중심으로 뒤쪽에는 객체가 있고, 앞쪽에는 그 객체의 키값이 들어갑니다. 객체 뿐만 아니라 배열에서도 for in문을 사용할 수 있습니다.

'grades' 변수에 담겨있는 값들을 한 개씩 가져와서 'key'에 'key' 값을 담습니다.

아래의 예시는 객제의 저장된 데이터를 기준으로 반복작업을 하는 예시입니다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}

(grades[key]로 가져오면 객체에 저장된 value값을 가져올 수 있습나다.
브라우저 결과는 10, 6, 80 순서대로 브라우저에 뜨게 됩니다.

👩🏻‍🦱 리스트 형식으로 객체의 값 출력

<ul>
<script type="text/javascript">
var grades = {'egoing': 10, 'k8805' : 6, 'sorialgi': 80};
for(var name in grades) {
document.write("<li>key : "+name+" value : "+grades[name]+"</li>");
}
</script>
</ul>

이렇게 코드를 작성하면,

보이는 것처럼 리스트 형식으로 출력되서 나오게 됩니다.

👩🏻‍🦳 객체지향 프로그래밍(Object Oriented Programming)

객체지향 프로그래밍이란 어떤 동작이나 로직보다는 객체를 중심으로 프로그래밍을 하는 일종의 새로운 패러다임입니다. 여기서 객체란 우리가 모델링하고자 하는 대상관 관련된 모든 정보와 데이터, 코드, 동작, 기능들을 담을 수 있습니다. 즉, 우리가 어떤 프로그램을 새로 만들려고 할 때 어떤 방식으로 프로그램을 구성하고 조립할 것인지에 대한 이론적인 개념입니다.

var grades = {
'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
'show' : function(){
for(var name in this.list){
document.write(name+':'+this.list[name]+"<br />");
}
}
};
grades.show();

이 예제는 자바스크립트를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로 취지에 따라서 로직을 객체에 그룹핑해서 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.