Meiren

[Javascript] 기본 - 객체 (object) 본문

GTM(구글태그매니저)

[Javascript] 기본 - 객체 (object)

meiren 2023. 4. 10. 16:56

1. 구성

key : 'value'의 형태로,

각 프로퍼티는 comma( , ) 로 구분함

const superman = {
	name : 'clark',
    	age : 33,
}

 

 

2. 주요 액션(기능)

2-1. 접근 : . (dot)

sperman.name     // 'clark'
superman['age']  // 33

 

2-2. 추가

superman.gender = 'male';
superman['hairColor'] = 'black';

 

2-2. 삭제

delete superman.hairColor;

 

 

3. 단축 프로퍼티

const name = 'clark';
const age 33;

const superman = {
	name,
    age,
    gender : 'male',
}

3-1. 프로퍼티 존재 여부 확인

- in 을 사용함

- . 이나 대괄호를 사용하지 않는 이유, 어떤 값이 나올지 확신할 수 없을 때 사용 (API 통신값, 함수 인자를 받는 등)

superman.birthDay         // undefined
'birthDay' in superman;   // false
'age' in superman;        // true

 

4. for ... in 반복문

- 객체를 순회하면서 값을 얻을 수 있다.

for(let key in superman){
	console.log(key)
    console.log(superman[key])
}

 

 

5. 실전 예제

1. 객체 선언 및 프로퍼티 추가 삭제

const superman = {
	name : 'clark',
    age : 20,
}

console.log(superman)           // 객체자체, Object {age:30, name:'Clark'}
console.log(superman.name)      // 'clark'
console.log(superman['age'])    // 30


//추가할 떄도 정의나 대괄호를 사용가능
superman.hairColor = 'black';
superman['hobby'] = 'football';
delete superman.age;
console.log(superman)

 

 

2. 이름과 나이를 받아서 객체를 반환하는 함수

function makeObject(name, age){
	return{
    	name
        age
        hobby : 'football'
	};
}

const Mike = makeObject('Mike', 30);
console.log(Mike);


// Mike에 age & birthday가 존재?
console.log('age' in Mike)
console.log('birthday' in Mike)

 

3. 나이를 받아 성인인지 아닌지 판단해주는 함수

function isAdult(user){
	if(!('age' in user) ||     // user에 age가 없거나
    	user.age < 20){        // 20 보다 작거나
    	return false;
	}
	return true;
}

const Mike = {
	name : 'Mike',
    age : 30
}

const Jane = {
	name: "Jane"
}


console.log(isAdult(Mike))  // true
console.log(isAdult(Jane))  // false

 

4. for ... in

const Mike = {
 name : "Mike",
 age : 30
};

for(x in Mike){
	console.log(Mike[x])    // Mike['name'], Mike['age']
}