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 에 처음 등장) 인스턴스가 고유하고 변경 할 수 없는 데이터 유형
■ Object: 객체


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



 Data type conversion (데이터 형변환)


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


1
2
3
4
5
var testVar = 79;
console.log('1. testVar = '+testVar);
    
testVar = "데이터 형 변환이 자동으로 이루어짐";
console.log('2. testVar = '+testVar);
cs


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


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


1. testVar = 79

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




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


1
2
var plusOperator = '아기는 올해로 ' + + '살 이다';
console.log(plusOperator);
cs


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

아기는 올해로 2살 이다



1
2
var x = '38' + 10;
console.log(x);
cs


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

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


3810



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


1
2
3
4
var y = '38' - 10;
console.log('y = ' + y);
var z = '38' * 10;
console.log('z = ' + z);
cs

 

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

결과는 아래와 같습니다. 


y = 28

z = 380



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


1
2
var a = '38' + 10 - 10;
console.log('x = ' + a);
cs


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

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

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

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

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


a = 3800



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

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

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


1
2
var b = +'38' + 10;
console.log('b = ' + b);
cs


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

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

결과는 어떻게 나올까요? 


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


b = 48



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

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

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



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


앞서 정규표현식 (Regular Expression) 에 대해 간단히 정리 했었습니다. 

이번에는 정규표현식 중 숫자만 허용 하는 표현식을 알아 보겠습니다. 




■ 정규표현식 숫자만 허용하기


1
String regExp = "^[0-9]+$";
cs


위와 같이 정규표현식을 작성 했습니다. 


^ => 문자열의 시작

[...] => 문자의 집합, 두 문자 사이에 - 기호를 이용하여 범위를 지정 [0-9] 와 같이 입력하여 0 ~ 9 를 표현 

+ => 앞에 문자가 최소 한개이상 있음, 여기서는 0 ~ 9 사이의 숫자의 갯수 제한이 없음을 의미

$ => 문자열 종료 


다시 정리 하면 아래와 같습니다. 



^[0-9]+$


문자열 시작 

[0 ~ 9 까지 숫자 인정] 

0 ~ 9 까지 숫자 갯수 제한 없음

문자열 종료



위 표현식이 정말 숫자만 허용 하는지 확인 해보겠습니다. 


1
2
3
4
5
6
7
String testStr1 = "12345";
 
if(testStr1.matches(regExp)){
    System.out.println("testStr1 ==> 숫자만 입력 됨");
}else {
    System.out.println("testStr1 ==> 숫자 외 다른 문자도 입력 됨");
}
cs


testStr1 이라는 변수에 숫자만 1 ~ 5 까지 나열 되어 있습니다. 

그냥 봐도 숫자만 입력 된 것이 맞죠? ^^


결과는 아래와 같습니다. 

testStr1 ==> 숫자만 입력 됨



1
2
3
4
5
6
7
String testStr2 = "1T2E3S4T5";
 
if(testStr2.matches(regExp)){
    System.out.println("testStr2 ==> 숫자만 입력 됨");
}else {
    System.out.println("testStr2 ==> 숫자 외 다른 문자도 입력 됨");
}
cs


testStr2 이라는 변수에는 숫자와 문자의 조합인 값이 들어 있습니다. 


결과는 아래와 같습니다.

testStr2 ==> 숫자 외 다른 문자도 입력 됨



1
2
3
4
5
6
7
String testStr3 = "";
 
if(testStr3.matches(regExp)){
    System.out.println("testStr3 ==> 숫자만 입력 됨");
}else {
    System.out.println("testStr3 ==> 숫자 외 다른 문자도 입력 됨");
}
cs


testStr3 이라는 변수는 빈 값으로 설정 했습니다. 


결과는 아래와 같습니다.

testStr3 ==> 숫자 외 다른 문자도 입력 됨




■ 정규표현식 숫자와 공백 허용하기


위 세번째 예제를 사용한 이유는 숫자만 허용하는 표현식을 많이 사용 하기도 하지만 더 많이 사용 하는 것이 숫자와 빈값을 인정하는 표현식을 더 많이 사용하기 때문입니다. 


앞선 숫자만 허용하는 표현식에서는 + 라는 표현식을 이용하여 선행 문자의 갯수를 1개 이상으로 지정 했었습니다. 하지만 이 표현식을 * 로 변경할 경우 선행 문자의 갯수가 0개 이상으로 지정 할 수 있습니다. 


예제를 보시겠습니다. 


1
2
3
4
5
6
7
String regExp2 = "^[0-9]*$";
String testStr4 = "";
if(testStr4.matches(regExp2)){
    System.out.println("testStr4 ==> 숫자만 입력 됨");
}else {
    System.out.println("testStr4 ==> 숫자 외 다른 문자도 입력 됨");
}
cs


regExp2 변수는 0 ~ 9 사이의 숫자가 0개 이상인 것으로 지정 했습니다. 


결과는 아래와 같습니다. 

testStr4 ==> 숫자만 입력 됨



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

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

감사합니다 :D




블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,

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


몇일 전 휴대폰을 교체 하고 처음으로 네이버 스포츠 영상을 시청 하려고 했는데요...

해외에서는 서비스를 이용할 수 없습니다. 

라는 오류 메세지가 나옵니다. 





Come on man! I'm in Korea!!! 


왜 이런 현상이 생길까요? 

몇 가지 이유가 있습니다. 



첫번째! 정말로 사용자가 해외에 있는 경우 입니다. 


네이버 스포츠는 해외 스포츠 중계/VOD 서비스에 한해 중계권 계약상 국내에서만 재생 될 수 있기 때문에 해외에서의 접속을 막고 있습니다. 


해외 아이피는 한국인터넷진흥원에서 제공하는 국가별 아이피 대역 목록(GeoIP)을 기준으로 판단하고 있습니다. 

사용자의 IP 가 GeoIP 에 등록되어 있지 않거나 해외 IP 인 경우 위와 같이 접속 제한 메세지가 나타 납니다. 


국내에서 사용하는데도 불구하고 지속적으로 해외 IP 로 인식되는 경우에는 사용하고 있는 통신사(3G 나 LTE 사용 시) 또는 ISP (WI-FI 제공 인터넷서비스 업체)로 문의 해보시면 가장 빠를것 같습니다. 



두번째! 잘 발생하지 않는 경우이기는 하지만 위치에 따라 IP 가 다르게 잡히며, 네트워크를 끊었다 재 접속 시 랜덤하게 지정된 대역대 안에서 IP 가 변경 되는데요. 이때 GeoIP 에 등록 되지 않은 IP 로 잡히는 경우가 있습니다. 이때는 데이타 네트워크를 사용안함으로 바꿨다가 다시 사용함으로 설정 또는 간단하게 비행기 모드 (플라이트모드) 로 전환 후 해제를 하시면 IP 가 바뀌게 됩니다. 



세번째! 크롬을 사용 할 경우 데이터 절약 모드 사용함으로 설정 된 경우 입니다.


위 두가지 경우는 사용자가 할 수 있는 일이 거의 없기 때문에 별도 설명은 필요 없지만 이 경우는 다릅니다. 

저는 휴대폰 변경 후 크롬에서 데이터 절약 모드 사용 하겠냐는 알림이 뜬적이 있는데요 아무 생각없이 사용함을 선택 했었다가 위와 같은 현상이 벌어 졌습니다.  


데이터 절약 모드를 사용안함으로 설정 하는 방법은 아래와 같습니다. 


크롬 > 우측 상단 메뉴 > 설정 > 데이터 절약 모드 > 사용안함



아래 이미지들을 보시면 좀더 이해가 편하겠죠? 




1. 크롬 우측 상단의 메뉴를 클릭




2. 설정 클릭 




3. 데이터 절약 모드 클릭




4. 데이터 절약 모드가 사용 상태 입니다. 우측 토글버튼을 클릭 합니다.




5. 버튼이 비활성화 되면서 사용 안함 상태로 변경 됩니다. 


비활성화 후 보이는 텍스트 중에 이런 문구가 있습니다. 

이 기능을 사용하면 이동통신사에서 제공하는 프리미엄 데이터 서비스에 액세스하는 데 문제가 생길 수 있습니다. 

네... 맞습니다. 네이버 스포츠 영상 시청 불가라는 문제가 생겼습니다 ^^;




6. 화면을 리프레시 하면 플레이 버튼이 보여 집니다. 




7. 이제 마음 편하게 영상을 시청 하시면 됩니다. 

단, 무제한 요금제를 사용하거나 WI-FI 에 연결 된 상태가 아니라면 데이터 사용시 조심하시는게 좋습니다. 요금 폭탄이라는 친구를 만나 보실 수 있을 수도 있습니다 ^^;;



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

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

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,

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


최근에 너무 하드코어 하게 일을 하다 보니 술이 생각 납니다. 

그래서 친한 직장 동료들과 번개로 모였는데요. 

막내가 추천한 엉터리생고기라는 식당을 찾아갔습니다. 


(참고로 제가 작성하는 먹거리 식당들에 대한 내용은 

개카 또는 법카로 직접 결제했고, 앞으로도 그럴 예정입니다.)






1인 14,800원에 무한리필 삼겹살입니다. 




처음 자리에 가면 셋팅 되어 잇는 목살입니다. 

목살도 고기가 정말 좋습니다. 





파조림, 쌈, 김치, 깐마늘, 쌈장 등등은 셀프 입니다. 




고기를 불판에 올리기 전 셋팅을 했습니다. 





본격적으로 고기를 굽기 시작했습니다. 

지금 다시 봐도 군침이 ㅎㅎ







목살도 맛있지만 역시 돼지는 삼겹살이죠? 

무한 리필이라 크게 기대 하지 않고 술만 많이 먹자는 생각이었지만... 

술 마실 시간 없었습니다. 

고기 먹기 바빴습니다.



일반적으로 가격대비 이정도면 괜찮지!!

라는 기분으로 가는 곳이 무한리필 고기집인데요.

그런 곳과 비교 하면 안되는 곳입니다. 



한가지 아쉬운 것은 

식당 내 환기 시설이 제대로 갖추어져 있지 않아 

손님이 한참 많은 시간대에는 

너구리 잡는 것 같았습니다. ㅎㅎ;; 



후식으로 먹은 비빔냉면도 약간 매웠기는 하지만 개인적으로 입맛에 맞아 잘 먹었습니다. 



무제한에 가격이 싸지만 고기 질도 좋습니다. 

이런곳도 명동에도 있다는 것에 몰랐습니다. 

앞으로 소소한 모임때는 자주 올것 같네요.





블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



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


이번 포스팅 부터는 정규식에 대해 정리 하고자 합니다.


정규표현식(Regular Expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어 입니다. Pattern Matching 이라고도 부릅니다.


이 정규식을 사용하는 방법에 대해 알아보겠습니다. 


표현식 상세
^ 문자열의 시작을 의미
$ 문자열의 종료를 의미
. 줄바꿈을 제외한 임의의 문자를 의미. 줄바꿈을 위한 m 옵션은 허용
[...] [] 사이에 있는 임의의 문자 또는 문자집합. 문자의 집합은 시작 문자와 종료 문자 사이에 - 기호로 범위를 지정
[^...] [] 사이에 있는 임의의 문자 또는 문자집합을 제외
{} 회수 또는 범위를 의미
() 소괄호 안의 문자를 하나의 문자로 인식
\A 전체 문자의 시작
\z 전체 문자의 종료
\Z 허용되는 최종 라인 종결자를 제외한 전체 문자열의
re* 앞의 표현식이 0 이상 일치
re+ 앞의 표현식이 1 이상 일치
re? 앞의 표현식이 0 또는 1 일치
re{ n} 앞의 표현식이 정확히 n 일치
re{ n,} 앞의 표현식이 n 또는 이상 일치
re{ n, m} 앞의 표현식이 최소 n 최대 m 일치 
a| b a 또는 b 일치
(?i) (?i) 뒤에 옵션을 추가 대소문자 구분하지 않음
(re) 정규식을 그룹화하고 일치된 텍스트를 기억
(?: re) 정규식을 그룹화하고 일치하지 않는 텍스트를 기억
(?> re) 역추적 없이 독립적 패턴과 일치
\w 단어 문자와 일치
\W 단어 문자와 일치
\s 공백문자와 일치. [\t \n \r \f] 동일
\S 공백문자와 일치
\d 숫자와 일치. [0-9] 동일
\D 숫자가 아닌 모든 문자와 일치
\A 문자열의 시작과 일치
\Z 문자열의 종료와 일치. 만약 줄바꿈이 있다면 줄바꿈 이전 문자열과 일치
\z 문자열의 종료와 일치
\G 마지막 일치 위치가 끝난 지점과 일치
\n 캡처 그룹 번호 n 대한 참조
\b 대괄호 밖에 있을때 단어 경계와 일치. 대괄호 안에 있을때는 백스페이스 (0x08) 일치
\B 단어 경계와 일치
\n 줄바꿈과 일치
\t 탭과 일치
\Q, \E \Q \E 사이의 문자와 일치


정규표현식의 기본 패턴 들입니다. 

위 값들의 조합을 통해 원하는 표현식을 만들 수 있습니다. 




정규표현식은 아래와 같이 String 함수들과 함께 사용할 수 있습니다. 


s.matches("regular expression") 

s.split("regular expression")

s.replaceAll("regular expression")


이외에도 다른 String 함수들과 함께 사용 할 수 있습니다. 


1
2
3
4
5
6
7
8
String regExp = "^[a-zA-Z]*$";
        
String testStr1 = "TestCodeHere";
if(testStr1.matches(regExp)){
    System.out.println("testStr1 은 정규표현식에 맞는 문자열");
}else {
    System.out.println("testStr1 은 정규표현식에 맞지 않는 문자열");
}
cs


regExp 라는 변수에 "^[a-zA-Z]*&" 라는 표현식을 작성 했습니다. 

이 표현식은 우리가 일상 코딩중 가장 많이 사용하는 표현식으로 영문대소문자만 허용한다는 표현식입니다. 


String 함수중 matches 함수를 이용하여 testStr1 값이 regExp 표현식에 맞는지 비교 하는 코드 입니다. 

testStr1 값중 영문 대소문자 외에 어떤 텍스트도 보이지 않습니다. 결과 값은 예상 가능하죠? ^^


testStr1 은 정규표현식에 맞는 문자열




1
2
3
4
5
6
String testStr2 = "TestCodeHere.";
if(testStr2.matches(regExp)){
    System.out.println("testStr2 은 정규표현식에 맞는 문자열");
}else {
    System.out.println("testStr2 은 정규표현식에 맞지 않는 문자열");
}
cs


이번에는 동일한 표현식에 testStr2 값이 부합하는지 확인 해보겠습니다. 

testStr2 는 testStr1 값에 마침표( . )을 하나 추가 했습니다. 

정규 표현식 상에서는 영문대소문자만 허용하는 것으로 작성 했습니다. 

결과는 당연히 표현식에 맞지 않는 문자열이라는 값을 리턴해야 정상입니다. 


testStr2 은 정규표현식에 맞지 않는 문자열



1
2
3
4
5
6
String testStr3 = "Im James";
if(testStr3.matches(regExp)){
    System.out.println("testStr3 은 정규표현식에 맞는 문자열");
}else {
    System.out.println("testStr3 은 정규표현식에 맞지 않는 문자열");
}
cs


이번에는 문자열에 스페이스가 있습니다. 

두번째 예제를 이해 하셨다면 쉽겠죠? 당연히 정규표현식에 맞지 않는 문자열입니다. 


testStr3 은 정규표현식에 맞지 않는 문자열



이번 포스팅에서는 정규표현식의 기본을 간단히 정리 했습니다. 

앞으로 많이 사용하는 패턴들과 특수한 케이스에 대해 정리해 보겠습니다. 



아래 링크는 정규표현식을 테스트 해볼 수 있는 사이트 입니다. 

잘 이용하시길 바랍니다.


https://regexr.com/



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

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

감사합니다 :D




블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,


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


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

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


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


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

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



1
2
3
4
5
6
7
8
9
10
11
12
<script>
    
    var a = 3;
    
    function localVariableFunction(){
        var b = 5
    }
    
    console.log(a);
    console.log(b);
 
</script>
cs


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

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


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

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


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





1
2
3
4
function localVariableFunction(){
    var b = 5;
    console.log(b);
}
cs


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




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


1
2
3
4
if(true){
    var x = 10;
}
console.log(x);
cs


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

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


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



1
2
3
4
if(false){
    var y = 10;
}
console.log(y);
cs


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

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

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


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




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

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

감사합니다 :D


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,




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


https://www.javascript.com/


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

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




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




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




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




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






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



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


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






블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



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

var / let / const


마지막으로 const 키워드에 대해 알아 볼까 합니다. 



■ const 키워드


const 키워드는 앞서 알아본 let 키워드와 비슷하게 블록 범위의 변수를 선언할때 사용 합니다. 

const 는 Constants, 즉 상수를 의미합니다. 즉, 고정 값이라는 의미 입니다. 한번 선언하면 var 키와드나 let 키워드로 선언한 변수와 달리 변경이 불가능 합니다. 


1
2
const x = 1004;
= 100;
cs


위와 같이 x 값을 선언 했지만 아랫중에서 100 으로 재선언 하려 시도 합니다. 

이경우 Uncaught TypeError 오류가 발생 합니다. 


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


Uncaught TypeError: Assignment to constant variable.


상수값에 값을 적용하려 했기에 오류가 발생 했다는 내용입니다. 



1
2
3
4
5
6
7
const x = 1004;
try{
    x = 100;
}catch(err){
    console.log(err);
}
console.log('x ==> '+x);
cs


위와 같이 try ~ catch ~ 로 exception 처리를 하여 오류 메세지를 찍어 보겠습니다. 


TypeError: Assignment to constant variable.

    at test.jsp:12

x ==> 1004


test.jsp 파일 12라인에서 TypeError 가 발생했다는 오류 로그를 확인 할 수 있습니다. 



const 키워드로 변수를 선언 하는 경우는 고정 값으로 변하지 않는 값을 필요로 할 경우 사용하면 요긴하겠습니다. 



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

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

감사합니다 :D


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



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

var / let / const


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



■ let 키워드


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



1
let y = 50;
cs


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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let y = 50;
console.log('1. y = '+y);
= 40;
console.log('2. y = '+y);
 
if(true){
    y = 30;
    console.log('3. y = '+y);
}
console.log('4. y = '+y);
 
if(true){
    let y = 50;
    console.log('5. y = '+y);
}
console.log('6. y = '+y);
cs


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


글로벌로 선언된 상태에서 변수 값을 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 키워드와 달리 변수 선언 순서에 유의해야 합니다. 


1
2
let x;
console.log('x 값은 ' + x);
cs


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



1
2
console.log('y 값은 ' + y);
let y;
cs


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

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




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


1
2
3
4
5
6
if(true){
    var var_Keyword = 1;
    let let_Keyword = 1;
}
console.log('var_Keyword ==> '+var_Keyword);
console.log('let_Keyword ==> '+let_Keyword);
cs


위와 같이 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


블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,



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

var / let / const


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



■ var 키워드


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

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



1
var x = 20;
cs


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



1
2
var x;
= 20;
cs


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

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


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


1
console.log('x = '+x);
cs


결과는 아래와 같습니다. 

x = 20



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


1
2
3
4
5
6
7
8
9
10
var x = 20;
console.log('1. x = '+x);
 
if(true){
    var x = 16;
    console.log('2. x = '+x);
}
 
+= 20;
console.log('3. x = '+x);
cs


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

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


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



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


1
2
var a;
console.log('a 값은 ' + a);
cs


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



1
2
console.log('b 값은 ' + b);
var b;
cs


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



1
console.log('c 값은 ' + c);
cs


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

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



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


a 값은 undefined

b 값은 undefined

Uncaught ReferenceError: c is not defined




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

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

감사합니다 :D



블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,