[JS] 8. 자바스크립트의 기초 문법 - 객체

Q : 자바스크립트의 객체는 어떻게 쓰이나요?

A : 자바스크립트는 객체기반의 스크립트 언어입니다! 객체를 밥 먹는 것 처럼 많이 사용합니다.

자바스크립트의 객체에 대해 설명하기 전에 객체가 무엇인지 부터 설명드리겠습니다.

객체란, 변수들과 그와 관련된 메서드들이 모여서 이룬 하나의 꾸러미입니다. 한마디로 현실의 사물을 프로그래밍에 반영한 것이라고 생각할 수 있습니다. 간단한 코드를 소개시켜드리겠습니다.

let Student {
  name : 'KJW',
  age : 17,
  class : 3
}

이 코드는 현실의 학생이라는 객체를 프로그래밍한것 입니다. 정말 간단하지 않나요? 이와 같이 Student라는 변수에 { }로 감싼 덩어리를 넣은 것 입니다. 바로 이 덩어리가 Student를 표현하는 객체입니다.

객체는 여러 부분으로 나뉩니다. 객체의 부분별 이름을 알려드리겠습니다.

속성(Property)

위의 예제에서 Student객체 안을 살펴보면 name : 'KJW'와 age : 17, class : 3으로 콤마를 기준으로 나뉘는 것을 살펴볼 수 있습니다. 이때 콤마로 구분할 수 있는 것들을 객체의 속성이라고 합니다. 위 의 코드에선 3개의 속성이 있다고 할 수 있습니다.

키(Key) & 값(Value)

객체의 키와 값은 객체의 속성으로 들어가야합니다. 위의 속성을 보면 name : 'KJW'라고 정의가 되어있습니다. 여기서 'name'을 키(Key), 'KJW'를 값(Value)라고 합니다. 또한 보는 것과 같이 Key에는 ' '를 씌워도 되고, 씌우지 않으셔도 됩니다. 나중에 스타일 가이드에서 설명드리겠지만, key값에 띄어쓰기가 포함되지 않는다면 ' '를 씌우지 않고, 띄어쓰기가 포함되어 있다면 씌웁니다. 이것은 다음에 자세히 설명드리겠습니다. 또 만약 key값은 문자열만 들어갈 수 있는 것이 아닙니다. 숫자도 들어갈 수 있고, 함수(Function)도 들어갈 수 있습니다. 함수가 들어가는 경우는 특별하게 메소드라고 합니다.

사용법

객체의 속성들을 불러오기 위해서는 어떻게 해야할까요? 객체를 불러오기 위해서는 다음과 같이하시면됩니다 :D

객체명.키값

위의 예시에 씌워볼까요?

console.log(Student.name);
// 'KJW'

console.log(Student['name'];)
// 'LJW'

이런식으로 사용할 수 있습니다. console.log()함수는 브라우저에서 콘솔 이라고하는곳이 있습니다. 크롬(Chorme)에서 F12버튼을 누르면 확인할 수 있습니다. 위의 코드를 크롬에서 확인하시면 저러한 결과가 출력될 것 입니다.

이용

객체의 사용법을 알았으니 이제 다양하게 활용하는 방법에 대해 알아봅시다. 먼저 객체를 선언하고 변경하지 못하면 쓸모 없겠죠?

console.log(Student);
// {name : 'KJW', age : 17, class : 3 }

console.log(Student.name);
// 'LJW'

Student.name = 'JSH';

console.log(Student.name);
// 'JSH'

위와 같이 객체의 키값을 바꿀 수 있습니다.

또 객체를 이용하면 복잡한 데이터 구조를 만들 수도 있습니다.

let kjw {
  body : {
    height : '174cm',
    weight : '62kg'
  },
  head : {
    IQ : 200000
  }
}

객체의 속성을 삭제하는 방법도 있습니다.

delete kjw.body.height;

console.log(kjw.body);
// { weight : '62kg' }

방법

객체는 { }를 이용해 만드는 방법과 new키워드를 사용해 만드는 방법이 있습니다. 괄호를 사용하는 방법을 객체 리터럴이라고 부르고, new키워드를 이용하는 방법은 그냥 리터럴이라고 부릅니다.

var jsh = new Object();
jsh.Name = 'jsh';
jsh.age = '17';
jsh.body = new Object();
jsh.body.height = 156;
jsh.body.weight = 42;

마무리
다음 포스팅 에서는 《기초문법-생성자 및 클래스》에 대해 포스팅 하도록 하겠습니다.