본문 바로가기
모던 자바스크립트 deep dive

2022.07.12

by 치우치지않는 2022. 7. 13.

p50~100

개념을 이해한다는 것 = 용어를 정확히 이해하고 설명할 수 있다는 것. 

값(value)은 식이 평가되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.  

모든 값은 데이터 타입을 가지며, 메모리에 2진수 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 

 

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. 

 

표현식은 값으로 평가될 수 있는 문이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다. 리터럴은 그 자체로 표현식이다.  값으로 평가될 수 있는 문은 모두 표현식이다. 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어 낼 수 있다. 

 

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문은 여러 토큰으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다. 

 

세미콜론 자동삽입기능이 암묵적으로 수행되므로 문의 끝에 붙이는 세미콜론은 생략이 가능하다.

 

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. 표현식인 문은 값으로 평가되므로 변수에 할당이 가능하다. 그러나 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다. 

 

데이터 타입은 7개가 있다. 원시 타입(숫자 타입, 문자열, 불리언, undefined, null, 심벌), 객체타입. 

 

자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다. 추가적으로 세 가지 특별한 값도 표현이 가능하다. Infinity, -Infinity, NaN(not a number 산술 연산 불가)

 

문자열은 작은 따옴표 또는 큰 따옴표 또는 백틱으로 텍스트를 감싼다. 만약 문자열을 따옴표로 감싸지 않으면 자바스크립트 엔진은 키워드나 식별자같은 토큰으로 인식한다. 또 따옴표로 감싸지 않으면 공백 문자도 포함시킬 수 없다. 

 

템플릿 리터럴은 백틱을 사용해 표현한다. 새로운 문자열 표기법으로 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다. 

일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며 , 모든 공백도 있는 그대로 적용된다. 문자열은 문자열 연산자 + 를 사용해 연결할 수 있다. 그러나 템플릿 리터럴 내에서는 표현식 삽입을 통해서 간단히 문자열을 삽입할 수 있다. 표현식을 삽입하려면 ${} 으로 표현식을 감싼다. 이때 표현식 삽입은 반드시 템플릿 리터럴 내에서 사용해야 한다. 

 

undefined 는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이다. undefined 를 개발자가 의도적으로 변수에 할당하면 undefined 의 본래 취지와 어긋나므로 변수에 값이 없다는 것을 명시하고 싶을 경우에는 null 을 할당한다. 

 

심벌 타입은 변경 불가능한 원시 타입의 값이다. 따라서 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다. 

 

6가지 값 이외의 모든 타입은 객체 타입. 중요한 것은 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 것! 

 

데이터 타입은 왜 필요한가?

1. 데이터 타입에 의한 메모리 공간의 확보와 참조 (변수에 할당되는 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다. ) 2. 데이터 타입에 의한 값의 해석 

 

c나 자바 등의 정적 타입 언어는 변수를 선언할 때 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언이라 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당이 가능하다. 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지를 검사하는 처리)를 수행하며 타입 체크를 통과하지 못 했다면 에러를 발생시킨다.

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)된다. 그릭고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라 하며 자바스크립트를 동적 타입 언어라 한다. 

따라서 변수는 타입을 갖지 않는다. 하지만 값은 타입을 갖는다. 즉 현재 변수에 할당되어 있는 값에 의해 변수의 타입이 동적으로 결정된다고 표현하는 것이 적절하다. 

 

동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다. 따라서 변수를 사용할 때 주의사항을 잘 지켜야 한다. 

1. 변수는 꼭 필요한 경우에 한해 제한적으로 사용한다. 2. 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다. 3. 전역변수는 최대한 사용하지 않도록 한다. 4. 변수보다는 상수를 이용해 값의 변경을 억제한다. 5. 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍한다. 

 

코드는 오해하지 않도록 작성해야 한다. 코드는 동작하는 것만이 존재 목적은 아니다. 코드는 개발자를 위한 문서이기도 하다. 따라서 사람이 이해할 수 있는 코드, 즉 가독성이 좋은 코드가 좋은 코드다. 

 

컴퓨터가 이해하는 코드는 어떤 바보도 쓸 수 있다. 하지만 훌륭한 프로그래머는 사람이 이해할 수 있는 코드를 쓴다. (마틴 파울러, 리팩토링 저자)

 

피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 

 

산술 연산자-> 산술 연산이 불가능한 경우 NaN 을 반환한다. 

 

할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다. 

 

동등 비교(==)연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 따라서 동등 비교 연산자는 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후 같은 값일 수 있다면 true 를 반환한다. 

일치 비교(===)연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true 를 반환한다. 일치 비교 연산자에서 주의할 것은 NaN이다. NaN은 자신과 일치하지 않는 유일한 값이다 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다. 숫자 0도 주의하자. 자바스크립트에는 양의 0과 음의 0이 있는데 이들을 비교하면 true 를 반환한다. 

 

if else 문은 표현식이 아닌 문이다. 따라서 If else 문은 값처럼 사용할 수 없다. 그러나 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 

 

typeof 연산자로 null 값을 연산하면 null 이 아닌 object 를 반환한다는 데 주의하자. 따라서 값이 Null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===) 를 사용하자. 또 하나 주의할 것은 선언하지 않은 식별자를 typeof 연산자로 연산해 보면 referenceError 를 발생하지 않고 undefined 를 반환한다. 

 

연산자의 부수 효과를 가져오는 연산자는 할당 연산자, 증가.감소 연산자, delete 연산자이다. 

 

제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행되는데 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어하게 된다. 그러나 코드의 실행 순서가 변경된다는 것은 단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼라스럽게 만드므로 제어문의 사용을 억제하여 복잡성을 해결할 필요가 있다. 

 

if else 문 보다는 삼항 조건 연산자를 사용하는 편이 가독성이 좋다. 

 

조건이 너무 많을 때를 제외하고는 switch 문은 if else 로 쓰는 것이 좋다. 

 

 

 

 

 

'모던 자바스크립트 deep dive' 카테고리의 다른 글

2022.08.31  (0) 2022.08.31
2022.07.21  (0) 2022.07.22
2022.07.14  (0) 2022.07.15
2022.07.10  (0) 2022.07.11

댓글