객체 다루기

 클린코드 자바스크립트 객체 파트를 공부하며 기록한 내용들입니다..

---

 

Object Lookup Table

 객체나 값을 빠르게 검색하고 접근가능.
 보통 if문 혹은 switch문의 대용으로 쓰임

 

• 예시 코드

// after
function getUserType(type) {
	if (type === 'ADMIN') {
		return '관리자';
	} else if (type === 'INSTRUCTOR') {
		return '강사';
	} else if (type === 'STUDENT') {
		return '수강생';
	} else {
		return '해당 없음';
	}
}

// before
function getUserType(type) {
	const USER_TYPE = {
		ADMIN: '관리자',
		INSTRUCTOR: '강사',
		STUDENT: '수강생',
	};

	return USER_TYPE[type] || '해당 없음';
}

 

• ` USER_TYPE`에 0이 값으로 들어오는 경우를 대비해서 다음과 같이 작성해줘도 좋다

function getUserType(type) {
	const USER_TYPE = {
		ADMIN: '관리자',
		INSTRUCTOR: '강사',
		STUDENT: '수강생',
        0:'백수', // 추가
	};

	return USER_TYPE[type] ?? '해당 없음'; // USER_TYPE[0]이 들어오면 '백수'를 리턴함
}

 

Object.freeze

안에있는 객체들을 '동결' 시킨다.
값을 수정해도 원본이 그대로 유지가 된다.

 

• 코드 예제

const STATUS = Object.freeze({
	PENDING: 'PENDING',
	SUCCESS: 'SUCCESS',
	FAIL: 'FAIL',
});


STATUS.PENDING = 'P2'

console.log(STATUS); // {PENDING:'PENDING',SUCCESS:'SUCCESS',FAIL:'FAIL'}, 변하지않음

 

• 하지만 Object.freeze는 깊은 복사에대해서는 '동결'을 못시킨다. 

const STATUS = Object.freeze({
	PENDING: 'PENDING',
	SUCCESS: 'SUCCESS',
	FAIL: 'FAIL',
	OPTIONS: {
		GREEN: 'GREEN',
		RED: 'RED',
	},
});

Object.isFrozen(STATUS.OPTION); // false..

 

 

화살표 함수(어쨋든 객체파트임)

• 상위 렉시컬스코프를 따르기 때문에 호출하는 객체의 this를 따르지않아 this의 작동방식이 상이하다.
• arguments,call,apply,bind 등등을 사용하지 못한다.
  • arguments대용으로 ...rest를 사용하자.
• 생성자로 사용할 수 없다.

const Person = (name, city) =>{
	this.name = name;
        this.city = city;
}

const person = new Person('poco','korea'); // Person is not a constructor

 

• 클래스 내부에서 ()=> {..} 로 메서드를 구현했을 때, 생성자 함수 내부에서 초기화되는 현상 때문에 부모클래스의 메서드를 자식 클래스가 사용하지 못한다.
• 부모 클래스의 메서드를 자식 클래스가 오버라이딩 할 때, 부모 클래스의 해당 메서드가 화살표 함수로 구현되어있다면, 부모 클래스의 메서드가 호출된다.

 

Callback Function

• 함수의 '실행권'을 다른 함수에 위임한다.
• 콜백 함수는 promise로 바꾸고 async await로 바꿀수있는 장풍을 유발하는 무조건적으로 안좋은 패턴인것은 아님.

순수 함수 ( 어쨋든 객체 파트에있음)

• 동일한 인자를 받고 동일한 출력을 내뱉는걸 뜻한다.(호출 할 때마다 일관적인 값 출력)
  • 즉 호출 할 때 값을 예측할 수 있어야한다.

순수 함수 올바른 예시

const obj = { one: 1 };

// 객체, 배열은 새롭게 만들어서 반환해야한다.
function changeObj(targetObj){
	return { ...targetObj, one: 100};
}

changeObj(obj); // { one: 100 }

obj: // { one: 1 }

 

 

Magic Number

여기서 매직 넘버란 하드 코딩되어있는 값들을 변수로 다로 빼서 관리 혹은 다른 값으로 변환해줘서 관리해주는것을 말한다.
숫자를 아래처럼 바꿔줘도 콘솔찍으면 잘나온다.

// before
const PRICE ={
 MIN: 1000000,
 MAX: 100000000,
}

// after
const PRICE ={
 MIN: 1_000_000,
 MAX: 100_000_000,
}

console.log(PRICE) // {MIN:1000000,MAX:10000000}

 

Object.freeze()를 써서 상수 객체를 감싸주는 코드 기법도 있다.

 

// CAR_NAME_LEN 이런 변수명으로 인해 다른 팀원들이 이 객체는 건드리면안되는 객체구나를 이미 알고있겠지만
// 혹시 모르는 상황에 대비해 더 안전하게 'Object.freeze'를 써서 객체를 얼려줬다.
// 참고로 Object.freeze는 깊이1 까지는 객체를 안전하게 얼릴 수 있다.
const CAR_NAME_LEN = Object.freeze({
 MIN: 1,
 MAX: 5,
})

function isValidName(name){
 return carName.length >= CAR_NAME_LEN.MIN && carName.length <= CAR_NAME_LEN.MAX;
}