본문 바로가기

개발/자바스크립트 35

[자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴 1. 템플릿 리터럴(Template Literal) 2. spread 연산자 2020/10/08 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #2. Spread 연산자 3. 배열, 함수형 프로그래밍 2020/10/15 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #3. 배열, 함수형 프로그래밍 4. 비구조화 할당 2020/11/20 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당 1. 템플릿 리터럴(Template Literal) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 표현식/문자열 삽입, 태깅 등 다양한 기능을 제공하며 사용법은 작은따옴표('), 큰따옴표(") 대신에 백틱(`)를 사용합니다. 여기서 백.. 2020. 10. 7.
[자바스크립트] 배열 비교하는 3가지 방법 + 형님의 솔루션 배열을 비교하는 방법 코딩을 하다 보면 필연적으로 값을 비교하는 경우가 있습니다. 이번 글에서는 그중에 배열을 비교하는 방법에 대해 논해보고자 합니다. 제가 이때까지 한 코딩을 생각해보니 위의 2가지 방법을 주로 썼습니다. 반복문을 이용해 값을 하나씩 읽어와 비교하는 방법 Array.toString 를 이용하는 문자열로 바꿔 방법 JSON.stringify 를 이용하여 문자열로 바꿔 방법 일반적으로 값을 하나씩 비교하는 것은 아래 2가지 방법보다 시간이 오래 걸릴 테니 2,3번 방법의 속도를 비교해보도록 하겠습니다. == VS === 에 따른 이상한 배열 비교 일단 바꾸기 전에 잠깐 자바스크립트의 비교 문법에 대해 살펴보고 가겠습니다. 첫번째 : == 비교이기 때문에 같은 타입이라 형변환없이 비교합니다... 2020. 9. 27.
[자바스크립트] var, let, const 에 대하여 초창기 자바스크립트의 변수는 var 하나뿐이었습니다. var는 variable의 줄임말로. 이름 그대로 변수를 선언할 때 쓰는 키워드입니다. var a = 0; var b = function() { return console.log('function!'); } 많이 보셨으리라 생각됩니다. 하지만 var는 자바스크립트로 코딩하는데 가끔씩 빡치는 상황을 연출하곤 했습니다. 바로 Hoisting 때문입니다. Hoisting이란 일반적으로 선언된 함수를 코드 상단으로 올리는 것으로 설명하곤 합니다. console.log("1",name); function sayHi() { console.log("2",name); var name = 'Kang'; console.log("3",name); } sayHi(); 이런.. 2020. 9. 27.
[자바스크립트] 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.