자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)
//python의 print와 비슷
console.log('Hello World')
//hello 정의하기
var hello;
hello = 10
//html에서 자바스크립트를 포함할 때 어떻게 포함하는게 더 효율적일까
//<head><script src="main.js"></script></head>
//만약 js파일이 크면 사용자 측면에서 보는데 오래 걸린다.
//<body><script src="main.js"></script></body>
//페이지가 사용자들에게 js받기 전에 준비가 되어서 사용자들이 미리 컨텐츠를 볼 수 있다.
//js에 의존적인 웹은 사용자가 의미 있는 컨텐츠를 보기 위해서는 사용자가 정상적인페이지를 보기 전까지는 많은 시간을 기다려야 한다.
//<head><script asyn src="main.js"></script></head>
// 다운로드 받는 시간을 절약될 수 있다. 정의된 js 순서에 상관없이 먼저 다운된 순서대로 적용된다.
//<head><script defer src="main.js"></script></head>
//parsing HTML --> executing js. defer이 가장 좋은 옵션. 필요한 js를 다 다운 받아 놓고 html을 사용자에게 보여주고 바로 js를 보여준다. 순차적으로 실행하기에 우리가 정리한 순서대로 실행된다.
//순수 자바스크립트를 쓸 때는 'use strict'를 쓰는게 좋다. because it is flexible and can be risky. this is added ECMAScript5
//let으로 설정할 수 있다.
let a;
a = 6;자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)
//프로그래밍 언어에서 입력, 연산, 출력이 가장 중요하다.
//1. Use strict added in ES 5. use this for Valina JS
'use strict';
//2. Variable - 변경 될 수 있는 값. JS에서는 let을 이용 변수를 선언할 수 있는 키워드. let (added in ES6). global은 아무대서나 보인다.
let globalName = 'global name';
{
let name = 'ellie';
console.log(name);
name = 'hello';
console.log(name);
console.log(globalName);
}
// var (dont ever use this!) var hoisting - 어디에 선언했는지 상관없고, 제일 위로 선언을 끌어올려 준다. var has no block scope{}을 사용할 수 없다. {}를 사용해도 아무곳에서나 보인다.
var age;
age = 4;
console.log(age);
//3. constants 바로 한 번 할당하면 값이 절대 바뀌지 않음. 값을 변경할 수 없는 것. immutable.favor immutable data type always for security, thread safety, reduce human mistakes
const daysInWeek = 7;
const maxNumber = 5;
console.log(daysInWeek);
console.log(maxNumber);
//4. variable types: primitive type. 더 이상 작은 단위로 나눠질 수 없는 한가지의 아이템. single item: number, string, boolean, null, undefined, symbol, object, box container, function, first-class function - 변수에 할당이 가능. 함수에서 return type으로도 function을 리턴할 수 있다.
let a = 1;
let b = 1.4;
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 - speical 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(greeting)
console.log(brendan)
const helloBob = `hi ${brendan}!`; // template literals(string)
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);
console.log('value: ' + helloBob + ' type: '+ typeof helloBob);
//boolean
//false: 0, null, undefined, NaN, ''
//true: any other value
const CanRead = true;
const test = 3<1;
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, create unique identifiers for objects 고유한 식별자가 필요할 때 쓴다.
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const symbol3 = Symbol.for('id');
const symbol4 = Symbol.for('id');
console.log(symbol3 === symbol4);
//변수를 어떻게 선언하는지 알아봤다.
//5. dynamic typing: dynamically typed language JS는 선언할 때 어떤 타입인지 선언하지 않고, 런타임, 프로그램이 동작할 때 할당된 값에 따라서 타입이 변경될 수 있다. 내가 좋은 아이디어가 있을 때 빠르게 프로토타입을 하고 싶을 때 도움이 된다.
let text = 'hello';
console.log(text.charAt(0))
text = 1;
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`)
text = '8'/'2';
console.log(`value: ${text}, type: ${typeof text}`)
// object, real-life object, data structure
const ellie = { name: 'ellie', age: 20};
console.log(ellie)
ellie.age=21;
자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6)
//1. String concaternation
console.log('my'+' cat')
console.log('1'+2);
console.log(`string literals: '''
1+2 = ${1+2}`);
console.log("ellie's\nbook")
;
//2. Numeric operators
console.log(1+1);
console.log(1-1);
console.log(1/1);
console.log(1*1);
console.log(5%2);
console.log(2**3);
//3. Increment and decrement operators
let counter = 2;
const preIncrement = ++counter;
console.log(preIncrement);
const postIncrement = counter++;
console.log(postIncrement)
console.log(counter);
const preDecrement = --counter;
console.log(preDecrement)
console.log(counter);
const postDecremenet = counter--;
console.log(postDecremenet)
console.log(counter)
//4. Assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y
x -= y; // x = y - x
x *= y; // x = x * y
x /= y; // x = y / x
// 5. comparison operators
console.log(10 <6);
console.log(10<=6);
console.log(10>6);
console.log(10>=6);
//6. logical operators || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 <2;
// || (or), finds the first truthy value
console.log(`or: ${value1 || value2 || check()}`);
// && (and), finds the first falsy value
console.log(`and: ${value1 && value2 && check()}`);
//often used to compress long if-statement
// nullableObject && nullableObject.something
if (nullableObject != null) {
nullableObject,something;
}
function check() {
for (let i = 0; i < 3; i++) {
//wasting time
console.log('shocking');
}
return true;
}
// ! (not)
console.log(!value1);
// 7 Equality
const stringFive = '5';
const numberFive = 5;
// == loose equality, with type conversion
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);
// === strict equality, no type converstion
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);
// object equality by reference
const ellie1 = { name: 'ellie' };
const ellie2 = { name: 'ellie'};
const ellie3 = ellie1;
console.log(ellie1 == ellie2);
console.log(ellie1 === ellie2);
console.log(ellie1 === ellie3);
// equality - puzzler
console.log(0 == false);
console.log(0 === false);
console.log('' == false);
console.log('' === false);
console.log(null== undefined);
console.log(null=== undefined);
//8. Conditional operators: if, else if, else
const name = 'coder';
if ( name === 'ellie') {
console.log('welcome, Ellie!');
} else if (name === 'coder') {
console. log('You are amazing coder');
} else {
console.log('unkwown');
}
// 9. Termary operators: ?
// condition? value 1: value 2;
console.log (name === 'ellie' ? 'yes':'no');
// 10. Switch statement
// use for multiple if checks, use for enum-like value check, use for multiple type checks in TS
const browser = 'IE';
switch (browser) {
case 'IE':
console.log('go away!');
break;
case 'Chrome':
case 'Firefox':
console.log('love you!');
break;
default:
console.log('same all!');
break;
}
// 11. Loops
// while loop, while the condition is truthy, body code is executed.
let i = 3;
while ( i > 0 ){ console.log(`while: ${i}`); i--;}
// do while loop, body code is executed first, then check the condition.
do {
console.log(`do while: ${i}`); i--;
} while (i > 0)
// 11. Loops
// while loop, while the condition is truthy, body code is executed.
let i = 3;
while ( i > 0 ){ console.log(`while: ${i}`); i--;}
// do while loop, body code is executed first, then check the condition.
do {
console.log(`do while: ${i}`); i--;
} while (i > 0);
// for loop, for(begin; condition; step)
for (i = 3; i > 0; i--) {
console.log(`for: ${i}`);
}
for (let i = 3; i>0; i = i -2) { console.log(`inline variable for: ${i}`);}
// nested loops
for (let i = 0; i < 10; i++) {
for (let j = 0; j <10; j++) {
console.log(`i: ${i}, j:${j}`);
}
}
front-end developer 🌷