<21.03.25>

[자바스크립트 기본]

아는 내용은 생략하고 모르는 내용만 정리

1. switch 문

2. 함수

함수 이름 짓기
“show” - 함수는 대개 무언가를 보여줌
“get…” - 값을 반환함
“calc…” - 무언가를 계산함
“create…” - 무언가를 생성함
“check…” - 무언가를 확인하고 불린값을 반환함
get 함수에서 출력해주거나
create 함수에서 문서에 추가하거나
check 함수에서 출력해주거나
이러면 안됨 모듈별로 따로 있는 것이 좋음
함수를 잘 활용하면 가독성 좋은 코드를 만들 수 있음!

3. 함수 표현식

함수를 값처럼 전달하는 경우를 의미한다.

    let sayHi = function() {
      //...
    };

sayHi 안에 fucntion의 반환값이 들어간다.

위와 같이 사용할 경우 sayHi()를 sayHi의 위에서 사용할 수 없다.
use strict 를 사용하면 가능하다고 함.

또한 함수 선언문은 선언한 코드 블록 안에서만 유효하다.
그러나 함수 표현식으로 할당해서 사용하면 어디서든 사용 가능하다.
근데 이 역시 맨처음 변수 선언 위치가 전역 범위에 있어야 한다.

4. 화살표 함수 기본

  let func = (arg1, arg2, ...argN) => expression

인수 arg1~argN까지를 받고, expression을 반환해주는 것이다.

  let sum = (a,b) => a + b;

아래와 같이 코드 길이가 확 줄어든다.

  let double = n => n * 2;
  // let double = function(n) { return n * 2 }과 거의 동일합니다.

  alert( double(3) ); // 6

인수가 하나일땐 괄호를 비워둔다.

  let sayHi = () => alert("안녕하세요");
  sayHi();

괄호를 생략할 수는 없다.

때에 따라선 중괄호를 사용하여 표현해줄 수 있다.

  let sum = (a,b) => {
    let result = a + b;
    return  result;
  };
  alert( sum(1,2) );

이렇게 하면 어차피 함수 선언하는 것과 뭐가 다른가 싶지만 뭔가 여러 기능이 있다고 함.

[코드 품질]

1. 크롬으로 디버깅 할 때

debugger; 코드로 그 시점에 멈추게 할 수 있다.

2. 코딩 스타일

가로길이

  // 백틱(`)을 사용하면 문자열을 여러 줄로 쉽게 나눌 수 있습니다.
  let str = `
ECMA International's TC39 is a group of JavaScript developers,
implementers, academics, and more, collaborating with the community
to maintain and evolve the definition of JavaScript.
  `;

3. 주석

리팩토링 팁 :
1) 함수를 분리할 것
2) 함수를 만들어서 main문에 함수만 쓰게 할 것
주석을 많이 달아둔 코드가 좋은 코드가 아니라
딱 봤을 때 읽기 쉬운 코드가 좋은 코드이다.

좋은 주석 :
1) 아키텍처를 설명하는 주석 : 컴포넌트 간에 상호작용, 제어흐름을 적은 주석
2) 함수 용례와 매개변수 정보를 담고 있는 주석

    /**
    * x를 n번 곱한 수를 반환함
    *
    * @param {number} x 거듭제곱할 숫자
    * @param {number} n 곱할 횟수, 반드시 자연수여야 함
    * @return {number} x의 n 거듭제곱을 반환함
    */
    function pow(x, n) {
      ...
    }

3) 문제를 해결한 후 왜 이 방법으로 해결했는지 설명하는 주석: 어떻게 해결했는지를 적어두면 나중에 보고 시간낭비를 안하게 됨
4) 미묘한 기능 어디에 쓰이는지 설명하는 주석

4. 닌자 코드

딱 보기 어렵게 만드는 코드 편법에 대한 내용인데.
초보 개발자의 훈련을 위해 이걸 쓰는게 좋은거라고 한다.

5. 테스트 자동화

개발을 할 때 여러가지 유스케이스를 고려하여 다 test 하기가 어렵기 때문에 테스팅 자동화는 테스트 코드가 실제 동작에 관여하는 코드와 별개로 작성되었을 때 가능하다. 테스트 코드를 이용하면 함수를 다양한 조건에서 실행 가능하다.

BDD Behavior Driven Development

테스트, 문서, 예시를 한데 모아놓은 개념

    describe("pow", function() {

      it("주어진 숫자의 n 제곱", function() {
        assert.equal(pow(2, 3), 8);
      });
    
    });

describe : 구현하고자 하는 기능에 대한 설명
함수 이름과 그 안에 설명이 들어감
it : 유스케이스에 대한 설명과 유스케이스 테스트 함수

개발순서
1. 명세서 초안 작성
2. 초안 바탕으로 코딩
3. 코드가 작동하는지 확인 (Mocha를 사용 잘못되었으면 에러 출력)
4. 코드 초안 완성
5. 고려안했던 유스케이스 추가
6. 테스트 실패하는 것을 성공하도록 코딩 수정
테스트 실행 Mocha : 핵심 테스트 프레임워크, 테스트 관련 주요 함수제공 (describe, it) Chai : 다양한 assertion을 제공해주는 라이브러리 Sinon : 함수의 정보를 캐내는데 사용

describe(“pow”, function() {

it("2를 세 번 곱하면 8입니다.", function() {
  assert.equal(pow(2, 3), 8);
});
  
it("3을 네 번 곱하면 81입니다.", function() {
  assert.equal(pow(3, 4), 81);
});

});

위와 같이 it 안에 usecase(테스트케이스)를 만들어주어 하나씩 검증한다. for문을 사용하여 테스트케이스를 여러가지 만드는 것도 가능하다.

중첩 describe describe안에 describe를 사용하여 테스트의 그룹을 나눌 수 있다.

before/after, beforeEach/afterEach before : 테스트 시작 전 beforeEach : 각 테스트 시작 전 after : 테스트 끝 후 afterEach : 각 테스트 끝 후

describe(“test”, function() {

before(() => alert("테스트를 시작합니다 - 테스트가 시작되기 전"));
after(() => alert("테스트를 종료합니다 - 테스트가 종료된 후"));

beforeEach(() => alert("단일 테스트를 시작합니다 - 각 테스트 시작 전"));
afterEach(() => alert("단일 테스트를 종료합니다 - 각 테스트 종료 후"));

it('test 2', () => alert(2));

});

[객체] 객체를 만드는 방법 let user = new Object(); // ‘객체 생성자’ 문법 let user = {}; // ‘객체 리터럴’ 문법

리터럴과 프로퍼티 let user = { // 객체 name: “John”, // 키: “name”, 값: “John” age: 30 // 키: “age”, 값: 30 }; user 객체에 name, age 프로퍼티 두개가 존재한다.
- 만약 두개의 단어 이상의 조합으로 이름을 만들 시 따옴표로 묶어줘야한다.
- 프로퍼티의 끝은 쉼표로 끝난다.
- user.name 과 같이 .으로 점표기법으로 프로퍼티 값을 읽어오는데 “like bird” 와 같이 두개의 단어가 묶여있는 프로퍼티의 경우 점표기법으로 읽어올 수 없음 그럴 땐 대괄호 표기법을 사용하면 됨 user.[“like birds”]; ※ 따옴표의 종류는 상관 없다.
- 대괄호 표기법으로는 대괄호 안에 변수를 지정한 후 변수를 얼마든지 유연하게 변경할 수 있으나
- 점표기법에서는 유연한 사용이 안된다.

계산된 프로퍼티 let bag = { [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다. }; 대괄호로 묶여있는 프로퍼티를 계산된 프로퍼티라고 부른다.
단축 프로퍼티 function makeUser(name, age) { return { name: name, age: age, // …등등 }; } let user = makeUser(“John”, 30); alert(user.name); // John name:name 대신 name만 적어주어도 프로퍼티를 설정할 수 있음
객체 프로퍼티는 예약어 상관 없이 지정할 수 있다.
in 연산자 “key” in object key 라는 프로퍼티가 object 안에 있냐는 것이다.
for in 반복문 for (key in object) { // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다. } 모든 프로퍼티를 순회하며 하나씩 찍어줌.

let user = { name: “John”, age: 30, isAdmin: true };

for (let key in user) { // 키 alert( key ); // name, age, isAdmin // 키에 해당하는 값 alert( user[key] ); // John, 30, true } 맨처음 key 값을 출력 그다음 그에 해당하는 값을 출력

객체 정렬은 정수프로퍼티의 경우 숫자의 오름차순으로 정렬되고 그 외의 경우에는 객체에 추가한 순서대로 정렬된다.

Javascript 공부 - 2