웹 프론트/Javascript & ECMA

웹 프론트/Javascript & ECMA

Javascript(ES6) - For in, For of loop(반복문) 설명 및 예제

ES6(ECMAScript 6) For문 설명 개발자에게 있어서 반복문을 활용하는 것은 정말 중요하다고 생각합니다. 잘못된 코딩 습관, 의미없는 요소 순회 및 객체 생성 등은 실행 환경에서 성능에도 지장을 주기 때문인데요. 본 포스팅에서는 ES6에서 추가된 For-of 문법과 기존의 For-in 문법의 예제 소스를 작성해 보면서 차이점을 간단하게 비교해 보도록 하겠습니다. For-in, For-of 비교 예제 For-of : 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체 등)을 반복하는 기능 수행 즉, 객체의 요소들(Data)를 순회하기 위한 구문 For-in : 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행 즉, 객체의 속성들을 순회하..

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - 배열 처리 정리(4) - reduce

Javascript - reduce 설명 ① reduce - 이 함수는 Array 객체의 ProtoType에 정의되어 있는 고차함수 이다. ② 가장 중요한 특징은 배열의 값을 한 개로 감소시키는 특징을 가지고 있다. ③ map, filter, find 함수로 구현할 수 있는 기능은 모두 reduce 함수로 구현 가능하다. ④ 두 번째 매개변수인 initialValue를 통해서 반환 값을 자유롭게 지정하여 유연하게 사용 가능 하다. ⑤ MDN : Array#Reduce 레퍼런스(Reference) 확인 Javascript - reduce 패턴(1) 기본 소스 arr.reduce(callback[, initialValue]) 1.callback previousValue : 마지막 콜백에서 반환된 값 또는 i..

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - 배열 처리 정리(3) - every, some

Javascript - every, some 설명 ① every, some - 특정 조건을 만족하는지 배열 내부의 원소를 순회하면서 검사한다. ② 조건에 만족하면 True, 그 반대는 False 를 리턴(Return) ③ 프로젝트 진행 중 배열 내부 원소의 값에 대해서 검토가 필요한 경우 빈번하게 사용한다. ④ Array.prototype.every Array.prototype.some 레퍼런스(Reference) 확인 Javascript - every 기본 소스 - 성능을 위해 조건을 만족하지 않는 값이 발견되면 그 즉시 순회는 중단된다. - (Return False) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 let data= [ { name: "jack", age: 20 ..

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - 배열 처리 정리(2) - filter(필터)

Javascript - filter 설명 ① filter - 콜백함수에 지정된 조건에 맞는 요소를 새롭게 반환한다. ② 콜백함수의 인자는 순서대로 값(value), 인덱스(index), 원 배열(array) 이다. ③ Array.prototype.filter 를 통해서 더욱 자세히 공부해보자. Javascript - filter 패턴(1) 기본 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 let data= [ {name: "jack", age: 20}, {name: "kevin", age: 16}, {name: "rick", age: 27}, {name: "marry", age: 21}, {name: "rilly", age: 19} ] // age가 20이상인 원소 추출(필터링) le..

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - 배열 처리 정리(1) - map, forEach

Javascript - forEach, map 비교 ① forEach, map - 배열 순회 후 내부 인자의 원소의 값을 가공하여 로직을 완성하는 메소드(Method) ② 차이점은 수정된 배열을 리턴(retrun)하는지 여부가 있지만, 사용법에 따라 다르다. ③ 새롭게 가공 후 수정 된 배열을 리턴 받을 때는 map, 기존 배열을 가공 하여 평균, 합산 등을 구할 때는 forEach 사용 Javascript - forEach 패턴(1) 기본 소스 1 2 3 4 5 6 7 8 9 10 let data= [10, 15, 20, 25, 30] let result = []; //모든 원소의 값에서 -5 감소 data.forEach( x => { result.push( x - 5 ) }); //결과 출력 cons..

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - 싱글톤(Singleton) 패턴 설명

싱글톤(Singleton) 설명 ① 자바스크립트 싱글톤 패턴은 클래스 함수의 인스턴스를 한 개만 유지한다. ② 즉, 여러 객체를 생성 하더라도 최초 생성된 객체를 사용하는 것이다. ③ 객체에 대한 접근자(비공개 멤버 : 클로저)를 사용하여 해당 객체를 공유하는 것이다. 1 2 3 4 5 6 var singletonObj = { a : '값', b : function () { } } cs 싱글톤(Singleton) 예제 ① 아래 예제 코드에서 비공개 함수 init()의 return 값으로 반환 하는 객체가 바로 싱글톤 객체이다. ② 내부 변수에 접근하여 객체를 반환하는 클로저(Closure) 패턴을 사용했다. ③ 즉, 객체를 여러 번 생성(getInstance)를 하더라도 한 개의 객체를 참조하게 되는 것..

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - 반복문 for loop 성능 향상 팁

Javascript(자바스크립트) - 반복문 for loop(루프) 팁 (1). Javascript - for loop 일반적인 패턴(Pattern) ① 일반적인 패턴 에서는 Loop 문 수행 시 각 배열 및 오브젝트의 length 에 접근한다. ② Json 및 collection 객체 일 경우는 수행 비용이 크다고 볼 수 있다. ③ DOM 접근에 필요한 수행 비용을 줄이자. 1 2 3 4 5 6 7 8 //for_normal.js for ( var i = 0; i

웹 프론트/Javascript & ECMA

Javascript(자바스크립트) - Null, Undefined, 데이터형 비교 차이

Javascript(자바스크립트) - Null, Undefined, 데이터형 비교 (1). Javascript - 데이터형에 대한 간단 설명 ① false 반환하는 값 : '', "" , null , undefined, 0, NaN ② true 반환하는 값 : 위에 목록을 제외한 나머지 ③ Javascript 는 타 언어에 비해 데이터형에 대해서 자유로운 언어이다. (2). 데이터형 변환 비교 1 2 3 4 5 6 7 8 9 10 11 12 13 // Number 형 var value1 = 7; console.log(value, typeof value1); // String 형 var value2 = "7"; console.log(value, typeof value2); // 비교 console.log(..

[좋은사람]
'웹 프론트/Javascript & ECMA' 카테고리의 글 목록