유튜브 코딩앙마 채널의 '자바스크립트 기초 강좌' 를 공부하며 정리한 내용입니다.
이런 정보를 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 가 된다.