기술면접_JavaScript_03

프론트엔드 개발자 입문 | 데이터타입

Contents

1. Variable
   
2. Block scope / Global scope
   
3. Variable Types
   
4. Dynamic typing
   

• 드림코딩 유투브 채널의 JavaScript 기초강의 내용을 바탕으로 정리하는 포스팅입니다.
  
• 영상에서 언급되지 않은 내용이 포함되어 있음
  
• Tutorial Video
  

Variable

let(Mutable data type)

• 변수생성 키워드로 ES6에서 추가됨
  
• read and write
  

let name_ = 'Daye';
console.log(name_);
name_ = 'hello'; 
console.log(name_);

/*
과정
1. App생성 시 메모리가 할당됨
2. let을 통해 특정 메모리 영역을 사용할 수 있는 포인터 생성
3. name이 가리키는 메모리 영역에 다른 값 할당 
*/

constant(Mutable data type)

• only read

• 한 번 할당하면 값이 변하지 않는 변수선언 키워드로 let사용 시, 포인터가 가리키는 메모리 영역의 데이터 값을 변경할 수 있으나 constant는 포인터가 잠겨있어 값 할당 이후에는 데이터를 변경할 수 없음
  

• 장점 :
  (1) security: 해커가 임의로 데이터값을 변경할 수 없음
  (2) thread safety: 앱 실행 시 프로세스가 동작하고, 그 안에서 다수의 스레드가 프로세스 동작을 효율적으로 만듬. 하지만 데이터 변경 시 두 개 이상의 스레드가 동시에 변수에 접근할 수 있다는 위험요소가 있음. constant는 이를 방지함.
  (3) 데이터 값을 지속적으로 변경해야 하는 경우가 아니라면, Immutable Type의 constant를 사용하는 것이 바람직함
  

var

• ES6전 변수생성 키워드로 현재는 사용하지 않음
  이유 : 변수 선언 전에 값을 할당할 수 있으며, 값 할당 전 출력까지 가능하여 지나치게 유연하다는 단점이 있음. 이렇게 어디서 변수를 선언했는지와 무관하게 선언을 가장 위로 올려주는 것을 var hoisting이라고 함. 또한 var에서는 Blockscope을 사용할 수 없음(괄호 안에 코드를 작성하여도 어디에서나 내용에 접근할 수 있음)
  

Block scope / Global scope

Block scope

중괄호를 이용해 블럭 안에 코드 작성, 블럭 밖에서는 내용에 접근할 수 없음

Global scope

블럭 밖에 코드를 작성, 블럭 바깥에서도 내용에 접근할 수 있음 (프로그램 시작부터 종료까지 메모리 공간을 차지하기 때문에 가능한 적게 사용하는 것을 권장)

let globalScope = 'globalScope';

{
let blockScope = 'blockScope'; 
}

console.log(globalScope);
console.log(blockScope);

Variable Types

Primitive

• single item을 말하며 number, string, boolean, null, undefiend, symbol가 포함되어 있음
  
• single item이 메모리에 direct로 저장됨 (const사용 시, 수정불가)

Object

• single item을 묶어 box container로 관리하는 것을 말하며 function, first-class function이 포함되어 있음
  
  • first-class function : function을 변수에 지정
    

• box contaier가 single item주소를 참조하여 메모리에 저장됨 (const사용 시, single item을 가리키는 포인터는 잠금되지 않으므로 수정가능)

• JavaScript는 Type이 동적으로 할당되기 때문에 변수선언 시 Type을 명시하지 않아도 됨
  

// 1. number
/*
JavaScript 숫자범위 : (-2**53) ~ 2**53
BigInt : 숫자범위를 넘어가는 경우 끝에 n을 붙여 확장(일부 부라우저 지원)
*/


// 2. string
const name_ = 'Daye'
console.log('Hello ' + name_) 
console.log(`Hello ${name_}`) 
/*
template literals :
`${}`사용 시, 다수의 string과 변수를 함께 작성할 때에 매번 +로 이어붙이는 번거로움을 줄일 수 있음 
*/


// 3. boolean
/*
false : 0, null(Empty상태), undefined(값이 지정되지 않은상태), Nan
true : any other value
*/


// 4. symbol (create unique identifiers for objects)
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');

const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
/*
Symbol('id'); : symbol1, symbol2에 서로다른 고유식별자 생성
Symbol.for('id'); : gSymbol1, gSymbol2에 동일한 고유식별자 생성
출력 : symbol1.description과 같이 description을 추가하여 string변환 후 출력해야 함
*/

Dynamic typing: dynamically typed language

정적언어 (Statically Typed Language)

• 컴파일 시간에 변수의 타입이 결정되는 언어
  
  • 컴파일 시에 타입에 대한 정보를 결정하기 때문에 속도가 빠르고, 타입오류로 인한 문제점을 초기에 발견할 수 있음
    
• 대표적으로 C, C++, Java등이 있음
  

동적언어 (Dynamically Typed Language)

• 런타임에 타입이 결정되는 언어
  
  • 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 선택의 여지가 많다는 장점이 있으나, 실행도중 타입오류가 발생할 수 있음
    
  타입오류 예시

  //동적언어는 개인이 프로토타입을 빠르게 만들기에는 적절하나, 다수의 개발자가 규모있는 프로젝트를 진행할 때에 아래와 같은 오류가 발생할 수 있음
  
  let text = 'hello';
  console.log(text.charAt(0));
  text = 1;
  console.log(text.charAt(0));
  
  /*
  과정 :
  1. 개발자1이 text변수에 hello값을 넣음
  2. 개발자1이 text변수의 첫 번째 문자index를 출력함 
  3. 오류가 발생하지 않음
  4. 개발자2가 text변수에 숫자 1을 넣음
  5. 개발자3이 text변수명을 보고 string이라고 예상 후 첫 번째 문자index를 출력함
  6. 오류발생
  
  해결책 : TypeScript(JavaScript위에 Type이 올려진 언어)
  */
  

• 대표적으로 JavaScript, Ruby, Python등이 있음