자바스크립트 기초. 스크립트 실행, 변수 선언, 변수 타입, 동적 타이핑.

1. 스크립트 실행 속도 조절하기 : async와 defer

    <script src="javascript.js"></script>
    <script async src="javascript.js"></script>
    <script defer src="javascript.js"></script>

기본적으로 HTML은 헤드에서 라인을 따라가며 구문을 읽다가 script를 만나면 하던 일을 멈추고 script를 실행한다.

이 때문에 페이지 로딩 시간도 느려질뿐더러 HTML 파일에 종속되는 스크립트의 경우 실행이 꼬이는 경우들이 있다.

그래서 우리는 async와 defer 실행 방법 중 하나를 택하는 것을 고려할 수 있다. ( 다른 방법도 존재하나 여기서 다룰 내용은 아니다. )

async의 경우 비동기적 처리 방식으로 script를 만나면 멈추지 않고 계속해서 구문을 읽으면 script를 모두 읽으면 그때 HTML 구문 읽기를 멈춘 뒤 설치가 완료된 순서대로 실행한다. 다만 이 방법도 여전히 HTML이 모두 로드되지 않은 상태에서 파일 의존적인 스크립트가 실행되면 코드가 꼬일 수 있고, JAVAScript의 크기에 따라 웹 페이지 로딩이 느려질 수도 있다.

defer의 경우 마찬가지, script를 만나면 HTML 구문 분석과 script 읽기를 동시에 진행한다. 그러나 async와 달리 HTML 구문 분석이 끝나기 전까지 script가 실행되지 않으며, 구문 분석이 끝나면 설정된 순서대로 script를 실행한다.

=> 대부분의 경우에서 스크립트가 DOM과의 상호작용을 필요로하는 경우가 많기 때문에 잘 모르면 그냥 defer를 사용하는 것이 제일 안정적이이며, 종속성이 없고 로드 순서가 별로 중요하지 않은 경우에는 async를 사용할 수도 있다.

 

2. 'use strict';를 선언하라.

use strict는 엄격 모드다. 기존의 'sloopy mode'에서 은근슬쩍 넘어가던 문제들을 strict mode에서는 가차없이 모두 에러를 발생시킨다. 이것은 ECMAScript5에서 처음 소개된 것이며 ECMAScript6부터는 strict mode가 기본값이다.

필요에 따라 strict mode를 사용하지 않고 코드를 만들 수도 있지만 학습자는 strict 모드를 활성화하고 배우는 것이 좋다.

 

3. 변수 선언 : var, let, constant

ECMAScript 5까지 변수 선언은 var로 통일되어 있었다.

그러나 이 var라는 친구는 아주 자기 멋대로인 친구라서 개발자들의 머리를 아프게 만들었는데 대표적인 예시는 다음과 같다.

console.log (varjoa); // undefined
var varjoa = 4;
console.log (varjoa); // 4

이는 var varjoa =라는 값이 최상단으로 hoisting 되어서 varjoa가 이미 선언된 상태로 인식하는 것이다.

이외에도 블럭 밖으로 호이스팅 되기 이미 선언된 값 재선언해도 얌전히 있기 등등 수많은 기묘한 행동들을 저질러 개발자들을 괴롭혀왔으나 전체적인 정리할 이 글에 담을 내용은 아니다.

아무튼 그래서 ECMA Script6에서 let과 constan(const)라는 새로운 변수 선언 방식을 만들어낸다.

let과 const도 결국 자바스크립트의 아이들이기 때문에 호이스팅 현상이 일어나지 않는 것은 아니지만, var와 변수 값이 선언되기 전에 메모리가 초기화되기 전에는 값을 출력하지 않는 방식으로 호이스팅 현상으로 인한 문제를 막아낸다.

따라서 우리는 얌전히 let과 const를 사용하는 것이 이롭다.

let은 재할당이 가능한 변수 선언 방식이고 const는 재할당조차 불가능한 변수 선언 방식이다.

특별하게 재할당이 필요한 경우가 아니라면 일단 const를 사용하여 변수를 선언하고 추후 수정하는 것이 좋다.

이유 => 보안성, 함수 실행 안정성, 유지보수 용이

 

4. 변수 타입

Privitive(원시, 기본) type	number, string, boolean, null, undefined, symbol
Object(객체) type	box, container, function

JAVA나 C언어 등과 달리 JAVA Script는 number, string, boolean 등이 모두 let 선언 하나로 끝난다.

(추후 배울 Type Script는 number, string 등 타입을 명시해야 한다.)

 

4.1. number (숫자)

JAVA Script는 정수 소수 모두 구분 없이 number 타입으로 지정된다.

숫자를 0으로 나누게 될 경우 무한대의 값이 생기며 infinity 타입이 된다.

음수를 0으로 나누게 될 경우 무한대의 음수 값이 생기며 nagativeinfinity 타입이 된다.

수가 아닌 것을 숫자로 나누면 NaN이 된다. ( Not a Number, 숫자가 아니라는 뜻이며 사용자에게 에러가 표시된다. 연산 시 값이 유효한지 항상 확인해야 한다. )

기존 자바 스크립트는 -2^53 ~ 2^53까지 인식할 수 있었으나 ES6에서 Bigint타입이 추가되어 더 큰 수도 다룰 수 있게 되었다. 그러나 아직 모든 브라우저에서 지원하지 않으며 Bigint타입은 Bigint 타입끼리만 연산할 수 있고, 당연히 속도도 number보다 느리다.

 

4.2. string (문자)

JAVA와 달리 char와 string의 구별이 없다. 어떤 문자든 모두 string으로 통일이다.

ttotti = 2 + '3'
console.log(`value: ${ttotti}, type: ${typeof ttotti}`);
// value: 23, type: string

심지어 숫자와 문자를 더하면 string으로 인식된다.. miracle.. ✨

 

4.3. Boolean (참 거짓)

다른 자료형을 Boolean으로 변환할 경우 도출 값은 다음과 같다.

false : 0, null, undefined, NaN, ' ' (비어져있는 string)

true : 존재하는 모든 값

const ddoddi = true;
const ttotti = 0 > 2
console.log(`value: ${ddoddi}, type: ${typeof ddoddi}`);
// value: true, type: boolean
console.log(`value: ${ttotti}, type: ${typeof ttotti}`);
// value: false, type: boolean

 

4.4. null과 undefined

Let nothing = null;

비어있는 것이라고 empty를 직접 할당한 것이 null이다.

Let undefined = ''

값이 할당되지 않은 상태가 undefined다.

=> 즉 빈 공간이 할당된 상태로 저장된 것이 empty, 어떤 값이 저장도 초기화도 되지 않은 값이 undefined다.

 

4.5. symbol

심볼은 고유한 값을 만들어내는 것에 사용하며, 동일한 string을 사용해도 전혀 별개의 값으로 인식된다.

그러나 symbol.for를 사용하면 같은 값을 공유하게 된다. 찾아본 결과 객체의 프로퍼티 키로 사용된다는데..

아직 내가 배운 지식으로는 이해할 수 없는 내용이기 때문에 넘어가고, 추후 내용을 보강할 수 있다면 보강해야겠다.

ddoddi = symbol ('hehe')
ttotti = symbol ('hehe')

consol.log(ddoddi === ttotti) // false

ddoddi = symbol.for ('hehe')
ttotti = symbol.for ('hehe')

consol.log(ddoddi === ttotti) // true

 

3 - 6 object (객체)

위에서 나열한 원시형 데이터를 제외한 모든 것은 객체이다.

object는 key와 value로 이루어져 있으며 최상위 단위인 object는 변경할 수 없으나 안에 존재하는 value는 변경할 수 있다.

더 자세한 부분은 함수와 배열을 배워야 다룰 수 있는데.. 아직 내가 그 부분을 배우지 못했으므로 후에 지식을 습득한 후 따로 글을 쓰거나 이 부분을 추가하도록 하겠다.

const DDoDDi = { name :DDoDDi, age: 2, sex: male );
// name, age, sex는 key. DDoDDi, 2, male은 value이다.

 

5. Java Script의 특성 : Dynamic typing (동적 타이핑)

C나 JAVA같이 row 한 언어들은 Statically typing (정적 타이핑)을 사용한다.

동적 타이핑의 가장 큰 특징은 사용자가 모든 값에 타입을 지정해줄 필요 없이 프로그램이 알아서 판단해준다는 것이다.

굉장히 편한 기능이지만 여기서 아주 Dynamic 한 문제가 생길 수 있다.

let text = 'ddoddi';
console.log(`value: &{text}, type: &{typeof text}`); //value: ddoddi type: string
text = 10;
console.log(`value: &{text}, type: &{typeof text}`); //value: 10 type: number
text = '10' + 4;
console.log(`value: &{text}, type: &{typeof text}`); //value: 104 type: string
 text = '4' / '2'
console.log(`value: &{text}, type: &{typeof text}`); //value: 2 type: number

프로그램이 스스로 판단해서 타입을 계속해서 바꾸기 때문에 정교한 프로그램을 만들려면 생각지도 못한 부분에서 문제가 생길 수 있다.

이런 문제점을 보완하기 위해 나온 것이 Type Script이다.

 

 

 

 

 

 

--

 

한 가지씩 더 깊게 파면서 복습하면 훨씬 도움이 되겠지만.. 새로운 것을 접하니 다시 진도 따라가기도 벅차다 헉헉

자바 스크립트를 배우기 시작하니 CSS와 HTML이 얼마나 선녀였는 지 알겠다 ^^~~..

다행인지 불행인지 요즘 장사가 최악으로 안되는 덕분에..ㅋㅋ..ㅋㅋ.. 열심히 하고 있다.