Object
이름과 값으로 구성된 속성의 집합
MDN 바로가기
let obj1= {
//key: value,
name: "green",
age: 30,
}객체 리터럴 문법
let obj2= {};객체 생성자 문법
let obj3= new Object(); 프로퍼티 값에 접근하기
obj1.name 또는 obj1["name"]로 작성한다.
obj1.age 또는 obj1["age"]로 작성한다.
❗ obj1["name"]과 같이 작성할 때에는, let str="name"; obj1[str];처럼 변수를 이용한 작성이 가능하다.
Key 추가 제거
let user={name:"green", age:30, hasJob:true}
user.isAdmin = true;
//👉user= {name: 'green', age: 30, hasJob: true, isAdmin: true}
delete user.isAdmin;
//👉user= {name: 'green', age: 30, hasJob: true}객체에 있는 key값과 다른 이름으로 지정하고 싶을 때에는 아래와 같이 작성한다.
let {name:namevalue}= user;
//👉namevalue= 'green' key 값을 변수로 지정하기
const abc= namevalue
let user2={
[abc]: "blue";
}
// 👉namevalue= 'blue'생성하기
생성자 함수
function Person(name, age, tel, check){
this.name = name;
this.age = age;
this.tel = tel;
this.check = check;
//👆위는 👇아래와 같이 쓸 수도 있다.(단축 프로퍼티)
return{
name,
age,
tel,
check
}
}
//👉Person객체에 key를 지정해놓았다.
let student1 = [
new Person ("수민",22,"010-1234-5678","yes"),
new Person ("재훈",32,"010-0101-0101","yes")
]
//👉Person객체에 프로퍼티를 입력했다.생성자 함수는 대문자로 시작한다.
💡 위의 함수 Person에는 this={}와 return this라는 구문이 생략되어 있다. 이로 인해 this 객체에 name이라는 키와 값을 지정하고 그 name을 변수 student1에게서 값을 받아와 저장하는 것이다.
class
객체를 생성하기 위한 템블릿
class Person{
constructor(name, age, tel, check){
//❗ constructor는 class안에 1개만 존재가능!
this.name = name;
this.age = age;
this.tel = tel;
this.check = check;
//👉Person객체에 key를 지정해놓았다.
//단축 프로퍼티의 사용이 불가능하다.
speak(){
console.log(`${this.name}:${this.tel}`);
}
//👉메소드를 추가했다.
} 반환
Object 배열 반환
- Object.keys(obj)
객체의 키값들을 배열로 반환 - Object.values(obj)
객체의 값들을 배열로 반환 - Object.entries(obj)
객체의 키와 값을 배열로 반환 - Object.fromEntries(arr)
배열을 객체로 반환
in연산자
object에 해당하는 key가 있는지 확인해준다.
let student1={
name: "green",
};
console.log('name' in student1); 👉true
console.log('hasJob' in student1); 👉falsefor in
let stu1={
name:"Hella",
age:20,
}
for(let [key,value] of stu1 ){
console.log(`key 값: ${key}`);
console.log(`value 값: ${value}`);
}
/*👉
key 값: name
value 값: "Hella"
key 값: age
value 값: 20
로 출력된다.*/this
let user={
name: "blue",
age: 27,
say(){
this.name
}
}
cosole.log(user.say())
//👉"blue"호출한 객체를 참조한다.
function Calculators(num1,num2){
this.num1= num1;
this.num2= num2;
this.sum= function(){
return this.num1 + this.num2
}
this.mul= function(){
return this.num1 * this.num2
}
}
let calculator= new Calculators(10,20);
let result1= calculator.sum();
//👉30
let result2= calculator.mul();
//👉200Object 내장 method
Object.keys(객체)
해당 객체의 key를 배열로 반환
let user={
name: 'a',
age: 20
}
Object.keys(user)
//👉 ["name","age"]❗ 이때, key는 string 타입이다.
Object.values(객체)
해당 객체의 value를 배열로 반환
Object.values(user)
//👉 ["a",20]Object.entries(객체)
해당객체의 key,value를 2차원 배열로 반환
Object.entries(user)
//👉 [["name","a"],["age",20]]Object.fromEntries(배열)
2차원 배열을 객체로 반환
객체와 배열
array.find()
배열에서 해당하는 하나의 값을 찾을 시 반환하고 종료한다.
//위 생성자 함수의 script와 이어진다.
let result= student1.find(i=> i.check == "yes");
//👉 result={name: '수민', age: 22, tel: '010-1234-5678', check: 'yes'}array.filter()
조건에 해당하는 배열요소를 새로운 배열로 변환한다.
let result2= student1.filter(i=> i.age >= 20);
/* 👉result2=[
{name: '수민', age: 22, tel: '010-1234-5678', check: 'yes'} ,
{name: '재훈', age: 32, tel: '010-0101-0101', check: 'yes'}
]*/array.map()
배열에서 배열요소의 값을 변형해서 새로운 배열로 변환한다.
let result3= student1.map(i=> i.age+10);
// 👉result3= [32,42]let scores1= [55,60,70,45];
let scores2= scores1.map( score=> score<50? "B","A");
// 👉scores2= ["A","A","A","B"]객체 복사
1.나머지 함수
let student1 ={
name:"bella",
age:22
};
let clone ={
...student1
};2. for in
for(let key in student1){
clone[key]= student1[key];
}3. Object.assign
Object.assign(clone,student1);
let clone = Object.assign({},student1);❗ Object.assign은 얕은 복사로, 원본의 값을 변경하면 복사본의 값 또한 같이 변경된다.
4. cloneDeep
lodash
let clone= _.cloneDeep(student1);lodash 라이브러리의 _.cloneDeep 메소드를 이용하여 깊은 복사를 진행했다.
응용
let computer={
score: 0,
percent2: .5,
percent3: .3,
}
function onComputerShoot(){
let shootType= Math.random()>.5? 2: 3;
if(Math.random()< computer[`percent`+shootType]){
//computer의 percent2 또는 percent3을 값을 불러와서 Math.random()과의 크기를 비교했다.
computer.score+= shootType;
comSocreElem.innerHTML = computer.score;
textElem.innerHTML = `컴퓨터가 ${shootType}점슛을 성공시켰습니다.`;
}
}computer["percent"+shootType]= 앞서 지정한 객체 computer의 percent + 받아올 숫자 2또는 3을 찾아 값 .5또는 .3을 반환했다.
sumin0gig