JS 기본

Type (타입)

원시형	참조형
복사본 변경 → 원본 그대로	복사본 변경 → 원본 변경
string, number, bollean, null, undefined	abject, array, function

Object (객체)

• key name으로 예약어 사용 X
  (implements, let, private, public, yield, interface, package, protected, static)
• 동적 프로퍼티 → 계산된 프로퍼티로 사용 (하나의 객체 안에서 사용 가능)

const obj = {
  id: 5,
  name: 'San Francisco',
  ［getKey('enabled')]: true // 계산된 프로퍼티
};

• 단축구문 사용
  메서드

const atom = {
  value: 1,
  addValue(value) {
    return atom.value + value;
  },

프로퍼티

const obj = {
  lukeSkywalker,
};

Array (배열)

• 배열 항목 추가는 push() 사용
• 복수 값 반환 => Object 이용

function processInput(input) {
  return { left, right, top, bottom };
}
// 호출 시 필요한 데이터만 사용 가능
const { left, right } = processInput(input);

String (문자열)

• 문자열엔 ' ' 사용
• eval() 사용 금지

Function (함수)

• 식보다는 선언

function foo() {
}

• if 등의 블록 스코프에서 함수 선언 X 밖에서 선언
• default parameter 사용

function(a, b = 1) // 인자가 undefined일 경우 default 값인 1 사용

Arrow Function (화살표 함수)

• 함수의 인자(agrument)가 1개일 경우 매개변수 () 생략 가능

Array.map(x => x + 1)

Classes & Constructors (클래스, 생성자)

• Class 사용 (코드 간결함, 가독성)

class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

• 상속: extends

class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

• 메소드 반환값으로 this 반환: 메소드 체이닝 가능

class Jedi {
  jump() {
    this.jumping = true;
    return this;
  }
  setHeight(height) {
    this.height = height;
    return this;
  }
}
const luke = new Jedi();
luke.jump()
  .setHeight(20);

• toString(): side effect(의도하지 않은 결과) 주의

Module (모듈)

• 사용 시 html<script defer type="module" src="./questions.js"></script>

import { es6 } from './AirbnbStyleGuide';
export default es6;

Iterator(이터레이터) (Generator 사용X)

• for of 보다는 고차함수 이용

Property (프로퍼티)

• 변수로 프로퍼티에 엑세스 하는 경우 [ ] 사용

const luke = {
  jedi: true,
  age: 28,
};
function getProp(prop) {
  return luke[prop];
}
const isJedi = getProp('jedi');

Variable(변수)

• const, let 그룹화
• 변수는 필요한 곳에 두기

  const name = getName();
  this.setFirstName(name);

Hoisting (호이스팅)

• 함수 선언도 함수명, 함수본체가 끌어올려짐

function example() {
  superPower(); // => Flying
  function superPower() {
    console.log('Flying');
  }
}

Comments (코멘트)

• // FIXME: 문제 내용
• // TODO: 문제의 해결책

Type Casting, Coercion (타입 캐스팅, 코어션)

// 문자열
const totalScore = String(this.reviewScore);
// 숫자
const val = parseInt(inputValue, 10);
const val = parseInt(inputValue, 10);
// 불리언
const hasAge = Boolean(age);
const hasAge = !!age;

• Bitshift 사용 시 이유 코멘트

Naming Conventions (명명규칙)

• 객체, 함수, 인스턴스: camelCase
• 클래스, 생성자: PascalCase
• private 프로퍼티명: this._firstName = 'Panda';
• Default export가 함수: camelCase

Accessors (액세서)

Event (이벤트)

• 이벤트로 payload(전송되는 데이터) 넘길 경우: raw값X hash값(Object) 넘기기

$(this).trigger('listingUpdated', { listingId: listing.id });
...
$(this).on('listingUpdated', function(e, data) {
  // do something with data.listingId
});