Javascript

데이터 타입

자바스크립트의 자료형: 동적 타이핑 자바스크립트는 느슨한 타입(loosely typed) 언어, 혹은 동적(dynamic) 언어이다. 변수가 가지는 고정 타입이 없다. 하지만 타입이 없는 것은 아니다. 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 이것은 곧 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. 1. Boolean Boolean은 참/거짓 두 가지 종류의 값만 나타낼 수 있다. const isTure = true; const isFalse = false; const b = Boolean(false); // Boolean값이 false 인 것을 b에 할당 // *typeof: 변수의 타입을 확인하는 키워드 console.lo..

var의 hoisting

Hoisting 아래에 있는 선언을(만) 끌어올리는 것을 의미한다. var 키워드에서 문제되는 현상 // 함수 선언 후 호출 -- 가능 function hello1() { console.log('hello1'); } hello1(); // 함수 호출 후 선언 -- 가능 hello2(); function hello2() { console.log('hello2'); } console.log(name); // undefined name = 'Mark'; console.log(name); // Mark var name = 'Gildong'; 선언을 뒤에 하면 함수에 값을 할당해 준 상태임에도 불구하고 undefined로 출력되며 변수에 값을 할당해주자 함수값이 출력된다. 이는 hoisting이 선언만 불러오는 ..

변수와 상수

변수와 상수는 프로그래밍에서 실행된 값들을 임시보관하는 역할이다. 변수 (let) 바뀔 수 있는 값을 의미한다. 한번 값을 선언하고 나서 바꿀 수 있다. (여러번 값을 할당할 수 있다.) 주의! 한 번 선언했으면 같은 이름으로 선언할 수 없다. 단, 다른 블록 범위 내에서는 똑같은 이름으로 사용이 가능하긴 하다. let value = 1; console.log(value); // 1 value = 2; console.log(value); // 2 상수 (const) 한 번 선언하고 값이 바뀌지 않는 값을 의미한다. Constant. 값이 고정적이다. 주의! 한 번 선언했으면 같은 이름으로 선언할 수 없다. const a = 1; a = 2; // Error: "a" is read-only var 변수를 ..

개요

표현식 Expression 값을 만들어내는 간단한 코드를 표현식이라고 한다. 표현식은 값을 만들어내기 때문에 함수의 인자로 사용할 수 있다. 문장 Statement 하나 혹은 여러 개의 표현식이 모여 문장을 이룬다. 모든 표현식은 문장이 될 수 있다. 보통 문장의 끝에 세미콜론(;)을 붙인다. 한 줄에 문장이 하나인 경우에는 세미콜론을 붙이지 않아도 문법적으로 문제없다. 하지만, 관례적으로 붙인다. 한 줄에 여러 문장을 적을 경우, 세미콜론으로 문장을 구분해야 한다. 마지막 문장은 세미콜론을 붙이지 않아도 문제가 없다. 마지막 문장의 결과가 반환된다. 조건문(if), 반복문(for)도 문장이다. 이 경우에는 마지막 } 뒤에 세미콜론을 붙이지 않는다. 키워드 Keywords 자바스크립트에서 특정한 목적을 ..

랜덤으로 배열 속 내용 추출하기

const data = [ "1. 바나나", "2. 사과", "3. 배", ]; function randomValueFromArray(array) { const random = Math.floor(Math.random() * array.length); return array[random]; } let fruit = randomValueFromArray(data); console.log(fruit); // Math.floor() : 가장 큰 정수 값을 돌려준다. // Math.random() : 0~1 까지의 난수 실수 값을 돌려준다. 출처/참고 https://suinautant.tistory.com/584

Array filter 사용법

filter 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용한다. 주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다. 예제1 json과 같은 객체를 사용해 true를 판별 할 수 있다. const guys = [ { name: 'YD', money: 5000 }, { name: 'Bill', money: 4000 }, { name: 'Andy', money: 3000 }, { name: 'Roky', money: 2000 } ]; const rich = guys.filter(man => man.money > 3000) console.log(rich) 예제2 array에 주어진 값들을 filter를 통해 3보다 ..

addEventListener 사용법

addEventListener( ) 는 document의 특정요소(id, class, tag..)에 event를 등록할 때 사용한다. const loginForm = document.getElementById("login-form"); const loninInput = loginForm.querySelector('input'); const loginButton = loginForm.querySelector('button'); function handleLoginBtnClick() { /* 버튼클릭 이벤트가 발생했을 때 실행될 함수 작성 */ } loginButton.addEventListener('click', handleLoginBtnClick); 위와 같이 '클릭' 이벤트가 발생했을 때 함수(hand..

document에서 요소를 찾을 때

querySelector 클래스명, 아이디명 모두 검색 가능하다. 때문에 아이디인지 클래스인지 선택자를 명확하게 구분해주어야 한다. 더 구체적인 엘리먼트를 선택할 때 사용하면 좋다. element = document.querySelector('#selectors'); element = document.querySelector('.selectors'); getElementById 아이디명으로 요소를 찾기 때문에 선택자 표시를 하지 않아도 된다. element = document.getElementById('id'); selectElementByClassName 클래스명으로 요소를 찾기 때문에 선택자 표시를 하지 않아도 된다. var products = document.getElementsByClassNam..