본문 바로가기

자바스크립트 63

[자바스크립트] for in, for of, 그리고 배열과의 관계에 대해서 for...in과 for...of 문은 생김새는 비슷하나 의미적으로 큰 차이가 있다. for...in iterates over the enumerable properties of an object for...of iterates over the property values of objects 영어로 보면 뭔지 잘 모르겠다. 그래서 코드로 찍어보자면 아래와 같이 나온다. let string = "test"; for(let i in string){ console.log(i); // 0, 1, 2, 3 } for(let i of string){ console.log(i); // t, e, s, t } 코드로 보자면 for...in 는 인덱스를 가져오고 for...of는 해당 값을 가져오는 차이점을 보인다. 주.. 2020. 9. 23.
[자바스크립트] 문자열 파싱(split, ...) 그리고 Set에 대해 다음과 같은 문자열이 있습니다. let str = 'string'; 이 문자열을 s,t,r,i,n,g로 분리하고 싶을때 일반적으로 split 메소드를 사용합니다. let str = 'string'; let letter = str.split(''); // ["s", "t", "r", "i", "n", "g"] let letter2 = [...str]; // ["s", "t", "r", "i", "n", "g"] 이제 letter 배열을 이용해 하고싶은 작업을 진행하면 됩니다. 추가로 JavaScript ES6에서 Spread Operator ( ... ) 이 새롭게 추가되었습니다. ...object를 했더니 문자열이 분리되었습니다. 아주 간편하고 좋습니다. 이와 별개로 문자열을 분리했는데 값의 중복이 너무.. 2020. 8. 21.
[자바스크립트] 최적화 #3 문자열 최적화 (+병합, 배열병합) 2020/07/27 - [개발/자바스크립트] - [자바스크립트] 최적화 #1 : for 문을 최적화해보자 2020/07/29 - [개발/자바스크립트] - [자바스크립트] 최적화 #2 : 반복문 최적화(Duff's Device) 이전 글에 이어 오늘은 문자열 최적화 하는 방법에 대해 살펴보겠습니다. 문자열을 병합하는 방법은 많이 있습니다. 대표적으로 +, join, concat 등이 있습니다. 만약 아래와 같은 코드가 있다고 해보겠습니다. str += 'first' + 'second'; 지극히 직관적인 코드입니다. 원래 있는 string (str)에 firstsecond를 추가하는 코드입니다. 이런 식의 코드는 다음과 같이 최적화가 가능합니다. str += 'first'; str += 'second'; 이.. 2020. 8. 12.
[자바스크립트] hex, rgba, rgb, cmky 변환을 위한 color converter모듈 서비스 구현 중에 color의 값을 다양한 포멧으로 바꿔야할 경우가 생깁니다. 이런 경우를 위한 colorConverter를 만들고 간단히 활용하는 방법에 대해 알아보겠습니다. color converter는 다양한 오픈소스로 존재하고 더 다양한 메소드를 지원합니다. 하지만 저는 4개만을 위한 color converter 모듈을 만들고 활용해보려고 합니다. ColorConverter에 4가지 타입에 대한 값을 넣어주면 원하는 타입으로 변경하여 돌려줍니다. 4가지 타입의 color input -> rgba 로 변환 -> getTYPE 으로 원하는 타입으로 output ColorConverter = { getRGB: function (color) { let rgba = this.__change(color); .. 2020. 8. 3.

티스토리툴바