Level 1-2 객체
TIL List
- 객체
1) 객체
이번 레슨에서는 객체에 대해서 배웁니다. 자바스크립트에서 객체는 게임 캐릭터에 비유할 수 있습니다. 저의 캐릭터와 여러분의 캐릭터는 직업과 능력을 가지고 있지만, 서로 다른 직업과 능력을 가지고 있습니다. 유어클레스에 가입 시 입력하는 정보도 각자 다르지만, 입력해야 하는 정보의 종류는 동일합니다.
이렇게 한 데이터가 다양한 속성을 가지고 있는 경우에 객체를 사용하는 것이 바람직합니다.
1. 변수를 이용한 주소록 만들기
나의 주소록을 변수를 통해 만들어보자.
let myFirstName = 'Yongho'
let myLastName = 'Kim'
let myEmail = 'codex@gmail.com'
let myCountry = 'Korea'나의 주소록에 내 친구도 추가해 보자.
let myFirstName = 'Yongho'
let myLastName = 'Kim'
let myEmail = 'codex@gmail.com'
let myCountry = 'Korea'
let friendsFirstName = 'Wonwoo'
let friendsLastName = 'Seo'
let friendsEmail = 'idkx@gmail.com'
let friendsCountry = 'Korea'이와 같이 각 정보를 일일이 변수로 선언하고 값을 할당하는 건 너무 비효율적이다.
2. 배열을 이용한 주소록 만들기
우리는 배열에 대해 알고 있으니 배열을 사용해 보자.
let myInfo = [
'Yongho'
'Kim'
'codex@gmail.com'
'Korea'
];
let friendsInfo = [
'Wonwoo'
'Seo'
'idkx@gmail.com'
'Korea'
];우선 배열로 각 정보를 묶긴 했다. 그럼 만약 내가 저 정보에서 친구의 이메일 정보를 보고 싶다면 어떻게 해야 할까?
friendsInfo[2] // 'idkx@gmail.com' 처럼 해야 한다.
이럴 경우 우리는 각 정보를 찾기 위해 0번째는 이름.. 1번째는 성... 이런식으로 인덱스 번호를 모두 외워야 한다. 가독성도 떨어질 뿐 더러 너무 비효율적이다.
3. 객체를 이용한 주소록 만들기
그래서 이번에는 객체를 활용하여 나의 정보를 묶어 보겠다.
let myInfo = {
firstName : 'Yongho',
lastName : 'Kim',
email : 'codex@gmail.com',
country : 'Korea'
};1. 객체는 중괄호 (Curly Bracket) 을 사용한다.
2. : 를 기준으로 왼쪽은 키(key), 오른쪽은 값(value) 라고 부른다.
(위에서 보면 firstName 은 키(key) 이고 'Yongho' 는 값(value) 이다. 키와 값 사이는 콜론 (:)으로 구분하면 된다.)
3. 키와 값 쌍의 구분은 쉼표(,) 로 구분해준다.
(firstName : 'Yongho', lastName : 'Kim')
객체를 사용하니 firstName 키(key) 에는 'Yongho' 라는 값(value) 가 할당 돼있다는걸 쉽게 파악 할 수 있고 분류하기도 쉽다. 따라서 다양한 정보를 묶을 때는 위와 같이 객체를 사용하면 훨씬 효율성이 높다.
객체의 값에 접근하는 두 가지 방법
- Dot notation (점 표기법)
읽기 쉽고 자주 사용한다는 특징이 있다.
let myInfo = {
firstName : 'Yongho',
lastName : 'Kim',
email : 'codex@gmail.com',
country : 'Korea'
};
myInfo.firstName; // 'Yongho'
myInfo.email; // 'codex@gmail.com'- Bracket notation (괄호 표기법)
문자열 타입을 입력해야한다, 자주 사용하지는 않는다
let myInfo = {
firstName : 'Yongho',
lastName : 'Kim',
email : 'codex@gmail.com',
country : 'Korea'
};
myInfo['firstName']; // 'Yongho'
myInfo['email']; // 'codex@gmail.com'(만약 myInfo[email] // undefined 이렇게 문자열 타입이 아닌 값을 주면 email 을 변수로 인식하기 때문에 식에 email 이란 변수가 있는지 참조한다. 위에서는 email 이란 변수가 없으므로 undefined)
객체에 값을 추가하는 방법
let myInfo = {
firstName : 'Yongho',
lastName : 'Kim',
email : 'codex@gmail.com',
country : 'Korea'
};
myInfo['isMale'] = true; // isMale : true (키와 값이 객체에 추가된다.)
myInfo.age = '22' // age : '22' (키와 값이 객체에 추가된다.)위와 같이 객체이름.아무런 키(key) = 아무런 값(value) 형식으로 쓰면 값을 추가 할 수 있다.
객체의 키-값 쌍을 제거하는 방법
delete 객체이름.키(key) 를 하면 된다.
let myInfo = {
firstName : 'Yongho',
lastName : 'Kim',
email : 'codex@gmail.com',
country : 'Korea'
};
delete myInfo.lastName; // lastName : 'Kim' 키-값 쌍이 객체에서 삭제되고 결과는 아래와 같다.
let myInfo = {
firstName : 'Yongho',
email : 'codex@gmail.com',
country : 'Korea'
};객체에 키가 있는지 확인하는 방법
배열은 Array.isArray() 함수가 있었다면 객체에는 in 연산자가 있다.
let myInfo = {
firstName : 'Yongho',
lastName : 'Kim',
email : 'codex@gmail.com',
country : 'Korea'
};
'firstName' in myInfo; // true
'isMale' in myInfo; // false키(key) in 객체이름 을 하면 된다.
