js에서 기본적인 변수 선언 과 형식

기본적으로 java로 이루어진 언어이기 때문에 연산자나 기호는 java랑 비슷하다 하지만 변수 선언 만큼은 다르다.

var 변수이름 = 값;

이런 형식으로 변수를 선언하는데 java처럼 자료형을 지정하지 않는다. 그렇기 때문에 초기화와 동시에 자료형이 결정된다. 따라서 초기화하지 않고 선언만하게되면 undefined자료형을 가진다. 이런 방식의 언어를 동적타입의 언어라고 한다.

js에서 변수를 선언하는 방법은 이렇게 3가지가 있다. 세가지 변수 선언 방식이 차이점을 가지는 포인트 4가지는 재선언, 재할당, 호이스팅, 범위가 있다.

  1. var : 재선언 가능, 재할당 가능, 호이스팅이 이루어진다, 함수 레벨 스코프다.
  2. let : 재선언 불가능, 재할당 가능, 호이스팅이 이루어지지 않는다, 블록 레벨 스코프다.
  3. const : 재선언 불가능, 재할당 불가능, 호이스팅이 이루어지지 않는다, 블록 레벨 스코프다.
  4. 선언하지 않음 : 선언하지 않고도 변수를 사용해서 값을 할당할 수 있다. 선언하지 않고 변수명을 통해서 값을 찾을땐 암시적 전역변수로 선언이 되어 불러진다. 이는 호이스팅이 일어나지 않으며 추후에 오류를 만들 수 있다. 따라서 'use strict'를 선언하여 엄격한 룰 적용을 하는것으로 방지할 수 있다.

* 여기서 호이스팅이란 해당 선언문을 스코프의 선두로 가져간것 처럼 동작한다는 것이다.

* javascript의 문자열은 inmmutable(변경 불가능)하므로 문자열의 일부를 수정할 수 없고 새로운 재할당을 해도 문자열이 바뀌는것이 아니라 새로운 문자열이 생성되고 참조하는 주소가 바뀌는 것이다.

* 함수 레벨 스코프는 선언된 함수 내에서 사용할 수 있다. 따라서 함수 외부에서 선언하게 되면 전역 변수가 되게 된다. 그리고 var선언 특성상 재 할당이 가능하므로 변수가 바뀌는 위험이 있을 수 있다.

* 블록 레벨 스코프는 선언된 블록 내에서 사용할 수 있다. var의 단점으로 인해 ES6부터 let과 const가 생기게 됐다.

 var t = 1;
 document.write(t+”<br>”); // 1
 var t = 2;
 document.write(t+”<br>”); // 2
 t = 3;
 document.write(t+”<br>”); // 3
 document.write(r+”<br>”); // undefined
 var r = 4;
 document.write(u+”<br>”); //

이 처럼 var는 t를 두번 선언하는 재선언, t의 값 변경인 재할당, r을 아래에 선언해도 값은 할당이 안되지만 선언 자체가 가능하다. 선언 자체가 되지 않으면 u처럼 아무 결과도 나오지 않는다.

 let t = 1;
 document.write(t+”<br>”); // 1
 let t = 2;
 document.write(t+”<br>”); //

이렇게 let으로 선언하면 두 번째 let t=2에서 아무 스크립트가 나오지 않는것을 볼 수있다.

 let t = 1;
 document.write(t+”<br>”); // 1
 t = 2;
 document.write(t+”<br>”); // 2
 document.write(r+”<br>”); //
 let r = 3;

이처럼 재할당을 할 경우 값이 제대로 나오는 것을 볼 수 있고 호이스팅이 이루어지지 않아 변수 선언자체가 되지 않는다.

 const t = 1;
 document.write(t); // 1
 const t = 2;
 document.write(t); // 
 t = 3;
 document.write(t); // 
 document.write(r); //
 const r = 4;

const는 재선언, 재할당, 호이스팅이 불가능한것을 볼 수 있다.

 

<!DOCTYPE html>
<html>
  <head>
    <title>javascript</title>
    <meta charset="utf-8">
  </head>
<body>
  a<br>
<script>
  document.write("b"+"<br>");
  var a,b,c;
  a=5;
  b=6;
  c=a+b*10;
  let d = 'string';
  let e = ' linked string';
  let f = a+" "+d;
  document.write(a+"<br>");
  document.write(c+"<br>");
  document.write(d+"<br>");
  document.write(f);
</script>
</body>
</html>

또한 js는 객체지향 언어이기 때문에 객체도 작성이 가능하다. 항상 key:value형식으로 작성해야한다.

<!DOCTYPE html>
<html>
  <head>
    <title>javascript</title>
    <meta charset="utf-8">
  </head>
<body>
 
<script>
   var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
    document.write(person.firstName);
    document.write(person.fullName());
</script>
</body>
</html>

이런식으로 var 객체명={속성:속성값}; 형식으로 선언해서 사용하면 된다.

객체 이므로 메서드 선언도 가능하다. 단, key:value 형태를 유지한다. 메서드명 : function() {}형식이다.

 

javascript의 자료형

javascript의 자료형으로는 

  1. number : int,float 전부 하나의 자료형으로 표현된다.
  2. string : 문자열
  3. null
  4. undefined : 할당되지 않았다.
  5. Boolean

여기까지 원시타입의 immutable(primitive)한 자료형으로 변경이 불가능하다. 실제로 값을 변경 할 수 없는것이 아니라 메모리 구조상 참조하고 있는 주소에 할당된 값을 변경할 수 없다. 따라서 재 할당시에 메모리에 새로 할당될 값이 생성되고 변수가 참조하고 있는 위치가 변경되는 것이다.

 

  6. Object : 객체 타입

 

객체 타입은 변경이 가능하다.

'FRONT > JavaScript' 카테고리의 다른 글

[Front] Java this와 JavaScript this  (0) 2020.06.25
[Front] JavaScript 기초  (0) 2020.06.14

+ Recent posts

티스토리툴바