[공부 필기] JavaScript 문법 공부 4일차 (2)

※ 필자는 자바스크립트 초보자입니다

※ 피드백/잘못된 사항 지적은 언제든지 환영합니다

 

---

 

왜 다시 공부를 시작했는지 등은 이전 글을 참고

2022.02.19 - [2. 개발 공부/JavaScript] - [공부 필기] JavaScript 문법 공부 1일차

[공부 필기] JavaScript 문법 공부 1일차

 

1. 이 글은 이렇게 작성될 계획..

너무 좋은 자료(https://ko.javascript.info/)에, 너무 좋은 필기들, 너무 좋은 댓글들이 이미 있기 때문에

별도로 필기를 하며 공부하지는 않고 그냥 글을 쭉쭉 읽어가면서

더 추가적으로 공부한 내용이나, 개인적으로 필기해놓고 싶은 내용, 실습해보기 위해 작성해본 소스코드 등만 본 글에 필기할 계획이다.

---

- 주석(comment)

출처 : https://ko.javascript.info/structure

코드 구조

 

 

JavaScript에서 주석은 한줄짜리인 경우 //, 두 줄 이상이라면 /* */로 처리할 수 있다.

   주석에 대한 정의는 잘 알고 있기 때문에 넘어가고

   Visual Studio Code 기준으로 주석 처리 단축키를 찾아왔다.

   한줄 주석처리는 Ctrl + / 이고, 두줄 이상 주석처리는 Shift + Alt + A 라고 한다.

 

   하지만 개인적으로 단축키가 마음에 들지 않는다.

   그래서 변경함. Ctrl + Shift + / 로.

 

 

주석을 잘 쓰는 방법은 아래의 챕터에서 배운다고 한다.

   그렇다면 당장 배워보자.

   https://ko.javascript.info/code-quality

 

 

- 코드 품질

출처 : https://ko.javascript.info/code-quality​

코드 품질

 

코딩 스타일

개발자는 간결하고 읽기 쉽게 코드를 작성해야한다고 한다. (고것이 매너..?)

https://ko.javascript.info/coding-style

개인적으로 필기해놓고 싶은 룰이 좀 있었는데 필요한 것만 필기했다.

 

1> 코드가 짧다면 중괄호 없이 한 줄에 쓰는 것도 좋다.

if (n < 0) alert('Alert');

 

2> 문장이 가로로 길어지면 좋지 않다. 가로로 길다면 아래와 같이 백틱(`)을 이용하자.

바로 이렇게.

백틱(`) 안의 문장은 줄바꿈까지 그대로 표현되는 듯 하다.

따옴표(")에서는 줄바꿈을 할 때 이스케이프 시퀀스를 사용해야 했지만 백틱(`)은 쉽게 줄바꿈을 할 수 있다고 한다.

 

추가로, 아래 글에서 백틱(`)을 많이 배웠다.

https://curryyou.tistory.com/185

[JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법

 

예전에는 따옴표 방식이라서 + 연산으로 문자열과 변수를 연결했지만 지금은 백틱과 ${} 로 가능하다고 한다.

※ 백틱(`)이 아니라 따옴표(")를 사용하면 원하는 결과가 나오지 않는다. 

또한 if문 같은 경우 가로로 문장이 길어질 때 아래와 같이 줄바꿈을 하면 된다고 한다.

...
if (
    str.valueOf() != 0 &&
    str.valueOf() != 1 &&
    str.valueOf() != 2
) {
    console.log(`Success`);
}

가로 길이는 일반적으로 80자~120자로 제한한다고 한다.

 

3> 가로 들여쓰기는 탭이나 스페이스를 사용하면 되는데, 스페이스가 괜찮을지도..?

가독성을 위해 들여쓰기를 하는데 스페이스를 이용하면 좀 더 유연하게 변경할 수 있어서 탭보다 스페이스를 사용하는 것도 괜찮은 방법이라고 한다.

 

4> 세로 들여쓰기는 논리 블록 사이에 한줄 띄워주면 좋다.

변수 선언문과 반복문, 리턴문 사이에 한줄씩 띄어쓰기를 해주면 좀 더 가독성이 좋다고 한다.

function positive(num) {
    let result = num;
// 한줄 점프
    if (num < 0) result = -num;
// 한줄 점프
    return result;
}

console.log(positive(-3));
console.log(positive(5));

 

5> 가능하면 너무 깊은 중첩문은 사용하지 않도록 한다.

중첩문의 깊이가 깊어지면 continue를 사용하는 것도 좋은 대안이라고 한다.

여기에서 말하는 중첩문은 반복문 안에 반복문이 있고, 그 반복문 안에 또 반복문이 있는 등도 그렇겠지만

반복문 안에 조건문(if문)이 있고 그 안에 또 조건문이 있는 경우도 말하는 듯 하다.

 

스스로 예시를 생각해보려고 했는데 좋은 아이디어가 없다.. 그냥 나와있는 예시를 쓰기로 했다.

예시 출처 : https://ko.javascript.info/coding-style

// 수정 전
for (let i = 0; i < 10; i++) {
	if (cond) {
    	...솰라솰라
    }
    else continue;
}

// 수정 후
for (let i = 0; i < 10; i++) {
	if (!cond) continue;
    ...
}

코드가 다 설명을 해줘서 별도로 주석을 달 내용이 없다.. 

위의 페이지에서는 예시를 하나 더 보여주는데 아래와 같은 경우도 가독성이 떨어지는 경우라고 한다.

// 수정 전
function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

이 경우에는 if문이 만족할 때 alert 실행 후 return을 해서 바로 함수를 빠져나오도록 하는게 더 좋다고 한다.

// 수정 후
function pow(x, n) {
  if (n < 0) {
    alert("'n'은 음수가 될 수 없습니다.");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

개인적으로 코딩할 때 [수정 전]과 같이 코드를 짜는 경향이 있는데

(if문과 else문이 짝을 이뤄 쓰는게 좋을거라고 생각했음)

이번 기회에 큰 깨달음을 얻은 것 같다.

 

6> 헬퍼 함수를 쓸 땐, 헬퍼 함수를 사용하는 코드를 먼저 쓰고 그 다음에 함수를 정의하는게 좋을지도..

헬퍼 함수가 무엇인지부터 이해해야할 것 같다.

일단 함수에 대해서 공부할 수 있는 자료를 찾아보자..!

 

https://2srin.tistory.com/90

코드카데미 Javascript - Function (헬퍼 함수, 함수 표현, 화살표 함수)

 

헬퍼함수는 '다른 함수 안에서 특정 기능을 하고 있는 함수'라고 한다.

예를 들어 아래와 같이 함수 안에 다른 함수가 있는 경우 B함수가 헬퍼함수라고 한다.

function B(str) {
    console.log(str);
}

function A(str) {
    return B(str);
}

...
A("helper function");

 

 

이왕 헬퍼 함수 배운 김에 나머지 내용도 더 공부해보자.

이런 경우를 익명 함수라고 한다. 이름이 없어서 익명함수라고..

이 익명함수를 쓰려면 add(1, 2)와 같이 사용한다고 한다. 이때 add라는 변수명을 [식별자]라고 한다함.

const add = function(num1, num2) {
	return num1+num2;
}

 

화살표 함수는 저번에 알고리즘 문제 풀면서 잠깐 배웠는데 말그대로 화살표 모양으로 된 함수다.

중괄호 안의 코드가 한줄이면 중괄호를 생략할 수 있고, return도 생략할 수 있지만

두 줄 이상이면 중괄호를 절대 생략할 수 없다고 한다.

// 길게 썼을 때
const add = (num1, num2) => {
	return num1+num2;
}
// 간결하게 썼을 때
const add = (num1, num2) => num1+num2;

// 파라미터가 없을 때
const functionStr = () => console.log("Null str");

// 파라미터가 1개 일 때
const functionStr = str => console.log(str);

잠시 딴길로 샜는데, 어쨌든 헬퍼 함수까지 배웠다.

헬퍼 함수를 사용할 땐 아래와 같이 [헬퍼 함수 선언]을 뒤에 하는걸 선호한다고 한다.

여러 이유가 있지만, 그 중 하나의 이유로

함수명을 통해 함수의 역할을 쉽게 유추할 수 있다면 함수 본문을 읽지도 않고 넘어가는 경우가 있기 때문에 그렇다고 한다.

 

 

초보 개발자라면 유명한 팀의 스타일 가이드를 참고로 해서 본인만의 스타일 가이드를 만들어 보는것도 좋다고 한다.

Google JavaScript Style Guide를 잠깐 앞에만 읽어봤는데...

문서가 좀 길다.

날 잡고 열심히 읽어야 될 것 같다.