(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)이라고..
(6) Modern JavaScript - 변수와 스코프
·
JS
변수는 이름을 통해서 어떤 값에 특별한 의미를 부여할 수 있는 하나의 상자라고 할 때다르게 표현하면 프로그래밍에서 추상화의 가장 기본적인 수단이 변수라고 할 수 있다.자바스크립트에서 이 변수를 만드는 방법은  ES2015 기준으로,이전에는 var 키워드를 사용하여 변수를 만들었지만이후에는 let, const가 등장하여 지금까지 사용하고 있다. 필자 TIL을 꾸준히 읽었거나 기초를 아는 사람이라면 이 두 가지 키워드의 용도를 잘 알 것이다.값의 재할당이 필요한 경우 - let값의 재할당이 필요하지 않은 경우 - const  앞으로 변수를 선언할 때 let과 const를 왜 사용해야 하는지 조금 더 자세히, 명확하게 알 필요가 있다.▼ 1. 변수가 유효한 시점의 차이var 키워드는 변수를 만들기도 전에 사용..
(5) Modern JavaScript - null 병합 연산자
·
JS
null 병합 연산자 - (??)ES2020에서 추가된 null 병합 연산자 (Nullish coalescing operator)는물음표 두개를 사용해서 null 혹은 undefined 값을 가려내는 연산자이다.// null 연산자 - Nullish coalescing operatorconst example1 = null ?? "I";const example2 = undefined ?? "love";const example3 = "JavaScript" ?? "SeopE";console.log(example1, example2, example3);example1과 2에서 null 병합 연산자 왼편에 각각 null과 undefined가 있다.이렇게 연산자 왼편의 값이 null이나 undefined라면 연산자..
(4) Modern JavaScript - AND , OR 연산 방식과 우선 순위
·
JS
AND와 OR의 연산 방식// AND, OR의 연산 방식console.log("SeopE" && "JavaScript"); 위와 같은 코드는 SeopE와 JavaScript라는 문자열은 모두 Truthy한 값이기 때문에true AND true 이므로 결과는 true일 것 같지만 결과는 'JavaScript' 문자열이 출력 된다.자바스크립트에서 논리 연산자는 매번 true와 false를 리턴하는게 아니라상황에 따라서 양쪽 값들 중 어느 한쪽을 선택하는 방식으로 동작한다.한쪽을 선택한다는 것이 어떤 뜻인지 감이 안올텐데일단 익숙하게 알고 있는 불린 타입의 값으로 AND 연산자를 살펴보자면..// AND, OR의 연산 방식console.log(true && true);console.log(true && fal..
(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..