[생활코딩]WEB2-JavaScript (6)(2020.12.22)

본 내용은 해당 강의 토대로 작성

객체의 형식

객체(Object)는 정보를 정리하는 수납상자 역할을 한다는 점에서 배열(Array)와 비슷하다. 다른점은 아래와 같다.

Object	Array
순서 없음	순서에 따라 저장
식별자: 문자(이름)	식별자: 숫자(0부터)
중괄호{}	대괄호[]

또, 객체에서는 식별자를 key, 값을 value라고 한다.

구체적인 예시로, 각각을 선언하고 출력하는 것은 아래와 같다.

var members = ['siru','jaemin','greedysiru'];
console.log(members[1]); // 콘솔창에 jaemin 출력

var roles = {
  'programmer':'jaemin',
  'cat' : 'siru',
  'id' : 'greedysiru'
}
console.log(roles.programmer); // 콘솔창에 jaemin 출력

즉, 배열은 입력된 값들이 숫자 식별자 0부터 저장되고 객체는 콜론 앞의 문자가 해당 값의 식별자가 된다.

console.log(roles['programmer']) 를 입력해도 해당 value인 jaemin이 출력된다.

객체의 반복

배열과 객체 각각에서 하나씩 꺼내와서 출력하는 반복문 처리를 해보자.

배열의 경우는 아래와 같다.

var i = 0;
while(i < members.length){
  console.log('array loop',members[i])
  i = i + 1
}

변수 i 를 선언하고 while(i < members.legnth) 일 때, 배열의 길이 3보다 작을 때 까지 반복문이 실행된다. members[i] 에서, 식별자가 들어간 뒤 i 에 1이 더해지므로 0,1,2 식별자가 들어가게 되고 그 결과 모든 배열의 값이 출력된다.

객체의 경우는 아래와 같다.

for(var name in roles){
  console.log('object =>', name, 'value =>', roles[name]);
}

for 문의 변수 name 에는 객체의 식별자 key들이 각각 들어오게 된다. name 만 출력했을 때, key만 나오므로 value를 출력하려면, roles[name] 처럼 객체 명 뒤에 대괄호로 key를 입력해준다. 이 명령어의 출력은 아래와 같다.

객체 - 값으로서 함수

객체 지향 프로그래밍(Object Oriented Programming,OOP)이란 말을 들어본 적이 있을 것이다. 이 개념은 추상적이고 배우기 어렵다. 그러니 그 전에, 간단하게 JavaScript에서 객체의 특징을 정리해보자.

프로그래밍은 두 가지로 이루어진다. 첫 째는 데이터, 둘 째는 데이터를 처리하는 것이다. 그러므로 데이터를 정리하는 객체와 배열은 아주 중요한 역할을 한다.

함수는 처리할 코드가 많아지면 서로 연관된 것을 그룹핑하기 위해 사용한다. JavaScript에서 함수는 처리해야할 일에 대한 정보를 담고 있는 구문이면서 값이기도 하다. 이는 다른 구문과 큰 차이점이다.

예를 들어서, 조건문을 아래와 같이 변수 선언하면,

var i = if(true){console.log(1)};

에러가 발생한다.

또, while문도 아래와 같이 변수 선언하면,

var w = while(true){console.log(1)};

에러가 발생한다.

반면에, 함수는 변수, 배열의 원소, 객체의 value가 될 수 있다.

var f = function (){
  console.log(1+1);
  console.log(1+2);
}
console.log(f);
var a = [f];
a[0]();

var o = {
  func:f
}
o.func();

이렇게, 함수 f가 변수로서 선언되고 정상적으로 출력된다.

객체 - 데이터와 값을 담는 그릇

만약, 수억개의 코드를 다루고 수천명의 사람들과 프로젝트를 진행한다면 매우 복잡한 일이 될 것이다. 많은 버그들이 발생하고 그것을 찾기도 어려울 것이다. 정의한 함수가 누군가에 의해서 갑자기 삭제되거나 변경될 수도 있다. 객체는 이런 문제들을 해결할 수있다.

객체는 폴더와 같다. 어떤 함수가 특정 데이터를 취급할 때, 한 객체에 그 함수와 함수가 사용하는 참조 데이터를 그룹핑하면 매우 편해진다. 아래의 코드 예시를 보자

var q = {
v1:'v1',
v2:'v2',
f1:function (){
  console.log(this.v1);
},
f2:function (){
  console.log(this.v2);
}
}

q.f1();
q.f2();

한 객체의 함수는 그 객체에 묶여있는 데이터를 this 를 사용해서 바로 불러올 수 있다. 객체의 명이 달라지거나 객체가 어느 변수로 속해지는 것에 상관없이 소속 객체 안을 참조할 수 있다.

이렇게, 함수가 값이라는 특성을 이용해서 코드의 복잡성을 낮추고 효율적으로 하는 것이 객체지향 프로그래밍의 본질이라고 할 수 있다.

느낀점

객체는 이전에 몇 번 배운 적이 있다. 그때마다 this가 참 헷갈리는 개념이었는데 오늘 이 강의를 듣고 딱 정리가되어서 너무 상쾌하다! JavaScript에서 명령어를 사용할 때마다 그 의미를 모르고 가져다 쓰는 기분이 종종 들었는데 이젠 덜 할 것 같다.