JavaScript

[JavaScript] - 변수 / 자료형 / 대화상자 / 형변환

nam_ji 2023. 10. 17. 21:48

1. 변수

var, let, const 차이

var

  • 중복 선언, 재할당 가능합니다.
  • 먼저 선언한 변수가 있어도 동일한 이름으로 중복 선언이 가능합니다. 즉, 마지막에 선언된 값이 할당됩니다.
  • 변수를 유연하게 사용할 수 있지만 기존에 기어갷둔 변수의 존재를 잊고 재선언 하는 경우 문제가 발생할 수 있습니다.
  • 이를 보완하기 위해 ES6부터 추가된 변수선언 방식이 let과 const입니다.
  • 예시
var title = 'book';
console.log(title); // book

var title = 'movie';
console.log(title); //movie

title = 'music';
console.log(title);//music

let

  • 중복 선언 불가, 재할당이 가능합니다.
  • 예시
let title = 'book';
console.log(title); // book

let title = 'movie';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title);//music

const

  • 중복 선언, 재할당이 불가능 합니다.
  • 예시
const title = 'book';
console.log(title); // book

const title = 'movie';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title);
//Uncaught TypeError: Assignment to constant variable

2. 스코프 (Scope)

  • 유효한 참조 범위가 다릅니다.

var

  • 함수 레벨 스코프 (Function Level Scope)
function function_level(){
  if(true){
   var a = 123;
   console.log(a); //123 
  }
 console.log(a);
}

function_level(); //123
console.log(a);//ReferenceError: a is not defined
  • 한수 내에서 선언된 변수는 함수 내에서만 유효하고, 함수 내에서는 블록 내외부에 관계없이 유효합니다. 함수 외부에서는 참조불가능합니다.

let / const

  • 블록 레벨 스코프 (Block Level Scope)
function block_level(){
  if(true){
   let a = 123;
   console.log(a); //123
  }

console.log(a); // ReferenceError: a is not defined.
}

console.log(a);// ReferenceError: a is not defined.
  • 함수, if절 외 for, while, try/catch 등 모든 코드블록({..}) 내부에서 선언된 변수는 코드 블록 내부에서만 유효합니다.
    블록 외부부터는 참조불가능합니다.

3. 호이스팅 방식 (Hoisting)

  • 자바스크립트 함수는 실행되기 전에 함수 내 필요한 병수값들을 모두 모아 유효 범위의 최상단에 선언한 것처럼 동작합니다..
    이런 방식을 호이스팅이라고 합니다.
    • 호이스팅 동작방식
      1. 자바스크립트 parser가 함수 실행 전 해당 함수 전체를 탐색합니다.
      2. 함수 내 존재하는 변수, 함수 선언에 대한 정보를 기억하고 실행합니다.
      3. 유효 범위는 함수 블록{} 내 인데, 필요한 값들을 블록 위의 상단으로 끌어올리는 것입니다.
      4. 실제코드가 끌어올려지는 것은 아니고, 자바스크립트 parser 내부적으로 끌어올려 처리하는 것이므로 실제 메모리에서는 변화가 없습니다.

var 선언문 호이스팅

console.log(a); //undefined

var a = 123;
console.log(a); //123
  • 변수 a가 선언되기 전에 참조 시, 에러가 발생하지 않고 undefined가 출력됩니다. 이는 코드 실행 전에 자바스크립트 내부에서 미리 a변수를 선언하여 undefined로 초기화를 해두었기 때문입니다.

함수 선언문 호이스팅

test(); //test

function test(){
  console.log("test");
}
  • 함수 선언문 또는 함수 선언 전 호출 시 test를 출력합니다.\

let / const 선언문 호이스팅

console.log(a); //ReferenceError: a is not defined

let a = 123;
console.log(a); // 123
  • let의 경우 변수 a가 선언되기 전에 참조하면 에러가 발생합니다.
    var 변수선언은 변수선언과 동시에 초기화가 이루어지지만 let, const 변수는 선언만 해놓고 초기화는 하지 않습니다.
    코드 실행과정에서 변수 선언문을 만났을 때, 초기화를 수행합니다. 때문에 호이스팅은 발생하였으나 변수의 선언과 초기화 사이에 일시적으로 변수값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상입니다.

함수 표현식 호이스팅

test(); // error

var test = function() {
  console.log("test");
}

test(); // test
  • 함수 선언이 아닌 함수 표현식에서 마찬가지의 이유로 에러가 발생하는 것을 확인할 수 있습니다.

간단한 설명

  1. 변수는 문자와 숫자, $와 _만 사용합니다.
  2. 첫글자는 숫자가 될 수 없습니다.
  3. 예약어는 사용할 수 없습니다.
  4. 가급적 상수는 대문자로 사용합니다.
  5. 변수명은 읽기 쉽고 이해할 수 있게 선언합니다.

2. 자료형

자바스크립트의 자료형

  • Primirive(기본형)과 Object(객체) 타입이 존재합니다.
  • 기본적으로 자바스크립트는 인터프리터가 알아서 변수의 타입을 파악하고 값을 저장해 변수의 타입을 따로 쓰지 않고 var를 씁니다.
ex )
var a = 10;
var b = 'k';

기본형 자료형

  • Boolean : 논리적인 요소, true와 false 값이 있습니다.
  • null : 빈 값입니다.
  • undefined : 값을 할당하지 않는 변수가 가지는 값입니다.
  • Number : 숫자형으로 정수와 부동 소수점, 무한대 및 NaN(Not a Number)값을 포함합니다.
    +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈, %는 나눈 값의 나머지를 나타냅니다. 
  • String : 문자열입니다.
    • 숫자형의 NaN과 Infinity
      NaN은 숫자가 아님을 의미하며 Infinity는 무한대를 의미합니다.
      parseInt('blabla'), Math.sqrt(-1) 등의 함수는 NaN을 반환하게 되며, 2/0 처럼 무한대가 나오는 식은 Infinity를 반환하게 됩니다.
    • 자바스크립트의 문자형
      자바스크립트에서는 char 형이 존재하지 않아 "" 또는 '' 또는 `` 중 어떤 것으로 감싸도 문자열로 만들어집니다.
      여기서 문자열 안에 ''와 같은 기호를 사용하고 싶다면 ""기호 안에 ''기호를 사용하거나 \기호를 사용하면 됩니다.
      ``기호는 사용할 때는 문자열 내부에 변수를 사용하고 싶을 때 사용하면 편리합니다.
      `~~ ${변수}` 이런 식으로 사용하면 됩니다.
      이스케이프 문자를 사용이 가능합니다.
      문자열끼리 이어 붙이거나 숫자를 붙일 때는 + 연산자를 사용합니다.
      문자열 인덱싱도 가능합니다.
  • typeOf 연산자 : 자료형의 타입을 찾아낼 때 사용합니다.

3. 대화상자 ( alert, prompt, confirm )

alert (경고) 창

  • Alert 함수는 사용자에게 중요한 내용이나 경고창울 띄워줄 때 주로 사용하는 함수입니다.
    여러가지 창 중에서 가장 많이 쓰이는 기본적인 형태의 팝업창입니다.
alert("사용방법");
  • 이런식으로 사용하시면 됩니다.

prompt (입력) 창

  • Prompt 함수는 사용자에게 입력값을 받을 수 있는 창을 띄워주는 함수입니다.
    사용자에게 받은 값을 String 타입의 리턴값으로 반환해주며 입력값이 없을 경우에는 Null 값을 리턴해 줍니다.
var Input = prompt("사용방법"+"");
alert(Input+"사용방법");

//---------또는--------------

const Input = prompt ("사용방법1", "사용방법2");
// 사용방법1은 팝업창에 안내문구가 되고,
// 사용방법2는 입력창에 기본값으로 들어가는 데이터라고 생각하시면 됩니다.
alert (Input + "사용방법3");
  • 이런식으로 사용하시면 됩니다.

confirm (선택) 창

  • Confirm 함수는 사용자에게 true / false 값을 리턴받을 수 있는 팝업창을 띄워주는 함수입니다.
    사용자의 액션에 따라 true 값과 false 값을 리턴받을 수 있습니다.
var result = confirm("사용방법");
if(result){
    alert("사용방법");
}else{
    alert("사용방법");
}
  • 이런식으로 사용하시면 됩니다.

단점

  • 팝업창을 띄우는 동안에는 스크립트가 일시 정지됩니다.
  • 스타일링이 불가합니다.
    스타일링을 위하여 모달창을 만들어 사용하는 경우도 있습니다.

4. 형변환 ( String, Number, Boolean)

  • 자바스크립트는 타입이 매우 유연한 언어입니다. 때문에 자바스크립트 엔진이 필요에 따라 암시적 형변환 혹은 개발자의 의도에 따라 명시적 형변환을 실행합니다.

암시적 형변환 (Implicit Type Conversion)

  • 암시적 형변환이란 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것입니다.
    1. 산술연산자
      더하기(+) 연산자는 숫자보다 문자열이 우선 시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산됩니다.
      number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number
50 + 50; //100
100 + “점”; //”100점”
“100” + “점”; //”100점”
“10” + false; //”100"
99 + true; //100
      다른 연산자 (-, *, /, %)는 숫자형이 문자형보다 우선 시 되기 때문에 더하기와 같은 문자형으로의 변환이 일어나지 않습니다.
      //다른 연산자(-,*,/,%)
string * number // number
string * string // number
number * number // number
string * boolean //number
number * boolean //number
“2” * false; //0
2 * true; //2​
    2. 동치비교
       
      null == undefined // true 0 == 0
“0” == 0 // true 0 == 0
0 == false // true 0 == 0
“0” == false // true 0 == 0
      여기서 유의해야 할 점은 위의 비교는 엄격하지 않은 동치 비교일 경우이기 때문에,
      두 값을 비교할 때 데이터 타입을 변환하지 않는 엄격한 동치(===) 비교와 혼동되지 않도록 해야 합니다.

명시적 형변환 (Explicit Type Conversion)

  • 명시적 변환이란 개발자가 의도적으로 데이터 타입을 변환시키는 것입니다.
    타입을 변경하는 기본적인 방법은 Object(), Number(), toString(), Boolean()과 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용됩니다.
    var trans = 100; //Number
Object(trans); //100
console.log(typeof trans); //Number
toString(trans); //”100"
console.log(typeof trans); //String
Boolean(trans); //true
console.log(typeof trans); //Bolean​
    A Type -> Number Type다른 자료형을 숫자타입으로 변형하는 방법은
    Number()
    Number()는 정수형과 실수형의 숫자로 변환합니다. 보통 문자형을 숫자형으로 변경할 때 사용합니다.
    숫자로 변환되지 않는 경우에는 NaN을 반환합니다.
    Number(“12345”); //12345
Number(“2”*2); //4
    펄시한 값 (falsy values : null, false, "빈문자열")에 대해서는 0으로 표현합니다.
    트루시한 값 (truthy values)에 대해서는 1로 표현합니다.
    array의 경우는 Number() 함수에서 사용하는 0을 반환합니다.
    const falsy1 = null;
Number(falsy1); // 0;

const falsy2 = '';
Number(falsy2); // 0;

const falsy3 = false;
Number(falsy3); // 0;

const truthy1 = [];
Number(truthy1); // 0;

const truthy2 = true;
Number(truthy2); // 1;

const truthy3 = {};
Number({}); // NaN;
    parseInt()
    ParseInt()는 정수형의 숫자로 변환합니다. 만약 문자열이 '숫자 0'으로 시작한다면 8진수로 인식하고 '0x', OX로 시작한다면 해당 문자열을 16진수 숫자로 인식합니다. 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되고 NaN을 반환합니다. 
    parseInt(“27”) //27
parseInt(0033); //27
parseInt(0x1b); //27
parseInt(“ 2”); //2
parseInt(“ 2ㅎ”); //2
parseInt(“ ㅎ2”); //NaN
    parseInt()는 문자열로 된 부분에서 숫자(정수)만 뽑아서 변환해 주는 것이 특징이고, Number()는 문자열 전체가 숫자일 때 소수점까지 숫자타입으로 가져올 수 있습니다.
    parseFloat()
    parseFloat()는 부동 소수점의 숫자로 변환합니다. parseInt()와 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되고 NaN을 반환합니다.
    parseFloat(“!123”); //NaN
parseFloat(“123.123456”); //123.123456
parseInt(“123.123456”); //123
parseFloat(“ 123.123456”); //123.123456
parseFloat(“ a123.123456”); //NaN​
    단항연산자 (Unary-Operators)로 숫자형 타입 변환
     
    +'1000'; // 1000
+'-1000'; // -1000
+'Infinity'; // Infinity
-'1000'; // -1000
+true; // 1
+[]; /// 0
+false; // 0
+null; // 0
+'';// 0
    위 예제를 보면 단일 연산자를 이용한 숫자형 변환은 Number와 동일한 동작을 하는 것을 볼 수 있습니다. 단항 연산자는 자바스크립트 함수를 사용하지 않고 타입 변환을 할 수 있는 쉽고 효율적인 방법입니다.
    A Type -> String Type
    다른 자료형을 문자 타입으로 변환하는 방법은
    String()
    String(123); //”123"
String(123.456); //”123.456"
    toString()
    주어진 값을 문자열로 변환 후 반환합니다.
    toString()은 인자로 기수를 선택할 수 있습니다. 인자를 전달하지 않으면 10진수로 변환합니다.
    var trans = 100;
trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"
var boolT = true;
var boolF = false;
boolT.toString(); //”true”
boolF.toString(); //”false”
    toFixed()
    toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오며 '0'으로 길이를 맞춘 문자열을 반환합니다.
    var trans = 123.456789;
var roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"
roundOff.toFixed(2); //”99.99"
roundOff.toFixed(0); //”100"​
    A Type -> Boolean Type
    자바스크립트에서 Boolean 타입으로 변환은 Boolean 또는 부정연산자(!)를 사용하여 Boolean 값을 만들어냅니다.
    부정연산자는 의미그대로 !를 사용하면 Boolean() 반대의 값을 리턴합니다.
    다른 자료형을 Boolean() 타입으로 변형하는 방법은
    Boolean()
     
    Boolean(100); //true
Boolean(“1”); //true
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean( ); //false

const numb1 = 0;
Boolean(numb1); // false
!!numb1; // false
!numb1; // true