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

최대값과 최소값을 찾고자할 때 단순히 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 메소드..

[자바스크립트] sort() 함수 활용하여 간단히 정렬하기

자바스크립트의 array 객체는 sort 함수를 내장하고 있다. 기본적이고 폭넓게 활용되므로 활용법을 알아두도록 하자. Array.prototype.sort(compareFunction(a, b)) 인자로 받는 함수는 직접적으로 정렬 순서를 결정하는데 사용되는 함수이다. 이를 생략하면 유니코드 순으로 정렬된다. compare function을 넣어준다면, 다음과 같은 원리로 정렬 순서가 결정된다. compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬한다. 즉, a가 먼저온다. compareFunction(a, b)이 0을 반환하면 a와 b의 순서를 변경하지 않는다. compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 색인으로 정렬한다. 즉, ..

[자바스크립트] arrow function과 this

ecmascript6가 나온지는 한참됐지만 아직 브라우저(특히 ie)들이 이를 완벽히 지원하지 않고 있다. 따라서 현재도 여전히 es5에서 es6+로 넘어가는 과도기인데, 다행히 babel의 도움으로 지금 당장 es6로 개발을 해도 크게 문제될 것은 없다. es6의 가장 큰 문법적 변화사항을 꼽자면 역시나 arrow function이다. 그동안 주로 es5를 활용해서 자바스크립트 개발을 해왔다면 이 arrow function이 익숙지 않을것인데, 특히나 this와 관련해서 짚어볼 점이 있어 정리를 한번 해봤다. 1. Arrow function 문법 Arrow function의 기본적인 문법은 다음과 같다. 함수 작성시에 많은 부분을 생략할 수 있고, 화살표(=>)를 사용하여 조금 더 간결하게 코드를 작성..

[자바스크립트] 객체 제대로 이해하기

자바와 같은 객체지향 언어를 먼저 접한 이후 자바스크립트를 배웠다면, 객체를 다룰 때 꽤나 혼동이 있을 것이다. 하지만 객체에 대한 개념을 제대로 잡아두지 않으면 후에 프로토타입이나 클로저로 이어지는 자바스크립트의 언어적 특징과 심오한 철학에 대해서도 이해하기 어렵다. 천리길도 한걸음부터라고 했으니, 차근차근 시작해보도록 하자. ❙ 자바스크립트에서의 객체 자바스크립트에서는 모든 것이 다 객체다. 숫자, 문자열, boolean 등 기본 타입을 제외한 모든 값은 객체다. 배열, 정규표현식은 물론이고 모든 함수마저도 자바스크립트에서는 객체로 취급된다. 자바스크립트에서 말하는 객체는 단순하게 key:value 형태의 값들을 저장하는 컨테이너로 볼 수 있다. var foo = { name : 'foo', age ..

[자바스크립트] 비동기 처리를 위한 Promise 활용법

자바스크립트 개발을 하다보면 만나는 가장 골치아픈 것이 바로 시점 문제다. 자바스크립트는 대부분의 작업이 비동기로 처리되기 때문에 일단 스크립트가 실행되면 물흐르듯 쭉~ 흘러가버린다. 결과적으로 내가 의도했던 순서대로 코드가 실행되지 않게 되는 것이다. 그래서 콜백이 활용된다. 예를들어, 'A작업이 끝나는 시점에 콜백 함수를 호출해서 B작업을 수행'하는 식이다. 근데 이렇게 콜백을 활용하다보면 또 다른 문제를 마주하게 된다. 이는 콜백지옥이라는 표현으로 익히 알려져있다. var async1 = function(param, callback) {callback(param*2);} var async2 = function(param, callback) {callback(param*3);} var async3 =..