Programming

[Javascript] Implementing in memoization(fibonacci, recursion)

오늘은 피보나치 수열을 재귀함수를 통해 2가지 방법으로 구현을 해보겠습니다. 1. 메모화(memoization)을 하지 않았을 때 2. 메모화(memoization)을 했을 때 우선 피보나치 수열의 정의와 메모화(memoization)에 대해서 알아보겠습니다. 피보나치 수열(Fibonacci sequence) f(1) = 1 f(2) = 1 f(3) = f(2) + f(1) = 2 f(4) = f(3) + f(2) = 3 f(5) = f(4) + f(3) = 5 ··· 메모화(Memoization) 메모화란 프로그래밍을 할 때 반복되는 결과를 저장해서 이후 동일한 결과값이 나올 경우, 저장된 결과를 가져와 빨리 실행하는 기법을 의미합니다. 우선 메모화를 하지 않고 피보나치 수열을 구현해보겠습니다. var..

[Javascript] JSON.parse(), JSON.stringify()에 대해 알아보자

JSON은 자바스크립트의 객체 표기법을 제한해서 만든 '텍스트'기반의 데이터 교환 표준이다.JSON은 여러가지 데이터를 받아와 활용을 할때 많이 사용이 된다. 오늘은 JSON.parse()와 JSON.stringify()에 대해서 알아보려고 한다. 알아보기 위해 예시로 서울시 일별 평균 대기오염도 정보를 JOSN형식으로 받아온다.위 사진 우측 하단의 JSON버튼을 누르면 서울시 일별 평균 대기오염도 정보가 JSON형식으로 다운로드가 된다. 다운로드하여 열면 아래와 같이 데이터가 들어있다 JSON.parse()와 JSON.stringify의 개념을 알기 위한 포스트이므로 저렇게 많은 데이터는 필요없다. 딱 2줄만 해보자.두 줄의 데이터만 가져와 data라는 변수안에 넣었다.그런데 여기서 알아둬야 할 점은 ..

[Javascript] ES6 템플릿 리터럴

ES6에서는 새로운 문자열 표기법인 템플릿 리터럴(Template Literal)을 도입했다.기존 ES5는 문자열을 만들 때는 큰 따옴표("), 작은 따옴표(')를 사용해서 문자열을 만들었다. var name = "Kim";console.log("My name is " + name + "."); // My name is Kim.ES6의 템플릿 리터럴은 백틱( ` )기호를 사용해서 문자열을 더 간편하게 만들 수 있다.문자열에 변수를 넣고 싶으면 ${변수}와 같이 쓰면 된다.* 감싸진 문자열의 타입은 강제로 문자열이 된다. 위의 예제를 템플릿 리터럴로 바꿔보자 var name = "Kim";var introduce = `My name is ${name}.`; console.log(typeof(introduc..

[Javascript] this 이것은 무엇인가

this자바스크립트에서는 함수를 호출하는 방식에 따라 this에 바인딩되는 객체가 달라진다.다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니라, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다 함수를 호출하는 방식은 4가지가 있다.1. 함수 호출2. 메소드 호출3. 생성자 함수 호출 (추후에 포스팅 예정)4. call/apply/bind 호출 (추후에 포스팅 예정) 1. 함수 호출기본적으로 this는 전역객체에 바인딩한다. function foo() {console.log(this); } foo(); // window심지어 내부함수의 경우에도 this는 외부함수가 아닌 전역객체에 바인딩된다.function foo() {f..

[Javascript] hoisting & scope 호이스팅과 스코프 (ES5, ES6 비교)

1. 호이스팅(hoisting) 네이버 단어 사전에 hoisting은 '끌어올리기'라는 뜻을 가지고 있다. hoisting은 자바스크립트 ES5에서 어떤 의미로 쓰였을까? console.log(a); // undefined var a = 100;console.log(a); // 100어떻게 변수 a를 선언도 하지않았는데 첫 번째 콘솔에서 undefined가 출력이 될까?이것이 바로 자바스크립트에서의 호이스팅이다.자바스크립트는 위의 코드를 처리하는 과정에서 마지막에 선언된 변수를 위로 끌어올린다. 그런데 끌어올릴 때 변수의 값까지 끌어올리는 것이 아니라 변수 자체만 끌어올리기 때문에 undefined를 출력하는 것이다. 또 다른 예시를 살펴보자. var a = 100;function test() {cons..

[Javascript] insertAdjacentElement 함수에 대해 알아보자

insertAdjacentElement()은 Element Node 또는 Text Node안에 원하는 Node를 삽입할 때 유용한 함수이다. 기본적인 구문은 다음과 같다. element.insertAdjacentElement(position, text);position은 아래 있는 단어만 사용이 가능하다. 'beforebegin'타겟 Element Node 바로 앞에 'afterbegin'타겟 Element Node의 첫 번째 Text Node 앞에'beforeend'타겟 Element Node의 마지막 Text Node 뒤에'afterend'타겟 Element Node 바로 뒤에위 내용을 다음과 같이 표현한다.

[Javascript] Rest 파라미터

Rest 파라미터 구문은 정해지지 않은 수 인수를 배열로 나타날 수 있게 한다.말이 어려우니 예시를 보도록 하자. function sum(...theArgs) {return theArgs.reduce(previous,current) {return previous + current;});} console.log(sum(1, 2, 3)); // expected output: 6 console.log(sum(1, 2, 3, 4)); // expected output: 10 함수의 마지막 인자 앞에 ... 를 붙여 모든 나머지 인수를 대체한다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다. function foo(a, b, ...theArgs) {console.log(a);console.log(b..

[Javascript] 유용한 배열 메서드 6가지(forEach, map, some, every, filter, reduce)

자바스크립트에서는 배열 내 데이터를 접근할 수 있는 메서드는 여러 개가 존재한다. 1. forEach forEach 메서드는 원본 배열 자체를 사용자 입맛에 맞게 조작한다. var arr = [1, 2, 3, 4]; // 함수 인자로 3개가 올 수 있는데 순서를 지켜야한다. (요소, 인덱스, 원본배열)// 최소 요소는 넣어주어야 하고 인덱스부터는 생략할 수 있다. arr.forEach(function(element, index, array) { array[index] = element * 100;}); console.log(arr); // [100, 200, 300, 400] 2. map map 메서드는원본 배열은 유지한 채, 원본 배열을 조작해 새로운 배열을 만든다. var arr = [1, 2, 3,..

[Javascript] 유사배열 arguments 객체

유사배열(Array-like)이란? 배열처럼 index를 통해 접근 가능한 것을 유사배열이라고 한다. arguments?자바스크립트에서는 인자를 포함해 함수를 호출할 때 암묵적으로 arguments가 생성된다.정확히 말하자면 arguments 객체이다. arguments 객체는 함수를 호출할 때 넣었던 인자들이 배열 형태로 저장되어 있다.하지만, 배열과 다르게 유사배열이 때문에 배열 메소드를 사용할 수 없다. (length, index를 통한 접근은 가능) function arrayLike(a, b) {for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); }} arrayLike(3, 4, 5, 6) // 3 ~ 6 까지 차례대로 ..