ES7에서 지수 연산자가 도입되었다. 이전까지 사용해 온 Math.pow 메서드를 대신해 좀 더 가독성 좋은 코드를 작성할 수 있게 되었다. 지수 연산은 별 두 개( ** )로 수행할 수 있다. 좌항의 피연산자가 밑이 되고 우항의 피연산자는 지수가 된다. console.log(2 ** 2); // 4 console.log(2 ** 0); // 1 console.log(2 ** -2); // 0.25 음수가 밑이 되는 경우 괄호로 묶어야한다. console.log((-5) ** 2); // 25 할당 연산자와 함께 사용할 수도 있다. a = 10; console.log(a **= 2); // 100 또한 지수 연산자의 우선순위는 이항 연산자 중에서 가장 높다. console.log(2 * 2 ** 2); ..
자바스크립트에는 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 연산자를 사용할 때 몇 가..
배열의 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라는 값이 들어있다. 호이스팅은 어디까지..
파일을 서버에 업로드할 때 얼마나 진행되었는지 시각적으로 표시해주는 진행 표시줄(Progress Bar)를 구현하고자 한다. 우선 진행 표시줄은 아래와 같이 구성되어있다. 레이아웃은 부트스트랩을 사용하였다. 파일 업로드가 시작되지 않은 경우에는 진행표시줄이 숨겨져있도록 처리하였다. 사진은 예시를 위해 진행 표시줄이 보여지도록 하였다. 그리고 진행 표시줄이 활성화되는 자바스크립트 코드는 다음과 같다. 나의 경우에는 ajaxForm을 사용하여 진행표시줄을 구현했다. var percent = $('#progress'); $('#fileForm').ajaxForm({ beforeSend : function(){ var percentVal = '0%'; $('.progress').show(); percent.ht..
input 태그에는 서버에 파일을 업로드하기 위한 file 타입의 요소가 존재한다. 이 input 태그에서 선택된 파일들의 정보를 가져와 목록에 출력하는 기능을 구현하고자 한다. 구현된 화면은 다음과 같다. 기능 구현에 사용한 코드는 다음과 같다. function readyFile(){ var files = document.querySelector('#file').files; var code = ''; for(let i = 0; i < files.length; i++){ let file = files[i]; var type = file.name.split('.'); type = type[type.length - 1]; var size = (Math.floor(file.size / 1024)).toLoca..
