YDKJS (유돈노JS) Ch2 - 자바스크립트 조망하기

ch2. 자바스크립트 조망하기

파일은 프로그램입니다.

JS는 파일 각각이 별도 프로그램이다. 파일하나에만 오류있어도 다음 파일이 처리되지 않을수있다. 대부분 웹프로젝트는 빌드도구로 파일을 하나로 합쳐 배포함, 이때는 합쳐진 1개파일을 전체프로그램으로 취급함.

독립적인 js파일 여러개를 하나의 프로그램으로 작동시키는 유일한 방법-전역스코프로 파일간 상태를 공유하고, 공통으로 사용하는 기능을 접근할수있게 만드는 방법. 그러면 런타임에서 하나의 애플리케이션으로 작동함

값

프로그램에서 정보의 가장 기본단위는 값. 값에 데이터를 저장함.

모든값은 데이터타입을 가짐.

-원시타입primitive, 객체타입object

원시타입

리터럴(변수를 통하지 않고 코드자체로 프로그램에 값을 대입함)

보간법interpolation - 백틱으로 감싼 문자열에서 문자열 내 표현식${...}부분에 변수의 값으로 대체되는 것.

아주큰 정수는 BigInt를 사용함. 

비어있는 값은 undefined 사용는게 안전함.

심벌은 객체에서 특정한 키를 만들때 사용한다. 직접쓰진않고 라이브러리,프레임워크같은 저차원코드에서 사용함

배열과 객체

배열은 특수한 객체. 모든타입 값이 들어갈수 있다. 배열안에 배열도, 함수도, 객체도 가능.

객체는 키-값 컬렉션. 좀더 일반적임

배열과 객체의 차이. 배열은 인덱스로 요소접근, 객체는 키=프로퍼티로 접근한다.

값의 타입

typeof 연산자로 타입구분. typeof null은 object, typeof function은 function, typeof arr는 object.

타입강제변환(coercion) >>뒤에서

변수 선언과 사용

변수는 값을 담는상자

var로 선언한 변수는 함수스코프, let로 선언한 변수는 블록스코프 (접근범위가 블록) 블록밖에서 접근시 오류

그럼 어떨때 var, let, const를 사용하면 좋을지

const로 선언한 변수는 재할당이 불가능한거지 값을 바꿀수없는게 아님..그러니 const로 객체를 정의하는건 좋지않다.

객체를 재할당은 안되지만 안에 값을 바꿀수있으니까. 그래서 객체변수를 const로 선언하면 혼란생길수있다.

const는 원시값을 저장하는 용도로만 사용하는게 가장 적절하다!

함수

프로시저(한번이상 호출,입력값,출력값 반환)

함수선언은 식별자와 실제함수 연결이 컴파일 단계에서 이루어짐. 함수표현식은 코드실행될때.

함수는 객체. 함수는 값으로 취급된다. 1개값만 반환한다.(여러개를 반환하려면 객체/배열로 반환)

함수는 값이므로 객체 프로퍼티로 할당할수 있다.

비교

일치비교=== 동등비교 ==

주의할점) NaN === NaN //false, 0===-0 //true

그러니 NaN과 비교할때는 Number.isNaN()을 쓰고, -0과 비교시 Object.is()를 쓰자.

특히 객체끼리 비교할때..일치비교는 본질,내용을 비교하지만 비교대상이 객체일경우 구조적일치를 비교한다.

JS에서 객체는 참조를 대상으로 일치비교(identity equality)를 한다.

JS에는 객체구조가 같은지 비교할 방법이 없다..! 같은걸 참조하고 있는지만 비교할수있다. 객체구조가 같은지 알려면? 직접코드를 짜서 확인하는 수밖에..어떻게??

강제변환

피연산자 타입이 다른경우, ==는 비교전에 강제로 타입을 맞추는 강제변환후에 비교함. (강제변환 동등비교연산자)

== 는 숫자형 피연산자를 선호한다. 둘다 문자열인 경우 제외하면 모두 숫자로 타입변환후 비교. 둘다 문자열인 경우, 알파벳순으로 비교. (ex) "10"<"9" //true임ㅋㅋㅋ)

타입변환을 피할방법은 둘의 타입을 일치시키는것뿐.. 그냥 비교연산자 작동방식 제대로 배우고 받아들이자~

코드 구조화 패턴 - 클래스, 모듈

클래스:사용자 정의 데이터타입, 어떻게 동작하는지 정의함. -클래스동작(메서드)..근데 값은 아님 

인스턴스:구체적인 값. new키워드를 사용해 만든다.

상속과 다형성

상속:부모클래스에서 정의한 동작을 확장해서 자식클래스에서 사용할수 있다.

다형성:상속받은 메서드와 새롭게 정의한 메소드 이름이 같고 공존할수있는것

모듈

모듈도 클래스처럼 논리적으로 데이터와 동작을 그룹화하기 위한 목적.

모듈과 클래스의 차이는 문법.

클래식 모듈:최소 한번이상 실행되는 외부함수. 모듈인스턴스 내부의 숨겨진 데이터르 ㄹ대상으로 작동하는 

함수호출시 모듈 인스턴스가 생성됨. 모듈팩토리(클래식모듈 인스턴스에 있는 함수)

클래스는 this.으로 메소드,데이터에 접근, 모듈은 this없이도 접근가능.

클래스에는 인스턴스의 API가 클래스자체에 정의되어있고, 모든데이터와 메소드는 공개임

모듈팩토리함수는 외부에 노출된 공개메소드를 사용해 객체를 명시적으로 만들고 반환함. 이때 참조되지않은메소드는 팩토리함수내 비공개로 남는다.

AMD,UMD,CJS를 사용해 작성한 프로그램 참고해봐..

모듈팩토리 함수를 인스턴스화해서 사용할때, new없이 일반함수처럼 호출해 사용한다는점이 클래스와 다르다!

ES모듈

클래스모듈과 차이

1)모듈을 정의하는 래핑함수가 없다. ES모듈은 파일기반. 모듈파일1개=모듈.

2) ES모듈은 모듈API와 직접상호작용하지 않는다. export로 퍼블릭API로 정의한다. 없으면 숨김상태

3) ES모듈을 인스턴스화 안해도 import로 가져와 단일인스턴스처럼 사용할수있다. import로 모듈가져온순간 인스턴스가 생기고, 같은모듈을 다른곳에서 import할때는 이미 생긴 모듈의 참조만 가져옴. ES모듈은 사실상 싱글턴.

인스턴스가 여러개 필요한경우에는 ES모듈내부에 클래식모듈 함께 사용하면 모듈인스턴스 여러개 만들수있다. 

하나만 필요하다면 export로 필요한메소드 직접 내보내 사용하면 된다.