2021-12-30

Web/App / Javascript

이채현

Variables

Let and Const

var를 절대 사용하지 않고 let & const 사용하기

var를 쓰면 안되는 이유
- ```
var hoisting
```
  때문에…
  - var는 라이프사이클에서… 선언과 초기화를 동시에 한다.
  - global scope에 변수/함수를 선언할 경우 아무리 아래에 선언해도 제일 위로 올라간다. → 어디서 선언했든 상관없이, 항상 제일 위로 선언을 끌어올려준다.
  - block scope를 철저히 무시한다.
⇒ 이러한 유연성으로 작은 어플리케이션을 금방 만들 수 있지만, 프로젝트의 규모가 커지면서 나중에서는 선언하지도 않은 값이 멋대로 출력되거나, 개발자들간의 협업에서 여러가지 문제점이 생길 수 있다.
let은 선언과 초기화가 분리되어 그 사이에 TDZ가 생성되고, 접근할 경우 Reference Error가 발생한다.
const는 선언과 초기화가 동시에 진행되지만, 선언 이전에 TDZ가 생성되어 접근하면 Reference Error가 발생한다.

Dead Zone
temporal dead zone(TDZ)에 영향을 받는 구문은 크게..
- const 변수
- let 변수
- class 구문
- constructor() 내부의 super()
- 기본 함수 매개변수

Block Scope

let & const는 block scope {}를 가짐

외부에서 접근 불가능하다.

var는 function scope를 가짐

function 안에서 생성 된 var변수는 외부 function에서 접근 할 수 없지만, if/else, for등안에서 생성 된 var는 어디서는 접근 가능하다.

Immutabe Data Types

primitive types, frozen objects … 값이 바뀌지 않은 type

CONSTANTS는 Immutable Data Types이며, 프로그래밍할 때 왠만하면 Immutable Data Types를 사용하자.

💁🏻‍♀️ Immutable Data Types을 사용해야 하는 이유

security 해커들이 코드의 값을 바꾸는 것을 방지한다.
thread safety 어플리케이션을 실행하면 한가지의 프로세스가 할당되고, 그 프로세스 안에서 다양한 thread가 동시에 돌아가게 된다.이때 이 다양한 thread가 동시에 변수에 접근해서 값을 변경할 수 있게 되는 위험성이 생기는데, 이것을 방지한다.
reduce human mistakes 앞으로 해당 코드를 변경할 더 좋은 방안이 없다면, const 를 이용해 작성하여 본인 혹은 다른 개발자가 코드를 변경할때 발생할 수 있는 실수를 방지해준다.

2019-04-18

Web/App / Javascript

[JS] [번역] 40가지의 유용한 JavaScript팁, 트릭과 모범사례

이 글에서는 브라우저 / 엔진 또는 SSJS (Server Side JavaScript) 인터프리터에 관계없이 모든 JavaScript 개발자가 알아야 할 JavaScript 팁, 트릭 및 모범 사례를 제공합니다.

이 글의 코드 스니펫은 V8 JavaScript 엔진 (V8 3.20.17.15)을 사용하는 최신 Chrome 버전 30에서 테스트되었습니다.

1. 변수를 처음으로 선언 할 때마다 `var`를 붙인다

선언되지 않은 변수는 자동으로 전역 변수로 정의된다. 전역변수를 피하자!

2. `==` 대신에 `===` 사용

== 및 != 연산자는 필요한 경우 자동 유형 변환을 수행한다

=== 및 !== 연산자는 변환을 수행하지 않고, 값과 유형을 비교한다. (그래서 ==보다 빠르다, == 및 != 연산자는 되도록 사용하지 않도록하자! )

[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' ===   false // is false

3. `undefined`, `null`, `0`, `false`, `NaN`, `''`(empty string) 는 논리 값에 False

4. 세미콜론을 사용하여 행 구분

세미콜론을 사용하여 라인종료하는 것이 좋다. 대부분의 경우 JavaScript 파서에 의해 삽입되기 때문에 잊어 버리면 경고하지 않는다. 세미콜론을 왜 사용해야하는지에 대한 자세한 내용은… 참조

5. 객체 생성자 (object constructor) 생성

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var Saad = new Person("Saad", "Mousliki");

6. `typeof`, `instanceof`, `constructor`를 사용할 때 주의

typeof : JavaScript 단항 연산자는 변수의 기본 유형을 나타내는 문자열을 반환하는 데 사용되며 typeof null “객체”를 반환 한다는 사실을 잊지 말고 대부분의 객체 유형 (Array, Date 등)에서도 “객체”를 반환한다.
constructor : 내부 프로토 타입 속성의 속성으로 코드에 의해 재정의 될 수 있습니다.
instanceof : 모든 프로토 타입 체인을 검사하는 또 다른 JavaScript 연산자입니다. 생성자가 발견되면 true를 반환하고 그렇지 않으면 false를 반환합니다.

var arr = ["a", "b", "c"];
typeof arr; // return "object"
arr instanceof Array; // true
arr.constructor(); //[]

7. 자신을 실행하는 Function (자체 호출) 만들기

이를 종종 자체 호출 익명 함수, 즉시 실행 함수 또는 IIFE (Immediately Invoked Function Expression)라고합니다. 이 함수는 함수를 작성할 때 자동으로 실행되며 다음과 같은 형식을 갖습니다.

(function () {
  // some private code that will be executed automatically
})();
(function (a, b) {
  var result = a + b;
  return result;
})(10, 20);

8. 배열에서 임의의 항목 가져오기

1
2
3

var items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2145, 119];

var randomItem = items[Math.floor(Math.random() * items.length)];

9. 특정 범위의 난수 가져오기

이 코드 조각은 테스트를 위해 더미 데이터를 생성하는 예를 들어 월급의 하한과 상한을 지정하고 그 범위에서 임의의 값을 얻고 싶은 경우에 유용합니다.

1	var x = Math.floor(Math.random() * (max - min + 1)) + min;

10. 0부터 최대값을 갖는 배열 생성

var numbersArray = [],
  max = 100;

for (var i = 1; numbersArray.push(i++) < max; ); // numbers = [1,2,3 ... 100]

11. 알파벳중에서 무작위 문자열 생성

function generateRandomAlphaNum(len) {
  var rdmString = "";
  for (
    ;
    rdmString.length < len;
    rdmString += Math.random().toString(36).substr(2)
  );
  return rdmString.substr(0, len);
}

12. 숫자 배열 섞기

var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
numbers = numbers.sort(function () {
  return Math.random() - 0.5;
});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

더 나은 옵션은 기본 정렬 JavaScript 함수를 사용하는 것보다 코드에 의해 임의의 정렬순서를 구현하는 것일 수 있다. 참조

13. 문자열 trim 함수

문자열에서 공백을 제외하는 trim 함수는 Java, C#, PHP 등 다양한 언어로 구현되어 있지만, JavaScript에는 존재하지 않는다. 그래서 String 개체에 추가할 수 있다.

1
2
3

String.prototype.trim = function () {
  return this.replace(/^s+|s+$/g, "");
};

14. 배열을 다른 배열에 추가

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

15. `arguments` 객체를 배열로 반환

1	var argArray = Array.prototype.slice.call(arguments);

16. 주어진 `argument`가 숫자인지 확인

1
2
3

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

17. 주어진 argument가 배열인지 확인

1
2
3

function isArray(obj) {
  return Object.prototype.toString.call(obj) === "[object Array]";
}

위 코드에서 toString() 메소드가 재정의되면, 예상한 결과를 얻지 못할 수 있다.
그래서…

1	Array.isArray(obj); // its a new Array method

18. 배열 안의 숫자의 최대 값과 최소값 얻기

1
2
3

var numbers = [5, 458, 120, -215, 228, 400, 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);

19. 배열 비우기

1 2	var myArray = [12, 222, 1000]; myArray.length = 0; // myArray will be equal to [].

20. 배열에서 item을 제거할 때 `delete` 사용하지 말것

배열의 item를 제거 할 때는 delete 대신 split을 사용하자.
delete 는 배열에서 item을 제외하는 것이 아니라, undefined으로 바꾼다.

var items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2154, 119];
items.length; // return 11
delete items[3]; // return true
items.length; // return 11
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

위 대신에 다음과 같이 사용

var items = [12, 548, "a", 2, 5478, "foo", 8852, , "Doe", 2154, 119];
items.length; // return 11
items.splice(3, 1);
items.length; // return 10
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

21. 배열의 length 속성을 사용하여 자르기

위의 배열을 비우기 예와 같이 length 속성을 사용하여 자를 수 있다.

1 2	var myArray = [12, 222, 1000, 124, 98, 10]; myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

또한 배열의 length보다 큰 값을 넣으면 배열의 길이가 변경되고, 새로운 item이 undefined 값으로 추가 된다.
배열 길이는 읽기 전용 속성이 아니다.

1 2	myArray.length = 10; // the new array length is 10 myArray[myArray.length - 1]; // undefined

22. 조건 판정에 논리적 AND / OR 사용

1
2
3

var foo = 10;
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

논리적 OR은 함수 argument에 기본 값을 설정하는데 사용할 수 있다.

1
2
3

function doSomething(arg1) {
  arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
}

23. Use the map() function method to loop through an array’s items

var squares = [1, 2, 3, 4].map(function (val) {
  return val * val;
});
// squares will be equal to [1, 4, 9, 16]

24. 소수점 이하 N자리수 반올림

1 2	var num = 2.443242342; num = num.toFixed(4); // num will be equal to 2.4432

25. 부동 소수점 문제

1
2
3

0.1 + 0.2 === 0.3; // is false
9007199254740992 + 1; // is equal to 9007199254740992
9007199254740992 + 2; // is equal to 9007199254740994

0.1 + 0.2 는 0.30000000000000004과 같다. IEEE 754 표준에 따라 JavaScript의 숫자는 모두 내부적으로 64bit 부동 소수점 형으로 다루어지는 것을 알 필요가 있다. 자세한 설명은 블로그 게시물 참조

toFixed()및 버튼 toPrecision()을 사용하면이 문제를 해결할 수 있습니다.

26. for-in 루프를 사용할 때 객체의 속성확인

이 코드 조각은 객체의 프로토타입의 속성을 열거하고 싶지 않은 경우에 편리하다.

for (var name in object) {
  if (object.hasOwnProperty(name)) {
    // do something with name
  }
}

27. 쉼표 연산자

var a =  0 ;
 var b = (a + , 99 );
 console . log (a);   // a will be equal to 1
console . log (b);   // b is equal to 99

28. 요소의 쿼리와 계산을 필요로 하는 Cache 변수

jQuery 셀렉터의 경우는 DOM 요소를 캐시 할 수 있다.

var navright = document.querySelector("#right");
var navleft = document.querySelector("#left");
var navup = document.querySelector("#up");
var navdown = document.querySelector("#down");

29. `isFinite()` 를 지나기 전에 인수 확인하기

isFinite(0 / 0); // false
isFinite("foo"); // false
isFinite("10"); // true
isFinite(10); // true
isFinite(undefined); // false
isFinite(); // false
isFinite(null); // true  !!!

30. 배열에서 음수 인덱스 사용하지 않기

1
2
3

var numbersArray = [1, 2, 3, 4, 5];
var from = numbersArray.indexOf("foo"); // from is equal to -1
numbersArray.splice(from, 2); // will return [5]

splice에 전달 된 인수가 음수가 아닌지 확인해야 함

31. 직렬화와 역직렬화 (JSON 작업)

var person = { name: "Saad", age: 26, department: { ID: 15, name: "R&D" } };
var stringFromPerson = JSON.stringify(person);
/* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */
var personFromString = JSON.parse(stringFromPerson);
/* personFromString is equal to person object  */

32. `eval()`, `Function` 생성자 사용하지 말기

eval이나 Function 생성자의 사용은 JavaScript 엔진이 실행가능한 소스코드로 변환해야하기 때문에 cost가 높다.

1 2	var func1 = new Function(functionCode); var func2 = eval(functionCode);

33. `with()` 사용하지 말기 (The Good Part)

with()를 사용하면 전역 범위에 변수가 삽입된다. 따라서 다른 변수와 이름이 같으면 혼동을 일으켜 값을 덮어 쓸 수 있다.

34. 배열에 for-in 루프 사용하지 말기

var sum = 0;
for (var i in arrayNumbers) {
  sum += arrayNumbers[i];
}

위 대신에 다음과 같이 사용

var sum = 0;
for (var i = 0, len = arrayNumbers.length; i < len; i++) {
  sum += arrayNumbers[i];
}

또한, i와 len의 인스턴스화는 for 루프의 첫번 째 명령문에 있기 때문에 한번 실행된다. 이렇게 하는 것이 아래처럼 하는 것보다 빠르다

1	for (var i = 0; i < arrayNumbers.length; i++)

그 이유는 arrayNumbers의 length를 루프마다 다시 계산하기 때문이다.

35. `setTimeout()`와 `setInterval()`는 문자열이 아닌 함수를 전달

setTimeOut() 또는 setInterval()로 문자열을 전달하면 실행속도가 느린 eval과 같은 방식으로 평가된다.

1 2	setInterval("doSomethingPeriodically()", 1000); setTimeout("doSomethingAfterFiveSeconds()", 5000);

위 대신에…

1 2	setInterval(doSomethingPeriodically, 1000); setTimeout(doSomethingAfterFiveSeconds, 5000);

를 사용

36. 일련의 if / else 대신 switch / case 문 사용

2개 이상의 case가 있을 경우, switch / case를 사용하는 편이 빠르고 우아하다. 10개 이상의 case가 있는 경우는 특히 피해야한다.

37. 숫자 범위 판정에 switch / case 사용

숫자 범위의 판정은 아래와 같이 실형 가능하다.

function getCategory(age) {
  var category = "";
  switch (true) {
    case isNaN(age):
      category = "not an age";
      break;
    case age >= 50:
      category = "Old";
      break;
    case age <= 20:
      category = "Baby";
      break;
    default:
      category = "Young";
      break;
  }
  return category;
}
getCategory(5); // will return "Baby"

38. 주어진 객체를 프로토 타입 객체로 생성하기

줘진 객체를 프로토 타입 객체로 생성하는 함수는 다음과 같이 설명 할 수 있다.

function clone(object) {
  function OneShotConstructor() {}
  OneShotConstructor.prototype = object;
  return new OneShotConstructor();
}
clone(Array).prototype; // []

39. HTML 이스케이프 함수

function escapeHTML(text) {
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", """: "&quot;"};
    return text.replace(/[<>&"]/g, function(character) {
        return replacements[character];
    });
}

40. 반복문 내에서 try-catch-finally 절은 사용하기 말기

try-catch-finally 절은 현재 범위에 매번 새로운 변수를 생성한다.
이것은 catch 절에서 포착되는 예외를 할당하기 때문이다.

var object = ["foo", "bar"],
  i;
for (i = 0, len = object.length; i < len; i++) {
  try {
    // do something that throws an exception
  } catch (e) {
    // handle exception
  }
}

위 대신에 다음과 깉이 사용

var object = ["foo", "bar"],
  i;
try {
  for (i = 0, len = object.length; i < len; i++) {
    // do something that throws an exception
  }
} catch (e) {
  // handle exception
}

정리

이 밖에도 팁 및 우용한 모범사례가 많이 있습니다. 만약 다른 것을 추가하는 것을 바라고, 의견이나 지적이 있으면 댓글을주세요.

출처

40 Useful JavaScript Tips, Tricks and Best Practices

Strings

Template Literal

HTML Fragments 1

HTML Fragments 2

Cloning Styled Components

More String Improvements

Functions

Arrow Functions

this in Arrow Functions (Event listener in arrow function)

Default Values