[JavaScript] 기본 문법 | 변수, 자료형 및 자료형 검사, 자료형 변환

---

 

1.  변수  variable

👩🏻‍🚀  변수란 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 가리킴

👩🏻‍🚀  상수 constant 는 값을 한 번 지정하면 바뀌지 않는 데이터

 

1) 변수 선언 규칙

①  변수 이름은 영어 문자와 언더바(_), 숫자를 사용 - 띄어쓰기 허용 x, 숫자는 첫번째 문자 x
②  영어 대소문자를 구별하며 예약어는 변수 이름으로 쓸 수 x
③  카멜법 표기를 사용
④  변수 이름은 의미있게 작성 ( 이름만 보고도 대충 어떤 값인지 추측할 수 있어야 함 )

 

<script>
    var name = 10; // var : 변수 선언을 의미
    var str = 'javascript';
    var temp = true;
    // num, str, temp : 변수를 구분하는 이름(변수명)
    // 10, 'javascript', true : 변수에 저장 되는 데이터(값)
    document.write(num + '<br>' + str + '<br>' + temp + '<br><br>');

    // 여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있다.
    var num, str, temp;
    num = 20;
    str = 'ECMAscript'
    temp = false;

    document.write(`${num}<br> ${str}<br> ${temp}<br><br>`);

    var num = 30, str = 'jquery', temp = true;
    document.write(num + '<br>' + str + '<br>' + temp + '<br><br>');

    // 변수는 새로운 데이터가 저장되면 기존 데이터는 사라진다.
    var num = 0;
    num = 10;
    document.write(`${num} <br>`); // 10

    num2 = 1
    document.write(nm2);
</script>

 

---

 

2.  자료형

👩🏻‍🚀  자료 data란 프로그래밍에서 프로그램이 처리할 수 있는 모든 것

👩🏻‍🚀  자료형 data type이란 컴퓨터가 처리할 수 있는 자료의 형태

👩🏻‍🚀  자바스크립트 자료형

       - 기본 자료형 : 숫자, 문자열, 논리형

       - 복합 자료형 : 배열, 객체

       - 특수 자료형 : undefined, null

종류		설명	예시
기본 자료형	숫자형	따옴표 없이 숫자로만 표기	var birthYear = 1995;
	문자열	따옴표("" or '')로 묶어서 표기 숫자를 따옴표로 묶으면 문자로 인식	var greeting = 'Hello'; var birthYear = '1995';
	논리형	참과 거짓이라는 2가지 값만 있는 유형 true, false 소문자로 표시	var isEmpty = true;
복합 자료형	배열	하나의 변수안에 여러 개의 값을 저장	var seasons = ['봄', '여름', '가을', '겨울']
	객체	함수와 속성을 함께 포함	var date = new Date();
특수 자료형	undefined	자료형이 지정되지 않은 경우   ex. 변수 선언만 하고 값을 할당하지 않은 변수
	null	값이 유효하지 않은 경우

 

---

1) 기본 자료형 : 문자열 string

✏️  문자와 문자열을 구분하는 언어도 있으나 자바 스크립트는 문자열로 통일
✏️  문자열 자료형을 만드는 방법 : 작은 따옴표나 큰 따옴표로 감쌈

 

<script>
    console.log("안녕하세요");
    console.log('안녕하세요');

    //console.log("안녕하세요'); // 따옴표 시작과 끝은 같아야 함

    // 혼용하는 것도 가능
    console.log('this is "string"');
    console.log("this is 'string'");

    // 이스케이프 문자 사용 : 따옴표를 문자 그대로 사용하고 싶을 때
    console.log('this is \'string\'');
    console.log("this is \"string\"");

    /* 이스케이프 문자 사용 예
    \n : 줄바꿈
    \t : 탭문자
    \\ : 역슬래시(\) 자체
     */
    console.log("this is 'string' \nthis is 'string' ") // 줄 바꿈
    console.log("this is 'string' \tthis is 'string' ") // 탭 문자
</script>

콘솔 창 결과

---

 

💡  문자열 연산

문자열에 적용할 수 있는 처리 
  1. 문자열 연결 연산 : 문자열 + 문자열
  2. 문자 선택 연산 : 문자열[인덱스] -> 문자 하나
  3. 문자열 길이 : 문자열.length -> 문자 갯수

<script>
    console.log('안녕하세요.' + '자바 스크립트 입니다.');  // 안녕하세요.자바 스크립트 입니다.
    let greet = '안녕하세요.'; 
    console.log(greet + '자바 스크립트 입니다.'); // 안녕하세요.자바 스크립트 입니다.

    // 문자 선택 연산. 인덱스는 0부터 시작하는 정수로 이루어짐
    console.log('안녕하세요.'[0]); // 안
    console.log('안녕하세요.'[1]); // 녕
    console.log(greet[0]); // 안
    console.log(greet[1]); // 녕

    // 문자열의 길이
    console.log("안녕하세요.".length); // 6
    console.log(greet.length); // 6

    let name = prompt('이름을 입력');
    alert('이름은 '+name.length+'자 입니다.')

    let name2 = prompt('한글로 이름을 입력');
    alert('당신의 성은 '+ name2[0] +'입니다.');
</script>

 

---

💡 템플릿 문자열
문자열 결합 연산자를 사용하지 않고, 문자열 안에 바로 표현식을 사용할 수 있음
쌍따옴표나 홑따옴표 대신 백틱(`)을 사용 

<script>
    // 일반적인 방법 : 믄자열 결합 연산자 사용
    console.log('표현식은 273 + 52의 값은 ' + (273 + 52) + '입니다.');

    // 템플릿 문자열 사용
    console.log(`표현식은 273 + 52의 값은 ${273 + 52}입니다.`); // 백틱(`)을 사용

    let name = prompt('한글로 이름을 입력');
    alert(`당신의 성은 ${name[0]} 입니다.`);
</script>

 

---

 

2) 기본 자료형 : 숫자형 number

 

✏️  자바 스크립트는 정수와 실수의 구분이 없음
✏️  따옴표 없이 사용, 숫자에 따옴표를 붙이면 문자열 자료형이 됨

✏️  실수를 2진수로 변환해서 계산하는데, 이 때 자릿수가 많은 소수로 변환되어 계산되기 때문에 정확하지 x

    <script>
        console.log(100);
        console.log(123.456);

        // 숫자 관련 연산을 사용
        console.log(200 + 100); // 300
        console.log(200 - 100); // 100
        console.log(200 * 100); // 20000
        console.log(200 / 100); // 2

        // 프로그래밍에서는 나머지 연산이 자주 사용됨
        console.log(200 % 100); // 0
        console.log(200 % 99); // 2

        // 실수 사용시에 정확한 계산은 힘들다
        console.log(0.2 + 0.1); // 0.30000000000000004

        console.log(200 + 100); // 300
        console.log('200' + '100'); // 200100
    </script>

---

 

3) 기본 자료형: 논리형 boolean

 

✏️  참(True)과 거짓(False) 두 가지 값만 가지는 자료형

 

💡 비교 연산자 
    === : 양쪽이 같다.
    !==  : 양쪽이 다르다.
    >      : 왼쪽이 더 크다.
    <      : 오른쪽이 더 크다.
    >=    : 왼쪽이 더 크거나 같다.
    <=    : 오른쪽이 더 크거나 같다.

 

<script>
    console.log(1 === 2); // false 양쪽이 같다.
    console.log(1 !== 2); // true 양쪽이 다르다.
    console.log(1 > 2); // false 왼쪽이 크다.
    console.log(1 < 2); // true 오른쪽이 크다.
    console.log(1 >= 2); // false 왼쪽이 크거나 같다.
    console.log(1 <= 2); // true 오른쪽이 크거나 같다.

    // 문자열에도 비교 연산자 사용 가능. 내림차순 값이 크다.
    console.log('강아지' > '냐옹이'); // false

    // 논리 부정 연산자 (!)
    // 값을 반대로 바꿈
    console.log(!true); // false
    console.log(!false); // true
</script>

 

---

4) undefined와 null 자료형

 

✏️  undefined : 상수와 변수로 선언하지 않거나 변수를 선언하면서 값을 지정하지 않은 경우
✏️  상수는 선언할 때 반드시 값을 지정해야 하므로 값이 없는 상수는 존재하지 않음

✏️  null : ' 데이터 값이 유효하지 않은 상태 '

<script>
    'use strict'; // 엄격 모드

    console.log(typeof(a)); // undefined

    let b;
    console.log(typeof(b)); // undefined

    c = 100;
    console.log(typeof(c)); // number(엄격모드 지정 안할 시)
</script>

 

---

 

3. 자료형 검사  typeof

👩🏻‍🚀  자료형 확인할 때 'typeof' 사용

<script>
    let num = 10;
    console.log(num);
    num ='하이';

    // typeof 연산자 사용 : typeof(자료)
    console.log(typeof('안녕하세요')); // string
    console.log(typeof(100)); // number
    console.log(typeof(true)); // boolean

    // 괄호가 없어도 됨 : typeof가 연산자라서 가능
    console.log(typeof '안녕하세요'); // string
    console.log(typeof 100); // number
    console.log(typeof true); // boolean

    console.log(typeof "안녕하세요" === "string"); // true. "안녕하세요"의 자료형이 string
    console.log(typeof ("안녕하세요") === "string"); // true. "안녕하세요"의 자료형이 string
    console.log(typeof ("안녕하세요" === "string")); // boolean. "안녕하세요" === "string"의 결과값은 false

    // 자바 스크립트에서는 변수에 함수를 할당하는 것이 가능.
    // 즉, 함수도 하나의 자료형임.
    let fun = function() {
        console.log('hello');
    }
    fun(); // hello
    console.log(typeof fun); // function
</script>

 

---

4.  자료형 변환

 

 숫자 자료형으로 변환할 때는 Number() 함수를 사용

<script>
    // prompt로 입력 받으면 기본형이 문자열
    const rawInput = prompt("inch 단위의 숫자를 입력해주세요."); // 숫자를 입력.
    console.log(typeof rawInput); // String

    // 입력받은 데이터를 숫자형으로 변경하고 cm 단위로 변경.
    const inch = Number(rawInput);
    console.log(typeof inch); // Number
    const cm = inch * 2.54;

    // 출력
    alert(inch + 'inch는 ' + cm + 'cm 입니다.');
    alert(`${inch}inchsms ${cm}cm 입니다.`);
</script>

 

문자 자료형으로 변환할 때  String() 함수 사용

<script>
    var number = 100;
    console.log(typeof(number)); // number

    number = String(number); 
    console.log(typeof(number)); // string
    console.log(number); // 100
</script>

 

불 자료형으로 변환할 때 Boolean() 함수 사용

<script>
    // 숫자를 불린으로 형변환. 0은 false 나머지는 true
    var number = 200; 
    console.log(typeof(number)); // number
    console.log(number); // 200

    number = Boolean(number);
    console.log(typeof(number)); // boolean
    console.log(number); // true

    let num = 0;
    console.log(typeof(num)); // number
    console.log(num); // 0

    num = Boolean(num);
    console.log(typeof(num)); // boolean
    console.log(num); // false. 0은 false로 변환.

    // 문자열을 불린으로 형변환. 빈 문자열은 false, 나머지는 true.
    let string2 = 'hello';
    console.log(typeof(string2)); // string

    string2 = Boolean(string2);
    console.log(typeof(string2)); // boolean
    console.log(string2); // true

    let string3 = '';
    console.log(typeof(string3)); // string

    string3 = Boolean(string3);
    console.log(typeof(string3)); // boolean
    console.log(string3); // false
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]