네이처리 노트
[javascript] 객체 object 기본기 본문
728x90
반응형
공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요
let object = {
propertyName: propertyValue, //속성 property
}
let sample = {
name: "name",
'i_am': "sample", // 따옴표로 하이픈사용
home: { // 객체안에 객체
name: '이름',
color: '파랑'
}
};
- propertyName
- 첫글자는 반드시 문자, 밑줄( _ ), 달러기호( $ )중 하나로 시작
- 띄어쓰기 금지
- 하이픈(-)금지 : 따옴표로 사용 할 수 있음 'an apple' 'an-apple'
- propertyValue
- 객체안에 객체를 넣을 수 있음
// 점 표기법
sample.name
// 대괄호 표기법
sample['i_am']
// 객체안의 객체 접근하기
sample.home.color
// 객체에 속성이 없는 경우
sample.age // undefined
// 추가 및 수정
sample.new = '추가 및 수정';
sample['new'] = '이렇게도 가능';
// 제거
delete sample.name;
delete sample['name'];
// 객체내 존재 확인하기
console.log('name' in sample); // true
// 객체 길이
sample.keys( obj ).length; // 2
let greeting = { //두 개의 메소드를 가진 객체
sayHello: function() { //함수이름은 속성이름이 대체됨
console.log('Hello');
},
sayBye: function(name) { //파라미터를 넣을 수 있음
console.log(`Bye ${name}!`);
}
};
greeting.sayHello(); //Hello 출력
greeting.sayBye('점표기법'); //Bye 점표기법! 출력
greeting[sayBye]('대괄호표기법'); //Bye 점표기법! 출력
출력할 때 사용하는 console.log도, console객체에 log메소드 인 것
▼메소드를 사용하면 함수 이름의 중복을 피할 수 있다 !
let rectAngle = {
width: 30,
height: 50,
getArea: function () {
return rectAngle.width * rectAngle.height;
}
};
let triAngle = {
width: 10,
height: 30,
getArea: function () {
return triAngle.width * triAngle.height;
}
};
파라미터 사용시 주의할 점
변수에 담긴 값을 가져올 때는 대괄호 표기법을 사용해 주어야 한다
let myVoca = {
addVoca: function (word, trans) {
return myVoca[word] = trans;
},
deleteVoca: function (word) {
delete myVoca[word];
},
printVoca: function (word) {
console.log(`"${word}"의 뜻은 "${myVoca[word]}"입니다.`)
}
}
728x90
반응형
'개발기록 > Javascript' 카테고리의 다른 글
[javascript] 배열 array 기본기 (0) | 2022.09.05 |
---|---|
[javascript] 기본형과 참조형 (배열복사, 객체복사) (0) | 2022.09.05 |
[javascript] 제어문 반복문 for, for in, for of, while 알아보기 (0) | 2022.09.05 |
[javascript] 제어문 switch (0) | 2022.09.05 |
[javascript] 제어문 if, else if 간단 정리 (0) | 2022.09.05 |
Comments