TIL -1- (객체 Object와 속성Property)
일주일이 지나서야 하는 TIL 월요일이니까 새로운 마음으로~
일단 온라인강의 Javascript 기초편을 듣고 있는 중이다.
확실히 기초를 배우니까 무작정 던져져서 두서없이 검색하던 때보다 훨씬 나아진 게 느껴진다.
함수나 배열이 어떻게 돌아가는지도 이해가 조금(절대 조금) 되기도 하고 대체 왜 여기에 [i]가 들어가고 [j]가 나오는지 알 수 없던 것들이 왜 그런지 이유를 조금(절대 조금2) 알 수 있었다.
그래서 오늘 공부한 것들.
1. 객체(Object)와 속성(Property)
변수에 숫자, 문자, 불린을 하나씩 넣던 것과 다르게 여러가지의 값을 한 번에 저장할 때 객체(Object)를 사용한다.
js의 모든 것이 객체라는 말도 있음.
객체는 변수에 담겨서 이름을 만든다.(중괄호 사용'{}') 다양한 값들을 콤마(,)로 구분하여 저장한다.
객체에는 다양한 값이 들어가기 때문에 콜론(:)과 함께 값의 이름을 붙여주어야 한다.
ex)
{
name: 'joe',
birthday:0422,
age: 29,
gender: null,
jobisTeacher: False
}
위의 부분에서 왼쪽에 해당하는 부분이 값의 이름 Key(Property Name),
오른쪽에 해당하는 부분이 값 Value(Property Value)
Key 와 Value 두 가지를 개체(Object)의 속성(Property) 이라고 부른다.
Key는 문자열 속성을 가지고 있다. 원칙대로라면 따옴표('')를 넣어줘야 하지만 JS에서 암묵적으로 형변환을 하기 때문에 따옴표가 없이도 쓸 수 있다.
이에 따른 주의사항이 있다.
1. 첫 글자는 문자, 밑줄(_), 달러 기호($) 중 하나로 시작.
2. 띄어쓰기 X
3. 하이픈(-) X
위의 주의사항을 지키지 않을 경우에는 잊지 않고 따옴표('')를 넣어줘야 한다.
반대로
Value는 모든 자료형 값을 넣을 수 있다.(숫자, 문자, boolean, null)
객체 안에 객체도 넣을 수 있다.
ex)
{
name: 'joe',
birthday:0422,
age: 29,
gender: {
x: 'female,
y: 'male'
}
jobisTeacher: False
}
2. 객체(Object)의 속성(Property)으로 접근하는 법
객체는 변수에 담아주고
let myself = {
name: 'joe',
birthday:0422,
age: 29,
gender: {
x: 'female,
y: 'male'
}
jobisTeacher: False
};
객체의 Property에 접근하는 법은 2가지가 있다.
1) 점 표기법 (objectName.propertyName);
ex) console.log(myself.age);
결괏값: 29
2) 대괄호 표기법 (objectName['propertyName'])
점 표기법으로 접근할 수 없는 경우가 있기 때문에 대괄호 표기법을 사용한다.
대괄호 안에 따옴표를 넣고 문자열로 작성하는 방식.
-1- 프로퍼티네임에 띄어쓰기나 숫자로 시작하는 프로퍼티에도 접근 할 수 있다.
-2- 변수에 담긴 값도 활용할 수 있다.
ex)
let myself = {
name: 'joe',
'birth day':0422,
age: 29,
gender: {
x: 'female,
y: 'male'
}
jobisTeacher: False
};
-1-의 코드
console.log(myself['birth day']);
결괏값: 0422
-2-의 코드
let propertyName = 'name';
console.log(myself[propertyName]);
3) 객체 안의 객체 접근하기
동일하게 점 표기법과 대괄호 표기법 이용.
ex)
let myself = {
name: 'joe',
'birth day':0422,
age: 29,
gender: {
x: 'female,
y: 'male'
}
jobisTeacher: False
};
점 표기법 - console.log(myself.gender.x);
대괄호 표기법 - console.log(myself.gender['x']};
4) 그 외
존재하지 않는 Property에 접근할 경우 error 메세지가 아니라 undefined 값이 출력된다.
ex)
let myself = {
name: 'joe',
'birth day':0422,
age: 29,
gender: {
x: 'female,
y: 'male'
}
jobisTeacher: False
};
console.log(myself.gender['human']);
결괏값: undefined
공부한 걸 전부 올리려니 양이 방대해서...오늘 배운 거 내일 올리기도 하고 뭐 그러는 걸로...^^!