객체(Object)

유튜브 코딩앙마 채널의 '자바스크립트 기초 강좌' 를 공부하며 정리한 내용입니다.

이런 정보를 superman name: clark age: 33 객체로 만들어 보면 아래와 같습니다.

const superman = {
	name: 'clark',
  	age: 33,
}
// 슈퍼맨인데 이름은 클라크, 나이는 33세

객체는 중괄호 {} 로 작성하고 키(key) 와 값(value)으로 구성된 프로퍼티가 들어갑니다. 각 프로퍼티는 쉼표로 구분하고, 마지막 쉼표는 없어도 되지만 있는 게 수정, 삭제, 이동할 때 편리합니다.

객체를 사용하는 방법은 아래와 같습니다.객체에 접근해 값을 불러오고 싶다면 다음과 같은 문법을 사용합니다.

superman.name // -> 'clark'
superman['age'] // -> 33

객체에 데이터를 추가하고 싶다면 대입 연산자를 활용하고,

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

삭제하고 싶다면 delete 를 사용합니다.

아래와 같이 단축 프로퍼티를 사용할 수도 있습니다. (key값과 value가 같을 경우?)

const name = 'clark';
const age = '33';

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

// 위 코드를 아래처럼 단축할 수 있습니다.

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

존재하지 않는 프로퍼티에 접근하면 undefined 가 나옵니다. in 연산자를 사용하면 해당 프로퍼티가 있는지 확인할 수 있습니다.

'birthDay' in superman; // -> false
// birthDay 라는  key를 가진 데이터가 객체 superman 에 없다. 

'age' in sumperman; // -> true
// age 라는 key를 가진 데이터가 객체 superman 에 있다.

어떤 값이 넘어올지 확신할 수 없을 때 점이나 대괄호가 아닌 in 을 사용합니다.

for.. in 반복문을 사용하면 객체를 순회하며 값을 얻어올 수 있습니다.

for(let key in superman){ // key 는 다른 문자를 써도 됩니다.
	console.log(key)
  	console.log(superman[key])
}

이름과 나이를 받아서 객체로 반환하는 함수를 만들어 보면,

function makeObject(name, age){
	return {
		name : name,
		age : age,
		hobby : 'football,
	};
}
const Mike = makeObject("Mike", 30);
console.log(Mike); 

이렇게 리턴값에 중괄호를 넣어 객체를 담을 수 있다.

아래 예시를 살펴보면,

// 나이를 확인하고 성인인지 아닌지 구분하는 함수가 있고,
function isAdult(user){
	if(user.age<20){
    	return false;
    } else
  	return true;
}

// 아래와 같이 변수를 객체로 정의하고,
const Mike = {
	name : 'Mike',
  	age : 30,
}
const Jane = {
	name : 'Jane';
}

// 콘솔로그를 찍어보면
console.log(isAdult(Mike)); // -> true
console.log(isAdult(Jane)); // -> true

나이가 없는 제인은 if 조건문의 조건이 undefined 로 false 가 나와서 else 뒤의 구문이 실행됩니다. true 값을 리턴합니다. 나이가 없을 때 false 가 나오게 하려면 조건문을 아래와 같이 수정해야 합니다.

if(user.age<20)
//
if(user.age<20 || !('age' in user)
// or연산자 사용, 나이가 20보다 작거나 user 객체에 age라는 key값이 없을 때 조건은 true 가 된다.