JavaScript

[JavaScript] 호이스팅 & TDZ

호이스팅 변수/함수 선언 시점 이전에 그것에 접근할 수 있는 것. 선언이 마치 스코프의 상단으로 끌어올려진 것 같은 현상이다. 코드 실행 전, 자바스크립트 엔진이 코드를 스캔하고 코드 내의 변수, 함수 선언에 대한 정보를 실행컨텍스트에 기억한다. 이 때, 선언 TYPE에 따라 기억되는 정보가 달라진다. 따라서 호이스팅 결과도 다르게 나타난다. TYPE HOISTED? 초기값 스코프 함수 선언문 ✅ Actual function 블록(strict mode) var ✅ undefined 함수 let & const ❎ TDZ(uninitialized) 블록 함수 표현식/화살표 함수 var, let, const 선언 방식에 영향을 받는다. var 선언방식의 경우 선언과 동시에 초기화되므로, undefined의 값..

[JavaScript] 비트 연산 Bit Operation

비트연산자 비트(bit)단위, 즉 2진수 단위로 논리연산을 위해 사용하는 연산자 비트 단위로 전체 비트를 오른쪽, 왼쪽 이동시킬 때에도 사용한다. 실행 과정 : 2진수 변환 → 비교(연산 실행) → 결과 반환(10진수) 비트연산자의 종류 a & b : AND 연산 대응되는 비트가 모두 1일 때 1을 반환한다. (둘 다 1이면 1, 아니라면 0을 반환) 1 & 3; // 1 = 0001(2) // 3 = 0011(2) --------------- // 0001(2) = 1 a | b : OR 연산 대응되는 비트 중 하나라도 1이면 1을 반환한다. (하나라도 1이면 1, 둘 다 0이면 0을 반환) 1 | 3; // 1 = 0001(2) // 3 = 0011(2) --------------- // 0011(2..

[모던 자바스크립트 딥다이브] switch문, while문

제어문 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 일반적인 코드는 위에서 아래로, 순차적으로 실행되는데 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 그렇기 때문에 코드의 흐름을 어렵게 만들어 가독성을 해칠 수 있다는 단점이 있다. switch문 switch문 : switch문은 주어진 표현식을 평가해 그 값과 일치하는 case문이 있다면 그에 해당하는 코드를 실행한다. 이 때 switch문의 표현식과 일치하는 case가 없다면, default로 이동해 그 코드를 실행한다. default는 옵션. if...else 문의 조건식은 불리언 값으로 평가되는데 (true or false) switch문의 표현식은 불리언 보다는 문자열 or 숫자값인 경우가 많다...

[JS] 전위 연산자, 후위 연산자

증가/감소(++/--) 연산자는 피연산자를 기준으로 위치에 따라 그 의미가 약간 달라진다. 전위 연산자 증가/감소(++/--) 연산자가 피연산자의 앞에 있으면 이를 전위 연산자 라고 한다. 이 경우 피 연산자의 값을 먼저 증가/감소 시킨 뒤 다른 연산을 수행한다. let x = 5, result; //선증가 후할당 result = ++x; //result == 6, x == 6; //선감소 후할당 result = --x; //result == 5, x == 5; 위 예시에서는 x앞의 전위 증가 연산자(++)가 x = x+1로 증가시켰고, 이 결과값을 result에 할당시켜 두 변수 모두 6의 값을 갖게 되었다. (감소도 마찬가지) 후위 연산자 전위 연산자와 반대로, 먼저 다른 연산을 수행한 후 피연산자의..

[모던 자바스크립트 딥다이브] 4.변수

변수를 선언하여 메모리에 값을 저장시키고, 변수의 이름 즉, 식별자는 메모리의 위치를 기억한다, 변수를 선언한 후 값을 할당하지 않은 경우, 메모리는 비어있는 것이 아니라 undefined 값이 할당되어 있다. Reference Error : 참조(메모리의 위치를 읽어오는 것) / 선언되지 않은 식별자를 참조했기 때문에 오류가 생기는 것. 변수 호이스팅 : 소스코디 실행 전, 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 먼저 실행한다. 변수 선언문이 코드의 어디에 있든, 상단으로 끌어 올려진 것 처럼 동작하는 것을 '변수 호이스팅' 이라고 하며, 이는 JS 고유의 특징이다. 변수 선언은 메모리를 확보하고 undefined 값을 할당하는 것. 변수 선언은 런타임 이전에 실..

[JS]2021-1115 자바스크립트 .createElement() & .appendChild - HTML 요소 추가하기

document.creatElement() document 객체의 메소드로, HTML 요소를 생성할 수 있다. const bgImage = document.createElement("img"); //img태그 생성 부모노드.appendChild() 특정 요소에 자식 요소를 추가할 수 있다. document.body.appendChild(bgImage); //body 내부에 bgImage를 추가 배열 내의 랜덤 이미지 화면에 출력하기 const images = [ "0.jpg", "1.jpg", "2.png" ]; const chosenImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElemen..

[JS]2021-1114 자바스크립트 Math - Random number 랜덤 숫자 생성 /반올림, 올림, 버림

nomadcoders VanilaJS #6.0~2 강의를 정리한 내용입니다. Math.random() 랜덤한 숫자를 만들 수 있는 함수. 0이상 1 미만의 난수(부동소수점)을 랜덤하게 만든다. See the Pen Untitled by hyejj19 (@hyejj19) on CodePen. Math.floor() 소수점 이하를 버림하는 메소드. 참고 : .ceil() 올림 / .round() 반올림. 소수점 이하를 버림으로써, 정수를 만들 수 있다. 난수의 범위를 생각해 Math.random * n을 하면, 원하는 범위의 정수 난수값을 얻을 수 있다. See the Pen random2 by hyejj19 (@hyejj19) on CodePen. 이를 배열에 적용해, 새로고침 시 배열 내의 랜덤한 내용이..

[JS]2021-1114 padStart() - 문자열 시작 채우기(문자열을 채워 원하는 길이로 만들기)/ String() - 숫자를 문자열로 바꾸기

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. padStart() "1".padStart(4,"0"); // "0001"을 출력 String에서만 사용 가능한 함수로, 특정 문자열을 원하는 길이만큼, 원하는 문자열로 채울 수 있다. 사용 방법은 padStart(원하는 길이, 채우고자 하는 문자열) 자매품으로 padEnd()도 있다. String(number) number를 string으로 변환할 수 있다. string(556); //"556" 을 출력 Date 객체의 현재시간들은 number이기 때문에 padStart() 적용을 위해서 string 으로 변환해야한다. 그리고 .padStart를 적용해 자릿수가 2 미만일 경우 앞에 "0"을 붙여 출력하도록 한다. const ..

[JS]2021-1114 Date - 자바스크립트로 현재 시간 불러오기/ setInterval(),setTimeout() - 타이머 함수

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. new Date() new Date()를 호출하면, Date 객체를 불러온다. 이 함수를 인수 없이 호출하면 현재 날짜, 시간이 저장된 Date 객체를 반환한다. function getTime() { const date = new Date(); //new Date()는 Date 객체를 불러옴, 이 함수를 인수 없이 호출하면 현재 날짜 및 시간이 저장된 date 객체가 반환된다. clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; //Date 객체의 여러 메소드를 활용해, 현재 시간 값을 얻어올 수 있음. 이를 innerText로 화면에 ..

[JS]2021-1107 localStorage - If 문으로 정보 저장 여부 확인

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. if 문으로 localStorage 정보 저장 여부 확인하기 브라우저에 정보 저장 여부로 표시되는 화면의 내용이 달라지게끔 만들고자 한다. 로그인 정보가 있다면, 로그인 화면 없이 바로 인삿말이 뜨도록, if 문을 활용해 만들 수 있다. const savedUsername = localStorage.getItem(USERNAME_KEY); //로컬 스토리지에 담긴 username을 변수로 선언한다. if(savedUsername === null) { //만약 로컬 스토리지에 담긴 username이 null값, 즉 없다면 loginForm.classList.remove(HIDDEN_CLASSNAME); //form의 hidden상..