[드림코딩 by 엘리] JavaScript 기초 강의(2) (ES5+)

'use strict' 사용

'use strict';

 

 

Variable (변수)

- 변경될 수 있는 값

- JavaScript에서는 let 으로 사용한다. (ES6에서 추가됨)

 

🔥 let 이전에는 var을 사용했는데 var의 사용은 지양한다!

var은 Block Scope도 무시한다.

 

 

 

Block Scope

{
  let name = 'yunkyung';
  console.log(name);  // yunkyung
  name = 'hello';
  console.log(name);  // hello
}

console.log(name);    // 출력 안됨

이렇게 block 안에 코드를 작성하게 되면 block 밖에서는 안의 내용들을 볼 수 없다.

 

 

 

Constants

- 가리키고 있는 포인터가 잠겨 있다.

- 선언과 동시에 할당이 되면 값을 변경할 수 없다.

- let (mutable) vs const (immutable)

- 보안, 실수를 방지하기 위해 사용한다.

 

 

 

Variable types

어떤 프로그래밍 언어든 primitive type과 Object type 두가지로 나뉘어진다.

 

• Primitive type

더이상 작은 단위로 나눠질 수 없는 한 가지의 아이템.

number, string, boolean, null, undefined

 

-Number

// number
const count = 17;  // Integer
const size = 17.1;  // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

타입 상관없이 전부 number 로 나온다.

 

 

// number - speicla numeric values: infinity, -infinity, NaN
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);          // infinity
console.log(negativeInfinity);  // -infinity
console.log(nAn);               // NaN

NaN: not a number

 

숫자의 맨 마지막에 'n'만 붙이면 bigInt로 간주한다.

(최근에 추가된 것이기 때문에 크롬, 파이어폭스에서만 지원한다)

// bigInt (fairly new, don't use it yet)
const bigInt = 1234567890123456789012345678901234567890n; // over (-2**53) ~ 2*53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);

 

 

-String

• 다른 string과 + 를 이용해서 붙일 수 있다.
• 백틱(`)으로 감싸서 변수를 함께 사용할 수 있다.

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

타입은 다 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}`);

 

 

// null
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);

// undefined
let x;
console.log(`value: ${x}, type: ${typeof x}`);

 

 

-Symbol

• 고유한 식별자
• 동시 다발적으로 일어날 코드에서 우선순위를 주고 싶을 때 사용한다.
• 동일한 string으로 작성하여도 다른 값으로 취급한다.
• for 메소드를 사용해서 동일한 symbol을 만들 수 있다.
• 출력시 description 메서드를 사용한다.

// 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); 
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

 

 

 

• Object type

-Object

싱글 아이템들을 묶어서 한 박스({})로 관리. 함수에 인자로 전달 가능. 리턴 타입으로 function 리턴 가능.

function, first-class-function 변수에 할당이 가능하다.

// object, real-life object, data structure
const ellie = { name: 'ellie', age: 20 };
ellie.age = 21;

• 한 번 할당된 object는 다른 object로 할당이 불가능하다. (const로 지정되어 있어서 메모리의 포인터가 잠겨있기 때문!)
• object 안의 변수의 값(name, age)은 다른 값으로 할당할 수 있다.

 

 

• Dynamic Typing

JavaScript는 선언시 데이터 타입을 명시할 필요가 없다. 런타임에서, 할당된 값에 따라 타입이 변경된다.

하지만 다수의 엔지니어, 규모가 있는 프로젝트에서 오류 발생의 원인이 될 수 있음 -> TypeScript로 보완

// 5. Dynamic typing: dynamically typed language
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));