자바스크립트 객체
객체에 대해 알아보자 첫번째,
먼저 객체란..
데이터를 표현하기 위해 현실의 사물을 프로그래밍에 반영한 것인데,
자바스크립트도 객체를 사용한다.
아래의 예제를 한번 살펴보자.
var myPet= {
firstName : 'yopy',
lastName:'Choi'
};
이 예제는 자바스크립트로 우리집 강아지인 요피를 코드로 구현한 것이다.
코드를 간략히 설명하자면,
myPet 이라는 변수에 { } 로 감싼 데이터를 넣었는데,
이것들이 바로 우리집 강아지를 표현하는 객체이다.
객체의 속성을 알아보자 두번째,
위 예제의 객체 안을 보면 firstName 과 lastName 이 왼쪽에 있고,
'yopy'와 'Choi'가 오른쪽에 있다.
콤마(,) 로 구분되는 것들을 객체의 속성이라고 정의하자.
myPet 객체에는 firstName:'yopy , lastName:'Choi' 까지 두개의 속성이 있는 것 이다.
객체를 구분하는 키(Key) 그리고 값(Value) 을 알아보자 세번째,
위에서 속성에 대해 알아봤다. 그런데 이 속성에도 관계가 정해져 있는데,
속성은 키 : 값의 관계로 이루어져있다.
즉 위의 예제로 설명하자면 firstName 이 Key 가 되는 것 이고,
Key는 쉽게 풀어서 속성의 이름 정도로 생각하면 된다.
뒤에있는 'yopy' 가 Value 가 되는 것 이다.
마찬가지로 Value 도 쉽게 풀어서 속성의 값 정도로 생각하자.
그리고 , Key 는 문자열만 사용 가능하고
(Key 에 띄어쓰기가 들어간 경우 작은 따옴표로 감싸준다.)
Value 는 어떤 값이던 상관없다.
객체 , 문자열 , 숫자 , 함수 등 ..
여기서 속성값이 함수인 것들을 자바스크립트에서는
메소드라고 따로 이름을 정의해놨다.
객체의 속성 값(Value) 을 사용해보자 네번째,
우리가 객체를 만드는 이유가 데이터를 표현하기 위해
현실의 사물을 프로그래밍에 반영했다고 했다.
그래서 우리는 myPet 이라는 객체를 만들었고,
현실에서는 따로 속성을 지정하지 않아도 알 수 있지만..
프로그래밍 코드 안에서는 속성의 값을 추출하거나
사용해야 그 값을 이용할 수 있다.
아래의 예제로 속성의 값을 빼와보자.
myPet.firstName; // 'yopy'
mypet['firstName'] // 'yopy'
myPet.lastName; // 'Choi'
myPet[lastName] // 'Choi'
이런식으로 마침표나 [ ] 를 사용해서 우리는 속성의 값을 가져온다.
마침표의 뜻은 객체에 있는 Key 값을 이용해 접근하겠다 라고 생각하면 쉽다.
보통 마침표를 사용하는데 [ ] 를 사용하는 경우에는 Key 값에 띄어쓰기가 되어있는 경우에
어쩔수 없이 [ ] 를 사용한다.
객체를 다양하게 활용하자 다섯번째,
위에서 Value(속성값) 에는
어떤것이 들어가도 상관없다고 했는데
이 다양성 덕분에 우리는 자바스크립트에서
데이터를 한층 더 다양하게 사용할 수 있다.
먼저 객체 안의 속성을 한번 바꿔보자.
myPet.lastName = 'Park';
myPet; // { firstName : 'yopy' , lastName:'Park' }
객체 안에 속성값으로 객체를 넣어보자.
var myPet = {
body: {
height:50,
weight:5
}
};
myPet.body.height; // 50
객체의 속성을 삭제해보자.
delete myPet.body.height;
myPet.body
객체의 다양한 생성을 알아보자.
var myPet = new Object();
myPet.firstName = 'yopy';
myPet.lastName = 'Choi';
myPet.body = new Object();
myPet.body.height = 50;
myPet.body.weight = 5;
위에서 우리가 { } 안에 객체의 속성을 넣어주는 방식을
객체 리터럴(literal) 이라고 부르며
위 예제와 같이 new 를 사용해도 생성이 잘 되지만,
권장사항으로는 { } 안에 생성하라고 되어있다.
리터럴(literal)이란 new 를 사용하지 않고 만드는 것 인데,
원래 우리는 문자열이나 숫자도 var num = new Number();
var str = new String(); 이런식으로 만들 수 있지만
우리는 var num = 123;
var str = 'yopy' 이런식으로 바로 값을 써줬다.
이런것들이 바로 문자열 리터럴 , 숫자 리터럴이다.
문자 그대로의 것을 의미한다.