강의 9_230310_JavaScript(변수, var, let, type, 콘솔 등)

by

자바스크립트 작성 방법

  • 아래에 스크립트 태그를 작성하십시오. HTML의 태그
  • 스크립트 태그
    • JavaScript 구문을 작성하는 데 도움이 되는 태그
  • 파일명.js
    • 입력하여 연결 아래에 .html 파일에 쓰기

변하기 쉬운

  1. 변하기 쉬운?
    1. 데이터와 변수를 가리키는 주소가 저장된 데이터의 주소입니다.
    2. 주소를 알면 데이터를 검색할 수 있습니다.
    3. 변수의 값은 변경될 수 있습니다.
    4. 변수 선언은 메모리의 변수 이름 위치에 데이터를 저장하는 변수의 데이터 정의입니다.
  2. 저장
    1. 프로그램 실행에 필요한 데이터와 명령어를 저장하는 장소
  3. 나머지
    1. CPU가 데이터에 빠르게 액세스하고 사용할 수 있는 공간
  4. CPU
    1. 처리할 데이터나 명령을 임시로 저장하여 사용하기 위해 사용합니다.
    2. 장치가 꺼지면 저장된 모든 데이터가 손실됩니다.

변수 선언_var, let, const

바르 허용하다 끊임없는
선언 범위 전역 범위(함수 외부에서 선언된 경우) 또는 기능 범위(함수 내부에서 선언된 경우) 블록 범위(선언된 블록 범위 내에서만 사용 가능) 블록 범위(선언된 블록 범위 내에서만 사용 가능)
재선 동일한 범위 내에서 재등록이 가능합니다. 동일한 범위의 갱신 선언은 허용되지 않습니다. 일정한 상수 값을 유지하기 때문에 같은 범위 내에서 재선언이 불가능하다.
업데이트하려면 동일한 범위 내에서 값을 업데이트할 수 있습니다. 동일한 범위 내에서 값을 업데이트할 수 있습니다. 일정한 상수 값을 유지하기 때문에 동일한 범위 내에서 값을 업데이트하는 것은 불가능합니다.
문제 변수 이름이 겹치면 처음 선언된 변수가 소멸됩니다. – 모든 const 선언은 선언 시 초기화되어야 합니다.
전- var var1 = 1; let1 = 1; const cons1 = 1;
  • 변수 문
var var1 = 1;
//var형식의 변수 var1을 선언, 데이터의 값은 1을 가지고 있다.
let let2;       //값을 대입하지 않고 변수의 이름만 미리 선언해 놓을 수 있다. 
let2 = 56135;   //값을 넣는 방법
//자바 스크립트에서 변수를 선언할 때 let이나 var같은 키워드를 꼭 사용해줘야 한다.
let3 = 3;       // 전역변수르 선언이 되고 예상치 못한 문제가 발행한다. 
                // * 절대 하면 안되는 방법 *
  • 변수 이름
    • 변수 이름(예: var1)은 데이터에 액세스하기 위한 변수 이름을 지정합니다.
  • console.log( );
    • HTML 로그에서 변수를 확인하는 방법
    • 값은 웹 브라우저 개발자 모드(f12)의 콘솔 창에서 괄호 안에 표시됩니다.
let let1 = 2;
consloe.log(let1);     //웹 콘솔 창에 let1의 값인 2가 노출된다.


let let2 = "나는 글자";  //데이터값을 문자 저장하기 위해서는 " " 안에 넣어야 한다.
console.log(let2);      //콘솔 창에 문자는 검은색, 숫자는 파란색으로 표기
let let1 = 2;
consloe.log(let1);     //웹 콘솔 창에 let1의 값인 2가 노출된다.


let let2 = "나는 글자";  //데이터값을 문자 저장하기 위해서는 " " 안에 넣어야 한다.
console.log(let2);      //콘솔 창에 문자는 검은색, 숫자는 파란색으로 표기
let let1 = 2;
consloe.log(let1);     //웹 콘솔 창에 let1의 값인 2가 노출된다.


let let2 = "나는 글자";  //데이터값을 문자 저장하기 위해서는 " " 안에 넣어야 한다.
console.log(let2);      //콘솔 창에 문자는 검은색, 숫자는 파란색으로 표기
let let7;
console.log(typeof let7);       // undefined: 값이 지정되지 않았을 때 타입. 
																/* 값이 부재 상태일 때, 값이 확인되지 않을 때
             (=값을 넣지 않고 선언했을 때 자동으로 들어가는 데이터 타입) 나타난다. */

let let8 = null;                
console.log(typeof let8);       //null: undefined와 같이 값이 없음을 나타내는 타입.
								//(object) 개발자가 변수에 값이 없음을 의도적으로 나타낼 때 작성한다.
  • 데이터 바이트
    • 숫자 유형: 8바이트
    • 문자열: 약 2바이트 이상(길이에 따라 다름)
    • 참/거짓(부울): 1바이트(각각 둘)
    • null / 정의되지 않음: 0바이트

    추후 블록체인 처리가 계속되면 바이트패딩(byte padding) 기법(데이터를 전송하거나 저장할 때 특정 블록으로 나누어 각 블록의 크기를 일정한 크기로 설정한다. 이는 보안이나 속도를 향상시킬 수 있기 때문이다. 데이터 전송 시)’ 또는 ‘암호화(sha-256 데이터 암호화)’를 사용할 수 있습니다.

변수 type_primitive 유형, 객체 유형, 배열 유형

원시 유형

  1. 불변 값 정의(변경할 수 없는 값)
  2. 선
    1. 텍스트 데이터를 나타내는 데 사용됩니다.
  3. 숫자
  4. 부울
    1. 논리적 요소를 나타냅니다.
    2. true와 false의 두 가지 값을 가질 수 있습니다.
    3. 원래 값: 0, -0, 영, 잘못된, NaN, 정의되지 않음빈 문자열 (” “)의 경우 잘못된
    4. 문자열 “false”를 포함한 다른 모든 값의 경우 진실
  5. 정의되지 않음
    1. 전역 개체의 속성입니다. 변수에 값이 할당되지 않은 경우 반환됩니다.
  6. 영
    1. 값이 의도적으로 비어 있음을 나타냅니다. 부울 연산에서 거짓으로 처리됩니다.

참조 유형

  1. 개체 유형
    1. 중괄호로 정의됩니다.
let obj = {a:1, b:2, c:3};     
    console.log("obj : a : ",obj.a);            //obj 객체의 a값을 대입하거나 가져오려면 .으로 객체의 값에 접근할 수 있다.
    console.log("obj : b : ",obj.b);            // 객체의 키 값: 예) a, b, c
    console.log("obj : c : ",obj.c);
    obj.a = 10;

    obj.d = 20;                                 //객체 d 생성. d에 20의 값을 대입.

배열 유형

'추천 관련글,
  1. 대괄호로 정의됩니다.
  2. 배열의 인덱스(값의 순서)는 값(0 ~ ‘배열 길이 – 1’)을 갖습니다.

let arr = (1,2,3,"1","2","3");
    //해당 배열의 순서는 0 ~ 5
    console.log("arr(0) : ",arr(0));
    console.log("arr(1) : ",arr(1));
    console.log("arr(2) : ",arr(2));
    console.log("arr(3) : ",arr(3));
    
    //배열에 있는 리스트들 값의 맨 뒤에 새로운 값이 추가된다.
    arr.push("4");

변수_이름_표기

  • 케밥 케이스: 예) 아이템 박스를 남겨주세요; (CSS 클래스 이름)
  • Camel Case: 자바스크립트 변수명을 선언할 때 흔히 사용하는 표기법 예) let itemBox;
  • Snakefall: 예) let item_box;
  • 헝가리어 표기법: 변수 이름에 고정 유형을 씁니다(조금 덜 자주 사용됨. 예) let stritembox;
  • Pascal Case: 나중에 React(Components)에서 볼 수 있습니다. 예) let ItemBox;

운영자

  • 계산을 수행할 때 사용할 구문
  • +(을 더한), –(마이너스), *(곱하다), /(나뉘다), %(몫이 없는 잔존가치 예. 3%1=2)
// + : 더하기
let a = 3;
let b = 2;
/* 값을 가져오고 싶을 땐 a와 b를 작성한 것처럼 변수의 이름을 적어주면 
		해당 변수명으로 저장된 값을 가져올 수 있다. */
let c = a + b;
console.log(c);

let text1 = "나는 ";
let text2 = "배고프다";
//문자열을 +로 더해서 하나의 문자열로 합쳐준다.
console.log(text1 + text2);

console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log("a",a % b);
  • ++(값이 1씩 증가), – -(값이 1씩 감소), **(예: 2 ** 3 = 2^3)
    • ++, – -는 변수의 값을 변경하는 연산자입니다.
let test1 = 1;
console.log(test1 + 1);     // 값이 +1 되도록 노출은 시켜주지만 a의 값이 변한 것은 아니다.
console.log(test1);         // 값이 1로 노출된다.

test1 = test1 + 1;
console.log(test1);         // 위에서 변수에 값을 더한 값을 대입하였기 때문에 원래 변수 값에서 다른 값이 나온다.
  • 값을 비교하는 연산자: !, ==, ===, ! =, ! ==, >, < , < =, > =
    • ! : 부울 값을 반전합니다.
    • == : 두 변수의 값이 같으면 true, 두 변수의 값이 다르면 false
let test4 = 2;
let test5 = 4;
let test6 = "2";
console.log(test2 == test3);      
console.log(test4 == test5);
console.log(test4 == test6);        //자료형이 달라도 값이 같으면 true
  • === : 보다 정확한 비교를 위한 연산자입니다. 값과 유형은 비교되고 같아야 합니다.
  • != : 두 변수의 값을 비교하여 값의 결과를 반전, 값이 같으면 false, 그렇지 않으면 true.
  • !== : 두 변수의 값과 타입을 비교하여 값의 결과를 반전, 값과 타입이 같으면 false, 둘 다 다르면 true(===의 반대)
  • <, > : 부등호 방향으로 값이 크면 true, 크지 않으면 false, 같아도 false
  • <=, >= : 크거나 같음 또는 작거나 같음에 사용되는 연산자(=는 부등호 뒤에 작성해야 함)

if 문

if 문(비교문)

  • 문법
if (조건식) { 
			.... 실행문 .... }
  • if( ) 괄호 안의 조건이 참인지 거짓인지에 따라 if 문의 실행 조건이 실행된다.
    • 조건이 참이면 실행되고, 거짓이면 실행되지 않습니다.
let age = 1;
let age2 = 10;

//age = 나
if(age < age2) {
    console.log("내 나이가 작구나")   //괄호 안에 조건이 true이므로 조건이 실행된다. 
																		 //(false는 조건이 실행되지 않는다.)
}

그렇지 않으면

  • 문법
if (조건식) { 
			.... 조건이 참(true)일 경우 실행문 .... }
else {
			.... 조건이 거짓(false)일 경우 실행문 .... }
  • if 문과 달리 조건이 false인 경우에도 반환할 값을 입력할 수 있습니다.
let age = 1;
let age2 = 10;

if(age > age2) {
    console.log("내 나이가 작구나")     //if문의 조건이 true인 경우 실행
}
else{
    console.log("네 나이가 크구나")     //if문의 조건이 false인 경우 실행
}

만약에 ~ 그렇지 않으면 ~ 다른


강의 9_230310_JavaScript(변수, var, let, type, 콘솔 등) 1

  • 문법
if(조건식 1){
			.... 조건식 1이 참(true)일 경우 실행 .... }
else if(조건식 2){
			.... 조건식 2가 참(true)일 경우 실행 .... }
else if(조건식 3){
			.... 조건식 3가 참(true)일 경우 실행 .... } //else if는 여러 개 쓸 수 있다.
else{
			.... 조건식 1, 2, 3 모두 거짓(false)일 경우 실행 .... }
let b = 5;
let c = 5;

if(b < c){
    console.log("c가 b보다 크다")        //if문이 true면 실행
}
else if(b > c){
    console.log("c가 b보다 작다")        //if문이 틀리면 해당 조건에 비교하고 true일 경우 실행
}
else{
    console.log("c와 b가 같다")        //else if문이 false일 경우 실행
}

진술에


강의 9_230310_JavaScript(변수, var, let, type, 콘솔 등) 2

  • 문을 여러 번 반복해야 할 때 사용합니다.
  • 무한반복 상태는 사이트 폭파시키니 주의
let e = 5;

for(let f=1; f < e; f++){
    console.log(f);
}

practice_variable 중간 선언, 콘솔 적용

연습 내용

  1. let 문으로 type1이라는 변수를 만들고 값을 할당하지 않고 선언하면 됩니다.
  2. 아래 console.log()로 변수 type1의 값을 확인하고
  3. 값을 확인한 후 값을 5로 바꿉니다.
  4. console.log()로 값을 확인하십시오.
  5. console.log() 변수의 type 값을 확인하십시오.
  6. 그런 다음 아래의 변수 type1에 ​​”your name”을 할당하고 마지막으로 console.log()를 확인합니다.

결과

js

let type1;
    console.log(type1);

    type1 = 5;
    console.log(type1);

    console.log(typeof type1);

    type1 = " * * * ";
    console.log(type1);

실행 화면


강의 9_230310_JavaScript(변수, var, let, type, 콘솔 등) 3