js Object(객체)란?
객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합이다.
객체안에는 텍스트, 숫자, 배열 , 함수 , 객체를 포함할 수 있기 때문에
같은 카테고리나 수많은 데이터들을 객체안에 포함시켜 객체의 틀을 만들고
비슷한 모양의 객체를 공장 처럼 찍어낼 수 도 있다.
객체는 어떻게 만들고 사용하는가?
{} 만 사용하면 되는데, 이렇게 {} 으로 생긴 모양의 객체를 object literal(객체 리터럴)이라고 한다.
let hello = {};
const dog = {
name(key) : 'happy'(value),
age : 3,
}객체는 중괄호로 작성하고키(key)와 값(value)으로 구성된 정보(property)가 들어있다.
각 property 는 쉼표로 구분한다. 마지막 값에 쉼표를 붙혀주면 수정 및 이동이 간편하다.
객체 접근 방법
const dog = {
name(key) : 'happy'(value),
my favorit: 'eat'
age : 3,
15 : 'code'
}
객체에 프로퍼티에 접근할 때
dog.name //happy ;
dog['age'] //3 ;
공백이 있는 key 이름
dog['my favorit']
숫자로 된 key 이름
dog[15]
객체에 프로퍼티를 추가할 때
dog.gender = 'male';
dog['color']= 'black';
객체의 프로퍼티를 삭제할 때
delete dog.color;Dot.
키만 알고 있다면 Dot. 으로 접근하는 것이 제일 편하다
Dot.은 키로 바로 접근할 때 사용하는것이다.
Dot.으로 접근할 때 '따옴표' 없이 키를 바로 작성해야 한다.
[대괄호]
대괄호로 접근하기 위해서는 키 이름을 '따옴표'로 감싸서 사용한다.
스페이스가 포함된, 즉 이름 중간에 공백이 있는 key이름은 대괄호로 접근해야 한다.
숫자로 된 키도 대괄호로 접근한다.
추가 할 경우에도 같은 방법을 사용하며
삭제는 delete 를 사용하면 된다.
Method (메소드)
객체에 저장된 값이 함수 일 때, 그것을 메소드라 부른다.
여태 사용했던 console.log() 또한 console이라는
객체안의 log라는 메소드를 사용한 것이다
객체의 메소드 정의 방법
let methodObj = {
do: function() {
console.log('hello');
}
}
//호출시
methodObj.do()객체의 중첩 그리고 접근
실무에서 사용되는 객체는 거의 중첩되어 있다. 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있기 때문에 항상 어떤 프로퍼티에도 접근할수 있는 방법을 알고 있어야 한다.
let myProfile = {
name: 'John',
address: {
email: 'geabal@gmail.com',
home: '롯데케슬'
},
'my favorite': {
food: [{
name: '롯데샌드',
price: 3500
}, {
name: '꽃등심',
price: 15000
}],
hobby: ['야구']
}만약 위에 객체에서 꽃등심이라는 프로퍼티를 수정하고 싶을 때 어떻게 접근해야 할까?
myProfile['my favorite'].food[1].name;
// 'my favorite'는 공백이 있는 프로퍼티라서 대괄호 사용
// 'my favorite'객체안의 food이라는 배열에 접근
// [1] 를 사용해 index 1번 객체에 접근
// .name을 사용해 꽃등심이라는 값에 도달
프로퍼티 단축 구문 (ES6 부터 가능)
let name ='John';
let age = 3;
let me = { name, age};
console.log(john) // {name: 'John', age: 3 }property 를 단축하는 방법이다.
외부 변수명을 이용해 객체에 데이터를 전달할 경우 간략하게 표현할 수 있다.
{name, age} 이런식으로 단축이 가능하다.
in 연산
없는 property 를 사용하게되면undefined 가 생성되고
만약에 property의 존재여부를 확인하고 싶을 때
in 연산자를 사용하여 true 와 false 값을 보고 알 수 있다. 어떤값을 너무 일찍 확신 할 수 없을
때 사용한다. 함수를 인자로 받거나 API통신을 통해 데이터를 받아올 때 사용한다.
const myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
"company" in myCar // true를 반환합니다.
"model" in myCar // true를 반환합니다.실습
const superman = {
name : ' clark ';
age: 30 ,
}
console.log( superman.name) /// "clark"
console.log(superman[ 'age']) /// 30객체 자체를 호출 했을 때
const superman = {
name: ' clark ' ,
age: 30 ,
}
console.log( superman) /// Object { name: "clark" , age :30; }
}객체를 추가했을 때
const superman = {
name: 'clark',
age: 30,
}
superman.hairColor = 'black ';
superman [ 'hobby'] = 'foorball';
console.log( superman) ///Object{ name:"clark", age :30,; hairColor:"black", hobby:"football" }
} 객체 삭제
const superman = {
name:'clark',
age: 30 ,
}
delete superman.age;
console.log( superman) ///Object {name: "clark"} 성인 임을 확인하는 객체를 이용한 함수
function isAdult(user) {}
if (!('age' in user) || user.age < 20) {
return fales ;
}
return true;
}
const Mike = {
name: "Mike",
age: 30;
};
const Jane = {
name: "Jane"
};
console.log(isAdult(Jane))이름과 나이를 받아서 객체로 만드는 함수 만들기
function makeObject(name, age){
return{
name : name,
age : age,
hobby: "football",
}; }
const Mike = makeObject ("Mike" , 30);
console.log (Mike); /// Object { name: "Mike", age :30,hobby : 'football'}(!('age' in user) || user.age < 20) 는 유저가 나이를 적지 않거나(age가 없거나) 20 미만으로 적었을경우 false 를 불러와 성인이 아니거나 나이를 적지 않은 사람을 확인 할 수 있다.
