[드림코딩 by 엘리] 자바스크립트 기초 강의_(1)

1. 스크립트 태그 처리 방법

html태그를 parsing하다가 script태그를 만나면 js파일을 서버에서 다운받아서 실행하고 다시 parsing하는 순서

 

1) head안에 script 포함

=> 만약 js가 너무 크고 느리다면 문제 발생

 

2) body안에 script 포함

=> 사용자가 기본 html 컨텐츠는 빨리 볼 수 있지만, 자바스크립트에 의존적인 웹이라면 정상적인 사이트를 볼때까지 딜레이가 발생

 

3) head+async속성

=> 병렬로 js파일을 다운로드하고 계속 parsing을 진행하다가 다운로드가 완료되면 js파일을 실행

=> 시간이 절약되지만, html이 더 빠르고 설치가 끝났을때 parsing이 멈추기 때문에 딜레이 발생 가능

 

4) head+defer

=> parsing과 함께 js파일을 다운로드하고 parsing이 끝난 뒤 js파일을 실행

=> 사용자에게 html요소를 먼저 보여주자마자 js파일 실행, 가장 안전하고 효율적

 

2. Variable

• 과거에는 var 사용 => 문제점: var hosting (어디서 선언되더라도 제일 위로 끌어 올려주는 것을 뜻함), block scope이 없음

 

• let (added in ES6) : var의 문제를 해결하기 위해 나타난 변수, rw 가능

 

• const: 값을 선언함과 동시에 할당하고 변경이 x (immutable data type)=>  보안 문제 방지, thread safety, 개발자의 실수를 줄여줌, r 만 가능

 

3. Variable type

• primitive type(single item): number, string, boolean, null, undefined, symbol / Immutable type

                                          🔔 number의 특수한 값: infinity(0으로 나눌때), -infinity, NaN(숫자가 아닌 값을 계산할 때)

                                          🔔 string 출력: +로 연결 가능, `hi ${[변수이름]}!` 백틱으로 연결하여 출력 가능

                                          🔔 boolean: false(0 ,null, undefined, NaN, ' '

                                          🔔 symbol: 고유한 식별자가 필요할 때 사용, 동일한 symbol을 가져도 다른 것으로 간주

• object (box container) : reference가 가리키고 있는 object를 불러옴 / Mutable type (frozen objects를 제외)
• function(first-class function)

 

4. Dynamic typing

=> 선언할 때 type을 선언하지 않고 런타임때 할당된 값에 따라 type이 변경 => 런타임 오류 발생 가능!

 

5. operators

1) logical operators

or,(||) and(&&): 앞의 값부터 판단하고 원하는 결과가 있을시에 뒤의 값은 동작하지 않음=> 무거운 함수는 뒤쪽에 배치

 

2) Equality

== : loose equality, 타입은 상관없이 비교

===: strict equality, 타입이 다르면 다른 값으로 판단

object equality: 같은 값이어도 ref가 다르기 때문에 false, 같은 ref를 할당하여야 같은값

 

3) Ternary operator(삼항연산자)

condition ? value1:value2 : 조건이 true이면 value1, false이면 value2

console.log(name==='jieun'?'yes':'no');

 

6. Function

1) 기본 개념

• function name(parm1,param2){body ... return;}
• 함수는 한가지 역할만 하도록 생성
• 이름은 command, verb형태로 하는 것을 권장
• function은 object 

2) Parameters

• premitive parameters: value로 전달 / object parameters: reference로 전달

 

• default parameter(added in ES6): parameter가 전달하지 않을때 기본값으로 대체되어 전달

function showBox(message,from="unknown"){}
showBox('hi');

 

• Rest parameters(added in ES6): 배열 형태로 전달

function printAll(...args){}
printAll('dream','coding','jieun');

•  

3) local scope

함수 안에서 선언된 변수는 지역변수이기 때문에 밖에서 사용 x

 

4) Early return, early exit

조건이 맞지않을때 return 하는 코드를 위쪽에 배치하여 효율성을 높이는 것이 좋음

 

5) Function expression

• 함수 선언과 동시에 실행 가능 

const print=function(){ //annonymous functioin(이름이 없는 함수)
	console.log('print');
};

• 함수 선언은 hosting이 가능하지만 expression은 x

 

6) Callback function: 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수

function randomQuiz(answer,printYes,printNo){
	if(answer=='hi'){
    	printYes();
    }else{
    	printNo();
      }
      
const printYes=function(){
	console.log('yes');};
    
const printNo=function(){
	console.log('No');};
    
randomQuiz('hi',printYes,printNo); //callback 함수 호출

 

7) Arrow Function

const simplePrint = () =>console.log('simple!');
const add = (a,b) => a+b;

 

8) IIFE(Immediately Invoked Function Expression): 괄호를 이용하여 함수를 바로 실행

(function hello(){
    console.log('Hi');
})();