JavaScript 복습
자바스크립트 기초 공부를 다시 하면서 한번 더 짚고 가볼만한 부분만 정리해보았다.
add() vs add
function add() {
something = someNum + someOtherNum;
}add()는 함수를 즉시 호출하는 것이고, add는 함수의 이름만 전달하는 것이다.
add는 함수를 바로 실행하고 싶지 않을 때, 예를 들어 일부 이벤트가 발생할 때 그 때 실행시키고 싶을 때가 있다.
이럴 때는 함수를 직접 호출하는 add() 대신에, add를 제공하도록 한다.
someBtn.addEventListener('click', add);그런데 아래와 같이 쓰게 되면, 이벤트 리스너를 등록하는 즉시 (스크립트를 읽었을 때) 함수를 실행하기 때문에. 잘못된 코드이다.
someBtn.addEventListener('click', add());그리고,
만약 아래와 같이 코드 어딘가에 add를 추가하는 것도 잘못되었다.(그냥 . 이 문장이 무시가 됨) 그 add 함수 이름으로 무엇을 해야하는지. (이벤트 리스너) 와 같은 곳에 추가하는 것이 일반적이다.
let someVar = 5;
add
alert("Do something ... ");숫자 & 문자열 섞기
3 + ‘3’ = ‘33’
이는 ’+’ 연산자가 문자열에도 적용하기 때문.
참고로, ‘hi’ - ‘i’ = Nan
js에서는 ’+’ 연산자를 제외한 나머지 연산자에서는 아래와 같은 결과가 나올 수 있음.
3 + ‘3’ = 9
3 - ‘3’ = 0
3 / ‘3’ = 1
단지 3 + ‘3’ = ‘33’
Object(객체) 사용 시 주의할 점
const user = {
name: "Max",
age: 30
};js의 object는 이런식으로 쓰는데,
- 함수는 ’{}’ 뒤에 ’;’ 를 붙이지 않았던 반면, 객체는 ’{}’ 뒤에 ’;’ 세미콜론을 붙인다.
- 키 - 값 쌍은 ’;‘가 아니라 ’,‘로 구분한다.
undefined, null & NaN
undefined: Dafault value of uninitialized variables
null: Never assumed by default
NaN: Not a type. (Not-a-Number) the result of invalid calculations.
userName = undefined userName = Null (recommend)
3 * ‘hi’ = NaN
3 * NaN = NaN
Typeof
userName = "Max";
typeof userName
// "string"
typeof [1, 2, 3]
// "object"
typeof null
// "object"
typeof NaN
// "number"async, defer
async
-
async는 HTML문서가 파싱되는 동안 스크립트를 비동기적으로 다운로드할 수 있게 한다. 스크립트가 다운로드 완료되면 HTML파싱을 일시 중지하고 스크립트가 즉시 실행된다.
-
다른 스크립트나 DOM이 완전히 로그되는 것에 의존하지 않는 독립적인 스크립트에 적합하다.
-
여러 스크립트에 async 속성을 사용하면 스크립트의 실행 순서를 보장할 수는 없다.
defer
-
defer도 스크립트를 비동기적으로 다운로드하게 하지만, 스크립트가 실행되는 시점은 HTML 문서가 완전히 파싱된 후까지 지연시킨다.
-
HTML파싱이 끝난 후 실행하기 때문에, DOM과 상호작용해야 하거나 다른 스크립트에 의존하는 스크립트에 적합하다.
-
defer 속성이 있는 스크립트는 문서에 나타나는 순서대로 실행된다.
논리적 연산자 “팁” & 축약어
!! 연산자
이 연산자는 “falsy”나 “truthy” 값을 진짜 boolean 값으로 변환하는 데 사용됩니다.
JavaScript에서 “falsy” 값은 false, 0, ""(빈 문자열), null, undefined, NaN 등이 있고, 나머지 값은 모두 “truthy” 값입니다.
!!"" // false
!!"1" // true
!!0 // false
!!123 // true
!!null // false
!!{} // true
!![] // trueOR 연산자
이 연산자는 기본값을 할당하는 데 자주 사용됩니다.
왼쪽 피연산자가 “falsy” 값이면 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환합니다.
주의할 점은 boolean 값을 생성하지 않고 결과 값을 반환한다는 것입니다.
const name = someInput || "Max";
const altName = "";
console.log(altName || null || 'Anna'); // altName과 null은 Falsy이므로 'Anna'가 반환됨
여기서 someInput이 “falsy” 값 (예: "", null, undefined 등)이라면, name은 “Max”로 설정됩니다. 그렇지 않으면 someInput의 값을 그대로 사용합니다.
And 연산자
AND 연산자는 두 피연산자가 모두 “truthy”일 때만 오른쪽 피연산자를 반환합니다. 왼쪽 피연산자가 “falsy”이면 그 값을 반환하고, 그렇지 않으면 오른쪽 피연산자를 반환합니다. 이는 주로 조건부 실행에 사용됩니다.
const isLoggedIn = true;
const userName = isLoggedIn && "JohnDoe";
// isLoggedIn이 true라면, userName은 "JohnDoe"가 됩니다.
const isAvailable = false;
const message = isAvailable && "Item is available";
// isAvailable이 false라면, message는 false가 됩니다.이와 같이 AND 연산자는 첫 번째 피연산자가 “truthy”일 때만 두 번째 피연산자를 반환하고, 그렇지 않으면 첫 번째 피연산자를 반환합니다. 이로써 조건에 따라 특정 값을 반환하거나 실행할 수 있습니다.
항상 명심하세요. 그 어떤 연산자 (===, > 등이나 && 혹은 ||)도 비교에 쓰이는 변수를 변경하지 않습니다. 위의 예에서 userName 과 altName에 저장된 값은 절대 변경되지 않습니다.
Quiz
아래 코드 마지막에 userName에 저장되어 있는 것은 무엇일까요?
const enteredValue = '';
const userName = enteredValue && 'Anna';정답은, ” (&& 연산자는 불값을 반환하지 않음)