Shorthand Property(단축 속성명) & Concise Method에 대한 필기

<aside> 💡 Shorthand Property

객체를 정의할 때 객체의 key값과 value값이 같으면, key와 value값을 각각 표기하지 않고 한번만 표기하는 방법을 뜻한다.

let a = "foo",
let b = 42,
let c = {};

// Shorthand Property 사용 전
let o = {
  a: a,
  b: b,
  c: c
};

// Shorthand Property 사용 후
let o = { a, b, c };

</aside>

<aside> 💡 Concise Method

객체 내에서 좀 더 간결하게 메소드(객체 내의 함수)를 사용할 수 있는 축약형 표현.

// Concise Method 사용 전
let obj1 ={
  name: 'Jinsoo Lee',
  getName: function () { return this.name }
}

// Concise Method 사용 후
const obj2 ={
  name: 'Jinsoo Lee',
  getName () { return this.name }
}
// airbnb code style guide 에서도 축약형을 지향함.

console.log(obj1.getName());
console.log(obj2.getName());
// 출력 결과 동일

</aside>

참고 https://binary01.me/posts/JS_ES6_6

Computed property name

const functionName1 = 'function1';
const functionName2 = 'function2';
const functionName3 = 'function3';

const obj = {
  [functionName1]() {
    return 'func';
  },
  [functionName2]() {
    return 'func';
  },
  [functionName3]() {
    return 'func';
  },
};

for (let i = 1; i <= 3; i++) {
  console.log(obj[`function${i}`]);
}
// [Function: function1]
// [Function: function2]
// [Function: function3]

SNAKE_TYPE

Javsscript에서 상수 이름을 지을때는 Snake Case를 사용합니다. (수정을 하지 말라는 암묵적인 뜻)

<aside> 💡 그런김에 살펴보는 좋은 Naming 방법

Variable names : 변수가 존재하는 목적 토대로 한 단어로 표현

Boolean names : 이름 앞에 is나 are을 붙이도록 함

Function names : 이름이 동사로 시작하도록 하는게 좋은 작명법

Capital letters in varibale names : 생성자 함수 혹은 변수가 포함된 Class명은 첫글자를 대문자로 함. 상수는 전부 대문자.

</aside>

참고 https://foamless.tistory.com/532

Lookup Table (JS 공식 표준 문법 단어가 아님)

key와 value쌍으로 이루어진 JSON형태의 table 정도로 알면 됨.

if 문이 늘어질 경우 switch case문으로 수정하는 편이 낫지만 그럼에도 코드가 늘어지는건 어쩔 수 없음. 이를 위에서 배운 computed property를 통해 개선하는 방법.

// 기존
function getUserKey1(type) {
  switch (type) {
    case 'ADMIN':
      return '관리자';
    case 'INSTRUCTOR':
      return '강사';
    case 'STUDENT':
      return '학생';
    default:
      return '해당 없음';
  }
}

// Object Lookup Table (가장 이상적인 형태)
function getUserKey2(type) {
	// 사실 이 상수 타입도 다른 파일에서 관리하는게 더 좋다고 함.
  const USER_TYPE = {
    ADMIN: '관리자',
    INSTRUCTOR: '강사',
    STUDENT: '학생',
  };
  return USER_TYPE[type] ?? '해당없음';
}

console.log(getUserKey1('ADMIN'));
console.log(getUserKey2('ADMIN'));
// 모두 '관리자' 출력

함수 인자 전달 매개변수로써의 객체의 역할

// 문제가 되는 코드
function Person(name, age, location) {
  this.name = name;
  this.age = age;
  this.location = location;
}

const sangmin = new Person('sangmin', 26, 'korea');