논리연산자
OR연산자
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false피연산자가 모두 false인 경우를 제외하고 결과는 항상 true
피연산자가 불린형이 아니면, 불린형으로 연산 과정에서 바뀐다.
*숫자 1은 true로, 숫자 0은 false 이다.
if문에서 자주 사용
let hour = 12;
let isholiday = true;
if (hour < 10 || hour > 18 || isholiday) {
alert( '영업시간이 아닙니다.' ); // 휴일이기 때문
}첫 번째 truthy를 찾는 OR 연산자 ‘||’
자바스크립트에서만 제공하는 논리연산자 OR의 '추가’기능
OR 연산자와 피연산자가 여러 개인 경우:
alert( 1 || 0 ); // 1 (1은 truthy)
alert( null || 1 ); // 1 (1은 truthy)
alert( null || 0 || 1 ); // 1 (1은 truthy)
alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환)가장 왼쪽 피연산자부터 평가하고
불린형으로 변환하여 그 값이 true면
멈추고 해당 피연산자의 변환 전 원래 값을 반환!
모든 피연산자가 false로 평가되면 마지막 피연산자를 반환!
이런 추가 기능을 활용한
단락 평가(short circuit evaluation)
단락 평가는 두 번째 피연산자가 변수 할당과 같은
부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있다.
true || alert("not printed");
false || alert("printed"); // 이 메시지만 출력됨단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다!
AND연산자
AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환
그 외의 경우는 false를 반환
첫 번째 falsy를 찾는 AND 연산자 ‘&&’
AND 연산자와 피연산자가 여러 개인 경우
OR 연산자의 알고리즘과 유사하지만
차이점은 AND 연산자가 첫 번째 falsy를 반환하는 반면,
OR은 첫 번째 truthy를 반환한다.
(AND는 모두 true여야 하기때문에 falsy가 나오면 반환!
OR은 하나라도 true면 되기때문에 true가 나오면 반환! 으로 기억하자)
&&의 우선순위가 ||보다 높다!
AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높다.
따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작
함수
전역변수
함수 외부에 선언된 변수는 전역 변수(global variable)
전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면
모든 함수에서 접근할 수 있다.
변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다.
비교적 근래에 작성된 코드들은 대부분 전역변수를 사용하지 않거나 최소한으로만 사용한다.
다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있다!
매개변수
: 함수 선언 방식 괄호 사이에 있는 변수(선언 시 쓰이는 용어).
인수
: 함수를 호출할 때 매개변수에 전달되는 값(호출 시 쓰이는 용어).
기본값
함수를 호출할 때 매개변수에 인수를 사용하지 않으면 값이 undefined가 된다.
function showMessage(from, text = "no text given") {
alert( from + ": " + text );
}
showMessage("Yeon"); // Yeon: no text given매개변수에 값을 전달하지 않아도 값이 undefined가 뜨지 않게 하려면
함수를 선언할 때 =를 사용해 위 코드의 text = "no text given" 처럼
'기본값(default value)'을 미리 설정해주기
function showMessage(from, text = anotherFunc()) {
// anotherFunc()은 text값이 없을 때만 호출됨
// anotherFunc()의 반환 값이 text의 값이 됨
}-> 이렇게 복잡한 표현식도 기본값으로 설정할 수 있다!
- 코딩에서 가장 필수적이고 기본적이면서도 어려운 것은 작명
이름은 가능한 한 간결하고 명확해야 한다.
읽는 사람이 이름만 보고도 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.
흔히 쓰는 접두어
"show" - 무언가를 보여줌
"get…" – 값을 반환함
"calc…" – 무언가를 계산함
"create…" – 무언가를 생성함
"check…" – 무언가를 확인하고 불린값을 반환함
showMessage(..) // 메시지를 보여줌
getAge(..) // 나이를 나타내는 값을 얻고 그 값을 반환함
calcSum(..) // 합계를 계산하고 그 결과를 반환함
createForm(..) // form을 생성하고 만들어진 form을 반환함
checkPermission(..) // 승인 여부를 확인하고 true나 false를 반환함이런 함수 이름 예시들이 있다.
아직 봐온 자료들이 적어서 이름지을 때 감이 안잡히니까 기억해둘 것
그리고
**함수는 동작 하나만 수행하도록 하기
독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야 한다!
한 장소에서 두 동작을 동시에 필요로 하는 경우에는 제3의 함수를 만들어 그곳에서 두 함수를 호출하기
개발자들이 빈번히 하는 실수의 예
- getAge 함수는 나이를 얻어오는 동작만 수행해야 한다. alert 창에 나이를 출력해 주는 동작은 이 함수에 들어가지 않는 것이 좋다.
- createForm 함수는 form을 만들고 이를 반환하는 동작만 해야 한다. form을 문서에 추가하는 동작이 해당 함수에 들어가 있으면 좋지 않다.
- checkPermission 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야 한다. 승인 여부를 보여주는 메시지를 띄우는 동작이 들어가 있으면 좋지 않다.
