📌객체란?
키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
🔎 객체
🔎 참조에 의한 객체 복사
🔎 가비지 컬렉션
🔎 메서드와 this
📝객체
위에서 설명했던것처럼 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
사용예시
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법객체는 몇가지 특징이있는데요 아래와 같습니다.
//아래는 key와 value로 구성된 데이터 구조입니다.
let cssMap = {
position: 'fixed',//key나 value값에 문자가 들어가면 '',"",`` 로 감싸줘야함
zIndex: 10000,
top: '50%',
left: '50%',
width: '60vw',
['max-width']: '800px',//key나 value값에 -이 들어가면 대괄호로 감싸주거나 따옴표로 감싸줘야함
height: '40vh',
['max-height']: '280px',
transform: ' translate(-50%, -50%)',
};✍ 객체에 접근하는 표기법
점(.) 표기법
console.log(authUser.uuid);
console.log(authUser.name);
console.log(authUser.email);
//점표기법은 변수를 설정할 수 없음대괄호([]) 표기법
console.log(authUser['uuid']);
console.log(authUser['name']);
console.log(authUser['email']);✍ 프로퍼티 제거(remove) or 삭제(delete)
제거 (remove)
//isObject는 자료형 타입을 체크하는 함수
function removeProperty(obj, key) {
if (isObject(obj)) {
obj[key] = null;
}
}삭제 (delete)
//isObject는 자료형 타입을 체크하는 함수
function deleteProperty(obj, key) {
if (!isObject(obj)) return false;
delete obj[key]; //삭제하는 프로퍼티
return true;
}두개의 차이점은 비유를 들자면 제거(remove)는 아이콘을 삭제시켜 휴지통으로 버린것이고 삭제(delete)는 휴지통비우기까지 완료한것이다.
✍ 계산된 프로퍼티 (computed property)
계산된 프로퍼티를 사용하면 프로퍼티 이름을 문자열로 정의할 때만 사용할 수 있는 제약을 극복할 수 있습니다.
let calculateProperty = 'test-1';
function createUser(name, age2, test) {
return {
name: name,
'age-1': age2,
[calculateProperty]: test, //계산된 프로퍼티
};
}
console.log(createUser('name', 30, 'hi'));또한 계산된 프로퍼티를 사용하면 프로퍼티를 단축할 수 있습니다.
let name = 'baduk';
let email = 'baduk2@email.com';
let authorization = 'Lv. 99';
let isLogin = true;
//단축 프로퍼티
const student = {
name,
email,
authorization,
isLogin,
};✍ 구조 분해 할당 (destructuring assignments)
배열이나 객체의 값을 분해하여 변수에 할당하는 방법을 제공합니다. 이를 통해 코드를 간결하게 작성하고 변수의 값을 쉽게 추출할 수 있습니다.
배열
- 순서 변경 불가능
- 변수 이름은 변경 가능
const [a1,a2,a3,a4] = [10, 100, 1000, 10000];
let a1 = arr[0]; //10
let a2 = arr[1]; //100
let a3 = arr[2]; //1000
let a4 = arr[3]; //10000
//이름을 바꿀순있지만 관용적으로 rest를 씀
const [a1, _, ...rest] = [10, 100, 1000, 10000];
//위에와 같이 똑같은 코드이지만 저 rest를 선택하면 10을 제외한 나머지 배열들을 반환해줌.객체
- 순서 상관없음
- 변수이름 변경 가능
- 기본값을 지정할 수 있다.
const salaries = {
이경남: 800,
고재형: 300,
김바덕: 250,
이경민: 50,
};
//프로퍼티들에 순서 상관없이 찾을수있음
function testFunc(salary) {
const { 김바덕, 이경민, 고재형, 이경남, 오리너구리 = 20 } = salary;
console.log('김바덕 ', 김바덕);
console.log('이경민 ', 이경민);
console.log('고재형 ', 고재형);
console.log('이경남 ', 이경남);
console.log('오리너구리 ', 오리너구리);
//오리너구리는 객체 안에 없기때문에 함수안에서 찾을수는 있지만 객체 안에서는 못찾음.
}
//객체의 별칭을 지어줄수있음
const {
이경남: 경남,
고재형: 재형,
김바덕: 바덕,
이경민: lee,
} = salaries;
📝참조에 의한 객체 복사
일반 변수는 독립된 객체가 복사되는거
객체는 복사 한 메모리 주소를 복사함 (헤드가 바뀌면 복사도 바뀜)
let message = '문자 값은 프리미티브 데이터 타입으로 값이 복사됩니다.';
let messenger = {
name: 'kakao talk',
manufacture: 'kakao',
};
let text = message; //복사
let conversationTool = messenger; //참조 복사객체 복사
// 1. Object.assign()을 사용한 복사
const copyObject = Object.assign({}, messenger);
console.log(cloneObject);
//assign : 복사 해주는 메서드
// 2. 전개 연산자(...)를 사용한 복사
const spreadObject = { ...messenger };
console.log(spreadObject);깊은 복사는 잘 안쓴다고 하고 객체의 depth가 3이상 넘어가면 나눠서 작성해주는게 좋다는 말씀이 있었습니다,,33
만약 깊은 복사를 하고 싶으면 lodash 메서드를 사용하라는 구문이 있었습니다.
🤓수업 메모장
- authentication user :인증 사용자
👉인증에 대한 - authorization :권한 부여
👉관리자에 대한
typeof는 자료형의 타입을 체크할때 조금 허술한 부분이 있어 이렇게 object의 toString이라는 메서드를 빌려와서 체크해주는게 가장 확실한 체크 방법입니다.
위에 내용을 함수로 만듬.
function isObject(data) {
return (
Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'object'
);
}🔗참고 사이트
📍chatGPT
📍Javascript info
📍멋사 수업 내용...
