객체
- 키와 값으로 구성된 속성의 집합
- 중괄호로 선언합니다.
const userObj = {
name: "chul su",
age: 20,
};
const copyUserObj = userObj;
userObj.age = 50;
console.log(userObj);
console.log(copyUserObj);-> userObj.age = 50;가 어디에 있냐에 따라 결과가 바뀜
1.2 참조 자료형
1.3 동적으로 추가 -> 객체의 속성에 접근해서 값을 할당
1.4 동적으로 삭제 -> delete 키워드를 사용해서 특정 속성을 삭제
const userObj = {
name: "영희",
age: 20,
};
const userObj2 = new Object();
userObj2.name = "철수";
userObj2.age = 30;
console.log(userObj2);1.5 리터럴 표기법(literal): 데이터를 정의하는 데 있어서 간편하게 데이터를 정의할 수 있는 방법
1.5.1 기본 자료형과 참조 자료형을 선언했던 방법 모두가 리터럴 표기법
// 함수 리터럴
const sum = () => {};
// 객체 리터럴
const userObj = {};
// 배열 리터럴
const userArr = [];
// 문자 리터럴 (표기법)
const userName = "철수";
// 불리언 리터럴
const isUser = true;
// 숫자 리터럴
const num = 10;
// null 리터럴
const inUser = null;
// symbol 리터럴 표기법
const uniqueKey = Symbol("a");1.6 객체 속성에 접근하는 방법
const userObj = {
name: "철수",
age: 20,
"my gender": "male",
};
console.log(userObj.name);
console.log(userObj["age"]);
console.log(userObj["my gender"]);
// 객체 속성을 수정하는 방법
userObj.name = "영희";
console.log(userObj.name);
// 객체 속성을 삭제
delete userObj.age;복잡한 객체
const userObj = {
name: "철수",
age: 20,
likes: ["사과", "바나나", "오렌지", { hate: ["당근", "오이", "호박"] }],
address: {
zipCode: [131, 231],
addr1: "seoul",
addr2: "101gh",
},
};
console.log(userObj.likes[1]);
console.log(userObj.address.zipCode);
console.log(userObj.likes[3].hate[0]);
console.log(userObj.address.zipCode[2]);결과:
바나나
[ 131, 0 ]
당근
undefined
const userObj = {
name: "철수",
age: 20,
getName: function (...args) {
console.log(args);
},
};
userObj.getName("영희", 20);1.6 this
- 예약이 되어져 있는 키워드
- 함수가 호출한 객체를 가리킨다. (함수 선언문)
- 그 함수가 선언된 스코프(어휘적 스코프)를 가리킴 (화살표 함수)
1.7 객체를 순회할 수 있는 방법
1.7.1 for..in, Object.keys(), Object.values(), Object.entries()
const userObj = {
name: "철수",
age: 20,
"my gender": "male",
};
// for..in
for (let key in userObj) {
console.log(key, userObj[key]);
}
// Object.keys()
const keyArr = Object.keys(userObj);
for (let value of keysArr) {
console.log(userObj[value]);
}
Object.keys(userObj).forEach((key) => {
console.log(`${key}: ${userObj[key]}`;)
});
// Object.values() 객체 자료형을 다룰 수 있음
for (let value of Object.values(userObj)) {
console.log(value);
}
console.log(Object.values(userObj));
// Object.entries()
Object.entries(userObj).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});1.8 객체 병합과 복사
- 얕은 복사(shallo copy) -> 객체, 배열
const user = {
name: "철수",
};
const copyUser = user;
user.name = "영희";
console.log(user);
console.log(copyUser);- 깊은 복사(deep copy) -> 기본 자료형
- 깊은 복사에서 얕은 복사 불가능
- 얕은 복사에서 깊은 복사 가능
const user = {
name: "철수",
age: 20,
};
const copyUser = { ...user };
user.name = "영희";
console.log(user, copyUser);연습문제 복습
연습문제 6
주어진 객체에서 중복된 값을 제거하고, 그에 해당하는 키만 반환하는 함수를 작성하세요.
function removeDuplicateValues(obj) {
const count = {}; // 값의 갯수를 세는 객체
const result = {}; // 최종 결과 객체
// 값이 몇번 등장했는지 계산
Object.values(obj).forEach((value) => {
count[value] = (count[value] || 0) + 1;
});
Object.keys(obj).forEach((key) => {
if (count[obj[key]] === 1) {
result[key] = obj[key];
}
});
return result;
}
const obj = { a: 1, b: 2, c: 1, d: 3 };
console.log(removeDuplicateValues(obj)); // { b: 2, d: 3 }
const obj2 = { x: 5, y: 5, z: 10 };
console.log(removeDuplicateValues(obj2)); // { z: 10 }
const obj3 = { p: 1, q: 1, r: 1 };
console.log(removeDuplicateValues(obj3)); // {}
const obj4 = { m: 3, n: 4, o: 3 };
console.log(removeDuplicateValues(obj4)); // { n: 4 }
코드 부분 파헤치기 - 💫 GPT야! 알려줘!
Object.values(obj).forEach((value) => {
count[value] = (count[value] || 0) + 1;
});Object.values(obj)
Object.values(obj)는 객체obj의 모든 값을 배열로 만들어 주는 메서드 (values: JavaScript의 내장 메서드 이름)- 객체에서 값들만 추출하여 새 배열로 만들어 줌
- 예를 들어,
obj = { a: 1, b: 2, c: 1 }이라면,Object.values(obj)의 결과는[1, 2, 1]이 됩니다.
.forEach((value) => { ... })
.forEach는 배열의 각 요소에 대해 함수를 실행하는 메서드- 여기서
value는Object.values(obj)로 만든 배열의 각 요소를 가리킴
첫 번째 요소가 1이라면, 첫 번째value는 1이 되고,
두 번째 요소가 2라면, 두 번째value는 2가 됨 - 따라서
(value) => { ... }부분은 각 값을 하나씩 가져와서count객체에 기록하는 역할을 함
유사하지만 다른 개념
구조 분해 할당
- 값을 변수에 나눠 담을 때 쓰이는 문법
- 배열이나 객체의 특정 요소들을 별도의 변수로 분리하여 저장하는 방법
- 변환 없이 요소에 바로 접근 가능
예시)
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1, 2, 3if) 구조분해할당으로 문제를 풀어본다면?
function removeDuplicateValues(obj) {
const count = {}; // 값의 갯수를 세는 객체
const result = {}; // 최종 결과 객체
// 값이 몇 번 등장했는지 계산
Object.entries(obj).forEach(([_, value]) => {
count[value] = (count[value] || 0) + 1; // 값만 구조 분해 할당으로 가져옴 (key는 필요 없기 때문에 생략)
});
// 구조 분해 할당을 사용하여 obj의 키와 값 접근
Object.entries(obj).forEach(([key, value]) => {
if (count[value] === 1) {
result[key] = value;
}
});
return result;
}
💫
https://velog.io/@oimne/Javascript-%EA%B5%AC%EC%A1%B0-%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9
✨