본문 바로가기

개발/JavaScript

 (25)
Spread Operator (스프레드 문법) vs Rest Parameter(Rest 파라미터) Spread Operator (스프레드 문법, 전개 문법) ES6에서 도입된 스프레드 문법은 하나로 뭉쳐 있는 여러 값들의 집합을 펼처서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for …of 문으로 순회할 수 있는 이터러블에 한정한다. console.log(...[1, 2, 3]); // 1 2 3 // 1 2 3은 값들의 목록이므로 변수에 할당할 수 없다. console.log(..."String"); // 문자열 자체로 이터러블이다. S t r i n g console.log( ...new Map([ ["..
[Javascript] 좋은 변수명을 짓는 방법 (coding convention) 기본사항 변수명은 자체 설명적이어야 한다. // bad const value = 'Robin'; const val = 'Robin'; // good const firstName = 'Robin'; 자바스크립트에서는 camelCase, PascalCase를 사용한다. Arrays 변수 이름을 복수화 하기 // bad const fruit = ['apple', 'banana', 'cucumber']; // okay const fruitArr = ['apple', 'banana', 'cucumber']; // good const fruits = ['apple', 'banana', 'cucumber']; // great const fruitNames = ['apple', 'banana', 'cucumber'];..
[Javascript] falsy? 논리적 NOT(!) 은 다음과 같은 값들을 false라고 칭한다. undefined null NaN 0, -0 "", '', `` false console.log(!undefined); // true console.log(!null); // true console.log(!NaN); // true console.log(!0); // true console.log(!-0); // true console.log(!''); // true console.log(!false); // true 모두 true가 나온다는 점을 미루어 봤을 때 앞서 나열한 것들은 모두 논리적인 false 임을 알 수 있다. 따라서 undefined, null인 것들을 판별하고 싶을 때 단순히 if(!data) 이렇게 구현하는 것은 의도..
[Javascript] The Basic Vanilla JavaScript Project Setup - 기본 Vanilla JS 프로젝트 세팅 방법 (번역) 다음 Vanila JS 프로젝트를 시작하는 방법 지난 기사에서는 10년 이상 Javascript frameworks를 사용해오던 내가, 왜 vanilla JS를 완전히 다시 사용하는 이유에 대해 공유를 했습니다. 오늘은 기본 프로젝트 세팅에 대해 알아볼것입니다. 그 과정에서, 저는 다양한 테크닉을 사용할것이고 그것에 대한 근거들을 논의할 것입니다. 그러나 모든 것에대해 디테일하게 논의하지는 않을 것입니다. 몇몇의 것들은 다음 기사에서 설명할 것입니다. 여기에서 논의된 내용 중 많은 부분은 예를 제공한 존경하는 동료 Vladimir Spirin 덕분입니다 이 기사는 그의 기술에 대한 나의 해석과 내가 추가 및 제거한 일부 내용을 혼합한 것입니다. Vlad가 코드를 보여주지 않고 접근 방식을 처음 설명했을 ..
[Javscript] 깊은 복사, 얕은 복사 얕은 복사 (Shallow Copy) 참조값이 같다 = 연산자 // 아예 선언을 따로 한 경우 const obj1 = {value : 10}; const newObj1 = {value : 10}; console.log(obj1 === newObj1); // false - 참조값이 다르다 // = 연산자를 이용해 얕은 복사(객체) const obj = {value : 10}; const newObj = obj; console.log(obj === newObj); // true - 참조값이 같다 // = 연산자를 이용해 얕은 복사(배열) const arr = [1, 2, 3] const newArr = arr console.log(arr === newArr) // true - 참조값이 같다 // 참조 값이 ..
[JavaScript] 클린코드 참고자료 - 2 (객체) 객체 Object freeze 1차원적인 것만 가능 OPTIONS 같은 경우는 freeze 되지 않는다. const STATUS = Object.freeze({ PENDING: "PENDING", SUCCESS: "SUCCESS", FAIL: "FAIL", OPTIONS: { GREEN: "GREEN", RED: "RED", }, }); STATUS.PENDING = "P"; console.log(STATUS.PENDING); // PENDING - 변하지않음 STATUS.NEW_PROP = "PP"; console.log(STATUS); // {"PENDING":"PENDING","SUCCESS":"SUCCESS","FAIL":"FAIL"} - 추가되지 않음 console.log(Object.isFro..
[JavaScript] 클린코드 참고자료 - 1 (변수, 배열) Udemy 클린코드 강의를 수강하고 내가 지키지 않고 있거나 익숙해 져야 할 것들 정리 변수 타입 검사 console.log(Object.prototype.toString.call("")); // [object String] console.log(Object.prototype.toString.call(new String(""))); // [object String] console.log(Object.prototype.toString.call(arr)); // [object Array] console.log(Object.prototype.toString.call(func)); // [object Function] console.log(Object.prototype.toString.call(date)); /..
[Javascript] plain DB 데이터로 Tree 쉽게 만들기 Tree를 만드려면 염두해야할 두가지 1. DB 데이터를 어떻게 추출하여 트리를 만들 수 있는 JSON 형태로 만들 것인가 2. 만든 JSON을 어떻게 태그로 추출할 것인가 만들 TREE 구조는 이러하다. 이런 트리를 만드려면 다음과 같이 각각의 노드의 Id와 parentId가 필수적으로 필요하다. const data = [ { id: 56, parentId: 62 }, { id: 81, parentId: 80 }, { id: 74, parentId: null }, { id: 76, parentId: 80 }, { id: 63, parentId: 62 }, { id: 80, parentId: 86 }, { id: 87, parentId: 86 }, { id: 62, parentId: 74 }, { id:..

티스토리툴바