📜 Js
[Javascript] for...in 보다는 Object.keys 사용하기
let test = { name: "stir", age: 20, }; for (let value in test) { console.log(value); } 일반적으로 object에서 key 값을 꺼내기 위해 for...in을 사용할 수 있습니다. 하지만 for...in을 array에서 잘못 사용하는 경우도 있는데요. 위의 Stackoverflow 글을 참고하면 문제는 아래와 같습니다. 문제 존재 하지 않는 배열 요소를 무시해버린다 var a = []; a[5] = 5; for (var x in a) { console.log(x); } 위의 코드를 수행해보면 요소 비어있는 요소는 undefined로 출력되어야 하는데 건너뛰어버립니다. 예상치 못한 작동을 할 수 있기 때문에 올바르지 않은 사용이라고 볼 수 ..
자바스크립트 배우기 좋은 사이트
이 글에서는 리디아(Lydia)라는 사람의 Github과 Blog를 소개한다. 얼마나 퀄리티가 좋으면 특정 인물의 깃허브와 블로그를 소개하는지 직접보면 알 수 있다. 💡 자바스크립트 퀴즈 GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations A long list of (advanced) JavaScript questions, and their explanations :sparkles: - GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and ..
jQuery Template과 jsRender로 만드는 동적 HTML 생성
기존 동적 HTML 생성에 대한 문제점 Ajax로 가져온 데이터에 대하여 html을 동적으로 그려주기 위해서는 일반적으로 문자를 더해서 html에 요소에 끼워 넣는 방식을 사용한다. 아래의 코드를 봐보자. 와 요소를 strHtml에 더해서 사용한다. var strHtml = ""; $.ajax({ type: 'POST', success: function (data) { strHtml += '' + data.name + ''; strHtml += ''; $("#test").html(strHtml); }, error: function (request, textStatus, errorThrown) { } }); 이러한 방식의 문제점은 html의 요소를 문자로 다루기 때문에 홑따옴표와 쌍따옴표가 너저분하게 깔려..
[JavaScript] 변수에 대한 불변성 정리(const, defineProperty)
Const 변수를 불변하게 만들기 위해서 대표적으로 사용되는 것은 const(상수)다. const name = 'loose'; console.log(name); // loose 하지만 const에 아래와 같이 객체 형태의 값을 넣으면 객체 내부의 속성은 변경이 가능해진다. const x = {}; x.foo = 'bar'; console.log(x); // {foo : 'bar'} x.foo = 'bar2'; console.log(x); // {foo : 'bar2'} x = {}; // 불가능 위와같이 x에 foo라는 속성을 추가하거나 수정하는 것은 가능하다. 하지만 x를 재정의 하는 것은 불가능하다. 이것은 자바에서 Final과 같다. 자바에서도 Final을 쓰면 변수를 상수로 만들 수 있지만 Fin..