http://regularmotion.kr/category/javascript/page/5/
-
This is Slide 1 Title
This is slide 1 description. Go to Edit HTML and replace these sentences with your own words. This is a Blogger template by Lasantha - PremiumBloggerTemplates.com...
-
This is Slide 2 Title
This is slide 2 description. Go to Edit HTML and replace these sentences with your own words. This is a Blogger template by Lasantha - PremiumBloggerTemplates.com...
-
This is Slide 3 Title
This is slide 3 description. Go to Edit HTML and replace these sentences with your own words. This is a Blogger template by Lasantha - PremiumBloggerTemplates.com...
2018년 4월 26일 목요일
javascript 간단한 switch 문은 객체사전으로 변경
http://regularmotion.kr/javascript-%EA%B0%9D%EC%B2%B4-%EC%82%AC%EC%A0%84-%EC%82%AC%EC%9A%A9%EB%B2%95/
JAVASCRIPT 효율적인 방법 3가지, 이벤트위임-클로저-디바운싱
https://joshua1988.github.io/web-development/javascript/javascript-interview-3questions/
이벤트리스너-클로저-디바운싱
이벤트리스너-클로저-디바운싱
2018년 3월 19일 월요일
Chrome 디비거 더 잘사용하기
https://subicura.com/2018/02/14/javascript-debugging.html#%EB%94%94%EB%B2%84%EA%B9%85%EC%9D%B4%EB%9E%80
2018년 3월 13일 화요일
자바스크립트의 Console 관련 메소드 유용함.
https://qiita.com/ysm001/items/9abcacf74ead8a871540#consolegroup--consolegroupcollapsed--consolegroupend
2018년 2월 11일 일요일
2018년 2월 10일 토요일
JAVASCRIPT 유용한 함수들 -- 잘까먹거나 안썼던 것들
-Array.every(function(value){
return conditional;
});
: 모든 항목이 true 여야만 결과가 true 가된다.조건의 하나라도 실패하면 실패가된다.
-->ex
var array = [1, 3, 5, 7, 9];
array.every(function(i) {
return i % 2 === 1;
}); // true
array.every(function(i) {
return i < 9;
}); // false
-Array.some(function(value){
return conditional;
});
: 한개의 항목이라도 조건에서 true 면 성공이다. 마치 sql 의 in_array 비슷한기능
return conditional;
});
: 모든 항목이 true 여야만 결과가 true 가된다.조건의 하나라도 실패하면 실패가된다.
-->ex
var array = [1, 3, 5, 7, 9];
array.every(function(i) {
return i % 2 === 1;
}); // true
array.every(function(i) {
return i < 9;
}); // false
-Array.some(function(value){
return conditional;
});
: 한개의 항목이라도 조건에서 true 면 성공이다. 마치 sql 의 in_array 비슷한기능
-->ex
array.some(function(i) {
return i === 9;
}); // true
-Array.isArray(값)
: 값이 배열인지 확인, 값이 없으면 에러..
-함수안에 객체함수를 만드는 것보다 prototype 을 만드는게 메모리에 효과적이다. 함수안의 객체는 new 로 새로 만들떄마다 각 함수마다 객체함수를 들고다니지만, prototype 은 함수자체에 포함되어 메모리를 아낄수 있다.
function MyMethod(arg1, arg2){
this.arg1 = arg1
this.arg2 = arg2
this.innerMethod = function() {
return this.arg1 + this.arg2;
}
}
보다는
function MyMethod(arg1, arg2){
this.arg1 = arg1
this.arg2 = arg2
}
MyMethod.prototype.innerMethod= function() {
return this.arg1 + this.arg2;
}
-JAVASCRIPT 의 상속방법은 Object.create.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create
-Array.isArray(값)
: 값이 배열인지 확인, 값이 없으면 에러..
-->ex
Array.isArray(array1)// true
-함수안에 객체함수를 만드는 것보다 prototype 을 만드는게 메모리에 효과적이다. 함수안의 객체는 new 로 새로 만들떄마다 각 함수마다 객체함수를 들고다니지만, prototype 은 함수자체에 포함되어 메모리를 아낄수 있다.
function MyMethod(arg1, arg2){
this.arg1 = arg1
this.arg2 = arg2
this.innerMethod = function() {
return this.arg1 + this.arg2;
}
}
보다는
function MyMethod(arg1, arg2){
this.arg1 = arg1
this.arg2 = arg2
}
MyMethod.prototype.innerMethod= function() {
return this.arg1 + this.arg2;
}
-JAVASCRIPT 의 상속방법은 Object.create.
단일상속
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
멀티상속
mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin
FRONT-END omposition over inheritance
기존의 composition 패턴을 javascript 에서는 아래처럼 응용한다고 하네요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
참고 후...
http://seokjun.kr/composition-over-inheritance/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
참고 후...
http://seokjun.kr/composition-over-inheritance/
2015년 12월 10일 목요일
2015년 11월 19일 목요일
Chrome 에서 이벤트 모니터 명령
http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer
monitorEvents($0) 모니터 On
unmonitorEvents($0) 2015년 11월 8일 일요일
2015년 11월 3일 화요일
JAVASCRIPT 성능 최적화
- 스크립트는 body 최하단
- 자주쓰는 스코프 외부변수는 지연변수에 복사해서 쓰면 속도가 개선된다.
- for .. in 은 느리다.
- 대량 루프일때 반복횟수 줄이기 Duff's device , 제프 그린버그의 방법참고.
- ..대략 아는내용
이펙티브 자바스크립트
이책은 사야됨 .정말로. 혼또우니~
- == 비교는 절대금물, 자바스크립트는 지 맘대로 형변환을 하기때문에 == 비교는 절대 안됨. ===권장
- 전역변수는 아예 사용하지마라. 단 플랫폼에 대한 프로퍼티를 참고 할때만 전역변수에 접근해라.
- 지역변수 선언시 var 를 잊지마라. 잊는순간 전역변수가 될수도 있다.
- Closure 는 이해하기 어렵지만 익숙해지면 좀더 유연한 프로그래밍이 가능하다.별도 게시물 준비.
- 함수내에서 모든 변수는 호이스트 된다. !!
- 지연변수 스코프(private 한 변수)를 만들기 위해서는 즉시함수를 이용하면된다.
함수 또는 객체내에서 내부함수와 클로져를 이용할때, 변수의 호이스트로 인해서 변수에 아무리 변화를 줘도 최종값만 나오는 경우가 있다.
따라서 이때는 즉시실행함수로 wrapping 시킨다음, 내부변수에 재할당을 통해서 지역변수 스코프를 만들수 있다.
function A(arg1){ for(i=0;i<arg1.length,i++){ result[i]=function( arg1[i]; ); } }
위의 코드에서 i 는 항상 호이스트 되기 떄문에 result[i] 는 항상 arg1의 마지막 값만 저장한다.
따라서 (function(){ var j=i; result[i]=function( arg1[j]; )})(); 로 변경해야한다.IIFE?? - 고차함수에 익숙해 져라. 공통된 로직은 고차함수로 리펙토링을 고려해 보자
- 절대! argments 객체를 수정하지 마라.
- 변수에 argments 의 참조를 저장해라.
- 비공개 데이터를 저장/보전하기위해서 클로져를 사용해라.
- 인스턴스 상태는 인스턴스 객체에 저장하라. 즉, 프로토타입에 변수나 배열등의 값을 배치하지마라. 프로토타입에는 프로토타입을 이용하는 객체들의 공유값만을 저장해라.
- 따라서 하위 클래스(프로토타입)에서 상위(인스턴스)의 생성자를 호출할 필요가 있다.
- 표준 클래스는 상속하지마라.
- 순서사 정해진 컬렉션에는 딕셔너리 대신 배열을 사용해라(딕셔너리는 hash 배열이기 때문에 for in 으로 불러내도 순서가 보장되지 못한다.)
- 배열을 반복할때 for...in 으로 하면 key 를 스트링으로 인식하여 순서가 보장되지 않으므로 for 반복문을 사용하라
- 순서가 상관없다면 반복메서드( object.forEach, map, filter) 등을 for (i......n) 대신에 이용하면 코드도 짧아지고 가독성도 좋아진다.
- arguments 는 array 를 상송받지 않기 때문에 forEach 를 사용할수 없다. -> call 을 사용한다.
- 또한 dom object 또한 array 를 상속받지 못한다. -> call 을 사용한다.
- 배열 생성자 new 대신에 배열리터럴에 그냥 대입해서 배열을 만들자. 굳이 배열에 new 를 쓸필요는 없다는 것이다.
2015년 10월 31일 토요일
객체지향 자바스클립트의 원리
1장 원시타입과 참조타입
: 자바스크립트는 일급함수이다.
원시타입 : Boolean,Null,String,Number,Undefiend
참조타입 : 객체를 말함. 객체는 참조를 한다음 반드시 null 해주는게 좋다.
-프로퍼티의 접근 아래와 같은 경우도 가능하다.
var array = [];
var method = "push";
array[method](12345); <- 즉 array.push(12345) 와 같다. !!!!
-객체의 확인은 instansof 와 typeof 로 가능하다.
-원시래퍼 타입 : 자바스크립트엔진은 사실 간단한문자열 대입시에도 string 을 생성후 널처리 하기 때문에 스트링에 함수로 각종 처리를 할수 있다.
2.함수
:자바스크립트에서 함수는 객체다.
함수는 함수 선언(function delcaration) 과 함수표현식(function expresion) 이 있다.
함수선언: 은 hoist 되기 때문에 자바스크립트 엔진에서 함수를 최상단으로 끌어 올려 지게 된다.
result = add (1,2); // 아래 add 함수가 자바스크립트엔진에 의해 상단으로 올려지기 때문에 실행가능
function add( num1, num2){
return num1+num2;
}
함수표현식:
result=add(1,2); //이건 안됨. 함수표현식은 선언과 동시에 정의되기때문에 호이스트되지않는다.
var add = function add(num1,num2){
return num1+num2;
}
오버로딩:
오버로딩은 기본적으로 지원하지 않는다.
this :
this는 호출한 함수의 스코프를 가진다. 따라서 객체내에서 불려진 함수내에서의 this 는 호출한 함수이지만, wrapping 되지 않고 호출되는 함수는 그냥 전역이 this 이다.
call 메쏘드:
this 는 임의로 조작해서 전혀 다른 객체를 this 로 전달할수있는다.
실행한함수또는객체.call(this 또는 다른 객체를 this 로 지정,args);
즉, helloWorld.call(this,"happy"); 라고 하면 helloworld 함수를 호출하되, 함수내에서 this 를 호출하면 전역 this 를 불려지게 하고, happy 라는 인자를 전달한다 라는 것고 같다.
helloWorld.call(anotherWorld,"avatar"); 라고 하면 helloworld 함수내에서 this 는 anotherworld 가 되고, 인자로 아바타를 전달하고 실행한다.
apply 메쏘드:
call 과 같지만, 두번째 인수로 배열,객체등을 전달할수 있다.
bind 메쏘드:
this 를 아예 고정시켜준다.
3.객체의 이해
: 자바스크립트는 객체가 동적이기 때문에 제약이 없지만 이런점 때문에, 다소 소스 정리가 쉽지않고 이해하기가 난해한 부분이있다.
객체는 거의 key : value 식으로 구성된다.
-프로퍼티
.(점) 속성은 자바스크립에서는 언제든지 선언하여 바로 사용할수 있다. 이때 자바스크립트는 객체에 put 이라는 내부 메쏘드를 호출한다. 그리고 값을 할당하면 바로 set 이 호출되어 새로운 값으로 교체한다.
객체에 특정 프로퍼티가 있는지 체크하려면 객체에 속성이 있는지 if( "name" in person); 검증한다. 이때는 프로퍼티의 값을 검증하지는 않고 속성만 판탄하기 때문에 성능향상에 좋다.
다만 객체가 생성될때 기본적으로 자바스크립에서 부가적인 속성을 추가하기 때문에 , 사용자가 만든 고유의 속성인지 확인해 볼필요가 있을때는 .hasOwnProperty("name") 라고 해야 한다.
프로퍼티는 delete 연산자르 삭제해야 한다. 중요하다.
객체의 프로퍼티가 어떤게 있는지 보고 싶을때는
열거가능한 프로퍼티.즉 tostring 따위도 포함할경우 for( property in object) 식
고유의 프로퍼티 (var props = Object.keys(object); for(var i=0;i < props.length;i++)) 으로 한다.
-프로퍼티의 종류
Data property 와 Accessor Property 로 나뉜다.
Data propery : put 메쏘드의 기본동작으로 생성된다. 값을 지정한다.
Accessor propety : get set 을 별도로 정의한다.
프로퍼티의 속성은 Object.defienProperty("객체","프로퍼티이름",프로퍼티 서술자) 로 바꿀수 있다.
Data property 는 value, writeable 속성을 추가로 바꿀수있다.
Object.defineProperty(person1,"name",{
value : "v1",
enumerable : true,
configurable:true,
writeable:true});
Data accessor property 는 get , set 을 변경할수 있다.
defienProperties 로 하면 여러개의 프로퍼티를 한번에 할수 있다.
프로퍼티 속성을 가져올때는 Object.getOwnPropertyDescriptor() 를 사용한다.
객체의 수정방지
객체 속성중 Extensible 을 false 로 하면 객체를 수정할수 없다.
Object.preventExtensions() 를 사용하면, 확장불가능한 객체로 만들수 있다.(엄격한 모드)
객체의 봉인
Object.seal()메쏘드를 하면 봉인할수 있다. 추가로 프로퍼티 추가나 제거는 불가능 하지만, 읽기나 쓰기는 가능하다.
객체의 동결
읽기 전용으로 만든다. Object.freeze(); 일종의 객체에 대한 스냅샷을 만든다고 생각하면 된다.
4.생성자와 프로트타입
생성자는 그냥 인자를 이용하면 됨.
프로토타입
:어떤 함수를 이용하여 여러번 호출할때, 함수안에 정의된 내부함수객체를 별도의 빼내어 낸게 프로토타입이다.
Object.prototype 식으로 하며 ,보통 Object.prototype.myfunc = function(){};
더 나은 방법으로는
Object.prototype = {
whois : Person,
myfunc : function(){},
sayhello : function(){}
};
내장객체의 프로토타입
:내장객체의 프로토타입에 고유의 기능을 추가하면 꽤 유용한 경우가 있다.
Array.prototype.sum = fuction(){ return 1+1); array.sum();
5. 상속
6.객체 패턴
자바스크립트는 모두 public 이다.
따라서 Closure 를 이용해서 private 속성값을 만든다.
: 자바스크립트는 일급함수이다.
원시타입 : Boolean,Null,String,Number,Undefiend
참조타입 : 객체를 말함. 객체는 참조를 한다음 반드시 null 해주는게 좋다.
-프로퍼티의 접근 아래와 같은 경우도 가능하다.
var array = [];
var method = "push";
array[method](12345); <- 즉 array.push(12345) 와 같다. !!!!
-객체의 확인은 instansof 와 typeof 로 가능하다.
-원시래퍼 타입 : 자바스크립트엔진은 사실 간단한문자열 대입시에도 string 을 생성후 널처리 하기 때문에 스트링에 함수로 각종 처리를 할수 있다.
2.함수
:자바스크립트에서 함수는 객체다.
함수는 함수 선언(function delcaration) 과 함수표현식(function expresion) 이 있다.
함수선언: 은 hoist 되기 때문에 자바스크립트 엔진에서 함수를 최상단으로 끌어 올려 지게 된다.
result = add (1,2); // 아래 add 함수가 자바스크립트엔진에 의해 상단으로 올려지기 때문에 실행가능
function add( num1, num2){
return num1+num2;
}
함수표현식:
result=add(1,2); //이건 안됨. 함수표현식은 선언과 동시에 정의되기때문에 호이스트되지않는다.
var add = function add(num1,num2){
return num1+num2;
}
오버로딩:
오버로딩은 기본적으로 지원하지 않는다.
this :
this는 호출한 함수의 스코프를 가진다. 따라서 객체내에서 불려진 함수내에서의 this 는 호출한 함수이지만, wrapping 되지 않고 호출되는 함수는 그냥 전역이 this 이다.
call 메쏘드:
this 는 임의로 조작해서 전혀 다른 객체를 this 로 전달할수있는다.
실행한함수또는객체.call(this 또는 다른 객체를 this 로 지정,args);
즉, helloWorld.call(this,"happy"); 라고 하면 helloworld 함수를 호출하되, 함수내에서 this 를 호출하면 전역 this 를 불려지게 하고, happy 라는 인자를 전달한다 라는 것고 같다.
helloWorld.call(anotherWorld,"avatar"); 라고 하면 helloworld 함수내에서 this 는 anotherworld 가 되고, 인자로 아바타를 전달하고 실행한다.
apply 메쏘드:
call 과 같지만, 두번째 인수로 배열,객체등을 전달할수 있다.
bind 메쏘드:
this 를 아예 고정시켜준다.
3.객체의 이해
: 자바스크립트는 객체가 동적이기 때문에 제약이 없지만 이런점 때문에, 다소 소스 정리가 쉽지않고 이해하기가 난해한 부분이있다.
객체는 거의 key : value 식으로 구성된다.
-프로퍼티
.(점) 속성은 자바스크립에서는 언제든지 선언하여 바로 사용할수 있다. 이때 자바스크립트는 객체에 put 이라는 내부 메쏘드를 호출한다. 그리고 값을 할당하면 바로 set 이 호출되어 새로운 값으로 교체한다.
객체에 특정 프로퍼티가 있는지 체크하려면 객체에 속성이 있는지 if( "name" in person); 검증한다. 이때는 프로퍼티의 값을 검증하지는 않고 속성만 판탄하기 때문에 성능향상에 좋다.
다만 객체가 생성될때 기본적으로 자바스크립에서 부가적인 속성을 추가하기 때문에 , 사용자가 만든 고유의 속성인지 확인해 볼필요가 있을때는 .hasOwnProperty("name") 라고 해야 한다.
프로퍼티는 delete 연산자르 삭제해야 한다. 중요하다.
객체의 프로퍼티가 어떤게 있는지 보고 싶을때는
열거가능한 프로퍼티.즉 tostring 따위도 포함할경우 for( property in object) 식
고유의 프로퍼티 (var props = Object.keys(object); for(var i=0;i < props.length;i++)) 으로 한다.
-프로퍼티의 종류
Data property 와 Accessor Property 로 나뉜다.
Data propery : put 메쏘드의 기본동작으로 생성된다. 값을 지정한다.
Accessor propety : get set 을 별도로 정의한다.
프로퍼티의 속성은 Object.defienProperty("객체","프로퍼티이름",프로퍼티 서술자) 로 바꿀수 있다.
Data property 는 value, writeable 속성을 추가로 바꿀수있다.
Object.defineProperty(person1,"name",{
value : "v1",
enumerable : true,
configurable:true,
writeable:true});
Data accessor property 는 get , set 을 변경할수 있다.
defienProperties 로 하면 여러개의 프로퍼티를 한번에 할수 있다.
프로퍼티 속성을 가져올때는 Object.getOwnPropertyDescriptor() 를 사용한다.
객체의 수정방지
객체 속성중 Extensible 을 false 로 하면 객체를 수정할수 없다.
Object.preventExtensions() 를 사용하면, 확장불가능한 객체로 만들수 있다.(엄격한 모드)
객체의 봉인
Object.seal()메쏘드를 하면 봉인할수 있다. 추가로 프로퍼티 추가나 제거는 불가능 하지만, 읽기나 쓰기는 가능하다.
객체의 동결
읽기 전용으로 만든다. Object.freeze(); 일종의 객체에 대한 스냅샷을 만든다고 생각하면 된다.
4.생성자와 프로트타입
생성자는 그냥 인자를 이용하면 됨.
프로토타입
:어떤 함수를 이용하여 여러번 호출할때, 함수안에 정의된 내부함수객체를 별도의 빼내어 낸게 프로토타입이다.
Object.prototype 식으로 하며 ,보통 Object.prototype.myfunc = function(){};
더 나은 방법으로는
Object.prototype = {
whois : Person,
myfunc : function(){},
sayhello : function(){}
};
내장객체의 프로토타입
:내장객체의 프로토타입에 고유의 기능을 추가하면 꽤 유용한 경우가 있다.
Array.prototype.sum = fuction(){ return 1+1); array.sum();
5. 상속
6.객체 패턴
자바스크립트는 모두 public 이다.
따라서 Closure 를 이용해서 private 속성값을 만든다.
2015년 9월 9일 수요일
2015년 5월 8일 금요일
대학생을 위한 웹개발 공부 체크리스트?
http://blog.daum.net/_blog/BlogTypeView.do?blogid=0PPwB&articleno=1437&categoryId=19®dt=20141216143555
2015년 3월 1일 일요일
커링 함수에 bind 사용하기
bind 는 기존의 함수나 메소드 에 영향을 주지않고 임시로 추가적인 함수를 만들어서 기존의 함수에 적용 을 시킨다.
function SimpleURL(protocol, domain, path){
return protocol + "://"+domain+"/"+path;
}
1.ㅂㅏ인드를 ㅅㅏ용하지 않는 일반적인 방법
var urls=paths.map(function(path){
return SimpleURL("http",sitedomain,path);
});
2.바인드를 사용 하여 심플 하게 변경
기 존의 함수에 bind(this, arg,arg) 식으로 선언하면, arg 개수 를 가진 무명의 함수를 생성하여 이를 리 턴하고 다시 원래의 함수 를 호출(위임)하여 준다.
아래 예제에서는 simpleURL 에서는 this 등이 사용되지 않기 때문에 null 을 첫번째 인자로,
protocol과 domain 을 두번쨰 인자로 취하여 bind 가 새로운 함수를 생성한다음 함수리턴을 하고,
리턴된 함수 의 마지막에 path(map 에 의해 추출된 변수..여기서는 무명변수) 를 인자로 붙여 simpleurl 을 실행한다.
var urls=paths.map(SimpleURL.bind(null,"http",sitedomain));
function SimpleURL(protocol, domain, path){
return protocol + "://"+domain+"/"+path;
}
1.ㅂㅏ인드를 ㅅㅏ용하지 않는 일반적인 방법
var urls=paths.map(function(path){
return SimpleURL("http",sitedomain,path);
});
2.바인드를 사용 하여 심플 하게 변경
기 존의 함수에 bind(this, arg,arg) 식으로 선언하면, arg 개수 를 가진 무명의 함수를 생성하여 이를 리 턴하고 다시 원래의 함수 를 호출(위임)하여 준다.
아래 예제에서는 simpleURL 에서는 this 등이 사용되지 않기 때문에 null 을 첫번째 인자로,
protocol과 domain 을 두번쨰 인자로 취하여 bind 가 새로운 함수를 생성한다음 함수리턴을 하고,
리턴된 함수 의 마지막에 path(map 에 의해 추출된 변수..여기서는 무명변수) 를 인자로 붙여 simpleurl 을 실행한다.
var urls=paths.map(SimpleURL.bind(null,"http",sitedomain));
