'javascript 코딩'에 해당되는 글 11건

 Data Types (데이터 유형)

최신 자바스크립트 표준(ECMAScript 2015)에서는 7가지 데이터 유형을 정의하고 있습니다. 

■ primitive data type: 객체가 아니며 함수를 제공하지 않는 데이터 유형

• Boolean: true or false
• null: null 값을 표현하는 특수 키워드. 자바스크립트는 대소문자 구분을 하기 때문에 Null, NULL 등과 다른 값
• undefined: 값이 정의 되지 않았음을 의미하는 최상위 속성
• Number: integer (1, 2, 3 등의 정수) 또는 floating-point (3.1415 등의 부동소수점) 등의 숫자 
• String: 텍스트 값을 나타내는 일련의 문자 
• Symbol: (ECMAScript 2015 에 처음 등장) 인스턴스가 고유하고 변경 할 수 없는 데이터 유형

위와 같이 6개의 primitive data type 과 Object(객체) 를 포함하여 7가지 데이터 유형이 있습니다. 

 Data type conversion (데이터 형변환)

자바스크립트는 변수 선언 시 변수의 데이터 유형을 지정할 필요가 없으며 스크립트 실행 중 필요에 따라 데이터 유형이 자동으로 변환 됩니다. 

testVar 라는 변수를 숫자 79 로 선언 했지만 아래 쪽에서 다시 String 형으로 재 선언 해도 오류가 발생 하지 않습니다. 

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

1. testVar = 79

2. testVar = 데이터 형 변환이 자동으로 이루어짐

숫자형 값과 문자 값을 + 기호를 이용할 경우 숫자형 값이 문자형으로 변환 됩니다. 

위 예제를 실행 하면 아래와 같은 결과 값이 나옵니다. 

아기는 올해로 2살 이다

위 예제도 동일하게 문자형 값과 숫자형 값 사이에 + 기호를 이용하였습니다. 

물론 이번에도 숫자 10은 문자형으로 자동 형변환 되어 아래와 같은 결과를 리턴합니다. 

3810

+ 기호를 제외한 다른 기호들은 숫자형을 문자형으로 변환하지 않습니다. 반대로 문자형을 숫자형으로 변환 하는것 과 같은 결과를 리턴 합니다. 

변수 y 와 z 는 각각 10을 빼거나 곱하기를 했습니다. 

결과는 아래와 같습니다. 

y = 28

z = 380

그렇다면 + 기호와 다른 기호들을 같이 사용할 경우 어떻게 될까요? 

'38' 과 10 사이에 + 기호가 들어가 첫번째 10을 문자열로 변환합니다. 

이때까지 결과 값은 '3810' 입니다. 

'3810' - 10 을 한 값이 최종 a 값이 되는데요.

- 기호를 이용하여 '3810' 이 숫자 형이 되어버립니다. 

3810 - 10 을 하여 최종 결과는 3800 이 됩니다. 

a = 3800

여기서 한가지 의문점이 있을 수 있습니다. 

숫자형 문자열은 덧셈이 안될까요? 

가능합니다. 바로 + 기호를 문자열 앞에 사용 하는 방법으로 말이죠. 

위의 x 값을 정의 할때와 다르게 '38' 앞에 + 기호를 이용했습니다. 

이는 숫자형 문자열을 숫자로 인식 시키는 기능을 합니다. 

결과는 어떻게 나올까요? 

당연히 결과 값은 48 이 나옵니다. (그렇지 않다면 굳이 이 예제를 들 필요 없겠죠? ^^)

b = 48

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

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

감사합니다 :D

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

앞서 변수 선언에 대해 포스팅을 했는데요. 일반적으로 variable scope 라고 부르는 변수 영역이라는 것이 있습니다. 

변수 영역이라 부르니 어렵죠? 변수가 선언되어 사용될 수 있는 영역이라고 생각 하시면 됩니다. 

일반적으로 변수는 Global Variable 과 Local Variable 두가지 종류로 분류되고 있습니다. 

▶ 함수 (function) 외부에서 선언되면 Global Variable 

▶ 함수 내부에서 선언되면 해당 함수 내에서만 사용 되므로 Local Variable

변수 a 는 함수 밖에서 선언 되어 있습니다. Global 변수입니다. 

변수 b 는 함수 안에서 선언 되었습니다. Local 변수 입니다. 

글로벌 변수와 달리 로컬 변수는 지정된 영역안에서만 사용 가능 합니다. 이를 Variable Scope 이라고 부릅니다. 

즉, 변수 a 는 글로벌 변수 이므로 함수 안이든 밖이든 상관 없이 사용 가능하지만 변수 b 는 선언된 함수 내에서만 사용 가능합니다. 

위 코드를 실행 시켰을때 a 값은 정상적으로 로그가 찍히겠지만 b 값은 변수 밖에서 호출 하였으므로 오류가 발생하게 됩니다. 

만약 위와 같이 함수 안에서 호출 한다면 당연히 원하는 값을 보실 수 있습니다. 

함수 내부에서 선언된 경우만 Local Variable 로 판정 되는 것은 아닙니다. 

위 코드를 실행 할 경우 어떤 결과가 나올까요? 

if 절 안에서 변수 선언을 했지만 true 상태이므로 if 절 안 코드를 실행 시키게 됩니다. 즉, Global 함수 선언과 동일하다고 생각 하시면 됩니다. 

위 코드를 실행 하면 결과 값은 10 이 리턴 됩니다. 

이번에는 if 절 조건이 false 입니다. 즉, if 절 내부 코드가 읽혀 지지 않습니다. 

프로그램상으로 봤을때 변수 y 가 선언되지 않았습니다. 

위 코드를 실행하면 결과는 undefined 가 리턴 됩니다. 

variable scope 상으로 봤을때 위 코드이 변수 y 는 로컬 변수와 같은 역할이 되었습니다. 

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

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

감사합니다 :D

자바스크립트를 재미있게 공부 할 수 있는 방법이 있어 포스팅 합니다. 

https://www.javascript.com/

위 링크로 접속 시 메인 화면에서 Try JavaScript 라른 문구가 보이면서 따라하기를 요구 합니다. 

여기서 하라는 데로만 따라하면 재미있게 자바스크립트를 배울 수 있습니다. 

첫 화면에 "사용자 이름"; 과 같이 입력후 키보드의 엔터키를 치라고 합니다. 

step 별로 코드를 따라 쳐보면서 따라가기를 하면 됩니다. 

alert 을 호출 하는 방법등도 배웁니다. 

짧은 try 모드 후 Keep Learing 을 클릭 하면 아래와 같은 공부 할 수 있는 목차가 나옵니다. 

동영상을 시청도하며 공부를 할 수 있습니다. 

동영상 시청이 끝나면 게임을 하듯이 문제를 풀어 나가는 구조 입니다. 

처음 공부를 시작 하시는 분들이라면 도움이 많이 될 것 같습니다. 

자바스크립트에서 변수 선언은 아래 세가지 키워드를 사용하는 방법이 있습니다.  

var / let / const

이번에는 let 키워드에 대해 알아 볼까 합니다

■ let 키워드

var 키워드와는 다르게 블록 범위의 로컬 변수를 선언하는데 사용합니다. 물론 글로벌로 선언은 가능하지만 로컬에서 별도로 let 키워드를 사용하요 동일한명의 변수를 선언 시 완전히 다른 변수로 사용 됩니다. 

위와 같이 y 라는 변수를 let 키워드로 선언합니다. 

위와 같이 코드를 작성 했을 경우를 살펴 보겠습니다. 

글로벌로 선언된 상태에서 변수 값을 50 에서 40으로 변경하는 시도를 했습니다. 

당연하게도 실행 시 y 값은 40으로 변경 되어 있습니다. 

첫번째 if 절에서 y = 30 으로 선언했습니다. 여전히 새로운 let 키워드 사용 없이 기존 변수 값을 30으로 변경하려 시도 했습니다. 

결과는 y = 30 으로 나옵니다. if 절 밖에서 y 값을 찍어봐도 동일하게 y = 30 입니다. 

두번째 if 절에서 let 키워드를 사용하여 y 를 50 으로 선언했습니다. 

5. y = 50 으로 실행 결과 값이 나옵니다. 

여기서 우리는 let 키워드를 사용했다는 것에 주목해야 하며 if 절 안에서 로컬 변수로 선언 되었다는 것을 인지 해야 합니다. 

마지막 console 로그를 찍었을때 최종적으로 나오느 y 값은 무엇일까요? 

50 이라고 생각 하실수도 있지만 30 이 리턴됩니다. 

if 절 안에서 let y = 50 과 같이 let 키워드를 사용한 경우 로컬변수로 글로벌변수 y 와 다른 변수로 인식 됩니다. 

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

1. points = 50    (Global Variable)

2. points = 40    (Global Variable)

3. points = 30    (Global Variable)

4. points = 30    (Global Variable)

5. points = 50    (Local Variable)

6. points = 30    (Global Variable)

let 키워드는 var 키워드와 달리 변수 선언 순서에 유의해야 합니다. 

위와 같이 먼저 변수 선언을 한 이후 호출 하는 경우는 문제가 없습니다. 

하지만 위와 같이 아직 선언되지 않은 변수를 호출 하고자 하면 Uncaught ReferenceError 오류가 발생합니다. 

var 키워드의 경우가 특이 했던 거였습니다. let 은 다른 언어들과 비슷한 선언 순서를 유지하고 있습니다. 

var 키워드와 let 키워드의 또다른 차이점을 하나 더 정리하면 아래와 같습니다. 

위와 같이 block statement scope 내에서 (if절) var 키워드와 let 키워드를 이용하여 서로 다른 변수를 선언 했습니다. 

그리고 if절 밖에서 각각의 변수 값을 찍어 보면 어떻게 될까요? 

var 키워드는 글로벌 및 로컬 구분 없이 사용 된다고 했습니다. 

즉, var_keyword 값이 1로 리턴 됩니다. 

하지만 let 키워드는 로컬변수로 선언 한다고 생각하면 됩니다. 즉, if 절 내에서 선언하여 사용 했기 때문에 if 절 밖에서는 해당 변수는 존재하지 않는 변수 이므로 Uncaught ReferenceError 오류가 발생 합니다. 

아래는 위 코드의 실행 결과 입니다. 

var_Keyword ==> 1

Uncaught ReferenceError: let_Keyword is not defined

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

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

감사합니다 :D

자바스크립트에서 변수 선언은 아래 세가지 키워드를 사용하는 방법이 있습니다.  

var / let / const

먼저 var 키워드에 대해 알아 볼까 합니다. 

■ var 키워드

일반적으로 javascript 에서 변수 선언을 할때 가장 많이 사용하는 키워드 입니다. 

선택적으로 변수 값을 초기화하여 변수를 선언합니다. 

위와 같이 x 라는 변수 값을 20으로 초기화 할 수 있습니다. 

처음에 var x; 와 같이 변수 값을 초기화 하지 않고 선언만 한 이후 

필요한 경우에 x = 20; 과 같은 방법으로 초기화 할 수 있습니다. 

첫번재와 두번재 모두 아래 코드를 실행 시 동일한 값을 리턴 합니다. 

결과는 아래와 같습니다. 

x = 20

중요한것은 var 키워드는 로컬(local) 및 글로벌(global) 변수로 모두 사용 가능합니다. 

이미 글로벌 변수로 var x = 20 으로 선언 했지만 if절 안에서 로컬변수로 다시 var x = 16 으로 선언했습니다. 

그리고 다시 if 절 밖에서 x 값에 + 20을 했을때 처음 글로벌로 선언한 20 에 20을 더한것이 아니라 로컬에서 선언한 16 에 20을 더했습니다. 

즉, var 키워드는 로컬이든 글로벌이든 변수명이 동일하면 하나의 변수로 사용하게 됩니다. 

변수 선언 순서는 크게 상관 없습니다. 

일반적으로 변수선언을 먼저 하고 사용하고자 하는 곳에서 호출 합니다. 

위와 같이 변수선언을 뒤에서 해도 문제가 없습니다. (다른 언어들과 다르게 조금 특이한 케이스 입니다.)

하지만 변수 선언이 되지 않은 변수 값을 호출 하고자 하면 Uncaught ReferenceError 가 발생 합니다.

c 가 정의되지 않았다는 오류 메세지를 보실 수 있습니다. 

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

a 값은 undefined

b 값은 undefined

Uncaught ReferenceError: c is not defined

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

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

감사합니다 :D

javascript 에서 comment 를 이용하는 방법은 c++ 이나 java 등 여타 다른 언어들과 별반 다르지 않습니다. 

사용 방법은 아래와 같이 크게 세가지 정도 있습니다. 

■ One-Line Comments

위와 같이 두개의 슬래시 (/) 를 붙여 사용하여 뒤에 따라오는 줄은 모두 comment 로 인식하게 하는 방법이 있습니다. 

■ Multi-Line Comments

위와 같이 /* 로 시작하여 */ 로 끝날때까지 그 사이에 들어 오느 모든 내용은 comment 로 인식하게 됩니다.

■ Nest Comments

한 라인에서 /* 로 시작하여 */ 로 끝나는 모양새를 nest comments 라고 부릅니다. 

사실 Multi-line Comments 와 비슷합니다. 

Multi-Line Comments 와 비슷한 구조입니다.

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

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

감사합니다 :D

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

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 입니다. 참 많이 들어 보고 써보기도 했었지만 막상 사용하고자 하면 기억이 안나고 그렇죠? 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

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

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

프로그래밍 중 발생할 수 있는 오류에는 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 배열은 초기화 하지 못해 발생한 문제 입니다.  

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

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

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