쑥쑥자라기🌱

function checkAnswer(value) { if (value 0 && value !== 3) { return '정답입니다!'; } return '틀렸습니다!'; } console.log(checkAnswer(4)); // 정답입니다! 파라미터 value로 전달되는 값이 10보다 작으면서 0보다는 크고, 그러면서도 3은 아닐 때 '정답입니다!' 라는 문자열을 콘솔에 출력하는 함수를 정의했는데요. 코드를 작성하다 보면 다양한 상황을 고려하기 위해서 이렇게 AND나 OR 연산자를 여러 번 사용해야 할 수도 있습니다. 그런데 한 가지 조심해야 할 부분이 있는데요. 위에 있는 코드처럼 AND 연산자나 OR 연산자 중 하나만 계속해서 사용할 때는 문제 없지만, 만약 AND 연..

자바스크립트에서 다양한 값들이 맥락에 따라 불린 값처럼 평가될 수도 있다. Truthy와 Falsy 값이 있는데 그런 특징을 논리 연산자인 AND와 OR 연산자에다 한번 활용해 보겠습니다. // AND와 OR의 연산 방식 console.log('쑥쑥' && 'JavaScript'); 이 코드를 실행하면 '쑥쑥'과 'JavaScript'라는 문자열은 모두 Truthy한 값이니까 true AND true가 돼서 콘솔에는 true가 출력 될 것 같지만 저장하고 실행해보면 'JavaScript'가 출력이 되는 걸 확인할 수 있는데요. 사실 자바스크립트에서 논리 연산자는 매번 true 혹은 false를 리턴하는게 아니라 상황에 따라서 양쪽 값들 중 어느 한 쪽을 선택하는 방식으로 동작합니다. 한쪽을 선택한다는 게..

자바스크립트에서는 데이터 타입이 상황에 따라 변할 수 있습니다. if ('쑥쑥') { console.log('I love JavaScript! :)'); } else { console.log('I hate JavaScript! :('); } if문의 조건 부분에는 보통 true나 false값이 리턴되는 조건식이 들어갔었는데요. 이 코드에서는 그냥 문자열이 들어가 있습니다. 그럼 과연 이 코드를 실행했을 때 콘솔에는 어떤 결과가 출력 될까요? 실제로 이 코드를 실행해보면 콘솔에는 'l love JavaScript! :)'라는 문자열이 출력됩니다. if문의 조건 부분에 들어간 이 'codeit'이라는 문자열이 true처럼 평가되었다는 뜻인데요. 자바스크립트에서는 if, for, while문의 조건 부분처럼 ..

typeof 연산자 지금까지 계속해서 자바스크립트의 데이터 타입에 대해서 살펴보고 있는데요. 우리가 사용하는 값이 어떤 데이터 타입을 가지고 있는지 확인하려면 typeof 연산자를 사용해야 합니다. typeof 연산자는 키워드 다음에 공백(띄어쓰기)을 두고 값을 작성해도 되고, 함수를 사용하듯 괄호로 감싸서 사용할 수도 있는데요. typeof 'Codeit'; // string typeof Symbol(); // symbol typeof {}; // object typeof []; // object typeof true; // boolean typeof(false); // boolean typeof(123); // number typeof(NaN); // number typeof(456n); // big..

자바스크립트는 다른 프로그래밍 언어에 비해서 데이터 타입이 상대적으로 유연한 특징이 있습니다. 여기서 유연하다는 말은 상황에 따라서 데이터 타입이 변할 수도 있다는 의미를 가지는데요. 파이썬이라는 프로그래밍 언어의 경우에는 일반적으로 서로 다른 데이터 타입끼리는 연산을 할 수가 없고 데이터 타입의 구분이 좀 더 엄격한 C나 Java 같은 경우에는 변수에도 따로 타입을 정해줘야 하기 때문에 한번 타입이 정해진 변수에는 해당 타입의 값만 할당할 수가 있습니다. 하지만 자바스크립트에서는 숫자 2와 문자열 '3'을 더하면 숫자 2가 문자열 '2'로 평가돼서 문자열 '23'이 되기도 하고 숫자 2와 문자열 '3'을 곱하면 문자열 '3'이 숫자 3으로 평가돼서 숫자 6이 되기도 합니다. 그리고 변수에도 따로 타입을..

자바스크립트 표준 명세서(Java Script Specification) ECMAScript는 간단하게 자바스크립트라는 프로그래밍 언어의 표준이라고 이해하시면 됩니다. 자바스크립트도 다른 프로그래밍 언어들처럼 유용한 기능들이 추가되고 아쉬운 부분들이 보완되면서 지금까지도 계속해서 발전해 나가고 있는데요. 이런 발전의 결과물들은 Ecma International이라는 국제 표준화 기구에서 관리를 하게 됩니다. 자바스크립트를 사용할 때 준수해야 하는 규칙이나 세부 사항들을 ECMA-262라는 이름의 문서로 관리를 하게 되는데요. 이 문서의 내용이 바로 ECMAScript인 겁니다. ECMAScript는 1997년 처음 등장해서 새로운 내용들이 추가될 때마다 이름 뒤에 숫자를 붙이면서 각 버전들을 명시했었습니..

1. MouseEvent.button 마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤트인지를 정확하게 알아낼 수 있습니다. 값내용 0 마우스 왼쪽 버튼 1 마우스 휠 2 마우스 오른쪽 버튼 3 X1 (일반적으로 브라우저 뒤로 가기 버튼) 4 X2 (일반적으로 브라우저 앞으로 가기 버튼) 참고로 mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트에서는 이 값이 null이나 undefined가 아니라 0이라는 점. 꼭 기억해 주세요! 2. MouseEvent.type 마우스 이벤트의 타입에는 아래와 같은 타입들이 있습니다. 이벤트 타입설명 mouse..

웹 페이지를 이용하다 보면 다양한 상황에서 스크롤바를 만나게 됩니다. css를 통해서 의도적으로 스크롤이 있는 요소를 만들지 않는 이상 일반적으로는 웹 문서의 크기가 브라우저의 창 크기보다 클 때 브라우저에 자연스럽게 나타납니다. //Scroll 이벤트 function printEvent(e) { console.log(e); } window.addEventListener('scroll', printEvent); 그래서 일반적으로 스크롤 이벤트는 브라우저를 대변하는 윈도우 객체의 이벤트 핸들러를 등록하는 경우가 많습니다. 코드를 실행해보면 웹 문서가 스크롤 될 때 이벤트 핸들러가 동작하는 모습을 확인할 수 있습니다. 그리고 이 스크롤 이벤트를 활용할 때 일반적으로는 윈도우 객체의 프로퍼티가 많이 활용되는데..