Web_DAY2

이정찬·2023년 1월 31일
0

Web

목록 보기
2/5

동기, 비동기

메인 Thread 하나로 돌리는 것이 동기 통신, 별도의 Thread로 작업을 진행하여 결과를 받아보는 것이 비동기 통신이다.

Semantic Tags

  • iframe도 Semantic Tag에 속하며, 나머지는 아는거 그대로

HTML 추가

  • fieldset 태그: form을 감쌀 수 있는 박스를 만들어주며, legend 태그로 이름도 설정 가능하다.

  • audio, video 태그: 각각 음원, 영상 재생에 사용됨.

<audio controls autoplay>
  	<source src="../../../util/spider.mp3" type="audio/mpeg">
  	<source src="../../../util/spider.ogg" type="audio/ogg">
 	음원 플레이를 지원하지 않는 브라우저
</audio>
<video src="../../../util/mov_bbb.mp4" controls></video>

JS - 변수

var

var a = 1;
console.log(b); // error
b = 10; // 아무것도 안써도 선언 가능, var로 선언된다.
console.log(b); // 10
let c = 2;
const d = 3; // let, const = modifier

var a = 5; // ok
console.log(a); // 5
var a;
console.log(a) // 이래도 5. 동일변수 선언시 가장 가까운 상위 라인의 초기화값으로 적용

var name;
console.log(name); // undefined

console.log(pw); // undefined
var pw = "hi1234";

test(); // undefined
var test = () => {
	console.log(1);
}
var test = () => {
	console.log(2);
}

var은 언제든지 같은 이름으로 선언 가능하다. let, const는 안됨. (호이스팅)

  • undefined는 타입이다.

  • js는 파싱 후 런타임이 실행된다. 파싱 할 떄 pw 변수는 인식이 되어있지만, 할당은 런타임때 한다. 따라서, 실행할 떄pw 변수는 출력은 가능하지만, 값은 없다. 함수도 이것이 가능한데, 오버로딩 개념은 아니므로 주의

var가 있는 변수와 없는 변수의 차이: 선언 위에서 불렀을때, 선언이 없다면 아예 에러가 난다.

const test = () => {
  var kor = 00;
  eng = 88;
}
console.log(kor); // error
console.log(eng); // error
const test = () => {
  var kor = 00;
  eng = 88;
}
test();
console.log(kor); // error
console.log(eng); // 88

파싱 단계에 선언이 되기 때문에, 함수 콜을 해야 변수 접근이 가능하다.

let & const

  • ES6 문법, 제어문의 블럭 안에서만 유효하다. 타 언어 지역 변수 개념과 비슷하다.
console.log(math); // error
if (false) {
  let math = 100;
}
console.log(math); // error
  • const는 상수, 재정의 불가(readonly)

literal

// 변수는 리터럴에 의해 타입 지정
let a = 0; // number
a = undefined; // undefined, 이것도 리터럴이다.
a = null; // null
a = "kim" // string
a = false; // boolean
a = []; // array
a = {}; // object
a = 10 + undefined; // NaN
console.log(a instanceof Object); // true, a는 Object이다.

a = function () {}; // function
console.log(a instanceof Function); // true
console.log(typeof(() => {})); // function

javascript의 최상위객체는 Function이다.

JS - 연산자

    1. 산술연산: +, -, ** 등..
    1. 대입연산(복합대입연산): +=, -=, /=, &= 등..
    1. 비트연산: &, |, ^, ~ 등..
    1. 논리연산(관계연산): &, &&, |, || 등.. (&, |는 좌, 우에 참/거짓, 숫자, null 등이 모두 올 수 있다. 2개 짜리는 참/거짓만 온다.)
    1. 비교연산: ==, !=, === 등..
    1. 단일항연산: ++, --
    1. 삼항연산: ? :
    1. 기타: ?., ??, ??=: ECMA2020 신문법, undefined 체크용이다.
// 헷갈릴 수 있는 연산들
console.log(true & null); // 0
console.log(true & new String('kim')); // 0 (주소 비교)
console.log(true & 'kim'); // 0
console.log(true & undefined); // 0

console.log(true && new String('kim')); // String 객체 반환
console.log(true && 'kim'); // kim

console.log(true | new String('kim')); // 1
console.log(true || new String('kim')); // true

console.log(false || 'kim'); // kim
console.log(undefined || 'kim'); // kim
console.log('' || 'kim'); // kim

let x;
console.log(x); // undefined
x = x || 0;
console.log(x); // 0

console.log('kim' === new String('kim')); // false
console.log('kim' === new String('kim').toString()); // true

console.log(undefined == null); // true
console.log(undefined == undefined); // true, 둘 다 3개는 false

const a = (x, y = 100, z = 3.14) => {
	...
}
a(10, null); // null일 때는 default value가 반영되지 않는다.
a(10, undefined); // undefined일떄는 default value가 반영된다.

javascript는 타입이 따로 없기 때문에, 오버로딩 또한 존재하지 않는다.

// ? 관련 연산 (null 체커)
const x = '';
console.log(x ?? 'kim'); // undefined, ||와 비슷하다고 보면 된다.
            
let user = {
    name: {
        first: 'kim',
        last: 'gildong',
    },
};
console.log(user.name);
console.log(user.name.first);
console.log(user.name.last);
console.log(user.name?.middle); // undefined, ? 안쓰면 에러가 나버리지만, 이렇게 쓰면 에러는 안난다.

console.log(user.job); // error
user.job ??= 'developer';
console.log(user.job); // developer

JS 추가

  • JS의 switch-case문에는 true/false도 올 수 있다.
  • Objectfor-in 돌면 key를 가지고 배열을 돈다.
profile
개발자를 꿈꾸는 사람

0개의 댓글