[Javascript] Object(Part.1 Property & Method)

신세원·2020년 9월 13일
0

javascript

목록 보기
15/19
post-thumbnail
post-custom-banner

Object(객체)란 무엇인가?

Javascript는 객체기반의 스크립트 언어이고,Jvascript를 이루는 거의 모든것은 '객체'이다.

객체는 여러가지 속성을 하나의 변수로 저장 할수 있도록 하는 데이터 타입이고 key,value 값을 저장 할 수 있다.

//구문
let user = new Object(); //Object constructor(생성자)
let user = {} 		//Object literal 구문

<예시1>

  • 이름 : john
  • 나이 : 29

key: '이름', '나이'
value: 'john', 29

위와 같은 정보를 Javascript 객체로 표현하면 아래와 같이 된다.

let user = {name:"john", age:29}; 

객체의 특징

  1. 객체는 중괄호 표기를 이용하여 만들수 있다.
  2. 객체는 각각 key,value에 해당 정보를 나열 할수 있다.
  3. 객체는 한쌍의 key,value뒤에 쉼표를 이용하여 그 뒤에 오는 key,value를 구분해줘야한다.
  4. key는 '문자열' 또는 '기호' 이어야 한다.
  5. value는 모든 유형이 될 수 있다.
  6. 객체는 변수이다. 그러나 객체에는 많은 값을 포함 할 수 있다.
  7. 객체에 명명된 값은 properties 라고 한다.
  8. 변수는 예약어의 이름을 가질수 없지만, 객체는 어떠한 이름이어도 상관없다.
  9. 객체 변수를 복사하면 참조가 복사되고, 객체가 복사되지 않는다.
let user = { name: "John" };

let admin = user; // copy the reference

Property(프로퍼티) & Method(메소드)

객체에 다루게 될때 프로퍼티메소드에 이해가 없으면 객체를 이해 할 수 없다.

객체란 것은 껍대기를 이루는 말이고, 실제 객체를 완성하는 요소는 프로퍼티메소드 이기 때문이다.

비유를 하자면 우리가 객체라고 부르는것은 자동차 외관이다.

실제 자동차를 구성하고 있는것은 엔진,타이어,브레이크등 포함하고 있기에 우리는 그것을 쓸모있는 객체로써

자동차 외관을 가르키며 자동차라고 부르는 것이다.

그래서 객체를 알아보기 전 프로퍼티메소드에 대해 알아보겠다.

*property(프로퍼티)


ECMA5에서 프로퍼티는 객체의 일부로 keyvalue 값을 가지고 객체의 정보를 담고 있는 녀석들을 의미한다.

한마디로 프로퍼티는 객체의 속성을 나타내는 접근 가능한 이름활용 가능한 값을 가지는 특별한 형태이다.

이는 객체를 활용함에 있어서 매우 유용하다.

특정객체가 가지고 있는 정보를 품고 있기에 그 객체가 가진 정보에 직접적으로 접근할 수 있게 해주기 때문이다.

이 프로퍼티의 접근 연산자는 '.' 이다. 이 연산자를 통해 프로퍼티를 추가 할수도 있고 프로퍼티에 접근 할수도 있다.

let foo = {}; // foo 객체 생성.
foo.a=1;	//.연산자를 이용하여 a라는 이름의 프로퍼티를 생성하고 1이라는 값을 할당.

let sum =foo.a+10; // .연산자를 이용하여 foo 객체의 a 프로퍼티에 접근하여 값을 활용 가능.
console.log(sum); // 11

만약 프로퍼티에 아무런 값을 할당하지 않으면 어떻게 될까?

javascript에서 사용하는 변수는 값을 할당하지 않고 선언만 할 경우 엔진이 강제적으로 undefined를 할당한다.

하지만 프로퍼티는 값이 할당되지 않으면 존재할 필요가 없는 녀석이다.

객체의 정보를 담고 있어야할 요소가 그 어떤 정보도 할당받지 않았다면 객체로서 이 프로퍼티는 쓸모없는 녀석이기 때문이다.

그렇기 때문에 프로퍼티를 추가하면서 값을 할당하지 않으면 syntax error 이다.

프로퍼티를 추가 할때 이점을 반드시 주의 하여야 한다.

프로퍼티는 undefinednull 을 할당한다고 삭제 되지 않는다.

프로퍼티의 삭제는 delete 라는 keyword를 사용하여야 한다.

let person= new Object();

person.name='john';
console.log(person.name); // 'john'

person.name=null;
console.log(person.name); // null

delete person.name;
console.log(person.name); //undefined

* Method(메소드)


메소드는 객체가 가지고 있는 동작이다.

이 동작이란 의미에서 함수와 메소드를 구분하지 못하는 사람들이 많다.

기본적으로 함수와 메소드는 서로 일련의 동작을 실행한다는 점에서 동일하기 때문이다.

하지만 메소드와 함수는 엄연히 크게 다르다.

메소드객체가 가지고 있는 동작이고, 객체를 통해서 해당 메소드를 수행하여야 한다.
동작을 수행하는 주체는 객체이며, 객체에게 그 동작을 수행하라고 지시하여야 한다.

그럼 함수는 다른점은 무엇일까?

함수는 동작을 수행하기 위해 객체에게 어떤 동작을 실행하라고 명령하지 않아도 된다.
이유는 함수자체가 그 동작을 정의한 함수객체 이기 때문에 자기 자신을 수행하는 것이다.

메소드는 객체를 움직이는 동작이며, 그 동작을 수행하기 위해 객체의 정보를 담고있는 프로퍼티를 사용할 수 있다.


let foo={};
foo.a=1;
foo.b=2;
foo.sum=function() {console.log(foo.a+foo.b);};
foo.sum(); //3

Javascript 객체(Object) 생성

그럼 이제 객체 생성하는 법을 보기로 하자. javascript에서 객체를 생성하는 방법은 크게 2가지로 나눈다.

  • construtor 를 이용하여 생성하는 방식
  • 객체 리터럴 을 이용하는 방식

객체 리터럴을 이용한 방식은 JSON(Javascript Object Notation)을 이용하여 표현한다.

// *constructor 를 사용하여 객체를 생성하는 예*

let person = new object();
person.name='john'
console.log(person.name); //john

// *JSON 방식을 사용하여 객체 리터럴*

let person = { name:'john'}
console.log(person.name); //john

위와 같은 객체를 생성하는 두가지 방법은 관점에서는 동일하지만, 객체의 사용에서는 차이가 있다.

JSON 방식을 사용하면 객체 리터럴이기에 단일 객체로만 사용된다.
constructor를 이용하면 동일한 구성을 가진 여러개의 객체를 만들어 낼수 있다.

Obejct(객체)의 배열 상속

지금부터 할 소리는 좀 충격적으로 들릴수도 있다. (나 또한 그랬기 때문이다)

Javascript의 객체는 곧 배열이다.

위와 같은 이야기를 했을때 증명 할 수 있는 방법이 있다.

가장 간단한 방법중 몇가지를 적어보겠다.

객체의 메소드는 객체 안에 존재하지 않는다.

메소드를 소유한 parent 객체는 객체에 포함된 메소드들의 참조값만을 가지고 있다.

즉 메소드들 자체도 각각 개별 객체로서 존재한다.

JSON의 key,value 방식의 객체 리터럴 구조는 배열 구조와 동일하다.

JSON의 표현방식은 [] 라는 Array 표현의 다른 방식일 뿐이다.

실제로 객체의 프로퍼티 생성이나 참조에서 '.' 연산자가 아닌 []를 사용 할수도 있다.

// *constructor 를 사용하여 객체를 생성하는 예*

let person = {name:'john'};
console.log(person['name']);
> john

객체는 자기 자신을 이루는 요소들을 저장한 배열들의 집합체이며 이들은 chain 이라는 연결 구조를 가지고 있다.

다음 내용에는 정말 어려운 개념중 하나인 prototype에 알아보도록 할것이다.

profile
생각하는대로 살지 않으면, 사는대로 생각하게 된다.
post-custom-banner

0개의 댓글