(13) Modern JavaScript - 화살표 함수 (Arrow Function)
·
JS
Arrow Function은 ES2015에서 새롭게 등장한 문법이며 기존의 함수 선언 방식을보다 간결하게 만들어주는 문법이다. 화살표 함수 (Arrow Function)화살표 함수는 이름이 없는 익명 함수이기 때문에 일반적으로 어떤 이름을 가진 변수에 할당하거나 혹은 다른 함수의 아규먼트를 선언할 때 주로 활용된다. 화살표 함수를 활용한 예시는 다음과 같다.function 키워드를 지워주고 소괄호 오른편에서  등호와 부등호를 사용한다. (=>)화살표 함수를 적용한 코드를 실행하면 아래와 같이 정상적으로 출력된다.또한 화살표 함수는 기존의 function 키워드를 사용하던 방식을좀 더 간결하게 표현하고자 등장했기 때문에 상황에 따라서 이보다 더 짧게 표현될 수 있다. 위 코드에서 화살표 함수를 활용해get..
(9) Modern JavaScript - 값으로서 함수
·
JS
자바스크립트는 함수를 특별한 종류의 값으로 취급한다.예를 들자면 아래와 같이 함수 표현식이 가능했던 것처럼 말이다.const printJS = function () { console.log('JavaScript');}; 위 코드를 typeof 연산자로 함수의 타입을 출력 해보면 function이 출력되겠지만함수의 구체적인 데이터 타입은 객체이다. console.dir 메소드를 사용해서 다양한 타입의 값들을 콘솔에 출력해보면아래와 같은 결과 값이 나온다.console.dir(0); // 0console.dir("SeopE"); // SeopEconsole.dir(true); // trueconsole.dir(null); // nullconsole.dir(undefined); // undefinedcons..
(8) Modern JavaScript - 즉시 실행 함수 (IIFE)
·
JS
일반적으로는 아래와 같이 함수를 먼저 선언한 다음 선언된 함수 이름 뒤에 소괄호를 붙여서 붙여서 함수를 실행하는데때로 함수가 선언된 순간에 바로 실행을 할 수도 있다.function sayHi() { console.log('Hi!');} sayHi();즉시 실행 함수 - IIFE아래와 같이 함수 선언 부분을 소괄호로 감싼 다음바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식이며이렇게 함수가 선언된 순간 바로 실행된다.// 즉시 실행 함수(function () { console.log("Hi!");})(); 이렇게 함수 선언과 동시에 즉시 실행되는 함수를 가리켜즉시 실행 함수 (Immediately Invoked Function Expression) 라고 한다.또한 아래와 같이 즉시 실행 ..
(7) Modern JavaScript - 함수 만들기
·
JS
함수 선언식 (Function Declaration)아래와 같이 작성하여 함수를 만들 수 있다.// 함수를 만드는 방법function 함수이름() { 필요한 동작;} 함수를 호출할 때 어떤 값을 전달해서 함수가 동작할 때 그 값을 사용하게 하고 싶다면 소괄호 안에 파라미터를 작성한다.// 함수를 만드는 방법function 함수이름(파라미터) { 필요한 동작;} 함수가 호출된 자리에 되돌려줄 값즉 리턴 값이 필요하다면 동작 부분 안에 return 키워드를 통해 리턴 값을 작성한다.// 함수를 만드는 방법function 함수이름(파라미터) { 필요한 동작; return 리턴값;} 위와 같이 function 키워드로 시작해서 함수를 만드는 방식을 함수 선언 (Function Declaration)이라고..
(3) Modern JavaScript - Boolean Type Conversion
·
JS
'자바스크립트에서는 데이터 타입이 상황에 따라 변할 수 있다.' 라고 했을 떄if ("Hi") { console.log("Hello!!");} else { console.log("Bye");}if문의 조건 부분에는 보통 ture나 false값이 리턴되는 조건식이 들어갔다뭐 예를 들면 (Hi === Hello) , (Year > 2024)등..하지만 위 코드에는 그냥 'Hi'라는 문자열이 들어가 있다.위 코드를 실행하였을때 결과는 다음과 같다.'Hello!!'라는 문자열이 출력 되었는데결국 if문의 조건 부분에 들어간 문자열이 true처럼 평가 되었다는 것이다.자바스크립트에서는 if, form while문의 조건 부분 처럼 불린 타입의 값이 필요한 맥락에서는불린이 아닌 다른 타입의 값들도 불린 타입으로..
(2) Modern JavaScript - Typeof 연산자 (복습)
·
JS
우리가 사용하는 값이 어떤 데이터 타입을 가지고 있는지 확인하기 위해 typeof 연산자를 사용했다.참고로 typeof 연산자의 결과가 모든 타입과 1:1로 매칭되지 않는다.typeof 'SeopE'; // stringtypeof Symbol(); // symboltypeof {}; // objecttypeof []; // objecttypeof true; // booleantypeof(false); // booleantypeof(123); // numbertypeof(NaN); // numbertypeof(456n); // biginttypeof(undefined); // undefined 일단 typeof null을 실행하면 문자열 null이 리턴되는게아니라 문자열 object가 리턴되는데이것은 자바..
(1) Modern JavaScript - 데이터 타입의 특징과 종류
·
JS
모던 자바스크립트 (Modern JavaScript)더보기현 시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트자바스크립트는 다른 프로그래밍 언어에 비해서 데이터 타입이 상대적으로 유연한 특징이 있다.여기서 유연하다는 말은 상황에 따라서 데이터 타입이 변할 수도 있다는 의미를 가지는데,파이썬 같은 경우에는 일반적으로 서로 다른 데이터 타입끼리는 연산을 할 수가 없으며 (ex: 2+"3" → 숫자 + 문자열)데이터 타입의 구분이 엄격한 C나 Java 같은 경우에는 변수에도 따로 타입을 정해줘야 하기 때문에한번 타입이 정해진 변수에는 해당 타입의 값만 할당할 수 있다. 하지만 자바스크립트에서 숫자2와 문자열"3"을 더하면 숫자2가 문자열"2"로 되어 문자열"23"이 되고숫자2와 문..
(22) Interactive JavaScript (Event) - 스크롤 이벤트
·
JS
▼ HTML, CSS JavaScript더보기 Logo menu-1 menu-2 menu-3 menu-4 What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen boo..
(21) Interactive JavaScript (Event) - input 태그
·
JS
▼ HTML, JavaScript 문서더보기 sign up Stay Signed in   sign up Stay Signed in " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스HTMl 태그들 중에서 input 태그는 타양한 타입들을 가지고 있다.위 로그인창을 보면 일반적으로 글을 입력하는 텍스트 타입과입력값을 자동으로 가려주는 패스워드 타입,단순한 클릭이 가능한 버튼 타입,클릭을 통해서 선택과 해지가 가능한 체크박스 타입등을 가지고 있다. 이 밖에도 다양한 타입들이 있지만 평소에 많이 접하는 타입은 이 정도라고 볼 수 있는데이러한 input 태그를 다룰 때 활용할 수 있는 이벤트..
(20) Interactive JavaScript (Event) - 키보드 이벤트
·
JS
▼ HTML, CSS, JavaScript 문서더보기 keydown keypress keyup key code Esc F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12 ` 1 2 3 4 5 6 7 8 9 0 - = BackSpace Tab Q W E R T Y U I O P [ ] \ CapsLock A ..