JavaScript/JavaScript 수업

JavaScript 수업 | 6장~9장

히욤 2021. 9. 8. 19:36

- 수업 시작 10분전에 와서 앉아있자..

- 발표는 끝까지 하게될 것. 용어가 매우 중요!!

- 잡 디스크리션 읽어보기 => 협업이 매우 중요하다고 강조함.

- 일하는 방법을 배워야함... 발표, 지각, ...

 

- 바닐라 자바스크립트 공부를 해야 하는 이유.

대세는 계속 바뀜. jQuery 는 저물었고 React가 뜨고있다.

하지만 리액트도 언제 저물지 몰라!!

가장 기본 배경이 되는 바닐라 자바스립트를 잘 알아야 변화에도 잘 대응할 수 있다.

 

 

 

5장 표현식과 문

 

리터럴과 값

// file.js
1
10
'abc'

소스코드 파일에 위와 같이 작성했을 때, 1, 10, 'abc'는 리터럴이다. 평가 되기 이전이기 때문에...

자바스크립트 엔진은 위를 읽고, 평가하여 값으로 바꾼다.

파서? https://na27.tistory.com/230

 

1 : 숫자 값 1을 만들어라.

 

IPO

자바스크립트 엔진이 리터러를 입력 받음.

파서는 1은 무슨 뜻인지 찾아보고, 숫자 값 1임을 알게됨. (평가 과정: 값을 만들어 내는 행위)

반환값으로 숫자 값 1을 반환함.

 

평가, evaluate

위는 표현식인 문. 평가돼서 값을 만들어낼 수 있음.

 

var a; // 표현식이 아닌 문

위는 평가가 아님. 실행했다고 볼 수 있음.

표현식이 아닌 문.

 

 

 

표현식과 문

표현식은 문의 일부이다.

표현식인 문과 표현식이 아닌 문 두가지가 존재한다.

표현식은 값을 만들어 낼 수 있는 문이다.

 

선언문 : 표현식이 아닌 문.

 

표현식인지 아닌지는, 변수에 할당해 보면 알 수 있다.

var a = [값]; // 메모리 공간안에 들어가야 해서 값이 와야하는 맥락임.

 

리터럴은 표현식이다? 네!

 

리터럴은 값이 된다.

(l = v) 동치

시간이 지나면 리터럴이 평가되어 값이 된다.

ex) 1+2 = 3; (동치)

 

리터럴은 값을 만들기 위해 인간이 이해할 수 있는 기호로 표기한 표기법이다.

리터럴은 표현식이다!

 

삼항 조건 연산자도 표현식이다.

if...else문 보다 삼항 조건 연산자를 사용할 수 록좋다.

왜냐면 변수에 값 할당을 한번만 하기 때문임!

 

 

표현식인 문과 표현식이 아닌 문

x = 1 + 2;
// 위의 문에서, 1, 2, 1 + 2, x = 1 + 2 는 모두 표현식이다.
// 문의 일부분인 x, 1, 2, +, = 는 토큰이다.
// x = 1 + 2는 표현식이면서 완전한 문이다.

 

 

웹 브라우저 = 가상 머신 

웹 브라우저 안에 렌더링엔진, 자바스크립트 엔진이 있음

자바스크립트 엔진은 메모리를 사용하게 됨.

운영체제가 사용할 수 있는 모든 자원을 다 사용할 수 있는가?
또는 블락을 가져와서 사용하게 되는가

데스크탑 애플리케이션 보다는 웹 애플리케이션이 제약이 더 많을 것이다...

하지만 웹 브라우저에서 램을 사용하는 것을 걱정할 필요는 없음. 필요할 때 가져오면 됨...

메모리는 변수가 가지고 있고, 변수가 빨리 죽으면 메모리는 효율적으로 사용할 수 있음.

 

 

 

완료 값 (undefined)

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 완료값 undefined를 출력함.

완료 값은 표현식의 평가 결과가 아님. 따라서 다른 값과 같이 변수에 할당할 수 없고 참조할 수 도 없음.

완료값 undefined

크롬 개발자 도구에서 표현식인 문을 실행하면 언제나 평가된 값을 반환함.

콘솔의 경우엔 입력된 값이 표현식인 경우에 값을 자동으로 제공함. vsc는 그 기능이 없다.

 

ECMAScript에는 console에 대한 언급이 없음. console.log는 비표준임

기준이 없기 때문에 node.js에서 출력해주는 내용과 브라우저에서 출력해주는 내용이 다를 수 있음!

브라우저가 더 많은 정보를 제공해준다.

 

 

6장 데이터타입

데이터와 값은 거의 동일하게 보면 됨

값에 종류가있다.

 

7가지 타입이 있다

 

숫자 타입

다른언어는 구분을 해놓는다. 정수와 실수.

숫자를 표기할 때 8바이트를 사용한다. (ECMAScript사양서에 적혀있다)

 

 

실수를 이진수로 변환할 때 무한소수가 되는 경우가 빈번함.

어느 선에서 끊어내는 결과 오류가 발생한다.

(정수를 부동소수점으로 바꾸면 정확하게 표현되므로 괜찮아)

 

 

문자열 타입

// C언어에서
'a' // 문자
'ab' // 문자를 배열에 ['a', 'b']

// JS
'ab' // 문자열이라는 타입을 제공!

문자열 타입은 원시 타입이다.

 

'ab'.length // 2

하지만 위 처럼 객체처럼 사용할 수 있다.

자바스크립트는 암묵적으로 문자열을 객체로 만들어버린다.

 

 

ab // 식별자
'ab' // 문자열
'ab cd' // 문자열의 끝이 d라는 것을 알려줌

식별자와 문자열을 구별하기 위해서 ("", '', ``)를 사용해야함!

또 문자의 시작과 끝을 알려주기 위해서도 사용해야한다. 

우리는 홀따옴표를 쓰자.

 

좋은코드는...

재사용, 유지보수, 가독성, .. 이 좋아야해.

좋은 코드를 작성하기 위해서

어떤 것이 가독성이 좋은 것인지를 알아야함!

 

var s = 'abc';

// 템플릿 리터럴
`hello ${s}`; // 'hello abc' 
// 문자열 연결 연산자
'hello ' + s; // 'hello abc'

 

만약 변수를 문자열에 추가하지 않는 경우에는 백틱 말고 작은따옴표를 사용해야해.

백틱은 자바스크립트 엔진이 일을 더 하게 되기 때문.

 

${} : 문자열 삽입 이라고 부름

 

 

프론트엔드의 최종 일은 HTML로 렌더링하는 것.

따라서 문자열을 사용하게 되는 경우가 많아질 수 있다.

그때 템플릿 리터럴을 사용하면 편하다.

 

 

 

 

 

undefined 타입

var a = 1;
a = undefined; // 이건 굳이..? 비어있다는 것을 표현하려면 null을 써라

var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. (var, let 전부 포함)

 

 

null 타입

값이 없다는 것을 명확하게 하고 싶은 경우 사용한다.

의도적 부재

// 초기화 하는 경우 
var n = 0; // 숫자
var s = ''; // 문자
var something = null; // 뭐가 들어올지 모를 때

// 함수의 반환
function doSomething(a){
	...
    return null; 
    // 만약 a에 값이 들어오지 않은 경우, 아무 것도 들어오지 않았다는 것을 알려주기 위해 null을 반환
}

 

 

 

Symbol 타입

대부분의 타입은 리터럴로 생성할 수 있지만,

심벌은 Symbol 함수를 호출해 생성한다.

심벌은 원시 값이다.

(생성자 함수 또는 클래스에서 파스칼 케이스를 따른다.

자바스크립트 빌트인 컨벤션을 따르자.)

 

 

프로퍼티 키는 절때 중복되지 않는다. 

위와 같은 경우는 자바스크립트의 forEach를 덮어쓰려고 하는 건데, 그를 막기위해...

 

 

 

객체 타입

원시 타입 vs 객체 타입 => 11장에서 배운다.

 

 

데이터타입의 필요성 

var a = 100;

자바스크립트 엔진은 위의 명령을 수행하기 위해 다음과 같이 동작한다.

 

1. a가 들어갈 메모리 공간을 확보하고 undefined를 저장한다.

2. 데이터 타입을 확인하고, 해당 데이터 타입이 들어갈 공간을 확보하여 저장한다. 숫자 타입은 8바이트다.

 

a; // 100

자바스크립트가 위의 명령을 수행하기 위해..

 

1. a 변수의 데이터 타입을 파악하고, 읽어올 바이트를 알아낸 다음 가져온다.

 

2. 부동소수점 이진수로 표현된 값을 데이터 타입에 맞게 해석한다. 숫자 타입이므로 100으로 해석함.

 

 

 

동적 타이핑✏️

var a; // undefined

a의 타입은 undefined다.

사실 변수가 가지고 있는 값의 타입이다. 그냥 변수의 타입이라고 말하기도 한다.

 

var a; // undefined
a = 1; // number

같은 변수에 타입이 다른 값을 할당할 수 있는 언어를 동적 타입 언어라고 한다.

유연하지만 체계가 없다. 안정성이 떨어진다.

 

var = 1;

// 300 line 뒤에

a = 'a'; // 문법적으로 지장은 없지만... 심각한 오류가 발생할 수 있음!

// 나중에

a + 1; // 기대값은 2, 하지만 실제론 'a1'... => 버그 발생!

 

위와 같은 문제가 발생할 수있으므로 변수는 꼭 필요한지 생각하고 써야해.

재할당을 안하는 방법을 생각해야함. 아예 새로운 변수를 만드는게 낫다. 대신 변수 라이프타임을 짧게!

또는 const를 사용하자. const는 재할당이 금지된 변수

함수의 라인을 짧게 해야 함. 그래야 에러가 발생할 확률이 줄어든다.

 

하.. 어려워

정적 타입이였으면 좋겠다! => TypeScript

타입스크립트는 컴파일 단계에서 타입을 확인하게 된다.

 

 

7장 연산자

 

부수효과

다른 코드에 영향을 미치는 상황. 사용해서는 안되는 효과다(안티패턴). 최대한 피하자!

부수효과가 있는 연산자는 3개로 ++/--, =, delete

 

 

문자열 연결 연산자

1 + 1; // 산술 연산자 +
1 + '1'; // 문자열 연결 연산자 +
'1' + 1; // 문자열 연결 연산자 +

암묵적 타입 변환. 타입 강제 변환!

 

 

 

NaN

isNaN() 쓰지말고, Number.isNaN 을 써라.

 

Object.is

-0 === +0; //true
Object.is(-0, +0); // false

NaN === NaN; // false
Object.is(NaN. NaN); // true

 

 

 

쉼표 연산자

안티패턴.. 쓰지마!

 

 

지수 연산자

2 ** 2;
Math.pow(2,2);

Math.pow()를 사용하는 경우...

얘는 함수이므로 인수, 순서, 다 신경써야해. 실수할 확률이 올라가

함수 호출보다 좋은 건 연산자 표현식이다.

 

 

 

 

연산자 결합 순서

a = 1;
// 1. a
// 2. 1
// 3. =

1. a 식별자가 존재하는지 확인.

2. 리터럴 1을 값 1로 판단

3. = 으로 대입한다.