JAVAScript(2)

신홍원·2025년 1월 7일
JavaScript
post-thumbnail

변수에 저장할 수 있는 자료형

  1. 문자형 데이터(String)
  • 문자형 데이터는 문자나 숫자를 큰 따옴표("")나 작은 따옴표('')로 감싸고 있는 데이터를 말한다. html태그를 문자형 데이터에 포함하여 출력하면 태그로 인식한다.
    [기본형]
    var 변수 = '사용할 숫자나 문자 또는 태그';
  1. 숫자형 데이터(Number)

  • 숫자형 데이터는 단어 의미 그대로 숫자를 말한다. 만약 "100"처럼 따옴표로
    숫자가 감싸져 있다면 "100"은 숫자가 아닌 문자이다.

  • 문자형 숫자를 숫자로 취급하고 싶다면 Number("100")을 이용하면 문자형 데이터를 숫자로 바꿀 수 있다.

    [기본형]
    var 변수명 = 숫자;
    var 변수명 = Number('문자형 숫자'); -> 문자를 숫자로 취급한다.

  1. 논리형 데이터(Boolean)

  • 논리형 데이터는 true(참)또는 false(거짓)으로 값을 출력해주는 데이터이다.
    이 데이터는 주로 2개의 데이터를 비교할때 사용한다.

  • 예를 들어 "100보다 10이 더 크다"는 잘못된 비교이므로 false값을 반환한다.

  • Boolean()메서드에 데이터를 입력하면 값은 무조건 논리형 데이터인 true/false가 반환된다.

  • 이때 ()안에는 0과 null, undefined, ""(빈문자), false를 제외한 모든 데이터에 대해 true값을 반환한다. 예를 들어 Boolean("김떙떙")이라고 입력하면 true가 반환된다.

    [기본형]
    var 변수 = true 또는 false;
    var 변수 = Boolean(데이터)

  1. 빈(Null, undefined)데이터

  • undefined데이터는 변수에 값이 할당되기 이전의 기본값을 말한다.
    즉, '데이터가 할당 된 적이 없다'를 뜻하는 데이터이다.

  • var num;처럼 변수명만 선언한 상태에서는 undefined데이터가
    변수에 저장된다. null데이터는 변수에 저장된 데이터를 비울 때 사용한다.

    [기본형]
    var 변수명; //undefined
    var 변수명 = null;

typeof(키워드)

  • 지정한 데이터 또는 변수에 저장된 자료형을 알아낼때 사용하는 키워드이다.

    [기본형]
    typeof 변수명 또는 데이터;

변수 선언 시 주의사항(코딩 컨벤션)

  1. 변수명의 첫 글자로는 _,$,영문자만 올 수 있다.
  • var 1num; (X)
  • var $num; (O)

  1. 변수명의 첫 글자 다음으로는 영문자, 숫자, _,$가 올 수 있다.
  • var 100num; (X)
  • var num100; (O)

  1. 변수명으로는 예약어(자바스크립트에서 코드로 이미 사용중인 이름)를 사용할 수 없다.
  • var typeof; (X)
  • var document; (X)
  • var number; (X)
  • var num; (O)

  1. 변수명을 지을때에는 되도록 의미에 맞게 지어야 한다. 직관적이고 단순할수록 좋다.
  • var num = 'hello'; (X)
  • var num = 10; (O)
  • var userName = "김땡떙"; (O)

  1. 변수명을 사용할때에는 반드시 대/소문자를 구별해야 한다.
  • var userName = '김땡떙';
    username = '박땡땡'; (X)
    => 변수명 선언 시 대문자를 썼는데, 아래줄에 불러올땐 소문자여서 오류가 난다.

연산자

  • 연산자는 무언가 연산하여 값을 낼 수 있는 계산식을 말한다. 초등학교때 배운 더하기, 빼기, 곱하기, 나누기, 나머지와 같은 것이다.

  • 자바스크립트 프로그래밍에서 사용하는 연산자의 종류로는 산술, 대입(복합대입), 문자결합, 증감, 비교, 논리, 삼항조건 연산자가 있다.

산술 연산자

  • 산술연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있다.

  • 산술 연산자를 사용하기 위해서는 연산을 할 데이터가 2개 이상 있어야 한다.

  • 연산을 할 데이터를 멋진 말로 연산대상데이터(피연산자)라고 한다.

  • 자바스크립트 연산에서는 숫자끼리 직접 연산하지 않고, 변수끼리 연산한다.

    [기본형]
    -변수A + 변수B : 변수 A의 값과 변수 B의 값을 더한다.
    -변수A - 변수B : 변수 A의 값과 변수 B의 값을 뺀다.
    -변수A * 변수B : 변수 A의 값과 변수 B의 값을 곱한다.
    -변수A / 변수B : 변수 A의 값에서 변수 B의 값을 나눈다.
    -변수A % 변수B : 변수 A의 값에서 변수 B의 값을 나눈 나머지값이다.

문자 결합 연산자

  • 문자 결합 연산자란 문자데이터와 문자데이터를 더하여 결합한 것을 말한다.
    즉, 피연상가자 문자형 데이터이다.

  • 만약 피연산자 중 문자형 데이터가 하나라도 들어있으면 모든 피연산자들의 데이터는 문자형 데이터로 자동 변환되어 하나의 문자형 데이터로 반환된다.

    [기본형]

    1. 문자형 데이터 + 문자형 데이터
      var 변수1 = '문자1'
      var 변수2 = '문자2'
      변수1 + 변수2 = "문자1문자2"

    2. 문자형 데이터 + 숫자형 데이터
      var 변수1 = "문자1";
      var 변수2 = 숫자;
      변수1 + 변수2 = "문자=숫자 ㅡ>하나의 문자형 데이터로 변환

대입(복합대입)연산자

  • 대입연산자(=)는 연산된 데이터를 변수에 저장할때 사용하는 연산자이다.
    복합대입 연산자는 산술연산자와 대입연산자가 복합적으로 적용된 것을 말한다.

    [기본형]

    • A = B
      : B의값이 A에 대입된다.(대입 연산자)

    • A += B => A = A + B
      : A는 A와 B를 더한 값이다.

    • A -= B => A = A - B
      : A는 A에서 B를 뺀 값이다.

    • A= B => A = A B
      : A는 A와 B를 곱한 값이다.

    • A /= B => A = A / B
      : A는 A와 B를 나눈 몫의 값이다.

    • A %= B => A= A % B
      : A는 A에서 B를 나눈 나머지 값이다.

증감연산자

  • 증감연산자에는 숫자형 데이터를 1씩 증가시키는 증가연산자(++)와 1씩 감소시키는 감소연산자(--)가 있다.

  • 증감 연산자는 앞에서 배운 연산자와 달리 피연산자가 1개만 필요한 단항 연산자이다.

  • 증감연산자는 변수의 어느 위치에 기호가 붙느냐에 따라 연산방식이 달라진다.

    [기본형]

    1. 전위 연산
      --변수
      ++변수
      : 변수의 값을 1씩 증가시키거나 감소시킨다.

    2. 후위 연산
      변수--;
      변수++;
      : 변수의 값을 1씩 증가시키거나 감소시킨다.


      [연산 방식]


      1. 전위연산
      var B = 3;
      var A = ++B;
      : 변수 B의 값을 먼저 1증가 시키고, 증가시킨 값을 A에 대입한다.


      2. 후위연산★
      var B = 3;(피연산자)
      var A = B++;
      : 변수 B의 값을 A에 대입시킨 후, B의 값을 1 증가시킨다.

비교연산자

  • 비교 연산자는 두 데이터를 '크다', '작다', '같다'와 같이 비교할때 사용하는 연산자이다.
    연산된 결괏값은 true또는 false로 논리형 데이터를 반환한다.

    [기본형]

    1. A > B : A는 B보다 크다.
    2. A < B : A는 B보다 작다.
    3. A >= B : A는 B보다 크거나 같다.
    4. A <= B : A는 B보다 작거나 같다.
  1. A == B : A는 B와 같다. 약한 비교
  • 숫자를 비교할 경우 자료형은 숫자든 문자든 상관없이
    표기된 숫자만 일치하면 true값을 반환한다.
  • 예를들면 숫자형 10과 문자형'10'은 데이터 자료형이 다르지만
    표기된 숫자가 일치하므로 true값이 반환된다.
  1. A === B : A는 B와 같다.
  • 숫자를 비교할 경우 반드시 표기된 숫자와 자료형까지 모두 일치해야 true값이 나온다.
  • 만약 '10'과 10을 비교할 경우 표기된 숫자는 같지만 자료형이 다르기 때문에 false값을 반환한다.
  1. A != B : A는 B와 다르다.
  • 숫자를 비교할 경우 자료형은 숫자든 문자든 상관없이 표기된 숫자만 다르면 true값을 반환한다.
  • 예를들어 '10'과 10은 자료형은 다르지만 표기된 숫자가 같으므로 false값이 나온다.

    5 != 10 -> 표기된 숫자가 다르므로 true
    '10' != 10 -> 표기된 숫자가 같으므로 false

  1. A !== B : A는 B와 다르다.
  • 숫자를 비교할 경우 반드시 표기된 숫자 또는 자료형이 일치하지 않을때 true값을 반환한다.
  • 예를들어 10과 '10'을 비교했을때 쓰여진 숫자는 같지만 자료형이 다르므로 true값을 반환한다.

    5 !== 10 -> 표기된 숫자가 다르므로 true
    '10' !== 10 -> 표기된 숫자는 같지만 자료형이 달라서 true

논리 연산자

  • 논리 연산자에는 ||(or), &&(and), !(not)연산자가 있다.

  • 논리 연산자는 논리형 데이터인 true또는 false로 결괏값을 반환한다.

  • ||(or)연산자는 피연산자 중 하나만 true여도 무조건 true값을 반환한다.

  • &&(and)연산자는 피연산자가 모두 true여야만 true값을 반환한다.

  • 즉, 하나라도 false가 포함되면 false값을 반환한다.

  • !(not)연산자는 논리 부정연산자로 true이면 false를 반환하고 false이면 true를 반환한다.

    || : or연산자라고 부르며, 피연산자 중 하나라도 true가 있으면
    최종 결괏값을 true로 반환한다.


    && : and연산자라고 부르며, 피연산자 중 하나라도 false가 있으면
    최종 결괏값을 false로 반환한다.


    ! : not연산자 라고 부르며, 단항연산자이다. 피연산자의 값이 true면
    최종결과를 false로 반환하고 피연산자 값이 false면 최종 결괏값을
    true로 반환한다. 즉, 결괏값을 반대로 뒤집을때 사용한다.

삼항 조건 연산자★

  • 상항 조건 연산자는 조건식(값이 true 또는 false로 나오는 식)의 결과에 따라 실행 결과가 달라지는 삼항 연산자로, 피연산자가 3개 필요하다.

  • 연산자의 우선순위란 여러 연산자가 식에 포함되어 있을 때 먼저 계산되는 순서를 말한다.

  • 삼항 조건 연산자는 연산한 결과 조건식의 만족여부에 따라 실행하는 코드가 다를 경우 사용한다.

  • 예를들어 사용자로부터 입력받은 나잇 값이 20세이상이면 "성인입니다"를, 미만이면 "미성년자입니다"
    를 출력하고 싶을 때 사용한다.

    [기본형]
    조건식 ? 자바스크립트코드1 : 자바스크립트코드2;
    : 조건식이 true이면 자바스크립트코드1을 실행시키고,
    false면 자바스크립트코드2를 실행시킨다.

연산자의 우선순위★★★

  1. ()
  2. 단항연산자 (++,--,!)
  3. 산술연산자 (=,-,*,/,%)
  4. 비교연산자 (<,>,<=,>=,==,!=,===,!==)
  5. 논리연산자 (||,&&)
  6. 대입(복합대입)연산자 (=,+=,-=,*=,/=,%=)
profile
신홍원
이전 포스트

javascript (1)

다음 포스트

JAVASCRIPT (3)

0개의 댓글