// bad
function foo() {
// ...
}
// bad
const foo = function () {
//...
}
// good
// 변수 참조 호출과 구분되는 이름!
const short function longUniqueMoreDescriptiveLexicalFoo(){
// ...
}
2) 즉시 호출 함수 표현식을 괄호로 감싸세요.
wh? 즉시 호출 함수 표현식은 하나의 단위며, 괄호로 이것을 감싸면 괄호 안의 표현을 명확하게 해주기 때문입니다. 모듈을 어디에서나 사용한다면 굳이 즉시 호출 표현식은 전혀 필요하지 않다는 점을 주의하세요.
// 즉시 호출 함수 표현식 (IIFE)
(function () {
console.log('Welcome to the Internet. Please follow me.');
}());
3) Never 함수 이외의 불록(if, while등)에서 함수를 선언하지 마세요.
why? 브라우저에서는 작동 될 것이지만 모두 다르게 해석합니다. 그것은 최악입니다.
4) ECMA-262 명세는블록을 구문의 일종으로 정의하고 있지만 함수선언은 구문이 아닙니다.
// bad
if (currentUser) {
function test() {
console.log('Nope.');
}
}
// good
let test;
if (currentUser) {
test = () => {
console.log('Yup.');
};
}
5) Never절대로 매개변수 이름을 arguments라고 짓지 마세요.
why? 이것은 함수 스코프에 전해지는 arguments 객체의 참조를 덮어써 버립니다.
// bad
function foo(name, options, arguments) {
// ...
}
// good
function foo(name, options, args) {
// ...
}
6) 함수의 인자를 변조하기 보다는 기본 매개변수 문법을 사용하세요.
// really bad
function handleThings(opts) {
// 안돼요! 우리는 함수 인자를 변경하면 안됩니다.
// 더 안 좋은 경우: 만약 opts가 falsy한 값일 경우 당신이 원하는 객체로
// 설정되겠지만, 이는 미묘한 버그를 일으킬 수 있습니다.
opts = opts || {};
// ...
}
// still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
// ...
}
7) 사이드 이펙트가 있을만한 기본 매개변수는 사용은 피하세요
var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3
8) 기본 매개변수는 항상 뒤쪽에 두세요.
// bad
function handleThings(opts = {}, name) {
// ...
}
// good
function handleThings(name, opts = {}) {
// ...
}
9 ) Never절대로 새로운 함수를 만들기 위해 함수 생성자를 사용하지 마세요.
why? 이러한 방법으로 문자열을 평가해 함수를 만드는 것은 eval()과 같은 수준의 최약점을 만듭니다.
// bad
var add = new Function('a', 'b', 'return a + b');
// still bad
var subtract = Function('a', 'b', 'return a - b');
10) 일관성을 위해 함수 시그니처에 공백을 넣어주세요
why? 일관성을 얻으면서 이름을 추가하거나 지울 때 공백을 건드릴 필요가 없게 됩니다.
// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};
11) Never 절대로 매개변수를 바꾸지 마세요
why? 매개변수로 전달된 객체를 조작하면 원래 호출처에서 원치 않는 사이드 이펙트를 일으킬 수 있습니다.
// bad
function f1(obj) {
obj.key = 1;
}
// good
function f2(obj) {
const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}
12) Never 절대로 매개변수를 재할당하지 마세요
why? 매개변수를 재할당하는 것은 예측할 수 없는 결과를 불러 일으킵니다. 특히 arguments 객체에 접근할 때 말이죠. 또한 v8에서 최적화 문제를 일으킬 수도 있씁니다.
// bad
function f1(a) {
a = 1;
// ...
}
function f2(a) {
if (!a) { a = 1; }
// ...
}
// good
function f3(a) {
const b = a || 1;
// ...
}
function f4(a = 1) {
// ...
}
13) 가변 인자 함수를 호출할 때는 전개 구문 ...을 사용하세요.
why? 이게 더 깔끔합니다. 컨텍스트를 제공할 필요도 없고, apply로 new를 쉽게 구성할 수도 없습니다.
// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);
// good
const x = [1, 2, 3, 4, 5];
console.log(...x);
// bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));
// good
new Date(...[2016, 8, 5]);
14) 여러 줄의 시그니처 또는 호출을 취하는 함수는 이 가이드에 있는 다른 것들처럼 들여쓰기가 되어야 합니다.
한줄에 각 항목을 하나씩 두고, 마지막 항목에 쉼표를 넣습니다.
// bad
function foo(bar,
baz,
quux) {
// ...
}
// good
function foo(
bar,
baz,
quux,
) {
// ...
}
// bad
console.log(foo,
bar,
baz);
// good
console.log(
foo,
bar,
baz,
);
2. 화살표 함수
1) (인라인 콜백을 전달할 때 같이) 익명함수를 사용할 때는 화살표 함수 표현을 사용하세요
why? 화살표 함수는 그 컨텍스트의 this에서 실행하는 버전의 함수를 만들기 때문입니다. 이것은 보통 원하는대로 작동하고,보다 간결합니다.
why not? if you have a fairly complicated function, you might move that logic out into its own named function expression.
// bad
[1, 2, 3].map(function (x) {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
2) 하나의 식으로 구성된 함수가 사이드 이펙트 없는 표현식을 반환하는 경우, 중괄호를 생략하고 암시적 반환을 사용할 수 있습니다. 그 외에는 중괄호를 그대로 두고, return 문도 사용하세요.
wyh? Syntactic sugar(이해하기 쉽게 디자인된 프로그래밍 언어 내의 문법)니까요. 여러 함수가 연결된 경우 읽기 쉬워집니다.
// bad
[1, 2, 3].map(number => {
const nextNumber = number + 1;
`A string containing the ${nextNumber}.`;
});
// good
[1, 2, 3].map(number => `A string containing the ${number}.`);
// good
[1, 2, 3].map((number) => {
const nextNumber = number + 1;
return `A string containing the ${nextNumber}.`;
});
// good
[1, 2, 3].map((number, index) => ({
[index]: number,
}));
// 암시적 반환없이 사이드 이펙트를 수반합니다
function foo(callback) {
const val = callback();
if (val === true) {
// callback이 참을 반환하면 뭔가를 수행합니다
}
}
let bool = false;
// bad
foo(() => bool = true);
// good
foo(() => {
bool = true;
});
// bad
[1, 2, 3].map(x => x * x);
// good
[1, 2, 3].map((x) => x * x);
// bad
[1, 2, 3].map(number => (
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
// good
[1, 2, 3].map((number) => (
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
));
// bad
[1, 2, 3].map(x => {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
5) 암시적 반환을 하는 화살표 함수 몸체의 위치를 적절히 설명하세요
// bad
(foo) =>
bar;
(foo) =>
(bar);
// good
(foo) => bar;
(foo) => (bar);
(foo) => (
bar
)
