으니의 개발로그

let num = 1; const x = num++ + 1; console.log(x, num) num = 1; const y = ++num + 1; console.log(y, num) num = 1; const z = num-- + 1; console.log(z, num) num = 1; const w = --num + 1; console.log(w, num) 퀴즈! 위의 코드를 실행했을때 x, y의 값과 z, w의 값은 같을까? 또한, 콘솔창에는 어떤 값이 출력될까? 이 글을 다 읽으면 정답을 알 수 있다! 먼저, 증감 연산자란 무엇일까? 증감 연산자는 전위 연산자 와 후위 연산자 로 나눌 수 있다. ++num 또는 --num 와 같이 증감 연산자가 앞에 붙으면 앞 전(前)을 사용해 전위 연산자라고 ..

JavaScript 코드를 읽고 있을 때는 HTML 코드가 파싱되지 않는 문제가 발생했었다. 하지만 이제 이 문제를 해결할 수 있다. 어떻게? script 태그에 async와 defer 속성이 추가함으로써!!! HTML5부터는 script태그에 defer와 async 속성이 추가되었다. 한 가지 주의할 점은 async와 defer 속성은 src 속성을 통해 외부 JavaScript 파일을 가져오는 경우에는 사용할 수 있다. 즉, 인라인 JavaScript에서는 사용할 수 없다. 그렇다면 defer와 async 속성을 추가하면 어떤 점이 바뀌는 걸까? 이 두 속성의 공통점은 HTML 파싱과 외부 JavaScript 파일의 로드가 비동기적으로 동시에 진행된다는 것이고 차이점은 JavaScript의 실행 시점..

hello() vs hello 보통 이름으로 정의된 함수를 호출할 때는 괄호를 추가한다. (함수가 필요한 모든 매개변수가 괄호 안에 들어가거나 매개변수가 필요하지 않은 경우에는 빈 괄호를 추가한다) => hello() 가끔은! 함수로 바로 실행하고 싶지 않을 때도 있다. JavaScript 미래의 어느 시점에(예를 들어 일부 이벤트가 발생할 때) 어떤 기능이 실행되기를 원할 수도 있다. 이 경우에는 함수를 직접 호출하는 대신 JavaScript에 함수 이름을 제공한다. => someButton.addEventListener('click', hello); 이 스니펫은 JavaScript에게 'someButton'이 클릭되면 hello를 실행하라고 지시하는 스니펫이다. 그럼 코드 어딘가에 hello를 추가하..

스크립트가 길어질수록 HTML 파일도 길어져서 웹사이트를 관리하기가 어려워진다. JavaScript 파일을 가져오는 방법 통상적으로 스크립트 파일의 위치엔 큰 따옴표를 사용한다. 스크립트는 셀프 클로징을 지원하지 않는다. head 태그 사이에 script 를 추가하면 JavaScript 코드를 읽기 전까지 HTML 코드가 파싱 되지 않는 문제가 발생한다. 그러면 사용자에게 화면이 보여지는 속도가 늦어지게 되고 의도치않게 불편함을 줄 수도 있다. 그렇다면 브라우저가 스크립트를 실행하기 전에 HTML 코드를 파싱하고 페이지를 보여주는 방법은 없을까? 물론 있다. body 태그 끝 부분에 추가하는 방법 💡 alert 함수의 경우 head 태그 안에 추가시 알림창에서 ‘확인’을 눌러야 페이지를 볼 수 있으나 b..

동적 타입은 무엇인가? 국어사전에서 ‘동적’이라는 말의 찾아보면 움직이는 성격의 라는 뜻이라고 나온다. 그렇다면 동적 타입은 움직이는 성격의 타입이라는 것인데… 움직이는 성격의 타입이라는 게 어떤 걸 의미하는걸까? 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 예를 들어 let a = 'eun' 이라고 문자를 변수에 할당했다고 하자. 그러면 a 라는 변수의 타입은 string 으로 지정 됐을 것이다. 하지만! 이후에 a = 3 이라고 숫자를 할당 했을 때 오류가 생기지 않고 변수의 타입이 number로 변할 것이다. 이처럼 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 우리는 동적 타이핑이라고 하며 런타임시점에 타입이 정해지게 된다. 이러한 언어를 동적 타..