자바스크립트에는 typeof 연산자가 있다. 해당하는 값이나 변수의 데이터 타입을 파악하기 위한 연산자이다. typeof 연산자는 각 데이터 타입에 맞는 7가지의 문자열을 반환한다. string number boolean undefined symbol object function a = ''; b = 10; c = []; d = true; e = function(){}; console.log(typeof a); // string console.log(typeof b); // number console.log(typeof c); // object console.log(typeof d); // boolean console.log(typeof e); // function typeof 연산자를 사용할 때 몇 가..
스프레드(spread)는 펼치다, 퍼뜨리다라는 의미가 있다. 이름 그대로 spread는 객체 또는 배열의 값을 펼칠 때 사용하는 문법이다. const chicken = { ingre1 : '튀김가루', ingre2 : '닭' }; const hotChicken = { ...chicken, // ingre1 : '튀김가루', ingre2 : '닭' ingre3 : '소스' }; const supremeChicken = { ...hotChicken, // ingre1 : '튀김가루', ingre2 : '닭', ingre3 : '소스' ingre4 : '크림' }; var arr1 = [1, 2, 3, 4, 5]; var arr2 = [...arr1, 10, 11, 12, 13, 14, 15]; console..
배열의 filter, map, join, forEach 배열에 저장된 값을 filter()를 사용해 특정 조건에 맞게 추출할 수 있다. map()을 사용해 값을 처리할 수 있다. join()을 사용해 값을 문자열로 변환할 수 있다. forEach()를 사용해 배열을 돌며 작업을 할 수 있다. filter()를 사용해 특정 조건에 맞는 배열의 값만 추출하기 var arr = [1, 2, 3, 4, 5] var newArr = arr.filter(num => num % 2 == 0); console.log(newArr); // [2, 4] map()을 사용하여 배열의 값을 가공하기 var arr = [2, 4, 6, 8, 10]; var newArr = arr.map(arr => arr / 2); conso..
값의 저장 프로그래밍 언어에서 변수를 선언하고 값을 할당하면 우선, 해당 값의 타입에 맞는 메모리 공간을 확보한다. 공간이 확보되면 할당된 값을 2진수로 변환하여 메모리 공간에 저장한다. 값의 참조 값을 참조하는 과정은 다음과 같다. 변수에 값을 할당했다면 식별자 역할을 하는 변수를 통해 해당 값이 저장된 메모리 주소를 찾아갈 수 있다. 그 다음, 읽어들여야하는 메모리 공간의 크기를 알아야한다. 값이 위치한 메모리 공간의 크기만큼만 읽어들여야 제대로된 값을 참조할 수 있다. 예를들어 변수에 숫자를 할당했다면 메모리에는 8바이트 단위로 저장된다. 이렇게 데이터 타입을 통해 메모리에서 읽어들이는 공간의 크기를 정할 수 있다. 값은 메모리에 2진수로 저장된다. 값을 참조하여 메모리에서 불러들여올 때 데이터 타..
자바스크립트에는 NaN이라는 특이한 형태의 값이 있다. var num = 1 * 'String'; console.log(num); // NaN 숫자와 문자열을 곱하면 에러가 발생해야할 것 같지만 자바스크립트에서는 NaN이라는 값을 반환한다. NaN은 Not-a-Number 라는 뜻으로 이름 그대로 숫자가 아니라는 뜻이다. 즉, 숫자와 숫자가 아닌 값을 곱했기 때문에 숫자가 아닌 이상한 값이 할당된 것이다. 이를 자바스크립트에서는 NaN이라는 값으로 표현한다. 해당 값이 NaN인지 구분하기 위해 자바스크립트에서는 isNaN() 이라는 함수를 제공하고 있다. var num = 1 * 'String'; console.log(isNaN(num)); // true 재미있는 점은 자바스크립트에서 문자열이 숫자의 형..
자바스크립트에는 호이스팅(Hoisting)이라는 특징이 있다. console.log(num); var num; 위 코드는 아직 선언되지 않은 변수를 먼저 참조하고 있다. 변수가 아직 선언되지 않은 상태에서 참조했기 때문에 에러가 발생해야할 것 같지만 재미있게도 자바스크립트에서는 ReferenceError가 아닌 undefined가 출력된다. 이는 자바스크립트가 코드를 실행하기 전 코드를 평가하는 등 일련의 과정을 먼저 거치는데 이 때 코드에서 변수를 포함한 모든 선언문을 먼저 실행하기 때문이다. 결국 변수 선언이 어느 코드보다 우선적으로 실행되기 때문에 어느 곳에서라도 변수를 참조할 수 있다. 하지만 변수는 선언되었지만 초기화는 되지 않았기 때문에 undefined라는 값이 들어있다. 호이스팅은 어디까지..
자바스크립트의 정규식(Regular Expression)은 기본적으로 슬래시(/)와 슬래시(/) 사이에 작성한다. var reg = /^[a-zA-Z0-9]{1,}$/; 문자열의 종류와 상관없이 글자수만 제한하고 싶을 경우 온점과 함께 문자열의 길이를 지정하는 부분만 작성하면 된다. '^'과 '$'는 문자열의 시작과 끝을 의미한다. var memId = document.querySelector('#memId'); var regId = /^.{5,}$/; if(!regId.test(memId)){ alert('아이디는 5자리 이상 입력해주세요.'); return false; }
웹 사이트에서 submit을 하기 전 입력받은 데이터의 유효성을 검사해야하는 경우가 있다. 여러가지 방법이 있겠지만 이 글에서는 form 태그에 onsubmit 속성을 사용하는 방식으로 구현해보았다. 아이디 비밀번호 자동 로그인 로그인 form 태그에 onsubmit 속성을 사용해 submit 되기 전 fn_check() 라는 함수를 호출한다. 함수 앞에 붙은 return 이라는 키워드를 통해 fn_check()의 반환값을 받아오는데 이 반환값이 true일 경우 submit이 수행되고 false일 경우 수행되지 않는다. function fn_check(){ var memId = document.querySelector('#memId').value; if(memId.trim().length < 3){ al..
