깍돌이의 _WebQA(SQA)

안녕하세요 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) [" ", "깍", "돌", "이", "는", " ", "프", "론", "트", "엔", "드", " "]

총 결과 (추후 작성)

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이 사라져도 문제 없이 동작됨을 확인할수 있습니다.

메모이제이션(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);

	
}