자바스크립트의 모든 함수에는 length 프로퍼티가 있습니다.


함수, arr, obj 등에 대한 length에 대해서 작성하도록 하겠습니다.


1. 함수 (Function)


function fncOneparam(param1){};
function fncTwoparam(param1,param2){}
function fncThreeparam(param1,param2,param3){}

console.log("파라미터 1 : ",fncOneparam.length); //  파라미터 1 :  1
console.log("파라미터 2 : ",fncTwoparam.length); //  파라미터 2 :  2
console.log("파라미터 3 : ",fncThreeparam.length);// 파라미터 3 :  3


인자 체크 


function paramCheck(){

	switch(arguments.length){
        case 0: console.info("0개의 파라미터");
				break;
        case 1: console.info("1개의 파라미터");
				break;
        case 2: console.info("2개의 파라미터");
				break;
        case 3: console.info("3개의 파라미터");
				break;
        default:console.info("4개이상의 파라미터");
				break;
    }

}
paramCheck(); // 0개의 파라미터 
paramCheck(1); // 1개의 파라미터 
paramCheck(1,2); // 2개의 파라미터 
paramCheck(1,2,3); // 3개의 파라미터 
paramCheck(1,2,3,4); // 4개이상의 파라미터
paramCheck(1,2,3,4,5); // 4개 이상의 파라미터 


2. 배열 (arr)


var arr = ["a","b","c","d","e","f","g"];

arr.length // 7 


배열 자체로서는 length 하나로 길이를 체크할수 있습니다.


3. 객체 (Object)


객체는 이야기가 조금 나올수 있습니다. 일단  배열안에 객체를넣은 경우와

단순 객체에 대해서 길이 체크를 하겠습니다.

var arrObj = [
{name:"Kim",age:"15"},
{name:"Mim",age:"25"},
{name:"Sim",age:"35"},
{name:"Pim",age:"45"}
];

arrObj.length // 4

// [ ] 로 묶여있기 때문에 단순 배열로 쳐서 length 출력하여도 정상적으로 4가 나옵니다. 

var onlyObj = {name:"test",age:"14",poisiton:"absolute",job:"front",skill:"html"};


console.error(onlyObj.length); // undefined
console.log(Object.keys(onlyObj).length); //  5

// 단순한 obj 의 경우 length 로는 길이를 가져오지 못합니다. 
// Object.keys(obj).length 를 통하여 key 의 개수를 가져올수 있습니다.  length 와 결과 가 같습니다. 



Posted by 깍돌이

자바스크립트의 배열 [ ] 의 경우에는


length 를 통하여 길이를 간단하고 손쉽게 가져올수 있다.


하지만 obj의 경우에는 length 를 지정하게 되면 undefined 가 나타납니다.


obj 의 경우 length 의 길이를 구하기 위해서는


Object.keys를 이용해야 합니다.


 

var objS = {name:"test",ttt:"NewTest",kim:"kim"};

console.log("obj.length : ",objS.length);
console.log("Object.keys Length : ",Object.keys(objS).length);

Object.keys에 대해 간단하게 적어 보면


Object.keys(obj)

obj -> 열거형 고유 속성이 반환될 개체


return Value -> 지정된 개체의 모든 나열형 속성들을 나타내는 문자열 배열

나열형 속성들을 나타낸다고 되어있다.


속성열 나열 테스트


var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo  = 1;
myObj.foo2 = 2;
myObj.foo3 = 3;

console.log(myObj);
console.log(Object.keys(myObj)); 


결과

{foo: 1, foo2: 2, foo3: 3, getFoo: ƒ}

(3) ["foo", "foo2", "foo3"]



Posted by 깍돌이

안녕하세요 JS(JavaScript - 자바스크립트) 에서 사용하는 문자열에 대한 모든 작업 처리를 하나하나 씩 해당 글에 전부 추가할 예정입니다.


해당 String 은 앞뒤로 공백이 하나 있으며  영문과 한글 두개의 String으로 테스트하겠습니다.


String.prototype

모든 String 인스턴스들은 String.prototype을 상속 받습니다.


그렇기 떄문에 String.prototype 오브젝트를 변경하면 그 모든 String 인스턴스들에 영향을 주게되기 됩니다.


기본 Properties

String.prototype.constructor

String.prototype.length

var str = "test String";

에서 


str[N] 을 통하여 접근이 가능하며 

N은 0보다 큰 양의 정수입니다.

위의 기본 Properties는 readOnly 의 속성을 가집니다.


ReadOnly 를 확인하는 테스트 입니다.

보시는바와 같이 concat() 함수는 문자열과 문자열을 잇는 메서드입니다.

a.concat(b) 를 하게되면 a+b가 된 문자열을 리턴하게 되는데 해당 concat은 성능상이 문제가 있어 + 로  a + b 로 사용하는것이 좋다고합니다.

concat에 대하여 function 을 새로 작성시 위와같이 새로 작성된 펑션으로 모든 String 객체들이 동작하는점을 보실수 있습니다.


length 의 경우를 보겠습니다.


length 는 위와같이 readOnly 로 사용되어짐을 보실수 있습니다.


현재까지 String.prototype.에 대해 보았습니다. JavaScript에서 모든 문자열 및 래퍼 들은 

String.prototype 의 상속을 받기 때문에 해당 prototype 에 대해알고 앞으로 작성하면 될것

같습니다.


이제부터는 String.prototype 에 선언되어있는 메서드들에 대한 기능에 대해 알아보겠습니다.


var strO = " gdl is Front-End ";

var strK = " 깍돌이는 프론트엔드 ";



해당 String 으로 테스트 하도록 하겠습니다.

var strO = " gdl is Front-End "; var strK = " 깍돌이는 프론트엔드 ";


[toUpperCase]

해당 문자열을 전부 대문자로 반환합니다. 

strO

" GDL IS FRONT-END "

strK

" 깍돌이는 프론트엔드 "


[toLowerCase]

해당 문자열을 전부 소문자로 반환합니다. 

strO

" gdl is front-end "

strK

" 깍돌이는 프론트엔드 "


-- 2018-04-02


[split]

해당 문자열을 나눈후 배열로 반환 합니다. 

strO

(18) [" ", "g", "d", "l", " ", "i", "s", " ", "F", "r", "o", "n", "t", "-", "E", "n", "d", " "]

strK

(12) [" ", "깍", "돌", "이", "는", " ", "프", "론", "트", "엔", "드", " "]

해당 스플릿에 대해서는 여러가지 방법이 있어서 여러 예를 들도록 하겠습니다.






총 결과 (추후 작성)











'JavaScript > 끄적끄적' 카테고리의 다른 글

2. childNodes, children  (0) 2017.12.04
1. Java Script 반올림  (0) 2017.11.21
Posted by 깍돌이

var temp = {

// do  attribute

}


temp라는  데이터 모델?(객체) 를 통해서 값을 채우고 해당값을 


var resultArr = []; 에


resultArr.push(temp);


식으로 사용하다가 객체 참조 오류가 나는 경우가 생겼습니다.


temp를 수정후 


resultArr.push(temp) 시에는


resultArr [0] = >temp를 가지고있습니다.


다시한번 push 할 경우


resultArr[1] = > temp 0과 1둘다 temp와 같은 곳을 바라보게 됩니다.


수정하면서 push 는 되지만


결국 마지막 수정된 push 값을 resultArr은 전부 가지고있게 되는 것입니다.


예시를 들어 보겠습니다.


해당 예시는 객체 참조 에 대한 예시일뿐입니다.

	

	var temp = {
			"name":"",
			"age":""
	};


	var resultArr = [];

	var response = [
		{"name":"AAA","age":"aa"},
		{"name":"BBB","age":"bb"},
		{"name":"CCC","age":"cc"},
	];



	for(var i=0;i<3;i++)
	{
			temp.name = response[i].name;
			temp.age = response[i].age
			resultArr.push(temp);
	}



해당 결과는?




마지막에 수정되었던 CCC cc값을 전부 가지고있습니다. 모든 배열들이 새로 추가될때마다 같은 temp를 바라보게 되는 상황이 있기 때문입니다.

** push 하는 순간에 (shallow copy (얕은복사) 가 일어나기 때문에 발생하는 현상입니다.)


// 해당 상황에 대한 해결법은

Array.prototype.slice.call 

Array.prototype.slice.apply 

Object.assign 등이 있지만 객체 참조에 대한 이야기로 계속 진행하겠습니다.





gdl blah 가 있습니다. 들어온 숫자만큼 블라 블라를 외치네요


objRef 라는 새로운 객체를 생성 후 속성으로 gdl blah 를 가지게 되면


위의 그림과 같이 같은 함수를 바라보게 됩니다.


아마 해당상태에서는 함수의 동작은 블라를 외치기만 하기 때문에 큰 문제가되어 보이지는 않습니다.





objRef는 그대로 놓은 상태로 gdl의 블라를 제거한다면 위의 그림과 같이


function 은 gdl의 blah 를 바라보고있었지만 해당 연결고리가 끊어지는 바람에  objRef는 바라볼곳이 없어지며 에러를 발생 시킵니다.


해당 객체 참조 이슈가 나타나게 되는데


함수를 작성할 때 함수 Context 를 지정하여 서 해결 할수 있습니다.



각 펑션이 현재 가지고있는 object를 context로 가지기 때문에 앞선 gdl이 사라져도 문제 없이 동작됨을 확인할수 있습니다.



Posted by 깍돌이

메모이제이션(memoization) 


전에 하였던 계산 또는 작업 의 결과 등을 기억하여


같은 결과를 도출 해낼시에 중간 계산 작업을 한번더 하지 않고 결과를 도출해내는 함수를 만


드는 방법이다.


매번 반복해야될 작업들에 대해서 반복하지 않도록 해주기 때문에


성능 향상을 기대해 볼수 있다.


개인적으로는 캐싱방법과 같아 보이며 캐싱을 사용하는 만큼 메모리 사용량도 늘어나기 때문에 유의 해 보여야 한다.


관련 자료를 찾다보니 함수는 함수로서의 기능만 하여야 한다는 이야기가 있지만


이거는 관련 주장으로만 보면 될것 같다.



메모이제이션이 들어간 예제를 한번 보겠다.


관련 예제는 실용성이 있는건 아니고 메모이제이션에 대한 설명으로 간단하게 작성된 예제이며 자바스크립트 함수의 캐싱 방식에 대한 예제입니다.


// 미 적용 코드 1.8~2.5초

function memoization(number)

{

console.time();

var data ='';

for(var i=0;i<number;i++)

{

data+=i;

}

console.timeEnd();

return data;

}


memoization(5000000); // 1.8~ 2.5 초
memoization(5000000); // 1.8~ 2.5 초 



// 메모이제이션 적용 코드


function memoization(number)

console.time();

// 캐시 생산 

if(!memoization.cache)

memoization.cache={};

if(memoization.cache[number]!=null){

console.timeEnd();

return memoization.cache[number];

}

var data='';

for(var i=0;i<number;i++){

data+=i;

}

console.timeEnd();

return memoization.cache[number] = data;

}




memoization(5000000); // 1.5~2.5초
memoization(5000000); // 0.001초


// 미작성 DOM 에 대한 캐싱처리는 따로 작성하겠습니다.

// 메모이제이션 함수 
/*
	Tree구조로 지정된 DOM 에 대해서 재귀 함수를 통한 마지막 element를 가져온다.
	가져온 후에 해당 Node의 뒤로 새로 생성한 동적 Node를 
	기존의 방식으로 Search 해서 추가하는 것과 메모이제이션을 사용하여서 추가하는 
	경우에 대한 시간 체크를 console.time();과 console.timeEnd(); 를 통해서 비교 합니다.
	

*/
function memoization(){
		// 처음 함수 실행시 캐시 공간을 만들기 위한 작업 
		if(!memoization.cache)
					memoization.cache ={};
			
};

function createNode(elem,text)
{
	elem = elem || document.documentElement;
 
    txt = txt || '';
 
    var $t = document.createTextNode(txt);
   
    elem.appendChild($t);
 
    return text(elem);

	
}













Posted by 깍돌이
	browserCheck:function()
		{
			var browser="Unknown Browser";
			var agent = navigator.userAgent.toLowerCase();
		
	if(agent.indexOf("chrome")!=-1){browser="Chrome";}
	else if(agent.indexOf("safari")!=-1){browser="safari";}
	else if(agent.indexOf("firefox")!=-1){browser="firefox";}
	else if(agent.indexOf("msie")!=-1 || agent.indexOf('trident')!=-1){browser="IE"}

	
			
			return browser;
			
		}
Posted by 깍돌이
download :function(filename, text) {
		if(this.testBrowser ==='chrome')
				{
		var element = document.createElement('a');
			  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
			  element.setAttribute('download', filename);
			  element.style.display = 'none';
			  document.body.appendChild(element);
			  element.click();
			  document.body.removeChild(element);
				}
		else // IE Browser log Donwload 
			{
				var a = document.createElement("a"),
			    file = new Blob([text], { type: "text/plain;charset=utf-8"});
				    if (window.navigator.msSaveOrOpenBlob) // IE10+
				        window.navigator.msSaveOrOpenBlob(file, filename);
				    else { // Others
				        var url = URL.createObjectURL(file);
				        a.href = url;
				        a.download = filename;
				        document.body.appendChild(a);
				        a.click();
				        setTimeout(function () {
				            document.body.removeChild(a);
				            window.URL.revokeObjectURL(url);
					        }, 0);
					    }
			}
		},
		


Posted by 깍돌이
// 03일 일때 3이 아니라 03으로 표시하기 위해서 3 에 대한 10의 자리수를 표현하기 위한 함수 
// 150을 5자리의 00150 으로 표시하고싶으면 (150,5) 입력 
function zeroPrint(cnt,digits)
{
	var display = '';
	cnt = cnt.toString();
      var loop = digits-cnt.length;
          // 3 < 5 
       if(cnt.length < digits)
    {
       for(let i=0;i< 5 ;i++)  // 아래에 수정 하여야 하는 부분 기입 
        {
            display +='0';
        }


    }

return display + cnt;
}
 // for 문에 i <5 문에 5를 loop 로 바꿔줘야 한다. 
// 티스토리 버그때문인지 동적값 들어가면 구글 코드가 화면에 나온다..

// var i=0;i<loop;i++ 로 수정 

//yyyy-mm-dd
function Today()
{
	var DateInit = new Date();
	var result =
		zeroPrint(DateInit.getFullYear(),4) +'-'+
		zeroPrint(DateInit.getMonth()+1,2)+'-' +
		zeroPrint(DateInit.getDate(),2) + ' ' +
		zeroPrint(DateInit.getHours(),2) + ':' +
		zeroPrint(DateInit.getMinutes(),2) + ':' + 
		zeroPrint(DateInit.getSeconds(),2);
	

	return result;
}



Posted by 깍돌이

 > 자바스크립트는 함수형 언어이다. 

-> forEach(item,index,array)

 > 자바스크립트의 함수는 1종 객체이다. 


var show = function(){} 와 같이 함수를 변수로 생성 할수 있다.


show.add = functioin(){} 와 같이 마찬가지로 함수를 프로퍼티에 할당할수 있다.


위의 두개를 보고 알수 있듯이 프로퍼티와 메서드를 가질수 있다.


> 함수내의 선언된 타입의 유효범위는 함수 내 전체이다.


변수 참조


show; // ->undefined

var show = 1  // undefined로 올라와짐




show(); // -> undefined

var show = function(){}; // undefined로 


는 show가 함수지만 변수로 생성하였기 때문에 변수의 호출 방식을 따르며


undefined로 올라(호이스팅)온다.


show(); // show

function show() { console.log("show");} // show 함수 전체가 참조 될수있도록 올라간다.(호이스팅)



할당되지 않은 경우의 매개변수는 undefined



function(param,1param2) 로 선언후 



function(1,2,3,4,5) 로 진행시


param1 = 1

param2 = 2


3,4,5는 따로 연결되지 않는다.


function show(){} 후


> show() 시에 내부적으로 2개의 매개변수가 있다.


arguments:  실제로 전달된 인자의 컬렉션


this : 함수 콘텍스트 객체를 참조


function(param1,param2)

function(1,2,3,4,5)


시에 arguments를 사용하면 3,4,5까지 가져다 사용할수 있다.



			
	function hoisting(){

		console.log("a is :",a);
		console.log("b is :",b);
		
		typeof b ==='function' ? console.log("b Call ",b()) : console.error("b is :",b);
		console.log("c is : ",c);
		typeof c ==='function' ? console.log("c Call ",c()) : console.error("c is :",c);
		console.log("c Call ",c());
		
	var a =1;
	var b = function(){console.log("Function b");};
	function c (){
		console.log("Function C");
	}
	}
	hoisting();	


결과 




> apply 나 call 을 사용시 함수 콘텍스트를 변경할수 있다. 

Posted by 깍돌이

함수형 프로그래밍을 부합하게 해주는 for-each 함수  


Array.prototype.forEach()


arr.forEach(callback[, thisArg])

callback

각 요소에 대해 실행할 함수

currentValue

> 배열에서 현재 처리 중인 요소

index

> 배열에서 현재 처리중인 요소의 인덱스

array

> forEach() 가 적용되고있는 배열

thisArg

선택사항, callback 을 실행할때 this로서 사용하는 값


반환값


undefined


** Exception 처리를 하지 않는 한 forEach 를 정지 또는 탈출이 불가능합니다.

(stop,break,continue, 등등) -> 이 행동이 필요한 경우는 forEach 의 잘못된 사용

기본 for문을 사용하길 권장

[참조] developer.mozilla.org


forEach () 의 함수 사용의 예


function logArray(element,index,array){
    		console.log('a[' + index + '] = ' + element);
}
[2,5, , 9].forEach(logArray);



결과


a[0] = 2

a[1] = 5

a[3] = 9


this arg를 사용시 


function Counter(){
	this.sum = 0;
	this.count = 0;
}
Counter.prototype.add = function(array){
		array.forEach(function(entry){
			this.sum += entry;
			++this.count;
        },this);
    ///   ^ this 확인
}; // Counter.prototype.add = function ... 

var obj = new Counter();
obj.add([2,5,9]);

/*
 forEach 함수의 function(entry) 옆 thisarg부분을 Counter의 this를 넘김으로써
Counter Object의 add 함수를 추가하면서 object자체의 sum과 count값을 접근하여서 
수정할수 있게 된다.  이와같은 this를 넘겨서 사용도 가능 
*/

결과

obj.count

3

obj.sum

16



Simple for-each 작성



// sample function forEach
function forEach_(list,callback)
{
	for (var n=0; n< list.length;n++)
    {
		callback.call(list[n],n);
    }
}
/*
	list :
		array 형태의 배열을 파라미터로 받음
	callback :
		첫번째 파라미터로 들어온 list를 순회하여서 해당 함수(callback)으로 던져준다.
	
	
	call 은
	(1) function, (2) ...... 의 형태를 띄며
	
	1. array_ 가 첫번째 파라미터로 들어간다. list 과 매핑

	2.	for문을 통해서 list 의 길이만큼 순회를 한다. 

	3.	list[n] 값과 index 값을 callback 에 넘긴다. 동시에 call을 사용하여서 넘김

	//** call이 없을 경우에 list[n] ,index가 넘어가면 callback function 에서 index에 array[n] 인 값이 들어갈것이다.index가 아니라
	
	call을 같이 사용하였기 때문에 들어온 array 에 대한 this 를 가지고 
	
	두번째 n 을 파라미터로넘기기 때문에 n = index로 넘어가고 
	
	this는 넘기는 list[n] 자체가 들어간다.

	해당 코드를 종료 보면
	
	
*/
//  smaple Array
	var array_ = ['First','Second','Third','Forth','Fifth'];
forEach_(array_,function(index){
	console.log(this);
this == array_[index] ? console.log(array_[index]) : console.error("not Exist");
});



결과




this는 list[n]


index는 n 이 들어감이 확인된다. 'First', 'Second'가 나온이유는 array_[index]로 출력하였기 때문 


callback 함수 만드는법을 따라 보았다. 아 물론 스터디이기 때문에 책을 보고 



Posted by 깍돌이
이전버튼 1 2 3 이전버튼

블로그 이미지
QA를 업으로 삼고 있습니다.
깍돌이

태그목록

Yesterday
Today
Total

달력

 « |  » 2024.5
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함