[ javascript ] 자바스크립트 변수 선언( var, let, const 차이) > javascript&jQuery

본문 바로가기
사이트 내 전체검색

javascript&jQuery

[ javascript ] 자바스크립트 변수 선언( var, let, const 차이)

페이지 정보

작성자 웹지기 댓글 0건 조회 2,228회 작성일 21-02-09 12:05

본문

※ 자바스크립트 변수 선언

 - 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간.

 - 변수에 데이터 값은 한개만 저장되므로, 같은 변수를 두번 사용하게 되면 나중에 입력된 변수값으로 저장된다.

 - 변수의 첫글자에 사용할 수 있는 문자들은 $, _ (언더바), 영문자 만 사용가능

 - 변수 선언시 'use strict';  선언을 통해 오류를 보여주고 방지하자.

 

변수선언( var = function-scoped )


var 변수명;

var 변수명 = 값;

 

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

 - 자료형( Data Type ) - typeof 변수 또는 데이터; 

예) 

<script type="text/javascript">

var num = 100;

var str = "문자";

document.write(typeof num, "<br>"); //number;

document.write(typeof str); //string

</script>

 - 문자형 ( String ); - var 변수명 = "사용할 문자나 숫자";

예)

var str = "문자나숫자";

 - 숫자형 ( Number ); - var 변수명 = 숫자; 또는 Number("문자형숫자");

예)

var num = 1; 

var num2 = Number("1");

 - 논리형 ( Boolean ); - var 변수명 = true or false; 또는 Boolean(데이터);

예)

var s = true;

var s = false;

var a = 10 >= 100; //false;

var b = Boolean(0); //false

var n = Boolean('홍길동'); //true

var d = Boolean(null); //false

 

 - 빈값 ( Undefined ); - var 변수명; 또는 var 변수명 = null;

var 로 변수 선언시 중복선언에 대한 문제가 있으므로 이를 보안하기 위해 es2015에서 let, const가 생겼다. 

var 은 변수를 hoisting(선언부를 최상위로 끌어올려버리는 것)을 해서 사용하게 해주므로 오류를 발생하지 않게 바꿔버린다.

console.log(a); //오류발생하지 않음.

a = 1; // 오류발생하지 않음.

var a=1;

var a=2;

이러한 문제가 있음.

 

변수선언( let, const = block-scoped )

사용방법은 var 와 같다.

let은 재할당이 가능한 변수 선언이다.

let a = 1;

let a = 2; //Uncaught SyntaxError : Identifier 'a' has already been declared ( 중복 선언에 대한 오류가 발생 )

a = 2; 는 가능

 

const는 재할당이 불가능한 변수 선언이다.

const b = 1;

const b = 2; //Uncaught SyntaxError : Identifier 'b' has already been declared ( 중복 선언에 대한 오류가 발생 )

b = 2; //Uncaught SyntaxError : Identifier 'b' has already been declared ( 중복 선언에 대한 오류가 발생 )

 

 - 연산을 할 때 연산하고 싶은 값이 정확히 무엇인지 알고 해야한다.

 - 즉, 음수 양수 등의 값을 예상하고 문자와의 연산과 무한대의 연산을 피해야 한다.

const infinity = 1/0; //무한대의 값이 존재한다. //출력값 : Infinity

const negativeInfinity = -1/0; //역시 음수의 무한대 // 출력값 : -Infinity

const nAn = 'not a number' / 2; //출력값 : NaN


null 과 undefined 은 엄연히 다른 값들이다.

let nothing = null; //값이 null로 정의

let x; // 값이 정의 되지 않아 undefined;

특별한 식별자가 필요한 경우 Symbol()로 변수를 사용

const symbol1 = Symbol('id');

const symbol2 = Symbol('id');

특별한 식별자로 고유한 값을 가지므로 서로 다르다 그래서 false 가 된다.

console.log(symbol1 === symbol2); //false

 

이를 동일하게 해주고 싶다면 .for 를 사용해서 동일하게 만들어준다.

const gSymbol1 = Symbol.for('id');

const gSymbol2 = Symbol.for('id');

 

console.log(gSymbol1 === gSymbol2);

 

심볼을 출력할 때는 .description 을 이용해서 확인한다.

.description이 없을경우 오류가 발생한다.

console.log(`value : ${gSymbol1.description}, type : ${typeof gSymbol1}`);

 

번외 console.log 출력시 ` 기호를 사용하면 ${ } 를 이용하여 변수를 적어주어 출력이 가능하다.

 

const test = {name:'tester', age:10}; //const로 변수를 선언했기 때문에 test라는 object는 변경이 불가능하다

하지만.

test.name = 20; //이런식으로의 접근 변경이 가능하다.

 

 

 

 

추천0 비추천0

댓글목록

등록된 댓글이 없습니다.

Total 63건 1 페이지
  • 63 [ javascript ] CDATA 사용 이유
  • 1) CDATA로 감싼 JAVASCRIPT부분이 의도치 않게 XML Parser 에 의해 잘못 인식되는 것을 막기 위함. 2) XHTML이 아닌 HTML로 인식되는 경우에도 JAVASCRIPT가 문제없이 동작하도록 하기 위함. 3) javascript안에서 태그를 사용할 경우 CDATA 선을 해줘서 오류처리를 막기 위함. 사용예제 &lt;script&gt; //&lt;![CDATA[ JAVASCRIPT //]]&gt; &lt;/scri...
  • 웹지기 01-20 3793 0 0 댓글 0
  • 62 [ javascript ] promise 를 async & await 로 쉽게 써보자
  • promise 를 async &amp; await 로 쉽게 써보자 //promise는 chaning가 가능하다. //체인이 많아 지면 복잡해진다. //async await 동기식으로 순서를 작성하는 것 처럼 간편하게 작성가능 //기존에 존재하는 promise 위에 간단한 api를 제공하는데 //더 간편하게 제공하는 것을 syntactic sugar //프로토 타입을 베이스트로한 살짝 덭붙여진 것 //async &amp; await //clear style of ...
  • 웹지기 02-27 3810 0 0 댓글 0
  • 60 [ javascript ] promise
  • 'use strict' //promse 코드를 이용해서 비동기식으로 처리 하는 방법 //Promse is a JavaScript object for asynchronous operation. //state : pending(진행중) -&gt; fulfilled(성공적으로 종료) or rejected(파일을 찾을 수 없거나 문제가 생기면) //Producer(원하는 기능을 수행해서 해당데이터를 만듬) vs Consumer(해당 데이터를 소비) //1. Producer //...
  • 웹지기 02-21 3795 0 0 댓글 0
  • 59 [ javascript ] 콜백지옥 - callback
  • 'use strict' //JavaScript is synchronous. //Execute the code block by orger after hoisting. //hoisting: var, function declearation //1. 동기와 비동기 console.log('1'); //동기식 setTimeout(function(){ //비동기식 console.log('2');//브라우져에서 함수에 의해 대기했다가 실행(비동기 실행방법) },1000); // 여기서 f...
  • 웹지기 02-21 3998 0 0 댓글 0
  • 58 [ javascript ] json 사용법
  • JSON //simplest data interchange format. //lightweight text-abased structure. //easy to read. //key-value pairs. //used for serialization and transmission of data between the network the network the network connection. //independent programming language and platform. //J...
  • 웹지기 02-21 3485 0 0 댓글 0
  • 57 [ javascript ] 유용한 함수들 10가지
  • javascript 유용한 함수들 10가지 https://youtu.be/3CUjtKJ7PJg // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); } // Q2. make an array out of a string { ...
  • 웹지기 02-15 3689 0 0 댓글 0
  • 55 [ javascript ] object 생성, 사용방법
  • 'use strict'; 객체(Objects) //one of the JavaScript's data types. //a collection of related data and/or functionality. //Nearly all objects in JavaScript are instances of Objets. //object = { key : value }; //오브젝트는 키와벨류의 집합체 //변수에 접근가능한 property 와 값의 집합 1. 변수에 넣은 변하지 않는 데...
  • 웹지기 02-14 1412 0 0 댓글 0
  • 54 [ javascript ] 클래스 정의 및 사용
  • 객체지향 프로그래밍(Object-oriendted programming) class: template object: instance of a class JavaScript classes - introduced in ES6 - syntactical sugar over prototype-based inheritance js파일 상단에 선언(오류체크) 'use strict'; 1. 클래스선언(Class declarations) class Person {...
  • 웹지기 02-11 1718 0 0 댓글 0
  • 53 [ javascript ] 함수의 또다른 기능
  • 함수의 또다른 기능 함수는 다른 변수처럼 사용된다. 변수에 값으로 할당 할 수 있다. 다른 함수에 인수로 전달 가능 다른 함수에 의해 반환될 수 있다. First-class function functions are treated like any other variable can be assigned as a value to variable can be passed as an argument to other functions. can be returned by another func...
  • 웹지기 02-11 1435 0 0 댓글 0
  • 52 [ javascript ] 함수 선언 , 사용법
  • 함수(Function) 프로그램을 구성하는 빌딩블럭 서브프로그램이라고도 불리며 여러번 재사용이 가능 한가지의 작업이나 값을 계산할 때 사용 -fundamental building block in the program -subprogram can be used multiple times -performs a task or calculates a value 1. 함수 정의(Function declaration) function 함수명(파라미터1, 파라미터2) {비지니스로직.......
  • 웹지기 02-11 1400 0 0 댓글 0
  • 열람중 [ javascript ] 자바스크립트 변수 선언( var, let, const 차이)
  • ※ 자바스크립트 변수 선언 - 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간. - 변수에 데이터 값은 한개만 저장되므로, 같은 변수를 두번 사용하게 되면 나중에 입력된 변수값으로 저장된다. - 변수의 첫글자에 사용할 수 있는 문자들은 $, _ (언더바), 영문자 만 사용가능 - 변수 선언시 'use strict'; 선언을 통해 오류를 보여주고 방지하자. 변수선언( var = function-scoped ) var 변수명; var 변수...
  • 웹지기 02-09 2229 0 0 댓글 0
  • 49 [ javascript ] 자바스크립트 코드 작성시 주의 사항
  • javascript 는 대문자와 소문자를 구분한다. 코드가 끝났으면 ; 을 통해서 라인이 끝났다고 표시를 해준다. 가독성을 위해 코드는 한줄씩 사용하는게 좋다. 문자형 데이터를 작성할 때는 " 와 ' 를 사용해서 한다. 중복될 때는 \를 사용해서 사용한다. 문자 사잉에 "와 " 겹치지 않게 사용해줘야 한다. document.write("동해물과 " 백수산이 " 마르고 닳도록 "); //오류구문 docume...
  • 웹지기 02-09 1454 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
2,730
어제
4,866
최대
33,828
전체
9,209,667

그누보드5
Copyright © www.funyphp.com. All rights reserved.