[클린코드 javascript] 자리를 잘 지키자.

<자리를 잘 지키자>

값 식 문 

 

값 : 식이 평가되어 생성된 결과.

식 : 표현식이라고도 하는데, 값으로 평가 될 수 있는 문 이다. 즉 변수에다 식을 대입했을 때 값을 반환하면 '문'이 아닌, '식'

문 : 프로그램을 구성하는 기본 단위이자, 최소 실행 단위. 대략 한줄이라고 가볍게 이해하자.

 

 

'식'의 자리와 '문'의 자리를 잘 구분하자.

 

    //'값'이 들어가야하는 자리에 if'문'
    <div id={if (condition) {'msg'}}> Hello World</div>
    
    //삼항연산자는 '값'을 뱉어냄
    <div id={condition ? 'msg' : null}> Hello World</div>

 

• {} : 값과 식만 들어가야함.
• 바로 리턴되는 분기문은 논리연산자를 사용하자.

 

 

함수의 자리

const add = (a,b) => a+b;

document.querySelector('#header').addEventListener('click', add()); // ?
document.querySelector('#header').addEventListener('click', add); // ?

가끔가다보면 여기에 함수원형을 적어야 하는지, 함수 호출문을 적어야 하는지 헷갈리곤 한다.

이 때 꿀팁이 있다.

호출문을 적는다면 리턴 값을 대입해 보면 된다.

위의 경우 add()를 넣으면 return값 a+b가 되지않나? 생각 할 수 있지만, a와 b에는 아무 값도 들어있지 않기 때문에 undefined + undefined를 한 꼴이 된다. 단번에 무언가 잘못되었음을 깨닫을 수 있다.

 

결론 : 인자로 함수 호출문을 넣어야 하나 함수 원형을 넣어야 하나 할 때는 return 값을 대입해보자