[자바스크립트 문법] 변수명과 함수, 조건문 활용팁

[변수명] String 문자열을 변수로 지정하는 이유

자바스크립트에서 변수명이 틀리면 에러처리가 된다. 하지만 문자열(string)에 오타가 발생하면 알려주지 않는다. 차라리 변수로 문자열을 지정해주고 변수를 사용하는 것이 안전하다. 그리고 문자열의 변수는 관습적으로 대문자로만 작성한다.

const CLASSNAME_HIDDEN = "hidden";
const KEY_USERNAME = "username";

 

[함수] function에 () 괄호 차이

function에 () 괄호가 있으면 바로 실행되는 것이고, 없으면 바로 실행하지 않는 것이다. 괄호없이 바로 함수 형태로 사용하면 함수를 호출하는 것이 아니라 참조를 할당하는 것이다.

일반적인 예시로는 addEventListener가 있다. event 처리가 될때, 함수가 실행되므로 (괄호)없이 사용할 수 있다.

function onConfirm(){...};
loginForm.addEventListener("submit", onConfirm);

 

[함수] 반복코드 줄이기

함수 내부에서 반복 코드가 2줄 이상 발생하면, 차라리 함수를 추가로 더 만들고 그 함수를 실행하자.

[함수] forEach 콜백함수 제대로 쓰기

forEach() 함수는 반복문을 통해 배열의 요소를 순회해서 처리하는데 사용한다. 배열의 각 요소에 주어진 함수를 순서대로 한번씩 실행한다.

- forEach()문을 사용할 때, 콜백함수를 실행하는 방법은 두가지 이다. 같은 기능을 하며 2번 방법이 코드가 짧아져서 추천한다.

1) function 함수명 형태로 함수 만들기

2) 콜백함수로 forEach 문으로 한줄 코딩

// 방법 1
function sayHello(item) {
    console.log("this is ", item);
}

// array 배열에 쌓인 각 원소에 대해 sayHello() 함수 실행
array.forEach(sayHello);

// 방법 2
array.forEach((item) => console.log("this is ", item));

 

[조건문] 데이터 유무에 따른 조건문

if, else 조건문은 true, false 값이 성립할 때 사용한다. 일반적으로 데이터 유무에 따라 조건을 활용하는데, 이때 !연산자를 사용하면 유용하다. if문에서는 참 같은 값(truthy) 상태에서도 실행된다. 즉, 데이터가 존재하는지에 따라서 조건문을 활용한다. 거짓 같은 값(falsy)일 경우는 undefined, null, 0, "", NaN으로 정해져 있다. 이렇게 거짓 같은 값(falsy)외의 데이터는 전부 truthy이다. 그래서 if 조건문에서 if(data !== null) 이런식으로 작성하지 않고 if(!data)만 넣어도 조건문이 성립될 수 있다.

const data = "데이터";

if (!data) {
    console.log(data);
} else {
    console.log("data is null");
}

 

Reference

• 거짓같은 값 Falsy (MDN)
• 참 같은 값, Truthy (MDN)