JavaScript 02_기본용어와 자료형 (기본자료형 데이터타입)

1. 기본용어

1) 표현식과 문장 - 표현식

• 값을 만들어내는 것

• 예 : 546, 20 + 34 *2 , “TestOne” - 문장

• 하나 이상의 표현식이 모인 것

• 문장 끝에는 세미콜론(;)을 적어서 문장의 끝을 알림

• 예 : 546; , 20 + 34 *2; , var test=“Test”+”One”; , alert(“Hello JavaScript !!”);

 

 

일반적으로 카멜 표개발자들 간의 규칙

→ 알파벳을 사용

→ 생성자 함수의 이름은 항상 대문자로 시작

→ 변수, 속성, 함수, 메서드의 이름은 항상 소문자로 시작 (카멜표기법)

→ 여러 단어로 이뤄진 식별자의 각 단어의 첫 글자를 대문자로 표시기법

 

 

userName 변수 괄호없음

 

 

 

---

 

 

= 대입연산자 - 오른쪽 데이터를 변수에 대입하는 연산자

대입연산자를 통해서 변수라는 var에 담는다 

 

---

1) 문자열(String)

 

- 문자를 표현핛 때 사용하는 자료형(Data Type)

- ‘ ‘, ‚ ‚ 안에 문자를 넣어 생성하며, 덧셈 기호(+)를 사용하여 연결 가능

- 문자열 안에 따옴표를 사용하고자 할 때

• ‘‛test‛’, ‚’test1’‛ 과 같이 내부와 외부에 다른 따옴표 사용

 

---

예제

 

문자열1

string(문자열 홑따음표 사용)

    var userName = 'ossam';

    console.log(userName);

 

 

문자열 더하기 

연결 연산자 사용 + 간격 띄기 

    var userName = 'ossam';

    var msg = '님이 로그인했습니다'

    console.log(userName + msg);

+ 는 문자에선 연결연산자로 사용

 

---

문자열의 이스케이프 문자 \ 역슬래쉬로 줄바꿈

 

 

 

이스케이프 예시 

 

    var userName = 'ossam';

    // 이스케이프문자로 줄바꿈

    var msg = '\'님이\'이\n로그인했습니다'

 

 

 

 

 

 

---

2. 숫자 Number

 

    // 동일스코프(변수의영역)에서 변수명은 같을 수 없음

    var msg = '변수명이 같으면 이전값이 날라감'

    console.log(userName + msg);

 

  // Nomber(숫자)

    var num1 = 100;

    console.log(typeof num1, num1)

숫자는 색이 다름

 

 

 

 

 

var num1 = '100'; 만약 속 따음표를 사용시 문자열로 변경

 

---

 

숫자 추가

    // Nomber(숫자)

    var num1 = 100;

    var num2 = 200;

    console.log(typeof num1, num1, num1 + num2)

 

문자열은 + 사용시 더해지지만

숫자는 값이 더해져서 나옴 

 

 

 

 

---

3. 불린 boolean  (참과 거짓 )

false 판정되는 경우
flase, 0 , -0 , '', NaN, undefined, null

 

null 타입은 ==로 비교하면 false로 판정되므로 if 이용하여 테스트

var test3 = null;
    console.log(typeof test3);
    if(test2) {
      console.log('조건이 true면 실행');
    } else {
      console.log('조건이 false면 실행')
    }

 

---

불린예시

 

   // 불린(boolean) - 참(true), 거짓 (false) 으로 구분하는 자료형

    var toggleGnb = true;

    console.log(typeof toggleGnb, toggleGnb)

 

 

    // 불린(boolean) - 참(true), 거짓 (false) 으로 구분하는 자료형

    var toggleGnb = false;

    console.log(typeof toggleGnb, toggleGnb)

 

 

 

    // 백이 0보다 큰가?

    console.log(100 > 0);

 

 

 

 

 

 맞을시 트루 

 

 

 

 아닐시 false

 console.log(100 < 0); 

 

 

 

 

 

 

  // false 판정되는 경우

    var test = false;

    console.log(test == false)

 

같을경우 true

 

 

 

 

    // flase, 0 , -0 '', NaN (넘버가 아니다 not

    var test = 1;

    console.log(test == false)

 

값이 있을 경우 false

 

 

// false 판정되는 경우 // flase, 0 , -0 '', NaN
 var test = 100 * '문자';
// console.log(test, test == false)
 if(test) {
console.log('조건이 true면 실행');

  } else {

 console.log('조건이 false면 실행')

  }

---

    // undefined 타입 - 변수에 아무값도 대입하지 않음

    var test2;

    console.log(typeof test2);

    if(test2) {

      console.log('조건이 true면 실행');

    } else {

      console.log('조건이 false면 실행')

    }

 

 // null 값이 없음을 명시적으로 나타날때 사용
    // 객체를 대입시킬때 사용

    var test3 = null;

    console.log(typeof test3);

    if(test2) {

      console.log('조건이 true면 실행');

    } else {

      console.log('조건이 false면 실행')

    }

 

if 조건문 과 같이 사용됨

 

 

조건식 만들때 사용

! not 

&& 그리고 , 이면서 , and

ll or 또는

 

 

 

    var blood = 'A';

   

    if(blood == 'A') {

      console.log('소심해');

    }

조건이 일치할때 

    var blood = 'B';

    if(blood == 'A' || blood =='B') {

      console.log('소심해');

    }

or 둘중 하나만 참일때 

 

 

    var blood = 'B';

    var age = 20;

    if(blood == 'A' && age ==20) {

      console.log('소심해');

    }

&& 앤드 = b형 이면서 20살이면 작용 

    var blood = 'B';

    var age = 21;

    if(blood == 'B' && age ==20) {

      console.log('소심해');

    }

    console.log(!blood);

!는 논리연산으로 사용되며 뒤의값에 따라서 true 나 false로 변경해줌

---

3. 언디파인드(undefined)와 널(null)

언디파인은 정의되어있지않다 / 널은 값이 없다.

 

참고이미지

 

 

 

 

 

 

 

 

---

 

 

 

 

한번 일부로 틀려보자

    // 자동형 변환 - 자바스크립트는 연산 상황에 따라 데이터타입을 자동으로 변환

    var str1 = '50';

    var num3 = 100;

    console.log(str1 + num3);

 

숫자 100을 자바스크립트가 앞에가 문자기 때문에 

숫자를 문자로 변환시켜버림

 

그러나

 

    var str1 = '50';

    var num3 = 100;

    console.log(str1 * num3);

 

곱했을때 오류지만 자동으로 문자를 숫자로인식해 곱해서 나온다.

에러가 뜨지 않음

 

 

때문에

자동형변환은 프로그래머가 에러를 알수 없음

내용이 많아 질 수록 에러를 알수 없기에 좋지 않은 기능 특성주의할것

 

예제

    var str1 = '50';

    var num3 = 50;

    console.log(str1 * num3, str1 == num3);

 

문자와 숫자가 같을수 없지만 true 로 나온다 

 

 

이떄 일치 연산자 === 를 사용하면 바르게 나온다 

    var str1 = 50;

    var num3 = 50;

    console.log(str1 * num3, str1 === num3);

 

=== 일치연산자 - 값과 자료형이 같을 때만 true

 

따라서 자바스크립트에선 일치연산자 === 권장

 

 

 

---

기본자료형 (데이터타입) :  변수에 담을수 있는 데이터 유형을 말한다


undefined [정의하지 않았다 ]
var test;
var test, test1, test3; var을 여러번 좋지않고 한줄로 쓰기가능, 좋지않은방법 비추천

Number
var num = 100;

String
var str = '문자';

Boolean [trur fals]
var toggle Popup = true;

nall [잘사용안함 객체를 담을떄]
var obj = null;

대입연산자
= 변수를 선언하고 오른쪽 값을 대입

산술연산자
+,[문자일때는 연결 연산자, 숫자는 더하기] - , * , / , %[나머지 연산자/짝홀수로 나눌때 사용]

비교연산자 [if 조건문과 같이 사용]
> (초과) , >= (이상), == (같다), <= (이하), < (미만), !=(같지않다)


논리연산자
&& (and 그리고) - 앞뒤 두 조건이 모두 참일떄 true
|| (or 또는) - 앞뒤 조건중 한개 이상이 참이면 true 
! (not) - true, false를 바꿔줌


false 판정
'빈칸', false, 0 , -0 , undefined , null , NaN(연산이 안된, 없는)