JavaScript

JavaScript

    [자바스크립트] 최대값과 최소값 찾기

    최대값과 최소값을 찾고자할 때 단순히 for문을 돌리는 방법이 있겠으나 이는 세련되지 못하다. 조금 더 자바스크립트스러운 방법을 알아보자. ❙ Math 객체 이용 기본 내장 객체인 Math 객체를 이용해보자. 이 객체는 절대값을 반환해주는 Math.abs, 난수를 발생시키는 Math.random 등 수학 기능과 관련된 다양한 메소드를 제공한다. 또한 Math.max, Math,min 메소드를 통해 최대값, 최소값을 구할 수 있다. 예제를 보자. var numbers = [ 19, 1, 3, 37, 8 ]; Math.max.apply(null, numbers); // 37 Math.min.apply(null, numbers); // 1 갑자기 apply 메소드가 사용됐다. 짧게 설명하자면 apply 메소드..

    [자바스크립트] undefined와 null의 차이

    자바스크립트는 데이터 타입이 무척이나 자유분방하다. 모든 변수를 var(es6에서는 const, let 추가)로 선언된다. 그리고 데이터 타입은 이 선언 시점이 아닌 할당 시점에 결정이 된다. 하지만 개발을 하다보면 이러한 자바스크립트의 특징으로 인해 여러가지 문제가 발생할 때가 있다. 콘솔창에 변수값이 undefined와 null으로 찍히는 경우가 대표적이다. 비슷한듯한 이 둘의 차이를 명확히 인지하고 있어야 빠른 문제해결이 가능하다. ❙ undefined 변수가 선언되었지만 어떤 값도 할당되지 않은 상태이다. 할당이 되지 않았으므로 자료형이 결정되지 않았다. 따라서 'undefined'인 것이다. var a; console.log(a); 위 코드를 직접 실행해보면 결과는 다음과 같다. ❙ null 변..

    [자바스크립트] this의 개념과 활용법

    여타 프로그래밍 언어와 마찬가지로 자바스크립트는 this라는 키워드를 제공한다. 사실 자바에서는 this 키워드를 익숙하게 써왔는데, 자바의 this는 단지 현재 객체(에 대한 레퍼런스)를 가리킬뿐이다. 하지만 이와 동일한 이해를 가지고 자바스크립트 코드를 작성했다간 여러가지 문제에 부딪히게 될 수 있다. 자바스크립트에서의 this는 자바처럼 단순하지 않다. 실행 문맥에 따라 다르게 동작한다고 이해하는게 맞겠다. 다음과 같이 4가지 종류의 문맥으로 구분할 수 있다. 함수 실행 : alert('Hello world!') 메소드(함수 내부의) 실행 : console.log('Hello world!') 생성자 실행 : new RegExp('\\d') 간접(indirection) 실행 : alert.call(u..

    [자바스크립트] 스코프와 클로저

    자바스크립트 개발을 좀 해봤다는 사람이 만약 개발자 채용 면접을 보게된다면 클로저에 대한 질문을 반드시 받을 것이다(감히 확신한다!). 그만큼 클로저는 자바스크립트를 처음 접했을 때 적지 않은 혼란을 주는 개념이고 또 중요하다. 혹시 다음과 같은 코드를 보며 혼란스러웠던 경험이 있지 않은가? function foo(param){ var a = param; return function(){ console.log(a); } } var test = foo('closure!'); test(); 실행결과는 다음과 같다. 위의 예제를 처음 접했다면 의문이들기 마련이다. foo 는 익명 함수를 리턴한뒤 종료된다. 이 시점에 foo 내부의 변수인 a 도 가비지콜렉터(GC)에 의해 정리되는 것이 정상적인 흐름처럼 보인다..

    [자바스크립트] 비동기 처리의 원리

    자바스크립트 코드를 짜다보면 의아할 때가 있다. 내가 짜놓은 코드가 순서대로 돌아가지 않는 순간 말이다. 다음 코드를 보고 콘솔로그의 순서를 예측해보자. var exam = function(callback){ console.log("exam called"); setTimeout(function(){ console.log("setTimeout called"); if(typeof callback === "function"){ callback(); } else { console.log("callback is not function"); } },3000); console.log("end of exam"); } exam(function(){ console.log("callback called"); }) 통상적인 ..