[javascript] fun of js
3 min readJul 23, 2020
mdn 의 JavaScript 재입문하기 (JS 튜토리얼) 을 보면서 재밌었던 것 정리.
- mdn 의 이 글이 좋다는 얘기를 들었었는데 읽지는 않았었다. 이번에도 시간이 나서 한번 살펴봤는데 좋은 내용이 정말 많다. 각각의 챕터를 아주 깊게 보지는 않지만, 그래서 더 좋았다. 아주 깊지 않지만 얕지 않게 정리하고, 궁금하면 바로 찾아보면 된다.(여기 mdn 이다!)
- 재밌다고 정리해 둔 내용은 사실 말그대로 원래 있던 것이다. 그간에도 몇번을 봤었을 텐데 다양한 이유로 눈에 들어오지 않았을 것이다. 해당 기능들을 몰랐을 때도 개발을 할 수는 있었지만 이렇게 조금 더 살펴볼 수 있게되어 기분이 좋다.
parseInt
- 10 을 표기해 줄 필요. 10을 표기하지 않았을 경우 “0x”로 시작하는 값은 16진수로 변환됨.
Array.length
- 마지막 index 에서 +1 한것일 뿐. 중간에 empty 값이 포함되더라도 마지막 index 에서 +1 값을 춝력함. 늘 배열의 실제 요소 수를 반환하는 것은 아니라는 것.
forEach, map
- forEach 와 map 에 매개변수로 currentValue, index 뒤에 해당 array 를 가지고 있었다. 그 뒤에는 thisArg 도 있고. 꼼꼼히 읽자.
- 해당 메서드들에서 기존 배열에 접근하기가 애매해서 for 반복문을 쓰거나 했었는데 이렇게 기존 배열에 접근할 수 있다면 활용도가 더 높을 듯.
arguments, Rest 파라미터
- 함수에서 arguments 라는 객체를 쓸 수 있는지 몰랐다.
- …args 와 같은 표현은 봤었는데 뭔지 잘 몰랐었다.
- forEach, map 에서 배열이 전달되는 것 같이 유용한 무기가 될 듯.
- 물론 이런 유용함은 때로 분명함에는 좋지 않을 경우가 있는 듯 하여 유의하면서 사용.
- arguments 는 Array 형태의 객체이다. 즉 배열이 아니다. Rest 파라미터는 같은 값을 배열에 담는다. 이 말은, Rest 파라미터를 사용할 때 Array 의 메서드들을 쓸 수 있다는 것.
- Rest 파라미터 이전에는 다양한 방법으로 arguments 를 배열로 변환해서 썼다고 한다.
함수 표현식
함수를 정의하는 방법은 다양한다.
크게 함수 선언식, 함수 표현식으로 나눌 수 있고 화살표 함수의 형태로도 사용할 수 있다.
화살표 함수를 알고나서 화살표 함수를 주로 사용하다가 요새는 다시 함수 선언식으로 사용하고 있었다.
이번에 뭘 쓰는게 좋을까 생각하며 간략히 정리해봤다. (자세한 설명은 mdn 으로!)
함수 선언식
- this, argumenst 등의 요소와 바인딩 (o)
- 호이스팅 (o)
함수 표현식
- this, arguments 등의 요소와 바인딩 (o)
- 호이스팅 (x)
화살표 함수
- this, arguments 등의 요소와 바인딩 (o)
- 호이스팅 (x)
더글러스 크락포드의 함수 표현식 권고
- 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다고 지적한다.
- 함수 선언문으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하므로 애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의해야 할 필요가 있다.
간략히 썼지만 같은 기능을 세가지 방식으로 다양한 실험을 해봤고, 함수 표현식을 사용해보려고 한다.
사실 이걸 딱 정해야한다 이런것은 물론 아니다. 때에 따라 선언식을 쓸 수도, 표현식을 쓸 수도, 화살표 함수를 쓸 수 있다. 각각이 다른 만큼 각각의 유용함이 있기 때문이다. 이 중에서 함수 표현식을 잘 사용하지 않았었는데 보다보니 안쓸 이유가 딱히 없고, 내가 코드를 짜고 구조를 잡는 방향과도 잘 어우러질 수 있을 것 같다는 생각을 했다.