/ JAVASCRIPT

JavaScript(2) - strict mode, variable

JavaScript 관련 포스팅

1. Strict Mode

  • ES(ECMAScript) 5부터 추가됨
  • Valina JS 문서가 시작될 때, 'use strict'; 를 쓰면 strict mode로 시작
  • 보다 상식적인 범위 내에서 코딩이 이루어 질 수 있도록 엄격한 잣대로 코드를 실행
  • JS engine이 보다 효율적으로 구동됨
    Strict mode - JavaScript | MDN

2. Variable

  • Data types

    • primitive, single item
      → 더 이상 작게 쪼갤 수 없는 한 가지 아이템
      → number, string, boolean, null, undefined, symbol
      → 값(value) 자체가 메모리에 저장됨

    • object, box container
      → single item들을 묶어서 관리하는 것
      → object를 가리키는 reference가 메모리에 저장됨

    • function
      ※ first-class function
      → variable에 할당 가능
      → 다른 함수의 parameter로 전달이 가능
      → return 값으로 지정 가능

  • Immutable/Mutable data types

    • Immutable data types
      → data 자체 변경 불가
      → primitive types, frozen objects (i.e. object.freeze())

    • Mutable data types
      → data 변경 가능
      → all objects by default are mutable in JS

let

→ ES6에서 추가됨
→ var는 이제 사용하지 말 것!

var hoisting
변수의 선언 지점과 상관없이, JS engine이 선언을 맨 위로 끌어올림

→ var는 block scope가 적용되지 않음
→ block 안에 있는 변수를 block 바깥에서도 부를 수 있는 상황이 발생함
※참고: Variable hoisting - JavaScript | MDN

  {
    age = 4;
    var age;
  }
  console.log(age);

Console

4

global variable vs. local variable

  • global variable
    → 함수의 바깥에 선언한 변수
    → 문서 전체에서 사용 가능함
  • local variable → 함수의 안에 선언한 변수
    → 함수 안에서만 사용 가능함 (block scope)
    ※참고: Variable scope - JavaScript | MDN

number

  • JS에서는 숫자의 data type과 상관없이 number type으로 할당됨 
      const count = 17; // integer
  const size = 17.1; // decimal number
  console.log(`value: ${count}, type: ${typeof count}`);
  console.log(`value: ${size}, type: ${typeof size}`);

    Console

    value: 17, type: number
    value: 17.1, type: number
  • 양수를 0으로 나누면 infinity
    음수를 0으로 나누면 negative infinity
    숫자가 아닌 것을 숫자로 나누면 NaN(not a number)

string

  • 글자는 수에 상관 없이 모두 string으로 할당됨
  • +기호를 사용해 다른 변수와 붙일 수 있음
  const brendan = "brendan";
  const greeting = "hello " + brendan;
  console.log(`value: ${greeting}, type: ${typeof greeting}`);

Console

value: hello brendan, type: string

  • template literals (string literals)
    → `(backtick)을 이용해 string과 ${variable} 을 써주면 결과 값이 붙여져 나옴
    → ‘ ‘(quotes)와 +를 쓰는 것보다 편리함

    const helloBob = `hi ${brendan}!`; // template literals (template string)
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);
console.log("value: " + helloBob + ", type: " + typeof helloBob);

    consol

    value: hi brendan!, type: string
    value: hi brendan!, type: string

boolean

  • false: 0, null, undefined, NaN, ‘ ‘

  • true: any other value

    const canRead = true;
const test = 3 < 1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);

consol

value: true, type: boolean
value: false, type: boolean

null / undefined

  • null로 할당하면 아무런 값도 없다는 것을 명시하는 것
  • undefined로 지정하거나 아무 것도 지정하지 않으면, 선언은 되었지만 값이 정해지지 않은 상황
// null
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);
// undefined
let x = undefined; // let x; 도 같은 뜻
console.log(`value: ${x}, type: ${typeof x}`);

consol

value: null, type: object
value: undefined, type: undefined

symbol

// symbol, create unique identifiers for objects
const symbol1 = Symbol("id");
const symbol2 = Symbol("id");
console.log(symbol1 === symbol2);
const gSymbol1 = Symbol.for("id");
const gSymbol2 = Symbol.for("id");
console.log(gSymbol1 === gSymbol2); // true

consol

false
true

※ .description을 이용해 string으로 변환한 뒤, 출력해야 함!

console.log(`value: ${symbol1}, type: ${typeof symbol1}`); // error!
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

console

Uncaught TypeError: Cannot convert a Symbol value to a string at ~
value: id, type: symbol

object

object 문서 연결하기!

3. Constant

const

  • 가능하면 const로 선언하는 것이 좋음
  • block scope (like let)
    let은 mutable(변경 가능), const는 immutable(변경 불가) data type
  • reassignment(재할당)로 값이 바뀌거나, redeclare(재선언) 불가
  • 장점
    1. 보안상 좋음
    2. 다양한 threads의 동시 접속으로 변수 값 변경이 일어나는 것을 방지
    3. 코드 변경시 실수를 줄여줌

4. Dynamic typing

  • JS = dynamically typed language
    → run time 동안 할당된 값에 따라 data type 변화됨
  • C, JAVA = statically typed language
    → 변수 선언시 data type 명시 필요 
    let text = "hello";
console.log(text.charAt(0)); // h
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);
text = "7" + 5;
console.log(`value: ${text}, type: ${typeof text}`);
text = "8" / "2";
console.log(`value: ${text}, type: ${typeof text}`);
console.log(text.charAt(0));

    console

    h
    value: hello, type: string
    value: 1, type: number
    value: 75, type: string
    value: 4, type: number
    Uncaught TypeError: text.charAt is not a function at ~

    → string과 숫자가 합쳐지면 string이 되고,
    숫자로 이루어진 string끼리의 연산이 이루어지면 number가 되는 오류 발생
    (→ TS(typescript)가 나오게 되는 계기)

출처: “자바스크립트 3. 데이터타입, data types, let vs var, hoisting 프론트엔드 개발자 입문편 (JavaScript ES5+),” 유튜브 비디오, 27:58, 게시자 “드림코딩 by 엘리,” 2020년 4월 11일, https://youtu.be/tJieVCgGzhs