[JS] 자바스크립트 좋은 습관 (object, function, array)

 

자바스크립트를 다루는데에 있어서 좋은 습관들이 있어 공유드립니다.

코드를 쉽게 읽고 유지 관리하려면 몇 가지 모범 사례를 따라야합니다.

 

Object와 Class를 다룰 때 Getter와 Setter를 쌍으로 이루자

우리는 Getter와 Setter를 반드시 쌍으로 다뤄야 합니다.

Getter가 없으면 속성을 읽을 수 없으므로 사용되지 않습니다.

 

예를 들어 아래처럼 사용하기 보다는

const obj = {
  set a(value) {
    this.val = value;
  }
};

아래처럼 사용하는 것이 이상적입니다.

const obj = {
  set a(value) {
    this.val = value;
  },
  get a() {
    return this.val;
  }
};

배열을 여닫기 전에 줄바꿈 하기

const arr = [
  1, 2, 3, 4, 5
];

 

매우 긴 Array에서는  위처럼 하는 것이 가독성이 좋겠죠.

괄호 안의 공백

const arr = ['foo', 'bar'];

배열 메서드의 콜백에서 반환

const indexes = arr.reduce((foo, item, index) => {
  foo[item] = index;
}, {});


또는 

const foo = Array.from(elements, (element) => {
  if (element.tagName === "DIV") {
    return true;
  }
});

위처럼 작성하기 보다는 리턴을 명시적으로 해주는 것이 이상적입니다.

const sum = arr.reduce((a, b) => a + b, 0);

또는

const foo = Array.from(elements, (element) => {
  if (element.tagName === "DIV") {
    return true;
  }
  return false;
});

forEach와 같은 일부 메서드는 반환 값으로 많은 작업을 수행할 수 없기 때문에 반환할 필요가 없습니다.

하지만 일찍 끊어낼 수는 있겠지요.

arr.forEach((item) => {
  if (item < 0) {
    return;
  }
  doSomething(item);
});

배열 요소 사이의 줄바꿈

const arr = [
  function foo() {
    doWork();
  },
  function bar() {
    doWork();
  }
];

function이 두개의 배열로 들어가 있으므로 줄바꿈을 확실하게 해줍니다.

화살표 기능의 본문 중괄호처리

const foo = () => {
  return 0;
};

중괄호 없이 작성하면 보기 힘듭니다. 위처럼 작성하면 됩니다.

그리고 여백도 잊지마세요

(a) => {}

var를 사용할 경우 블록스코프 내로 처리

const doIf = () => {
  var build;
  if (true) {
    build = true;
  }
  console.log(build);
}

또는

const doIfElse = () => {
  var build;
  if (true) {
    build = true;
  } else {
    build = false;
  }
}

블록을 연 후 및 블록을 닫기 전 블록 내부 공간

function foo() { return false; }

 

가독성을 위한 모든 경우를 고려하세요~ 

 

이상입니다.

 

 

출처 :levelup.gitconnected.com/javascript-best-practices-objects-functions-and-arrays-44ea9cc67096