Programming/Javascript

[JavaScript] select box에 동적으로 option을 추가해보자

오늘은 팀 프로젝트를 하면서 약간의 삽질을 하면서 알게된 select box에 option을 추가하는 방법을 포스팅하겠습니다. 서울 부산 제주 경기 인천 강원 경상 전라 충청 왼쪽 select box의 값에 매칭되는 오른쪽 select box의 옵션을 동적으로 바꿔야 합니다. 제가 처음에 생각했던 방향은 다음과 같습니다. 1. querySelect를 이용해 main-city 객체를 변수에 담는다. 2. querySelect를 이용해 sub-city 객체를 변수에 담는다. 3. main-city 객체가 담긴 변수에 change 이벤트가 감지되었을 때 선택된 option을 뽑아온다. 4. switch문을 사용해 서울 ~ 충청일 경우를 나누어 각각에 맞는 모든 옵션을 엘리먼트 태그로 만든다. 5. sub-ci..

[Javascript] Window, DOM, BOM이란?

나는 자바스크립트 언어를 Window, DOM, BOM이 정확히 무엇을 의미하는지도 모른채 사용해왔다. 사실 Window, DOM과 BOM을 이해하기 위해 과거에 여러 문서를 보고 구글링도 했었지만 와닿지가 않았고 붕 뜬 느낌이었다. 분명 이 글을 보고 있는 사람들 중에서도 나와 같은 경험을 한 사람들이 있을 것이다. 이런 사람들이 내 글을 보고 위의 개념들을 이해하는데 도움이 됐으면 한다. ('객체'라는 의미는 알고있다고 가정한다) Window 객체 Window 객체는 자바스크립트의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객체이다. 아래의 사진을 보면 DOM, BOM, JavaScript가 최상위 객체인 Window 객체 밑에 소속이 되어있다. 이 객체들은 서로 계층적인 관계로 구조화 되어있다..

[Javascript] ES6 화살표(에로우) 함수

1. ES6에서는 화살표 기호를 사용하여 화살표 함수를 만들 수 있다. 화살표 함수를 사용하는 방법에는 몇 가지 제약이 따른다. // 1) 매개변수가 없는 경우 const area = () => { return 100; }; // 2) 매개변수가 한 개인 경우, 이 때는 () 괄호를 생략할 수 있다. const area = width => { return width; }; const area = (width) => { return width; }; // 3) 매개변수가 두 개 이상인 경우. 이 때는 () 괄호를 생략할 수 없다. const area = (width, height) => { return width * height ;}; // 4) 함수 몸체가 한 줄의 구문이라면 {}를 생략할 수 있으며 암..

[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..