레퍼런스 마이닝

이번 장에서는 함수, 이벤트, 조건문 등에 대해 이야기해보자. 우린 지난 시간에 console.log를 사용하여 여러 가지를 알아보았다. 여기서 console은 Object이다. Function with Object console.log(console); console은 여러 가지 함수를 가지고 있는 Object이다. consle.log를 비롯해 alert 등 앞으로 사용하게 될 많은 함수들은 내장 함수(built-in function)라고 한다. 함수는 어떤 기능, 행위를 표현한 것이다. 필요한 곳에 원하는 만큼 사용할 수 있다. console.log('VanilaJS With Single'); console.log("VanilaJS With Double"); function vanilaJS(param..

기초적인 자바스크립트에 대해 이야기해보자. vairable, object, function을 알고 있다면 너무 쉬울 수도 있다. 이제 막 기초를 배우는 분들에게 필요한 내용이다. 우선 자바스크립트는 웹에 쓰이는 하나뿐인 프로그래밍 언어이다. Backend는 언어 선택지가 많은 반면 Frontend를 한다면 쓸 수 있는 언어는 하나뿐이다. 바로 자바스크립트이다. Frontend를 하는 사람은 자바스크립트를 알고 모두 같은 언어로 이해하고 이야기한다. 웹은 계속 빠르게 발전하고 자바스크립트도 빠르게 발전한다. 자바스크립트를 한다면 할 수 있는 일이 더 많아진다는 이야기 일 수도 있다. 자바스크립트에서 ES5, ES6을 들어본 적이 있을 것이다. 자바스크립트는 중앙 집중화가 되어 있다. 그래서 업데이트를 하면..

String에서 Boolean으로 변환하는 방법을 알아보도록 하자. 별생각 없이 형 변환을 하다가는 오류를 범할 수 있다. API response로 Boolean 타입의 객체가 오면 문제가 되지 않지만 String 타입의 'true', 'false'로 response를 받는 경우도 종종 있다. 간단하게 if 문 구성을 String 비교로 해도 되지만 Boolean의 의미가 퇴색되어 버린다고 할까 뭔가 부족한 느낌이다. 다른 방법으로 Boolean 함수를 생각할 수 있지만 이 또한 문제가 있다. 아래 코드로 간단하게 확인해 보자. Boolean(null); //false Boolean(undefined); //false Boolean(NaN); //false Boolean(''); //false Boole..

지난 포스팅에서 자바스크립트 배열에 대한 고찰이라는 주제로 내용을 다루었었다. 이번에는 배열 전반적인 부분을 보도록 하자. 배열 즉, Array 객체는 자바스크립트에서 가장 많이 사용되는 객체이면서도 잘 모르는 사실들이 많이 숨어 있는 객체 이기도 하다. 배열뿐만이 아니다. 자바스크립트의 영역은 상상 그 이상이다. 배열 선언 arr1, arr2는 빈 배열을 선언한 것이고 arr3, arr4는 배열을 선언과 동시에 인자를 할당한 모습이다. 주목해야 할 점은 arr5, arr6 배열 객체이다. arr5는 인자가 하나 있는 배열 선언이 아니고 길이가 5인 배열을 선언한 것이다. 하지만 arr6은 인자가 하나인 배열이다. 배열 선언 방법에 따른 차이로 인해 나타난 현상이다. Array 생성자를 통해 배열을 선언..

자바스크립트 배열의 길이는 동적으로 변한다. 그렇다면 배열 변수 선언과 요소의 정의, 삭제 등의 조작으로 인한 값의 변화를 살펴보자. 다음은 크롬 브라우저의 콘솔 창을 활용하려 배열을 선언하고 요소를 추가하는 과정이다. 위에서 보면 배열 변수 x를 선언하고 x 배열 10번째 요소에 123 값을 추가하였다. 그 후 x 배열의 length 값이 0에서 11로 바뀌는 것을 확인할 수 있다. 배열의 길이는 11개이지만 x[0] ~ x[9] 요소의 값은 'undefined' 이므로 메모리는 1개의 요소만 할당된다. 다음으로 배열 요소를 삭제해보자. delete로 배열 요소를 삭제할때는 값만 사라지고 배열의 길이는 줄어들지 않는 것을 볼 수 있다. 하지만 splice 함수로 배열 요소를 잘라내면 배열 길이가 줄어든..

자바스크립트 비동기 포스팅에서 비동기 처리에서 나타날 수 있는 문제점을 다루어 봤다. 이러한 문제점을 해결할 수 있는 콜백 함수에 대해 알아보도록 하자. 첫 번째 사례 개선 function getData(callBackFn) { $.get('https://domain.com/system/users/PTN001112', function (response) { callBackFn(response); }); } getData(function (tableData){ console.log(tableData); }); 두 번째 사례 개선 repeatConsoleLog = function(i, callBackFn) { setTimeout(function() { console.log(i); if (i >= 9) { c..

비동기? 자바스크립트에서 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행이 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트 특성을 의미한다. 첫 번째 사례 비동기 처리의 가장 흔한 사례는 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax통신은 모든 요소에서 빠지지 않고 등장한다. 화면에 렌더링 할 이미지나 데이터를 서버에 호출하여 표시하게 되는데 이때 ajax통신을 사용한다. function getData() { var tableData; $.get('https://domain.com/system/users/PTN001112', function (response) { tableData = response; }); return tableData; } console.log(getD..

Event Bubbling 자바스크립트에는 Event Bubbling이라는 개념이 있다. 이것은 한 자식 요소에서 이벤트가 발생했을 때 부모 요소에 이벤트를 전파하는 것을 의미하여 Event Bubbling이라고 말한다. 다음 예제 코드를 보자. HTML Click me to check JavaScript $('.parent').on('click', function() { ('#checkbox').prop('checked', false); }); $('.child').on('click', function() { $('#checkbox').prop('checked', true); }); .parent 클래스가 .child 클래스 버튼을 가지고 있으며 부모와 자식 요소에 같은 click 이벤트가 바인딩 되었..

JavaScript 동치 비교 == , === 차이점 JavaScript에는 다른 언어와는 다르게 === 연산이 존재한다. 다른 언어들을 먼저 접하고 실무를 하게 된다면 자연스럽게 JavaScript에서도 == 연산을 대부분 먼저 사용하게 된다. 이런 이유로 대부분의 개발자 들이 무심코 == 연산으로 주로 비교 조건절을 사용하는 경우가 많다. 동치 비교 차이점을 파악해서 일치 연산자를 사용하도록 하자. == 동등 연산자(Equal Operator) 동등 연산자는 피연산자들이 서로 타입이 다르면 같은 타입으로 변환을 한다. 그다음 strict 비교를 적용한다. 두 피연사자가 둘 다 객체라면, 자바스크립트가 메모리의 같은 객체를 참조할 때 내부 내용을 비교하며, 메모리의 같은 객체를 가르킨다면 두 객체를 같..