[자바스크립트 기초] 객체 (object) 관리 및 property, method, this
코복이2023. 5. 2. 14:38
728x90
1. 객체(object) 생성 방법
const 객체 이름 = { 키: 벨류, 키: 벨류. 키: 벨류 } *액셀표 만드는 것과 비슷
Q. 짱구를 객체로 만들어보고 생성 방법을 조금 더 자세하게 보자. A. const zzangu = { name: shin_zzangu, age: 8, insung: 0, }
1)객체(onbject)안의 값들은 {} 중괄호 안에 작성한다 2)키(key) : 값(value) 을 묶어 프로퍼티(property)라 하며 각 프로퍼티는 , 쉼표로 구분 e.g) 'name'이 '키'고 'shin zzngu'가 '벨류'다. 3)마지막 쉼표는 없어도 무방하지만 있는게 혹시모를 수정을 대비해 남겨두자. 4)객체 만드는 걸 함수화 하면? const 객체 이름 = 함수 로 해서 키는 함수에 매개변수로 넣고 벨류는 함수의 인수로 넣음.
constmakeObject = (name, age) => {
return {name, age}
}
constMike = makeObject("Mike", 19);
2. 객체(object) 접근, 추가, 삭제 방법
1)object 접근 - object 이름 뒤에 . 과 키 네임을 붙이면 벨류에 접근할 수 있다. - 또는 object 이름 뒤에 ['키 네임'] 이렇게도 접근 가능 e.g)zzangu.name // 'shin_zzngu' e.g)zzangu['age'] // 8
※객체 접근 시 중요한 것 1) 객체명.키값 은 속성의 이름이 정적으로 결정될 때 사용 2) 객체명['키값'] 은 속성의 이름이 동적으로 결정될 때 사용 (키값이 -> name 도 되고 age도 되는 등 동적으로 변환) 3) 예시
constMike = { // 마이크에 프로퍼티가 2개 있음
name:"Mike",
age:30
};
for(keyinMike){ // 마이크에 있는 키 값을 돌며 뭐 있는지 다 조회 해야 함.
console.log(Mike.key)
}
undefined
undefined // Mike.key 로 하면 언디파인드가 나옴
반면,
for(keyinMike){
console.log(Mike[key]) // 이건 왜 ' ' 안붙이냐면 이건 키값의 이름이 아니라 키 자체이기 때문
}
Mike
30 // Mike[key]로 하면 각 키에 속한 벨류 값이 나옴.
그러면, 정적이면 나올까?
constMike = {
key:"Mike", // key 가 동적으로 변환되지 않고 key 자체로 지정하니까 아래 처럼 나옴
};
for(keyinMike){
console.log(Mike.key)
}
Mike
2)object 추가 - object 이름 뒤에 . 과 추가하고 싶은 새로운 키 네임과 벨류를 넣으면 추가할 수 있다. - 또는 object 이름 뒤에 ['추가하고 싶은새로운 키 네임'] = '추가하고 싶은새로운 벨류' 이렇게도 가능 e.g)zzangu.father = 'shin'; e.g)zzangu['mother'] = 'bong';
3)object 삭제 - object 이름.키 앞에 delete 붙여줌. e.g) delete zzangu.father; // zzangu object 에서 father 프로퍼티 삭제.
3. 단축 프로퍼티
- object 외부에 이미 정의되어있는 값으로 object 작성할 경우, 아래와 같이 단축하여 작성 가능
constname = 'shin'; // 객체 외부 값
constage = 8; // 객체 외부 값
constzzangu = {
name, // name: name, 이렇게 쓰는 것 대신 name으로만 단축
age,
location:'tokyo'
}
4. 프로퍼티 존재 여부 확인 방법 (값이 있는지 없는지 확인)
1) 일단 찔러보기 // 객체이름.원하는키네임 // 있으면 벨류를 줄 것이고 없으면 undefined. 2) in 사용 (true || false 반환) // '원하는키네임' in 객체이름 // 어떤 값이 넘어올 지 확신할 수 없을때 (API, 함수에서 등) 3) in 사용할때 키 값에 ' ' 붙여주는 것 까묵지 마라.
constname = 'shin';
constage = 8;
constzzangu = {
name,
age,
location:'tokyo'
}
console.log(zzangu.name);
console.log(zzangu.birthday);
console.log('birthday'inzzangu);
shin
undefined
false
5. for ... in 반복문 활용
- 객체에 있는 key 값을 한번 쭉 조회함 (하나하나 조회할 필요없음) - for(let key in 객체이름){반복할 코드} // key 이름은 아무거나 해도 객체의 키 값을 뜻함
console.log(Mike[key]) // Mike['name'] 과 Mike['age'] 와 동일 (for 이기 때문에 있는 벨류 값 다 가져옴)
}
Mike
20
📌예제 1: 이름과 나이를 받아서 객체로 반환하는 함수 - 함수의 매개면수를 키 값으로 하고 인수를 벨류 값으로 함 // 입력하는 대로 객체를 생성 함.
// 이름과 나이를 받아서 객체로 반환하는 함수
functionmakeObject(name, age){ //매개변수에 키 값
return {
name:name,
age, // 키 값: 벨류 값 동일하니 하나만 써도 됨.
}
}
constMike = makeObject("Mike", 30); // 인수에 벨류 값
constKara = makeObject("Kara", 20);
constBred = makeObject("Bred", 40);
console.log(Mike);
console.log(Kara);
console.log(Bred);
{ name: 'Mike', age: 30 }
{ name: 'Kara', age: 20 }
{ name: 'Bred', age: 40 }
📌예제 2: 객체에서 나이를 확인하고 성인인지 아닌지 구분하는 함수
// 객체에서 나이를 확인하고 성인인지 아닌지 구분하는 함수
functioncheckAdult(userName){
if(userName.age > 19){
return`당신의 나이는 ${userName.age} 성인입니다.`
} elseif(!('age'inuserName)){ // userName 객체 안에 age 키 값이 없으면(!) { }
return"나이를 알 수 없습니다."
} else{
return`당신의 나이는 ${userName.age} 미성년자입니다.`
}
}
constMike = {
name:'Mike',
age:20
}
constMimi = {
name:'Mimi',
age:18
}
constCoco = {
name:'Coco',
}
console.log(checkAdult(Mike));
console.log(checkAdult(Mimi));
console.log(checkAdult(Coco));
당신의 나이는 20 성인입니다.
당신의 나이는 18 미성년자입니다.
나이를 알 수 없습니다.
6. 객체 method / this
1) method : 객체 프로퍼티에 할당된 함수 - 생성 // 함수명: function(){실행 코드} 또는 함수명(){실행코드} - 실행 // 객체명.함수명() e.g) 짱구에게 엉덩이를 흔드는 능력이 있다.
// method
constzzangu = {
name:'shin',
shakeAss :function(){
console.log("엉덩이를 흔듭니다.")
}
}
zzangu.shakeAss();
constzzangu = {
name:'shin',
shakeAss(){ // : 과 function을 빼도 작동 함.
console.log("엉덩이를 흔듭니다.")
}
}
2) this - 객체 내부에 있는 값을 호출할때 객체 이름 대신 사용한다. - this는 실행하는 시점 (런타임)에 결정됨. - this는 객체 이름은 안중요하고 객체가 가진 프로퍼티를 바라봄. ★결론적으로 매서드에서는 this로 사용해주는 게 좋음. (화살표 함수 안쓴다는 가정) ★메서드에서 화살표 함수는 쓰지마라
📌 예제1: 본인 이름 말하며 인사하는 짱구 메서드
// method / this
constzzangu = {
name:'shin',
sayHello(){
console.log(`안녕 나는 ${zzangu.name}이야`) // zzangu.name 으로 호출하는게 추후 문제가 생길 수 있음.
}
}
zzangu.sayHello();
// 안녕 나는 shin이야
이때, zzangu 라는 객체 이름 대신 this를 사용.
// method / this
constzzangu = {
name:'shin',
sayHello(){
console.log(`안녕 나는 ${this.name}이야`) // 객체이름 대신 this. 를 씀
}
}
zzangu.sayHello();
// 안녕 나는 shin이야
📌 예제2: 남자, 여자 객체가 본인 이름, 성별 말하는 메서드
// 본인 이름, 성별 말하는 메서드
constboy = {
name:'Mike',
gender:'male',
sayHello(){
console.log(`안녕 나는 ${this.name}이고 ${this.gender}야`)
}
}
constgirl = {
name:'Jane',
gender:'female',
sayHello(){
console.log(`안녕 나는 ${this.name}이고 ${this.gender}야`)
}
}
boy.sayHello();
girl.sayHello();
※ 메서드를 '화살표 함수'로 선언하면 동작이 완전 달라짐. - 화살표 함수는 일반 함수와 달리 자신만의 this 를 가지지 않음 - 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴. 다시 말하면, 화살표 함수 내부의 this는 전역객체이며 이 전역객체는 [브라우저에서는 window], [Node.js에서는 global] === 고로, 화살표 함수 내에서 this는 객체명과 다름.
constboy = {
name:'Mike',
gender:'male',
sayHello(){
console.log(`안녕 나는 ${this.name}이고 ${this.gender}야`)
}
}
constgirl = {
name:'Jane',
gender:'female',
sayHello: () => {
console.log(`안녕 나는 ${this.name}이고 ${this.gender}야`)
