객체의 기본 형태
여러가지 값을 한번에 저장하고 싶을 때 사용
let myInfo = {
myName: 'Minion',
bornYear: 2000,
isVeryNice: true,
favoriteBook: {
title: 'Harry potter'
author: 'J.K Rowling'
}
myName, bornYear, isVeryNice 는 값 이름 (key) 으로 문자열(string)만 사용할 수 있다. 원래는 ''로 묶어야하지만 '' 없이도 객체에서 문자열로 인식한다. key 이름을 작성할때는 첫번째 글자는 반드시 문자, 밑줄(_), 달러 기호($)중 하나로 시작해야하며 띄어쓰기나 '-'을 이용하면 안되고, 피치못해 사용해야하는 상황이 되면 ''로 묶어주어야 한다.
'Minion', 2000, true는 값 (value)라고 한다. 값에는 모든 것이 다 올수 있다. 문자열, 숫자, Boolean 등등 심지어는 객체가 올수도 있다.
myName: 'Minion'을 속성(property)라고 한다. 그래서 key를 속성이름(Property Name), 값(value)을 속성값(Property Value)라고도 한다.
객체 값 사용 방법(Property에 접근하기)
1. Dot Notation : 객체이름.프로퍼티네임
myInfo.myName ; //'Minion'
따옴표를 생략할 수 없는 프로퍼티네임으로는 접근이 불가능하다.
myInfo.born Year 접근 불가능!
2. Bracket Notation: 객체이름['프로퍼티네임']
Dot Notation으로 접근할 수 없는 것에 접근하고 싶을 때
객체이름['프로퍼티네임']
프로퍼티네임의 형태가 자유롭다는 장점이 있지만 가장 큰 장점은 변수를 활용할 수 있다는 점!
let propertyName = 'name';
myInfo[propertyName]; // 'Minion'
etc 객체안의 객체에 접근하고 싶을 경우
프로퍼티네임을 계속 연결해서 접근
myInfo.favoriteBook.title ; //'Harry potter'
myInfo.FavoriteBook['title'] ;//'Harry potter'
존재하지 않는 프로퍼티에 접근하는 경우: undefined
객체의 프로퍼티 수정, 추가, 삭제하는 방법
해당 프로퍼티에 접근해 새로운 값을 할당해주면 된다. 변수의 값을 재할당하는 것과 같다.
// 객체의 프로퍼티 수정
myInfo.bornYear;// 2000
myInfo.bornYear = 2010
myInfor.bornYear;// 2010
// 객체에 프로퍼티 추가
myInfo.hateThg = 'milk';
//
myInfo = {
myName: 'Minion',
bornYear: 2000,
isVeryNice: true
favoriteBook: {
title: 'Harry potter'
author: 'J.K Rowling'
hateThg: 'milk'
}
// 객체의 프로퍼티 삭제
delete myInfo.hateThg
let myInfo = {
myName: 'Minion',
bornYear: 2000,
isVeryNice: true
favoriteBook: {
title: 'Harry potter'
author: 'J.K Rowling'
} 객체와 메소드
연관된 여러가지 값을 하나로 묶고 싶을 때 객체를 활용했던 것처럼 연관성있는 여러 함수들을 하나로 묶고 싶은 경우도 있다. 이때도 객체를 사용하면 된다. 객체의 프로퍼티에는 어떤 자료형이든 저장할수가 있기 때문에 프로퍼티 값으로 함수를 넣어주면 된다.
//whynot이라는 객체에 3개의 메소드가 정의된 것
let greetings = {
sayHi: function (){
console.log('Hi!');
}, // 메소드도 프로퍼티이므로 ','는 잊지 말 것
sayGoodMorning: function(){
console.log('Good morning!');
},
sayNight: function(name){
console.log('Good Night `${name}!`);
}
}; 이 메소드를 사용하려면 일반 프로퍼티에 접근하는 것과 동일하게 접근할 수 있다.
greetings.sayHi(); // 'Hi!'
greetings['sayGoodMorning'](); // 'Good morning!'
greetings.sayNight('Minion'); // 'Good Night Minion!'
그냥 함수를 사용하지 않고 메소드를 활용하는 이유는, 메소드는 어떤 객체의 고유한 동작으로써 함수에 의미를 부여할 수 있기 때문이다.
let rectAngle = {
width: 30;
height: 50;
getArea: function(){
return rectAngle.width * rectAngle.height;
}
}
let triAngle = {
width: 15;
height: 40;
getArea: function(){
return triAngle.width * triAngle.height / 2;
}
}사각형과 삼각형은 넓이 구하는 방식이 다르다. 어떤 객체의 메소드인지에 따라서 그 객체에 맞는 동작을 할때 메소드를 사용한다. 만약 일반적인 함수를 정의해야 했다면 함수이름이 중복되지 않도록 신경써서 두 함수를 정의해야하고, 하나의 함수를 만든다고 하더라도 상황에 따라 다르게끔 변수 등을 고민했어야 했을 것이다. 이름 중복등을 피할 수 있고, 좀더 객체에 집중해서 함수의 동작부분을 작성할 수 있다.
in 연산자
존재하지 않는 프로퍼티의 값은 undefined이다. 이를 활용해서 객체의 프로퍼티 존재 여부를 확인할 수 있다. 프로퍼티 네임을 문자열로 작성한 다음 in이라는 키워드를 써주고 확인할 객체를 작성해주면 객체안에 해당 이름을 가진 프로퍼티가 있는지 확인해서 불린형태로 값을 리턴한다. undefined보다 더 안전하게 쓸 수 있다는 장점이 있다. 또 조건문에서도 활용하기 쉽다.
myInfo.name !== undefined ;// True
'name' in myInfo; // True for ... in 반복문
객체 안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할 때 사용. 객체의 프로퍼티 네임을 가져오는 반복문이기 때문에 일반적인 for문으로는 대체할 수 없는 조금은 특별한 반복문이다. 객체 내부에 있는 모든 프로퍼티 값들을 하나씩 다루어야 하는 경우에 활용할 수 있다.
// for ... in 구조
for (변수 in 객체) {
동작부분
}
/* 특정한 변수를 만들고 in이라는 키워드를 만들고 반복할 객체 만든다
소괄호 내부가 조금 다른데, 소괄호 내부에서 특정한 변수를 만들고 in이라는 키워드 다음에
반복할 객체를 넣어주게 되면 이 객체의 프로퍼티 네임이 변수에 할당되고
객체의 프로퍼티 갯수만큼 반복동작을 하게 된다 */let myInfo = {
myName: 'Minion',
bornYear: 2000,
isVeryNice: true,
favoriteBook:'Harry potter'
}
for(let key in myInfo){
console.log(key);
console.log(myInfor[key]);
}; /* myName
Minion
bornYear
2000
isVeryNice
true
favoriteBook
Harry potter
key라는 변수를 만들고 myInfo의 객체의 프로퍼티 갯수만큼 반복을 하는데
key라는 변수에 myInfo 객체의 프로퍼티 네임들이 차례대로 전달되는 방식 for in 사용시 주의 사항
1. 숫자형(양수) 프로퍼티 네임을 사용할 때
프로퍼티 네임에 숫자형(양수)를 작성해서 사용하는 경우 문자열로 형 변환이 되어서 사용된다. 그리고 이렇게 예외적인 파라미터 네임은 접근할 때도 bracket notation으로만 접근이 가능하다.
// 프로퍼티 네임에 숫자형(양수)를 작성해서 사용하는 경우 문자열로 형 변환이 되어서 사용
let inviteGst = {
300: '손님 수',
2.5: '필요한 시간'
};
for(let key in inviteGst){
console.log(`${key}의 자료형은 ${typeof key}입니다.`)
}; /* 300의 자료형은 string입니다.
2.5의 자료형은 string입니다. */
// 접근할 때도 bracket notation으로만 접근이 가능
console.log(inviteGst['300']);
console.log(inviteGst['2.5']);
console.log(inviteGst.300); //Error!
console.log(inviteGst.2.5); //Error! 2. 정수형 프로퍼티 네임을 사용할 때
객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다. 정수형 프로퍼티에 따옴표를 붙여 문자열처럼 만들더라도, 정렬방식은 동일하게 처리된다. 자동으로 정렬되는 특성이 장점처럼 느껴질 수 있지만 대부분의 경우 의도치 않은 결과를 가져올 수도 있기 때문에, 일반적으로 정수형 프로퍼티는 잘 사용하지 않는다. 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하는 걸 권장한다.
/* 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한
순서대로 정렬*/
let hotelInfo = {
3: '체크인 하는 곳',
도착시간: '미정',
2: '조식 먹는 곳',
조식메뉴: '한식부페'
1: '주차장으로 연결'
};
for(let key in hotelInfo){
console.log(key);
}; /* 1
2
3
도착시간
조식메뉴 */
// 정수형 프로퍼티에 따옴표를 붙여 문자열처럼 만들더라도, 정렬방식은 동일
let hotelInfo = {
'3': '체크인 하는 곳',
도착시간: '미정',
'2': '조식 먹는 곳',
조식메뉴: '한식부페'
'1': '주차장으로 연결'
};
for(let key in hotelInfo){
console.log(key);
}; /* 1
2
3
도착시간
조식메뉴 */ 