본문 바로가기
카테고리 없음

[JS] 자바스크립트란 ? - 변수 , 값 , 연산자

by 저여저 2024. 2. 21.

< 데이터와 변수 >

ㅇ 데이터란 ? 이론을 세우는데 기초가 되는 사실 또는 바탕이 되는 자료

ㅡ 데이터 타입이란  공간에 저장되는 값의 종류이다.

ㅇ 변수란 ? 분류된 데이터에 대하여 담을 수 있는 이름을 가진  공간들

ㅡ 변수에 들어간 값은 바꿀 수 있음.

ㅡ 변수의 종류 (= 데이터타입) 정수,실수,문자 등이 있다.

ㅇ 변수 선언 방식

데이터 종류+변수이름+세미콜론 ;

 

< 변수 >

ㅇ변수 선언 방식

데이터 종류 + 변수이름 + 세미클론; 

 

ㅇ 변수 종류 (  요즘은 let 을 주로 사용함 )

ㅡ var 가변형 변수 / let 가변형 블록 지역변수 / const 불변형 블록 지역 변수

ㅡ 일반적인 변수는 int, double, string인데 자바스크립트는 아님

var 변수이름;

let 변수이름;

const 변수이름;

 

ㅇ 변수 선언시 지켜야할 룰

ㅡ 대문자와 소문자 구별 한다.

ㅡ 예약어 사용안됨 ( if , for, while 안됨)

 

 

ㅇ 변수선언 시 지키면 좋은 Tip

ㅡ 의미없는 이름, 추상적인 이름 사용하지 말자

ㅡ 변수 이름은 camelCase로 사용한다.  (다음 단어시작은 대문자로 하기)

let age;  >>> let myAge;  구체적으로 사용하기

let bad_name >> let badName;으로 사용하기.

 

ㅇ 할당 : 공간에 데이터를 넣는 것

 let animal = "cat";  

ㅡ 예제 : nation 변수를 선언하고 할당해줌.

let nation;
nation = "korea";
nation = "japan";

ㅡ예제2 : nation 변수를 선언과 동시에 할당해줌.

let nation = "korea";

 

< 값 : Value >

ㅡ 조작 가능한 어떤 표현이다. 

ㅡ 문자열, 문자, 숫자 등이 가짐 / 피연산자 + 연산자

ㅡL-Value 왼쪽값 ( 데이터의 주소값)  과 R-Value 오른쪽값 ( 메모리 주소 ) 으로 나뉜다. 

ㅇ 값 ( Value)의 종류 - 변수에 할당하는 방식에 달라짐.

ㅡ 원시 값 : 숫자, 문자, bollean , null, undefined  ( 단순데이터값)

어떤메모리에 올라간 값은 변경되지않고 새로운 메모리 주소에 재할당 된다.

ㅡ 참조 값 : 참조하여 객체가 있다. 

값을 변경할때는 어떠한 주소 안에 들어있는 객체안의 참조값을 추가해서 값을 변경해준다. 

 

ㅇundefined 

ㅡ 값의 유무 표현이다. 빈값, 없는 값, 유일한 값, 원시 값이다.

ㅡ 변수 선언 후 값을 할당 받지 않은 상태이다.

ㅡ let, var 로 선언한 변수는 undefined 로 초기할당 된다.

ㅇnull

ㅡ 값은 유무 표현.  빈 값, 없는 값, 유일한 값,  값이 없다는 것을 의도적으로 명시하는 방법이다.

 

ㅇ 값 출력 방법

1. cosole.log

2. alert

3. document.write

4. innerHtml

 

 

< 래퍼 객체 Wrapper Object >

ㅡ 원시 타입을 객체화 시킨것이다. >>  new String()  

ㅡ 임시 객체를 생성한다. > 생성된 객체 함수 호출 > 함수처리 > 생성된 객체 소멸 > 원시타입만 존

ㅡ 래퍼 객체 종류 : Number, String, Boolean 

 

<타입 변환 >

자바스크립트 값 - > 타입을 변환시킴 : 다른 타입 값 대입 가능하다.

ㅡ 예제

    <script>
      let myAge;
      myAge = 10;
      document.write(typeof myAge);
      document.write("<br>");
      myAge = "10";
      document.write(typeof myAge);
    </script>

 

ㅡ묵시적 타입 변환 (자동)

ㅡ 명시적 타입 변환 ( 자동 외에 다른 타입으로 변환이 필요할 때 사용)

ㅡ예

    <script>
      let myAge;
      myAge = 10;
      document.write(typeof myAge);
      document.write("<br>");
      myAge = "10";                              /* <<< 묵시적 타입 변환*/
      document.write(typeof myAge);
      document.write("<br>");
      document.write(Number(myAge));  /*<<<명시적 타입 변환*/
    </script>

 

 

< 숫자  : 기본 문법 >

ㅡ 원시 값 이다.  상수와 함수를 가짐

ㅡ 예제 : 숫자 출력하기

let x = 3.14;
let y = 3;

document.getElementById("demo").innerHTML = x +"<br>"+ y;

>>출력값

3.14
3

 

< 문자열 : string 문자를 포현한값> 

ㅡ 원시 값이다.

ㅡ  ' '  따옴표로 표현 가능하다. " "

ㅡ Template literals 작은 따옴표로 표현된다 ' ' 

ㅡ 긴문자열 표현하기 ( 가독성이 떨어지기 때문에 여러줄로 표현한다. )

<HTML><body> <p id="demo">  </body></HTML>

let longString = "여러 줄에 걸쳐 작성해야 할 정도로 " +
                 "긴 문자열인데 왜 한줄에 다 적으면 안되냐면" +
                  "코드를 읽기 힘들어지기 때문"

document.getElementById("demo").innerHTML = longString+ " ";

위 처럼 " " + " " 로 표현하거나 " " | " " 역슬래시 문자로 표현해준다.

 

< 연산자 >

ㅡ 기본적인 연산자들의 기본 개념에 대해 알아보자 .

ㅇ 연산자 (operator) 란 ? 연산에 사용하는 기호이다 .

ㅡ +, -, x . . .

ㅡ 피연산자란 ? 연산의 대상이다. (ex 숫자 )

ㅡ 산술연산자, 증감연산자, ,대입연산자. 관계연산자, 논리연산자, 비트연산자 등등이 있다.

1) 산술 연산자

+ 더하기, -빼기 , *곱하기 , /나누기 , % 나머지 구하기

2) 증감연산자 : 증가나 감소시킴

++ 1을 더한다. ++num; 또는 num++; ,  -- 1을 뺀다. --num; 또는 num--;

3) 대입연산자 

4) 관계연산자 (비교연산자) :  두수의 값을 비교하기 위한 연산자이다.

ㅡ  참 true 또는 거짓 false

ㅡ a > b, a < b , a>=b , a==b , a!==b 

5) 논리연산자 : 참과 거짓을 이용하여 논리 연산

ㅡ 참 1, 거짓 0 

ㅡ a&&b 논리 AND (논리곱) , a||b 논리 OR(논리합) , !a 부정, 논리 NOT (참 => 거짓, 거짓=>참 )으로 결과를 보여준다.

 

< 함수 >  

ㅇ 함수란 ?? 어떤 기능을 만든 코드들의 집합 (독립적으로 설계 한다 )

ㅡ 반복적인 코드 작성 피할 수 있고, 코드 간결화로 가독성이 좋아짐, 유지보수가 쉽다는 장점이 있다.

ㅇ 함수 호출  function call (기능 부르기 ! ) 

함수선언후 함수호출한다.

function 함수이름(파라미터...) { 함수 기능을 구현한 코드 }  <<<<<선언

console.log(sum(10,20));  <<<<호출

ㅡ예제

  //함수선언
  function sum(num1, num2) {
    return num1+num2;
  }
 
  //함수호출
  sum(10,20);

 

< 연산자의 예제들을 살펴보자 >

1) 산술 연산자

ㅡ예제출력: 5


let x = 5;
let y = 10;
let e = x + y ;

document.getElementById("demo").innerHTML = e ;

 

2)증감 연산자

ㅡ 예제출력 : 6

let x = 5;
let y = ++x;

document.getElementById("demo").innerHTML = y ;

 

3) 할당 연산자 (대입연산자)

 

ㅡ 예제출력 :  5

let x = 10;
let y = 5;

x -= y;
document.getElementById("demo").innerHTML = x;

 

4) 비교 연산자 : 결과값은 true / false 

 

5) 삼항연산자 (조건부연산자)

ㅡ예제 출력값

 

연산자와 함수 >>

<p>티켓예매</p>

<input id="age" placeholder="나이를 적으세요" />

<button onclick="myFunction()">확인</button>

<p id="demo"></p>

<script>
function myFunction() {
  let age = document.getElementById("age").value;
  let tiketting = (age < 18) ? "불":"전체예매 ";
  document.getElementById("demo").innerHTML = tiketting + "가능";
}
</script>

 

6) 논리연산자

7) 비트연산자

 

 

 

 

 

 

 

티스토리툴바