[유튜브 '드림코딩'] 자바스크립트(JavaScript ES6) 3강

3. 데이터타입, data types, let VS var , hoisting

내가 오늘 배운 것

 

` (백틱) 과 '( 홑따옴표)

나는 맥북을 사용하고 있다. 프로그래밍 언어를 배우면 가장 먼저 'hello, world!' 를 출력해보는데 이것 마저도 오류가 나서 엄청 당황했다..
이유는... `(백틱)을 어딘가에 잘 못 썼다...
(정확하게 기억은 안나지만 한군데 백틱쓰고 한군데 홑따옴표를 썼던가..? 찾아내긴 했는데 하나씩 이것저것 해보다가 해결을 본거라 기억이 가물가물..)

백틱 키가 일반 키보드에선 확실히 봤던 기호인데 맥북에 키보드를 하나씩 봐도 도저히 없는 것이였다...
찾아보니 백틱인걸 알았지 처음엔 뭐라고 불리는 기호인지도 모르니 그냥 어떻게든 찾는 수 밖에.. 엄청 찾다가 보니


맥북은 ₩ ( 원 표시 ?) 와 ` (백틱) 표시가 같은 키 다.

한글로 하면 ₩
영어로 하면 `

라는 내용을 봤고 그 뒤로 자연스럽게 쓰고 있다 ☺️ (뿌듯...)
(근데 웬걸... 유튜브강의 뒤로 가니 백틱이라고 설명을 해주네..... 난 오류때문에 열심히 찾았는데...좀더 볼껄...)
.

`~~ ~~` === '~~ ' + ' ~~ '

백틱을 이용하게 되면 백틱안에 있는 문자열이나 띄어쓰기 등 그대로 나와서 편하다.

${ ~~ }
변수 ~~을 자동으로 대입해 준다.

hoisting : 호이스팅// 어디에 선언했냐에 상관없이 항상 제일 위로 선언을 끌어 올려주는 것

---

동영상 보면서 따라 적어보기

// 1. use strict
//Whole-script strict mode syntaxa
// JavaScript is very flexible  
//flexible === dangerous
// added ECMAScript 5
'use strict'

// 2. Variable , rw (read/write)
// let (added in ES6)       // mutable
let globalName = 'global name';
{
let name = 'ellie';
console.log(name);
name = 'hello';
console.log(name);
console.log(globalName);
}
console.log(globalName);

    //var   (Don't ever us this ! )
    //var hoisting (move declaration from bottom to top)
    //has no block scope

// 3. Constant  r(read only)
    // use const whenever possible.
    // only use let if variable nees to change.

    // Immutable data type : premitive types, frozen objects (i.e. object, freeze())
    // Mutable data type : all object by default are mutalble in JS
    // favor immutable data type always for a few reasons : 
    //  -security
    //  -thread safety
    //  -reduce human mistakes

const daysInWeek = 7;
const maxNumber = 5;

// 4. Variable types
    // primitive - single item : number, string, boolean, null, undefined symbol...
    // object - box container
    // function - first-class function

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 - speicla numeric values : infinity, -infinity, NaN
const infinity = 1/0;
const negativeInfinity = -1/0
const nAn = 'not a number' / 2
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);

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

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

//symbol, create unique identifiers for objects
const symbol1 = Symbol('id');
const sysbol2 = Symbol('id');

console.log(symbol1 === sysbol2);   //false

const gSymbol1 = Symbol.for('id'); 
const gSymbol2 = Symbol.for('id');

console.log(gSymbol1 === gSymbol2 ); //ture

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

console.log(`value : ${symbol1.description} , type : ${typeof symbol1}`); //  convert into 'String' using 'description'

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



// 5. Dynamic typing : dynmically 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)); // error