'javascript'에 해당되는 글 24건

안녕하세요. 제임스 입니다. 

JSON.stringify ( value[, replacer[, space]] ) 

위 함수를 이용하여 문자열의 가독성을 높이는 방법을 알아 보겠습니다. 

var lottoDrawNum 이라는 변수값이 JSON string 입니다. 

변수명을 보시면 아시겠지만 나눔로또 (805회) 당첨 번호 정보 입니다. 

이를 위와 같이 호출 하게 되면 결과는 아래와 같이 나옵니다. 

JSON.stringify(a) = 

{"bnusNo":42,"firstAccumamnt":17064247876,"firstWinamnt":4266061969,"returnValue":"success","totSellamnt":73065981000,"drwtNo3":13,"drwtNo2":12,"drwtNo1":3,"drwtNo6":32,"drwtNo5":31,"drwtNo4":18,"drwNoDate":"2018-05-05","drwNo":805,"firstPrzwnerCo":4}

가독성이 좀 떨어집니다.

만약 정말... 엄청 긴 json 값이 있다면... 상상하기도 싫을 겁니다.

가독성을 뛰어나게 해줄 수 있는 방법이 있습니다. 

바로 JSON.stringify() 의 replace 와 space 파라미터를 활용 하는 방법입니다. 

더 정확하게는 replace 는 사용하지 않고 space 를 잘 이용하는 방법입니다. 

replacer 에 null (사용하지 않습니다) 을 space 에 2를 입력했습니다. 

space 파라미터에 숫자값이 들어 갈 경우 최종 문자열의 간격을 제어 할 수 있습니다. 

2를 입력 함으로써 각각의 문자열 (key:value, 또는 {, } 등등)의 간격을 스페이스 2칸으로 지정 했습니다. 

위 코드를 실행 시키면 아래와 같은 결과가 나옵니다. 

JSON.stringify(a, null, 2) = 

{

  "bnusNo": 42,

  "firstAccumamnt": 17064247876,

  "firstWinamnt": 4266061969,

  "returnValue": "success",

  "totSellamnt": 73065981000,

  "drwtNo3": 13,

  "drwtNo2": 12,

  "drwtNo1": 3,

  "drwtNo6": 32,

  "drwtNo5": 31,

  "drwtNo4": 18,

  "drwNoDate": "2018-05-05",

  "drwNo": 805,

  "firstPrzwnerCo": 4

}

가독성이 정말 좋아 졌습니다. 

첫번째 "{" 이후 줄바꿈이 일어나고 첫번째 key:value 값이 프린트 되는데 두칸의 스페이스 공간이 생겼습니다. (직접 코드 작성해서 테스트 해보세요 ^^)

space 에 숫자뿐만 아니라 TAB 효과를 주는 문자를 사용 할 수 있습니다. 

이미 많이 알고 있는 TAB 효과를 주는 문자는 !!! "\t" 입니다. 샘플 코드 보실까요?

앞선 코드의 2 대신에 '\t' 가 들어 갔습니다. 

실행 결과는 아래와 같습니다. 

JSON.stringify(a, null, \t) = 

{

"bnusNo": 42,

"firstAccumamnt": 17064247876,

"firstWinamnt": 4266061969,

"returnValue": "success",

"totSellamnt": 73065981000,

"drwtNo3": 13,

"drwtNo2": 12,

"drwtNo1": 3,

"drwtNo6": 32,

"drwtNo5": 31,

"drwtNo4": 18,

"drwNoDate": "2018-05-05",

"drwNo": 805,

"firstPrzwnerCo": 4

}

문자열간 간격이 확실히 넓어 졌습니다. 실제로 위 코드를 실행 해보신 후 결과 값에 마우스 커서를 가져가 보면 탭 공간으로 한칸만 잡혀 있습니다. 

JSON 문자열 가독성 높이기 JSON.stringify() 함수의 세번째 인자 "space" 부분만 잘 사용하면 간단하게 할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이전 포스팅에서 JSON.stringify() 에 대해 알아 봤는데요. 이번에는 반대의 역할을 하는 JSON 의 parse() 함수에 대해 알아 보겠습니다. 

JSON.parse() 함수는 JSON 문자열을 javascript 객체로 변환합니다. 

Syntax

Parameters

text

javascript 객체로 변환하고자 하는 JSON 문자열 

reviver (Optional - 선택적)

만약 함수라면, 파싱을 통해 원래 생성 된 값이 반환되기 전에 어떻게 변환 될지를 지정

Examples

실행 결과는 아래와 같습니다. 

{} 

실행 결과는 아래와 같습니다. 

true

true

보기에는 동일해 보이지만 데이타 형이 다릅니다. 

첫번째 값은 boolean 값인 true

두번째 값은 String 값인 "true" 입니다. 

실행 결과는 아래와 같습니다. 

[1, 5, "false"]

[1, 5, false]

첫번째 값은 배열에 문자열 false 가 

두번째 값은 배열에 boolean 값 false 가 리턴 되었습니다. 

실행 결과는 아래와 같습니다. 

string test

Uncaught SyntaxError: Unexpected token s in JSON at position 0

첫번째는 문자열 string test 를 리턴 했습니다. 

하지만 두번째는 오류가 발생 했습니다. position 0 에 위치한 값이 string test 의 첫번째 문자 s 입니다. 

뭐가 문제일까요? 

문자열을 나타내고자 한다면 " " (double quotation marks) 로 감싸야 합니다. 그런데 " " 없이 string test 라는 문장을 입력 했기 때문에 문자열로 인식하지 못해 오류가 발생 한 것입니다. 

이런 실수 하지 않도록 조심해야 겠죠? ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

웹서버와 클라이언트 사이에서 통신을 하기 위해서는 문자열을 이용합니다. 클라이언트에서 사용하는 javascript 객체를 웹서버로 보내기 위해 많이 사용하는 것이 JSON 입니다. 

(앞선 포스팅 내용을 간단히 정리 했습니다)

JSON 의 stringify() 라는 함수를 이용하여 javascript 객체를 JSON 문자열로 변환할 수 있습니다. 

Syntax

stringify 는 사전적 의미로는 아래와 같습니다. 

• (computing) To convert to a textual representation.

"(컴퓨터 언어로) 텍스트 표현으로 변환한다"는 의미가 됩니다. 

즉, 여기서는 입력받은 값을 JSON 문자열로 변환한다는 의미가 됩니다. (한글 번역은 없습니다)

Parameters

value

JSON string (문자열)로 변환하고자 하는 javasript 객체

replacer (Optional - 선택적)

문자열화 프로세스의 동작을 변경하는 함수 또는 JSON 문자열에 포함될 객체의 속성을 선택 / 필터링하기 위한 화이트리스트 역할을 하는 String 및 Number 객체의 배열

이 값이 null 이거나 제공되지 않을 경우 객체의 모든 속성이 결과 JSON 문자열에 포함

space (Optional - 선택적)

가독성을 위해 출력 JSON 문자열에 공백을 삽입하는데 사용되는 String 또는 Number 객체

• Number - 공백분자로 사용할 공백 문자 수를 의미함. 최대 10, 10 이상의 값일 경우 10으로 적용
• String - 문자열이 공백으로 사용됨

space 값이 null 이거나 제공되지 않을 경우 공백이 사용되지 않음

위 내용을 요약하자면...

JSON string 으로 변환하고자 하는 value 값은 필수 입력 값이지만 객체 속성을 선택 / 필터링 하기 위한 replcacer 와 공백문자열을 지정하는 space 는 선택적으로 입력 또는 입력 하지 않아도 됩니다. 

Description

■ Boolean, Number 및 String 객체들이 변환될때는 각각의 primitive type 에 맞는 값으로 변환됩니다. 

x 및 y 값을 Number 로 입력 했습니다. 

JSON 문자열로 변환된 값은 아래와 같습니다. 

"{"x":1004,"y":7942}"

x 및 y 값을 String 형으로 입력 했습니다. 

JSON 문자열로 변환된 값은 아래와 같습니다. 

"{"x":"true","y":"false"}"

x 및 y 값을 boolean 형으로 입력 했습니다. 

JSON 문자열로 변환된 값은 아래와 같습니다. 

"{"x":true,"y":false}"

바로 앞서 문자열 true / false 와 달리 double quotation marks ( " " ) 가 달려 있지 않습니다.

■ 만약 변환 중 undefined, 함수 또는 Symbol 이 객체에서 발견되면 undefined 가 리턴되며 array 에서 발견되면 null 을 리턴 합니다. 

위 코드의 결과 값은 아래와 같습니다. 

undefined

undefined

undefined

객체에서 undefined, 함수 또는 Symbol 이 들어왔기 대문에 undefined 로 리턴 되었습니다. 

위 코드는 객체가 아닌 배열 (array) 에 undefined, 함수 그리고 Symbol 이 들어 왔습니다. 

결과는 아래와 같습니다. 

[null,null,null]

배열에서 위 값들이 들어 올 경우 null 로 리턴 됩니다. 

■ Number Infinity 와 NaN 그리고 객체 null 등은 모두 null 로 리턴됩니다. 

위 코드 실행 결과는 아래와 같습니다. 

null

null

null

위 코드 실행 결과는 아래와 같습니다. 

[null,null,null]

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에 포스팅할 내용은 JSON 입니다. 참 많이 들어 보고 써보기도 했었지만 막상 사용하고자 하면 기억이 안나고 그렇죠? JSON 에 대해 알기 쉽게 정리 해보겠습니다. 

■ JSON 이란? 

JSON은 JavaScript Object Notation 의 약자로 자바스크립트 객체의 형태를 가지는 문자열을 의미 합니다. 

JSON은 데이터를 저장하거나 주고 받기 위한 구문입니다. 

JSON은 javascript 구문을 사용하고 있으나 JSON 의 포맷은 text 형태를 취하고 있습니다. Text 는 어떤 프로그래밍 언어에서건 데이터 포맷으로 사용되기에 언어 독립적 입니다. 

Client (웹 브라우저) 와 Server 사이에서 데이터를 주고 받을 때, 이 데이터는 text 형태입니다. 

JSON 은 text 형이므로 최소한의 Client 와 Server 사이에서 통신을 위한 데이터 형으로는 적합합니다. 

어떠한 Javascript 객체라도 JSON 으로 변환 가능하며 이를 Sever 로 전송 가능합니다. 

반대로 Sever 로 부터 받은 어떠한 JSON 값도 Javascript 객체로 변환 가능합니다. 

■ Sending Data 

Javascript 객체에 저장된 데이터가 있다면 javascript 객체를 JSON 형으로 변환하여 sever 에 전송할 수 있습니다. 

jsObj 라는 javascript 객체를 생성하여 JSON 의 stringify() 함수를 이용하여 json_test.jsp 에 jsonParam 이라는 key 값으로 맵핑하여 변환한 JSON 값을 전달하는 코드 입니다. 

2018/05/14 - [javascript] - [ javascript 코딩 ] JSON.stringify() 사용방법 - JSON 가독성 높이기

■ Receiving Data

전송과 달리 JSON 형이 데이터를 받았을 경우 JSON 을 javascript 객체로 변환 할 수 있습니다. 

Sending Data 샘플 코드에서 jsonParam 이라는 key 값으로 전달 한 값을 받는 형식으로 작성 했습니다. 

jsObj 는 JSON format 이므로 JSON 의 parse() 함수를 이용하여 javascript 객체로 변환 해줍니다. 

2018/05/11 - [javascript] - [ Javascript 코딩 ] JSON.parse() - JSON 문자열을 자바스크립트 객체로 변환하기

위 코드를 실행 하면 결과 값은 아래와 같습니다. 

myObj.name = James

만약 위 코드를 아래와 같이 작성 한다면 어떻게 될까요? 

jsObj 를 JSON 형을 취하고 있는 자바 객체로 제공할 경우 오류가 발생 합니다. 

Uncaught SyntaxError: Unexpected token o in JSON at position 1

이는 jsObj 가 이미 javascript 객체인데 이를 JSON 의 parse 함수를 이용하여 javascript 객체로 변환하려 시도 했기 때문에 발생하는 오류 입니다. 

이런 실수는 안하는 게 좋겠죠? 

JSON 을 설명하기 위해 stringify() 함수와 parse() 함수가 샘플 코드에 등장 했는데요. 

이 함수들은 별도 포스팅으로 정리 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 User-Agent 에 대해 정리해 보겠습니다. 

자바 스크립트를 사용하다 보면 단말정보에 따라 또는 브라우저에 따라 상이한 동작을 하게 만들고 싶다거나 브라우저 별로 지원하는 함수가 달라 다르게 작업해야 하는 등의 이슈 사항들이 생기게 됩니다. 

그때 이 User-Agent 라는 값을 이용하여 사용 단말 정보나 브라우저 정보를 가져와 정상동작 하도록 작업 할 수 있습니다. 

User Agent 값을 가져오기 위해 Navigator 객체를 이용합니다. 

navigator 객체는 아래와 같은 프로퍼티를 제공하고 있습니다. 

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.appCodeName

navigator.platform

이중 우리가 원하는 프로퍼티가 userAgent 입니다. 

위와 같이 navigator.userAgent 값을 이용하여 단말을 분류 및 원하는 작업을 별도 처리 할 수 있습니다. 

https://www.whoishostingthis.com/tools/user-agent/

위 링크로 이동하시면  User Agent 값을 확인 하실 수 있으며 User Agent 에대한 더 많은 정보를 얻으실 수 있습니다. ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 자바스크립트를 이용하여 새창 띄우는 방법에 대해 정리해 보겠습니다. 

■ window.open(url, windowName, [windowFeatures]);

새창 띄우기를 할때는 window.open 을 사용하면 됩니다. 

URL 

호출 할 웹페이지 주소 

windowName 

오픈 할 창 이름

windowFeatures

윈도우 기본 사이즈나, 포지션, 스크롤바 표기 여부등 오픈할 창의 설정값

- left: 새창의 위치를 현재 작업 환경의 좌측으로 부터 거리 지정

- top: 새창의 위치를 현재 작업 환경의 상단으로 부터 거리 지정

- height: 창 높이 

- width: 창 넓이

- menubar: 메뉴바 표시 여부 (yes / no)

- toolbar: 툴바 표시 여부 (yes / no)

- location: 주소입력 창 표시 여부 (yes / no)

- resizable: 창 사이즈 변경 가능 여부 (yes / no)

위와 같은 속성 들은 거의 모든 브라우저에서 지원 하고 있습니다. 

예전... 익스플로러가 대세였던 시절에는 fullscreen 이라는 속성도 사용했습니다. 이름 그대로 창을 최대 사이즈로 열어 주는 속성인데요. 안타깝게도 익스플로러에서만 지원 되는 속성으로 사용하지 않으시길 권장 합니다. 

function openNewWindow(){
    window.open("http://jamesdreaming.tistory.com/", // URL
            "제임스의티스토리", // windowName
            "width=1000, height=700, toolbar=no, menubar=yes, scrollbars=no, resizable=yes"  // windowFeatures
    );
}

<input type="button" value="새창띄우기" onclick="javascript:openNewWindow();">

위와 같은 경우 새창이 기존 브라우저 상단에 띄게 됩니다. 

파라미터 값이 세종류가 있지만 windowFeatures 는 입력하지 않아도 됩니다. 

만약 아래와 같이 windowFeatures 를 입력하지 않으면 어떻게 될까요? 

function openNewWindow(){
    window.open("http://jamesdreaming.tistory.com/", // URL
            "제임스의티스토리" // windowName
    );
}

위와 같이 세번째 파라미터를 전달하지 않을 경우 새창이 아니라 새 탭으로 창이 뜨게 됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

자바스크립트에서 문자를 숫자로 변환하는 방법에대해 정리 해보겠습니다. 

■ parseInt() 함수 

가장 많이 사용하는 함수 중 하나가 바로 parseInt() 함수 입니다. 

var a = parseInt("10");
var b = parseInt("10.00");
var c = parseInt("10.99");
var d = parseInt("12 34 56");
var e = parseInt(" 77 ");
var f = parseInt("26 years");
var g = parseInt("She was 26");

위와 같이 사용 가능합니다. 

결과는 아래와 같습니다. 

a = 10

b = 10 (소숫점 이하는 버립니다)

c = 10 (소숫점 이하는 버립니다)

d = 12 (첫번째 숫자 변환 가능 문자 이후 띄워쓰기 이후는 버립니다)

e = 77 (띄워쓰기 무시하고 숫자 변환 가능 문자를 변환합니다)

f = 26 (문자는 무시합니다)

g = NaN (문자로 시작된 경우 변환 할 수 없습니다)

■ Number() 함수

parseInt() 함수와 함께 가장 많이 사용되는 함수 입니다. 

var a = Number("10");
var b = Number("12 34 56");

결과는 아래와 같습니다. 

a = 10

b = NaN

b 의 결과 값이 parseInt() 함수를 사용했을때와 다릅니다. 

Number() 함수는 parseInt() 함수와 달리 입력받은 값 자체를 숫자로 변환 할 수 없을 경우 NaN 으로 반환하게 만들어 졌습니다. 

즉, 10 은 숫자로 변환 가능 하므로 parseInt() 를 사용했을때와 동일한 값을 반환 했지만

"12 34 56"의 경우 중간에 문자로 취급되는 스페이스가 들어 가면서 전체값이 숫자가 아닌 문자열로 인식되어 버려 변환할수 없게 된 경우 입니다. 

Number() 함수는 parseInt() 함수와 다르게 true / false 값의 변환도 가능합니다. 

var c = Number(true);
var d = Number(false);

결과는 아래와 같습니다. 

c = 1

d = 0

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번에는 자바 스크립트를 이용한 개발 중 발생하는 오류 종류와 예외 처리 방법에 대해 알아 보겠습니다. 

프로그래밍 중 발생할 수 있는 오류에는 Syntax Errors, Runtime Errors 그리고 Logical Errors 등 세가지 정도가 있습니다. 

■ Syntax Errors 

Syntax Error 는 구문 오류로 Parsing error 라고도 불립니다. 

이는 컴파일 타임에 검출되며 Syntax Error 가 수정되지 않으면 프로그램은 컴파일이 되지 않습니다. 

<script type="text/javascript">
      window.print("Syntax Error 예제";
</script>

위 코드는 소 괄호를 닫지 않아 Syntax Error 를 발생하게 됩니다. 

자바스크립트 상에서 Syntax 오류가 발생할 경우 해당 오류 코드가 포함된 동일 쓰레드 상에만 오류 처리가 되고 다른 쓰레드의 코드들은 오류가 없는것 처럼 처리되어 실행 됩니다. 

■ Runtime Errors

Runtime Error 는 exception 이라고도 불립니다. 

이는 컴파일 및 인터프리터 작업은 성공적으로 끝나고 프로그램이 실행중에 발생하는 오류 입니다. 

<script type="text/javascript">
      window.runtimeErrorExample();
</script>

위 코드는 runtimeErrorExample 이라는 함수를 호출 하려고 했으나 이는 없는 함수를 호출 하려 하면서 Runtime Error 가 발생하게 됩니다. 

■ Logical Errors

Logical Error 는 원인을 파악하기 가장 어려운 케이스입니다. 구문 오류도 Runtime 오류도 아닙니다. 

이는 비지니스 로직 또는 요구 사항에 따라 개발이 되었지만 예상했던 응답값이 내려 오지 않았을 경우 발생 할 수 있습니다. 

이는 비지니스 로직 또는 요구사항에 대해 재검증 작업이 필요 하므로 가장 찾기 어려운 케이스가 되겠습니다. 

■ 예외 처리 

try ~ catch ~ finally 구문을 이용하면 위와 같은 오류가 발생 하였을 경우 원하는 처리가 가능합니다. 

<script type="text/javascript">
      try {
            // 실행할 코드
      }
      catch (e){
            // 오류 발생시 실행할 코드
      }
      finally{
            // 정상여부에 무관하게 항상 마지막에 호출 될 코드
            // 없어도 되는 코드 구문
      }
</script>

위 코드는 try ~ catch ~ finally 구문을 간단히 정리 했습니다. 

try 가 있으면 catch 는 무조건 따라와야 합니다. 실과 바늘 같은 관계죠.

그런데 finally 는 항상 특정 코드를 호출 해야 하는 경우가 아니라면 굳이 작성하지 않아도 됩니다. 

Runtime Error 설명중 사용한 코드에 try ~ catch ~ finally 를 적용해보겠습니다. 

<script type="text/javascript">
      try {
            // window 오브젝트에 없는 함수 호출 시도
            // --> runtime error 발생
            window.runtimeErrorExample();
      }
      catch (e){
            // 오류 내용을 alert 으로 처리
            alert("Error: " + e.description );
      }
      finally{
            // 항상 호출 시킬 코드
            alert("항상 호출 되는 finally !!!");
      }
</script>

위와 같이 작성 했습니다. 

결과는 쉽게 예상 가능합니다. 

runtimeErrorExample() 이라는 함수가 없기 때문에 catch 구문에서 alert 를 호출하게 되면 내용은 아래와 같을 겁니다.

javascript runtime error : runtimeErrorExample is undefined

그리고 마지막으로 "항상 호출 되는 finally !!!" 라는 문구를 가진 alert 이 한번더 보여지게 됩니다. 

이번에는 오류 종류와 예외 처리 방법에 대해 간략하게 정리 했습니다. 

그럼 저는 이만 :)

▼ 도움이 되었다면 아래 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

■ 자바스크립트 배열 초기화하기

안녕하세요. 제임스 입니다. 

이번에는 자바스크립트에서 배열 초기화 하는 방법에 대해 알아 보겠습니다. 

var arr = [1, 2, 3, 4, 5];

위와 같은 배열이 있을때 이 배열을 console log 로 찍어보면 아래와 같이 나옵니다. 

console.log('array = '+arr);

결과 값 : array = [1, 2, 3, 4, 5]

이제 이 값을 어떻게 초기화 하는가 하는 것에 대해 알아 보겠습니다. 

■ 첫번째 방법

Array.prototype.pop() 함수를 사용하여 for loop 을 돌리면서 배열안의 값들을 빼내는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
for (var i = arr.length; i > 0; i--){
    arr.pop();
}
console.log('array = '+arr);

이렇게 했을때 결과 값은 아래와 같습니다. 

array = []

■ 두번째 방법

배열의 length 값을 0 으로 설정하는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log('array = '+arr);

이경우도 결과 값은 아래와 같이 초기화 됩니다. 

array = []

■ 세번째 방법

세번째 방법은 배열을 빈 배열로 재선언 하는 방법입니다. 

var arr = [1, 2, 3, 4, 5];
arr = [];
console.log('array = '+arr);

이 경우도 결과 값은 처음 둘과 동일하게 아래와 같은 값을 보여 줍니다. 

array = []

이렇게만 보면 세가지 방법 모두 제대로 배열을 초기화 한것 처럼 보입니다. 

하지만 해당 배열을 다른 배열로 참조한 상태에서 위와 같은 방식으로 초기화 한다고 생각 해보면 문제가 발생하는 경우가 있습니다. 

바로 세번째 방식인데요. 

무엇이 문제 인지 지금부터 살펴 보겠습니다. 

■ 첫번째 방법 (정상 적용)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
for (var i = arr.length; i > 0; i--){
    arr.pop();
}
console.log('array = '+arr);
console.log('array2 = '+arr);

이 경우 우리가 예상한데로 아래와 같은 결과를 확인 할 수 있습니다. 

array = []

array2 = []

■ 두번째 방법 (정상 적용)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
arr.length = 0;
console.log('array = '+arr);
console.log('array2 = '+arr);

이 경우도 첫번째 방법과 동일하게 우리가 예상한데로 아래와 같은 결과를 확인 할 수 있습니다. 

array = []

array2 = []

■ 세번째 방법 (문제점 확인!!!)

var arr = [1, 2, 3, 4, 5];
var arr2 = arr;
arr = [];
console.log('array = '+arr);
console.log('array2 = '+arr);

위와 같이 arr2 값을 arr을 참조 하도록 선언한 후 arr 만 재선언 할 경우 결과 값은 아래와 같습니다. 

array = []

array2 = [1, 2, 3, 4, 5]

이는 arr2 값을 이미 [1, 2, 3, 4, 5] 로 선언한 상태에서 arr 만 새로 빈배열로 선언함으로 기존 arr 배열은 초기화가 잘 되었으나 arr 을 참조했던 arr2 배열은 초기화 하지 못해 발생한 문제 입니다.  

개발 중 배열을 초기화 하는 경우가 있을때 참조하고 있는 배열도 모두 초기화를 해야 하는 경우라면 처음과 두번째 방식대로 배열 초기화를 진행하면 됩니다. 

그렇지 않고 참조를 한 배열이지만 어느 것이던 하나만 초기화를 해야 하는 경우라면 세번째 방법을 사용하면 됩니다. 

잘 숙지하시고 경우에 잘 맞게 배열 초기화 진행 해보세요 :)

■ 자바스크립트를 이용하여 다른 URL 로 화면 이동하기

자바스크립트로 다른 URL 호출하는 방법은 여러가지가 있습니다. 

자바스크립트에서는 window.location 또는 간단하게 location 오브젝트를 이용하여 현재 웹페이지의 정보를 가져오거나 수정하는데 사용합니다. 수정한다는 이야기는 현재 페이지에 보여지는 URL 을 변경 하는 것도 포함됩니다. 

그래서 우리는 다른 페이지로 이동 시킬때 

window.location 또는 location object 를 이용합니다. 

아래는 다른 URL 로 이동시키는 방법입니다.

window.location = "https://www.james_redirectUrl.com";

window.location.href = "https://www.james_redirectUrl.com";

window.location.assign("https://www.james_redirectUrl.com");

window.location.replace("https://www.james_redirectUrl.com");

self.location = "https://www.james_redirectUrl.com";

top.location = "https://www.james_redirectUrl.com";

window.location 은 단순히 location 만 사용해도 되므로 위 코드들 중 첫 네개는 아래와 같이 사용 가능합니다. 

location = "https://www.james_redirectUrl.com";

location.href = "https://www.james_redirectUrl.com";
    
location.assign("https://www.james_redirectUrl.com");
    
location.replace("https://www.james_redirectUrl.com");

위와 같은 방식으로 원하는 URL 로 화면 이동을 할 수 있지만 각각 조금씩 다른 부분이 있습니다. 

예를 들어 location.replace() 를 할 경우 history stack 에서 현재 페이지를 호출할 페이지로 바꿔 치기 하는 것으로 이 경우 back button 을 이용하거나 history.back() 함수 등을 이용하여 이전 화면으로 이동 할 수 없습니다. 

쉽게 설명 하자면 

화면 이동을 1 > 2 > 3 번 페이지로 이동 하여 현재 화면이 3번 인 상태 입니다. 

여기서 location.replace() 를 이용하여 4번 페이지로 이동 시켰습니다. 

그러면 history stack 에는 1 > 2 > 3 대신에 1 > 2 > 4 가 저장됩니다. 

여기서 history back 을 할 경우 3번 화면으로 이동 하는 것이 아니라 2번 화면으로 이동하게 됩니다. 

만약 location.href 를 사용하여 이동 하였다면

1 > 2 > 3 에서 4번 화면이 추가 되어 history stack 에는 1 > 2 > 3 > 4 가 저장되게 됩니다. 

물론 이상태에서 history back 을 할 경우 3번 화면이 나오게 됩니다. 

다른 화면이 아니라 현재 화면을 리로드 할 경우는 아래와 같이 사용하면 됩니다. 

window.location.reload();

이제 위 방법들을 이용하여 여러 상황에 따른 화면 이동 처리를 어떻게 하는지 보시겠습니다. 

■ 화면이 호출 되는 시점에 다른 화면 호출 하기

화면이 호출 되는 시점에 화면 전환해야 하는 경우가 종종 있습니다 .

이때는 웹페이지의 <head> 태그 안에 아래와 같은 스크립트를 추가 하면 됩니다. 

<script>
    window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
</script>

스크립트부가 로드 되는 시점에 바로 location.href 가 호출 됩니다. 

이 경우 사용자는 현재 호출되는 페이지를 볼수 없습니다. 화면을 랜더링 하기 전에 바로 다른 페이지로 이동 하기 때문입니다. 

■ 화면 진입 후 약간 대기 후 다른 화면 호출하기

<script>
    setTimeout(function(){
        window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
    }, 5000);
</script>

다른 화면이 호출 되는 시점을 스크립트부가 로드되고 5초가 지난서야 다른 화면을 호출 하는 예제 입니다. 

■ 화면 진입 후 조건이 맞을 경우에 화면 호출하기

<script>
    var condition = true; // 사용자가 특정 조건에 맞게 설정 또는 데이터 로드값으로 처리
    if(condition){
        window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
    }
</script>

스크립트부가 로드 될때 condition 이라는 값이 true 일 경우 다른 화면을 호출 합니다. 

여기서 condition 은 개발자가 선언하여 사용하면 됩니다. 

■ 화면 진입 후 사용자에 의해 이벤트가 발생 한 경우 화면 호출하기

<script>
    document.getElementsById("buttonEvent").onclick = function() {
        window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
    };
</script>

id 값이 buttonEvent 인 컴포넌트가 클릭 된 경우 화면 이동처리하는 예제입니다. 

화면 이동 처리를 할 수 있는 방법들은 많이 있습니다. 

개발 시 원하는 케이스에 맞춰서 개발 할 수 있도록 하면 좋을 것 같습니다.