개발이 하고싶은, 첼시를 좋아하는

Developer/Javascript

[자바스크립트] 호이스팅

호이스팅(Hoisting) 호이스팅(hoisiting)이란 자바스크립트 엔진이 변수와 함수의 메모리 공간을 선언하기 이전에 미리 할당하는 것을 의미한다. 흔히 호이스팅에 대해 말할 때, "변수와 함수의 선언을 해당 범위(Scope) 최상단으로 올리는 것."이라고 말을 하는데 정확한 표현은 아니다. 정확히는 그렇게 보이는 현상을 말한다. 자바스크립트 엔진은 코드를 실행하기 전에 코드를 먼저 살펴본다고 생각하면 된다. 자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화하고 구분하는 과정을 거친 후, 실행하기 전에 모든 선언을 범위(Scope)에 등록한다. 이 과정을 통해 메모리에 미리 할당해 두었기 때문에 선언문보다 호출이 앞서도 에러 없이 동작이 가능하다. 다른 언어에서는 당연히 에러를 발..

Developer/Javascript

[자바스크립트] sort()

sort() 배열의 요소를 적절한 위치에 정렬한 후 그 개별을 반환해준다. sort 함수는 원본 배열을 바꾼다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따라 정렬된다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // expected output: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4] 1번 예시 month 배열의 원소를 아스키코드 표에 따라 오름..

Developer/Javascript

[자바스크립트] filter(), reduce()

filter() filter 함수는 콜백 함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성한다. let newArr = arr.filter(callbackFunction (element, index, array), thisArg); filter 함수의 매개변수는 콜백 함수와 thisArg이다. thisArg는 filter에서 사용될 this이고, thisArg를 사용하지 않는 경우 undefined가 전달된다. 콜백 함수의 매개 변수는 element, index, array 3 가지이다. element : value 값 index : value의 인덱스 값 array : filter에서 사용되는 배열 객체 let arr = [1,2,3,4] let newArr = arr.filter(functi..

Developer/Javascript

재귀 함수와 스택 프레임(Stack Frame)

재귀 함수 재귀 함수는 함수가 직, 간접적으로 자신을 호출하는 프로세스이다. 반복적인 호출이 필요한 문제를 해결할 때 사용하고, 종료 시점을 유의해야 한다. 종료 시점을 신경 쓰지 않으면 무한 호출에 빠지게 된다. 스택 프레임(Stack Frame) 스택(Stack) 영역은 함수의 호출과 관계되는 지역 변수, 매개 변수가 저장되는 영역으로, 해당 영역은 함수가 호출되면서 할당되고, 함수가 종료되면 소멸된다. 함수가 호출되면 스택에 함수의 매개 변수, 지역 변수, 복귀 주소 등이 입력된다. 이렇게 스택 영역에 저장되는 함수의 정보를 스택 프레임(Stack Frame)이라고 한다. function solution(n) { function DFS(L) { if (L === 0) return; else { DF..

Developer/Javascript

[자바스크립트] 생성자 함수, 객체 생성

생성자 함수 생성자 함수는 일반 함수의 사용법과 큰 차이는 없다. 다음 두 가지의 규칙만 지키면 된다. 1. 함수의 첫 글자는 대문자로 작성한다. 2. 'new' 연산자를 붙여 사용한다. 생성자 함수를 사용하기 전에 객체를 다루는 것을 먼저 보자. 다음과 같이 person이라는 빈 객체가 있다. let person = {} 객체에 데이터를 담는 방법은, 객체를 담고 있는 변수.원하는 변수 = "값"을 입력해 작성해 주는 것이다. person.name = "MJ"; 객체에 name이라는 변수를 담고, name이라는 변수에 "MJ"라는 문자열 값을 담은 것이다. 여기서 객체에 담긴 변수는 프로퍼티(property), 속성이라고 한다. person.show = function () { console.log("..

Developer/Javascript

[Chart.js] Chart.js로 차트 그리기

Chart.js www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 4월 3주 차 프로젝트를 진행하던 중 매출 통계를 그래프로 그려야 하는 과제가 있었다. 사내에서는 amChart를 이용해 그래프를 그린다고 했었다. amChart를 사용해본 적이 없고, script에 대한 이해가 부족한 상태라 비교적 쉽게 그래프를 그릴 수 있는 Chart.js를 활용해 그래프를 그렸다. ch..