JavaScript

1. Math 함수

Math.min()

주어진 숫자들 중 가장 작은 값을 반환합니다. 주어진 인자값이 없을 경우, Infinity 가 반환됩니다. 적어도 1개 이상의 인자값이 숫자형으로 변환이 불가능한 경우 이 함수는 NaN 를 반환 합니다.
[ Math.min() | MDN ]

const x = 10, y = -20;
const z = Math.min(x, y);

Math.min() 함수는 때때로 값 제한, 즉 항상 기준 보다 작거나 같은 값으로 제한하는 용도로 사용됩니다. 예를 들면

const x = f(foo);

if (x > boundary) {
  x = boundary;
}

// 위 코드는 다음과 같이 쓸 수 있습니다.
var x = Math.min(f(foo), boundary);

Math.max()

0 이상의 숫자 중 가장 큰 숫자를 반환합니다. 만약 아무 요소도 주어지지 않았다면 -Infinity로 반환합니다. 만약 한 개 이상의 요소가 숫자로 변환되지 않는다면 NaN로 반환됩니다.
[ Math.max() | MDN ]

Math.max(10, 20);   //  20
Math.max(-10, -20); // -10
Math.max(-10, 20);  //  20

다음 함수는 Function.prototype.apply() 을 사용하여 숫자 배열에서 최대 요소를 찾습니다. getMaxOfArray([1, 2, 3])는 Math.max (1, 2, 3)와 동일하지만 프로그래밍 방식으로 생성 된 모든 크기의 배열에서 getMaxOfArray()를 사용할 수 있습니다.

function getMaxOfArray(numArray) {
  return Math.max.apply(null, numArray);
}

Function.prototype.apply()

apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.
참고: 이 함수의 구문은 거의 call()구문과 유사합니다. 근본적인 차이점은 call() 은 함수에 전달될 인수 리스트를 받는데 비해, apply() 는 인수들의 단일 배열을 받는다는 점입니다.
[ Function.prototype.apply() | MDN ]

var numbers = [5, 6, 2, 3, 7];

var max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

var min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

• 한 배열에 다른 배열 요소를 넣기 위해 apply 사용하기

push 를 사용하여 여러 요소를 동시에 배열에 추가 할 수 있습니다. 그러나 배열을 인자로 넘길 경우, 해당 배열을 단일 요소로 추가하므로 결국 배열 내부에 배열을 추가하게 됩니다. concat은 어떨까요? concat은 우리가 원하는 동작을 하지만 기존 배열에 요소를 추가하지 않고 새 배열을 만들어 반환합니다. 만약 기존 배열에 요소를 추가하고 싶다면, apply를 이용합니다.

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); 
// ["a", "b", 0, 1, 2]

Math.floor()

주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.
[ Math.floor() | MDN ]

console.log(Math.floor(5.95));
// expected output: 5

console.log(Math.floor(5.05));
// expected output: 5

console.log(Math.floor(5));
// expected output: 5

console.log(Math.floor(-5.05));
// expected output: -6

Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46 
Math.floor(-45.95); // -46

Math.random()

Math.random() 함수는 [0, 1)범위(0을 포함하면서 1 보다는 작은)의 의사랜덤(pseudo-random) 수를 부동소수점(floating-point)으로 반환하고, 이를 원하는 범위로 스케일(scale)할 수 있습니다.
주의사항 : Math.random()은 암호적으로 안전한 난수를 제공하지 않습니다. 보안과 관련된 어떤 것에도 이를 사용하지 마세요.
[ Math.random() | MDN ]

// 0 (포함) and 1 (불포함) 난수를 반환
function getRandom() {
  return Math.random();
}

getRandom()
// 0.6039233699232953
getRandom()
// 0.4947762792803574
getRandom()
// 0.1323511910660371

// min (포함) 과 max (포함) 사이의 임의 정수를 반환
// Math.round() 를 사용하면 고르지 않은 분포를 얻게된다!
function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

• Math.random() 을 활용하여 원하는 길이의 랜덤한 문자열 생성하기

const alphabets = 'abcdefghijklmnopqrstuvwxyz'

function randomString (num) {
  let result = '';
  while(result.length < num) {
    result = result + alphabets[Math.floor(Math.random() * 27)];
  }
  return result;
};

randomString(5);
// "prhjz"
randomString(5);
// "byxwe"
randomString(5);
// "ppiiu"

2. Array 다루기

• [ JavaScript 재입문하기 (JS 튜토리얼) | MDN ]

배열을 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:

for (var i = 0; i < a.length; i++) {
    // a[i] 로 뭔가를 수행
}

이 코드는 루프를 반복할 때마다 배열의 length 속성을 찾아보게되므로 약간 비효율적입니다. 개선책은:

for (var i = 0, len = a.length; i < len; i++) {
    // a[i] 로 뭔가를 수행
}

보다 더 좋은 관용적인 코드는:

for (var i = 0, item; item = a[i]; i++) {
    // item 으로 뭔가를 수행
}

여기서 우리는 두개의 변수를 설정합니다. for 루프 중간 부분의 할당문은 참인지 거짓인지 테스트 하는데, 참으로 밝혀지면, 루프를 계속 돕니다. i가 루프를 돌 때마다 하나씩 증가하기 때문에 배열의 항목들은 순차적으로 item 변수에 할당됩니다. "거짓으로 취급되는" 항목 (undefined와 같은 항목)을 발견하면 루프는 멈춥니다.
이 요령은 "거짓으로 취급되는" 값이 포함되지 않은, 예를 들어 객체의 배열이나 DOM 노드들과 같은 배열에 사용되어야만 합니다. 0을 포함하는 수로 표현된 데이터나 빈 문자열을 포함하는 문자열 데이터에 대하여 반복문을 적용할 경우에는 i, j를 사용하는 관용 코드를 대신 사용해야 합니다.

DOM 노드에 적용한 예

JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 얻을 수 있는 트리 구조를 다루는데 유용합니다.

function countChars(elm) {
    if (elm.nodeType == 3) { // TEXT_NODE
        return elm.nodeValue.length;
    }
    var count = 0;
    for (var i = 0, child; child = elm.childNodes[i]; i++) {
        count += countChars(child);
    }
    return count;
}

3. includes() 와 indexOf()를 같은 목적으로 사용하기
[ Includes() vs indexOf() in JavaScript ]

배열 안에 특정한 숫자가 존재하는지 찾기

const array = [1,2,3,4,5,6];

array.includes(4);
//true

array.indexOf(4) > -1
// true

배열 안에 undefined가 있는지 찾기

const array = [ , , , ];

array.includes(undefined);
// true

array.indexOf(undefined) > -1;
// false, 이런 형식으로 indexOf는 undefined를 감지할 수 없다.

4. 호이스팅, 클로저, 스코프, IIFE - 개념을 이해하기 좋은 글

• [ Learn JavaScript Closures in 6 Minutes | Yazeed Bzadough ]

• [ 자바스크립트의 변수범위와 호이스팅 | chanlee ]

• [ 번역: 자바스크립트 스코프와 클로저(JavaScript Scope and Closures) | Hyeokwoo Alex Kwon ]

• [ 자바스크립트의 스코프와 클로저 | 이민규 ]

---

2019.08.17 티스토리 블로그에 작성한 글을 velog로 옮김