객체 : Non-Primitive Type (비 원시 타입)
- 한번에 여러 개의 값을 가질 수 있음
- 여러 개의 고정되지 않은 동적 공간 사용
객체 만드는 방법
1. 객체 생성자 만들기
new라는 키워드가 붙으면 뒤에 있는 객체를 생성한다.
let person = new Object();
//person이라는 객체 생성2. 객체 리터럴 방식(중괄호 이용)
let person = {}; //객체 리터럴 방식객체 리터럴 방식이 생성자 방식보다 만들기 편하므로 앞으로 생성자 방식 말고 리터럴 방식 사용!😊
많은 프로그래머들이 리터럴 방식으로 객체를 다루기 때문에 익숙해지는 것이 좋음!
let person = {
key: "value", // -> 객체가 가지는 데이터
key1: 123, // -> 프로퍼티 (객체 프로퍼티)
key2: true,
key3: undefined,
key4: [1,2],
key5: function(){}
}; //객체 리터럴 방식
console.log(person); //{key:"value", key1:123, key2:true, key3:undefined, key4:Array(2)...}중괄호 내부에는 객체가 저장하고 싶은, 갖고 있을 데이터를 넣어주면 됨 / 객체는 여러가지 데이터를 동시에 가질 수 있으므로 여러가지 값들을 넣어줄 수 있음
: 을 가운데로 왼쪽에 있는 것을 key, 오른쪽에 있는 것을 value라고 부름
왼쪽에는 key, 오른쪽에는 value를 갖는 key,value 쌍으로 저장되는 데이터 -> 프로퍼티[속성] (객체 프로퍼티)
프로퍼티는 몇개를 넣어도 상관이 없음(자료형이 달라도)
프로퍼티의 value에는 어떤 자료형이 위치해도 상관X
key는 반드시 문자열로만 이루어져야 함. (" "사용X)
객체를 콘솔에 출력하게 되면 key:value식으로 모든 프로퍼티를 중괄호로 묶어서 출력해줌
key끼리 중복되어도 문제가 발생하진 않으나 추천X (나중에 해당 key에 대한 value를 찾을 때 앞서 나왔던 프로퍼티는 무시, 가장 뒤에 있는 프로퍼티 기준으로 value를 찾게 됨)
객체에서 값 꺼내기👇
let person = {
key: "value",
key1: 123,
key2: true,
key3: undefined,
key4: [1,2],
key5: function(){}
};
console.log(person.key1); //123 -> person객체 중 key1의 값만 꺼내기
console.log(person.key2); //객체이름.key이름 , 결과 : true👆이런식으로 프로퍼티의 값에 접근하는 것 : 점표기법
객체 프로퍼티에 접근하는 방법 1. 점표기법
.옆에 있는 key를 통해 객체안에 있는 프로퍼티의 key와 매칭
let person = {
name : "영주",
age : 22
}; //객체 리터럴 방식
console.log(person.key1); //없는 key에 접근하려고 하면 undefined이 나옴
console.log(person.name); //영주
console.log(person.age); //22객체 프로퍼티에 접근하는 방법 2. 괄호표기법 ["객체프로퍼티의 key이름"]
let person = {
name : "영주",
age : 22
}; //객체 리터럴 방식
console.log(person["name"]); //영주
console.log(person.age); //22주의!⭐
괄호표기법을 사용할때는 프로퍼티의 key를 반드시 문자열 형태로 넣어주어야 함 (만약, ""빼고 넣으면 에러남)
괄호표기법 사용 예>
함수로 객체 프로퍼티의 key를 통해 value를 받아오는 함수 필요할 때 -> 괄호표기법 이용하면 굉장히 easy
괄호표기법 사용하기 좋을 때:
- 동적인 파라미터를 전달받는 상황
- 현재 key를 꺼내야 하는데 key가 고정되어 있지 않은 상황
let person = {
name : "영주",
age : 22
}; //객체 리터럴 방식
console.log(getpropertyValue("name")); //호이스팅 됨 , 결과 : 영주
function getpropertyValue(key){
//key를 받아서 person객체에서 전달받은 key의 값을 갖는 프로퍼티의 value를 꺼내서 return
return person[key];
}객체 생성 이후에 프로퍼티 추가,수정,삭제하는 방법을 다뤄보자.
프로퍼티 추가 방법👇 : 점표기법, 괄호표기법 모두 사용 가능
let person = {
name : "영주",
age : 22
}
person.location = "한국"; //프로퍼티 추가(점 표기법)
person["gender"]="여성"; //프로퍼티 추가(괄호 표기법)
console.log(person); // {name:"영주", age:22 , location:"한국", gender:"여성"}프로퍼티 수정 방법👇 : 점표기법, 괄호표기법 모두 사용 가능
let person = {
name : "영주",
age : 22
}
//프로퍼티 추가
person.location = "한국"; //프로퍼티 추가(점 표기법)
person["gender"]="여성"; //프로퍼티 추가(괄호 표기법)
//프로퍼티 수정
person.name = "영주 A"; //프로퍼티 수정(점 표기법)
person["age"] = 30; //프로퍼티 수정(괄호 표기법)
console.log(person); // {name:"영주 A", age:30 , location:"한국", gender:"여성"}놀라운점!😮 const로 바꾸어도 에러가 나지 않음!
const person = {
name : "영주",
age : 22
}
//프로퍼티 추가
person.location = "한국"; //프로퍼티 추가(점 표기법)
person["gender"]="여성"; //프로퍼티 추가(괄호 표기법)
//프로퍼티 수정
person.name = "영주 A"; //프로퍼티 수정(점 표기법)
person["age"] = 30; //프로퍼티 수정(괄호 표기법)
console.log(person); // {name:"영주 A", age:30 , location:"한국", gender:"여성"}상수여서 추가하고 수정하면 에러가 날 것 같지만 에러가 나지 않음!
이유 : 프로퍼티의 값을 수정하는 행위는 person이라는 상수 자체를 수정하는 행위가 아니기 때문 (person이라는 상수가 갖는 오브젝트(객체)를 수정하는 행위일뿐)
person이라는 상수 자체를 수정하는 행위란? 무엇일까👇
const person = {
name : "영주",
age : 22
}
//프로퍼티 추가
person.location = "한국";
person["gender"]="여성";
//프로퍼티 수정
person.name = "영주 A";
person["age"] = 30;
person = {
age : 20 // 새로운 객체를 대입연산자를 통해서 할당하는 예
};
console.log(person); // 에러다시 말해 상수 자체에 대입연산자을 사용하지 않으면 에러 발생 X
-> 객체는 상수로 선언을 했더라도 객체의 프로퍼티는 추가,수정,변경 가능
프로퍼티 삭제 방법👇 : 점표기법, 괄호표기법 모두 사용 가능
const person = {
name : "영주",
age : 22
}
//프로퍼티 삭제
// delete person.age; //프로퍼티 삭제(점 표기법)
delete person["age"]; //프로퍼티 삭제(괄호 표기법)
console.log(person); //{name:"영주"}하지만 이렇게 삭제를 하면 객체와 삭제대상인 프로퍼티간의 연결을 끊을뿐, 실제로 메모리에서 값이 지워지진 않음
-> delete 사용 방법보단 null을 사용해서 지우는 방법 추천!👇
const person = {
name : "영주",
age : 22
}
//프로퍼티 삭제
person.name = null;
console.log(person); //{name:null, age:22}person 객체의 name은 null이 되어 삭제한 것과 같은 효과,
기존 메모리에 있던 "영주" 문자열 날릴 수 있음
객체의 프로퍼티로 함수를 담는 경우👇
const person = {
name : "영주", //멤버
age : 22, //멤버
say : function(){
console.log("안녕");
} //메서드 -> 방법
};
person.say(); //안녕 -> 점 표기법
person["say"]; //안녕 -> 괄호 표기법객체 안에 들어있는 함수 : 메서드
함수가 아닌 프로퍼티 : 멤버
자기소개를 하는 함수 만들기👇
const person = {
name : "영주", //멤버
age : 22, //멤버
say : function(){
console.log(`안녕 나는 ${this.name}`); //``(백틱으로 템플릿 리터럴로 바꿔주기 , 결과 : 안녕 나는 영주
console.log(`안녕 나는 ${this["name"]}`); // 위, 아래 방법 둘 다 가능 , 결과 : 안녕 나는 영주
console.log(`안녕 나는 ${person["name"]} `); //과 같음 , 결과 : 안녕 나는 영주
} //메서드 -> 방법
};
person["say"]; //안녕 -> 괄호 표기법객체 안에 메서드를 만들게되면 그 메서드 안에서는 자기 자신을 this라는 이름으로 부를 수 O
객체에 존재하지 않는 프로퍼티에 접근하면 어떻게 될까?👇
const person = {
name : "영주",
age : 22,
say : function(){
console.log(`안녕 나는 ${this.name}`);
}
};
console.log(person.gender); //undefined이런 식으로 에러를 일으키지 않고 undefined를 반환하는 방식은 유연한 프로그래밍을 가능하게 하지만 존재하지 않는 프로퍼티에 잘못 접근해서 연산을 수행한다던가 하는 오류 발생 가능
-> 존재하지 않는 프로퍼티에는 접근하지 않는게 좋음
프로퍼티가 객체에 존재하는지 여부를 확인할 수 있는 방법👇
const person = {
name : "영주",
age : 22,
say : function(){
console.log(`안녕 나는 ${this.name}`);
}
};
console.log(`name : ${"name" in person}`); // name이라는 key를 갖는 프로퍼티가 person 안에 존재하는지 확인, 결과 : name:true
console.log(`age : ${"age" in person}`); //결과 : age:true
console.log(`gender : ${"gender" in person}`); //결과 : gender:falsein 연산자 활용 -> 프로퍼티의 존재여부를 불리언으로 반환
