텍스트를 표현. 0개 이상 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자를 표현.
작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싸서 사용.
6-3. 템플릿 리터럴
백틱(``) 으로 감싸서 사용.
ES6 부터 도입된 새로운 문자열 표기법.
멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등.
런타임에 일반 문자열로 변환되어 처리.
1). 멀티라인 문자열
백슬래시(\)로 시작하는 이스케이프 시퀀스(escape sequence)를 사용.
\n => 개행(LF, Line Feed):다음 행으로 이동, \r => 개행(CR, Carriage Return:커서를 처음으로 이동) 등.
이스케이프 시퀀스를 사용하지 않고도 줄바꿈 허용, 모든 공백 그대로 적용.
vartemplate=`<ul>
<li><a href="#">Home</a></li>
<url>`;
// 출력 결과
<ul>
<li><ahref="#">Home</a></li>
</ul>
2). 표현식 삽입
문자열은 문자열 연산자 +를 사용해 연결 가능.
${ }으로 표현식을 감싸서 사용.
letaddWord='day';
console.log(`good ${addWord}`); // good day
6-4. 불리언 타입
논리적 참: true, 거짓: false 나타내고 주로 조건문에서 자주 사용.
6-5. undefined타입
var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때가지 빈 상태(대부분 비어 있지 않고 쓰레기 값garbage value이 들어 있다)로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화한다. 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다.
undefined 타입의 값은 undefined가 유일.
변수에 값이 없다는 것을 명시하고 싶다면 null을 할당.
6-6. null 타입
null 타입의 값은 null이 유일.
대소문자를 구별 할 것.
의도적으로 변수에 값이 없다는 것을 명시. null을 할당하는 것은 변수가 값을 더 이상 참조하지 않는다는 의미. 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행.
함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 함.
6-7. 심벌 타입
ES6에서 추가된 7번째 타입, 변경 불가능한 원시타입.
다른 값과 중복되지 않는 유일무이한 값.
이름이 출돌할 위험이 없는 객체의 유일한프로퍼티 키를 만들기 위해 사용.
원시 값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 호출해 생성. 생성된 심벌 값은 외부에 노출되지 않음.
33장 7번째 타입 Symbol에서 자세히...
6-8. 객체 타입
자바스크립트는 객체 기반의 언어.
자바스크립트를 이루고 있는 거의 모든 것이 객체.
11장 원시 값과 객체의 비교에서 자세히...
6-9. 데이터 타입의 필요성
1). 데이터 타입에 의한 메모리 공간의 확보와 참조
값은 메모리에 저장하고 참조할 수 있어야 함.
메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 함.
자바스크립트 엔진은 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정됨.
2). 데이터 타입에 의한 값의 해석
데이터 타입이 필요한 이유
값 저장 시, 확보해야 하는 메모리 공간의 크기 결정을 위해
값 참조 시, 한 번에 읽어 들여야 할 메모리 공간의 크기 결정을 위해
메모리에서 읽어 들인 2진수 해석 결정을 위해
6-10. 동적 타이핑
1). 동적 타입 언어와 정적 타입 언어
정적 타입 언어
c, c++, 자바, 코들린, 고, 하스켈, 러스트, 스칼라 등
데이터 타입을 변수 선언시 선언해야 함.
변수의 타입 변경 불가, 변수에 선언한 타입에 맞는 값만 할당.
컴파일 시점에 타입 체크를 수행, 통과하지 못하면 에러를 발생시키고 프로그램의 실행 자체를 막음.
타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄임.
동적 타입 언어
자바스크립트, 파이썬, PHP, 루비, 리스프, 펄 등
변수 선언시 타입을 선언하지 않고 var, let const 키워드를 사용해 변수를 선언.
값을 할당하는 시점에 변수의 타입이 동적으로 결정됨.
변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론)됨.
변수의 타입은 언제든지 재할당에 의해 동적로 변할 수 있음 (동적 타이핑)
2). 동적 타입 언어와 변수
변수에 어떤 데이터 타입의 값이라도 자유롭게 할당 가능.
단점:
동적 타입 언어의 변수는 값을 확인하기 전에는 타입을 확신할 수 없음.
개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 함.
결국 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어짐.
📣📣변수를 사용할때 주의해야 함 1. 변수는 꼭 필요한 경우에 한해 제한적으로 사용. (재할당으로 언제든지 변경 가능 => 변수 개수가 많을수록 오류 발생 확률 높아짐)
2. 변수의 유효 번위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야함. 13장 스코프에서 자세히...
3. 전역 변수는 최대한 사용하지 않도록. (어디서든지 참조/변경 가능해 다른 코드에 영향을 줄 가능성이 높음 => 오류 추적이 어려움) 14장 전역 변수의 문제점에서 자세히...
4. 변수보다는 상수를 사용해 값의 변경을 억제 상수사용방법 - 15.3절 const키워드에서 자세히..
5. 변수, 모든 식별자(변수, 함수, 클래스)이름은 목적이나 의미를 파악할 수 있도록 네이밍. (명확한 네이밍은 코드 이해도를 높임 => 협업과 생상성 향상에 도움)
7장 연산자
7-1. 산술 연산자
피연산자 - 연산의 대상
산술연산이 불가능 - NaN 반환
1). 이항 산술 연산자
2개의 피연산자로 산술 연산하여 새로운 숫자 값을 만드는 것.
+, -, *, /, %(나머지)
2). 단항 산술 연산자
1개의 피연산자를 산술 연산하여 숫자 값을 만드는 것.
++, --, +, -
증감 ++ / 감소 -- 이 두 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.
숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.
3). 문자열 연결 연산자
+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 암묵적으로 타입이 자동변환 하여 문자열 연결 연산자로 동작.
암묵적 타입변환 / 타입 강제변환.
7-2. 할당 연산자
할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가.
연쇄 할당 (여러 변수에 동일한 값을 연쇄 할당)
var a, b, c;
a = b = c = 0;
우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당.
=, += (x = x + 2), -= (x = x - 2), *= (x = x * 2), /= (x = x / 2), %= (x = x % 2)
문자열
7-3. 비교 연산자
비교 연산자는 좌항과 우항의 피연산자를 비교한 값을 불리언으로 반환.
1). 동등/일치 비교 연산자
동등 비교 연산자 - 느슨한 비교 (암묵적 타입 변환으로 타입이 달라도 변환 후 값이 같으면 true❗)
x == y - x와 y의 값이 같은지 동등 비교 / x != y - x와 y의 값이 다른지 부동등 비교
일치 비교 연산자 - 엄격한 비교
x === y - x와 y의 값이 같은지 일치 비교 / x !== y - x와 y의 값이 다른지 불일치 비교
✅주의 2가지 - NaN, 숫자 0 비교
NaN 은 자신과 일치 하지 않는 유일한 값이라 Number.isNaN(); 으로 비교.
NaN === NaN; // false <= 자바스크립트의 오류다
Number.isNaN(NaN); //true
양수 0, 음수 0의 일치/동등 비교는 모두 true.
Object.is(); 로 비교.
값에 NaN이 들어있는지 확인하고 싶을때는 꼭❗❗ Object.is() 를 써야한다.
동등 비교 연산자는 결과를 예측하기 어려운 측면이 있으므로 일치 연산자를 사용하는 것이 좋음.
2). 대소 관계 비교 연산자
피연산자의 크기를 비교하여 불리언 값으로 반환.
> 크다, < 작다, >= 크거나 같다, <= 작거나 같다
5 > 1; // true 5가 1보다 크다.
7-4. 삼항 조건 연산자 (조건문, 표현식인 문)
조건식의 평가 결과에 따라 반환할 값을 결정.
조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
?앞 조건식이 참이면 '홀수' 거짓이면 '짝수'
7-5. 논리 연산자
우항과 좌항의 피연산자(부정 논리 연산자는 우항의 피연산자)를 논리 연산.
논리합( || ) OR 연산자 - 둘 중 하나라도 true면 true 그렇지 않으면 false
논리곱( &&) AND 연산자 - 둘 다 true면 true. 그렇지 않으면 false
논리 부정( ! ) NOT 연산자 - ! -> '아니다', 반대의 의미. 피연산자를 불린으로 반환. 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입변환함.
✅ 논리합(||) 또는 논리곱 (&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 이를 단축 평가라고 한다.
7-6. 쉼표 연산자
왼쪽 피연산자부터 오른쪽으로 실행되고 마지막 피연산자의 평가 결과를 반환.
맨우측의 값 z가 반환되므로 x는 6.
7-7. 그룹 연산자
() 소괄호로 피연산자를 감싼다. 자산의 피연산자인 표현식을 가장 먼저 평가하므로 연산자의 우선순위를 조절할 수 있다.
7-8. typeof 연산자
피연산자의 데이터 타입을 문자열로 반환.
String, number, boolean, undefined, symbol, object, function 중 하나를 반환. 함수는 function 반환.
✅ 선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError가 아니고 undefined 반환.
✅typeof null // object -> js의 첫번째 버그. 값이 null 타입인지 확인할땐 typeof 연산자 말고 일치 연산자 (===)를 사용.
7-9. 지수 연산자 (거듭제곱)
ES7에서 도입. 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환.
지수 연산자 도입 전에는 Math.pow() 사용.
지수연산자는우항에서 좌항으로 결합.
음수의 거듭제곱은 괄호로 묶어서 계산.
console.log((-5) **2); //25
할당 연산자와 함께 사용.
letnum=5;
num**=2; //25
이항 연산자 중에서 우선순위가 가장 높음.
2*5**2; //50
7-10. 그 외의 연산자
?. : 옵셔널 체이닝
?? : null 병합 연산자
Delete: 프로퍼티 삭제
New : 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
Instanceof : 생성자 함수와 연결된 인스턴스인지 판별
In: 프로퍼티 존재 확인
7-11. 연산자의 부수효과
3가지 연산자만 다른 코드에 영향을 주는 부수효과가 있고 대부분의 연산자는 다른 코드에 영향을 주지 않는다.
① . 할당 연산자(=), ②. 증가/감소 연산자(++/--), ③.delete 연산자
7-12. 연산자 우선순위
우선순위가 높을수록 먼저 실행.
연산자는 종류가 많아서 기억하기 어려워 기억에 의존하기보다는 우선순위가 가장 높은 그룹 연산자 () 소괄호 를 사용해 우선순위를명시적으로 조절하는 것을 권장.
7-13. 연산자 결합 순서
연산자의 어느 쪽(좌항, 우항)부터 평가를 수행할 것인지 나타내는 순서를 말함.
덧) 스터디에서 나온 이런저런 내용 240712금- *변수란 하나의 값을 저장하기 위해 확보한 메모리 공간. 메모리 공간에는 값이 들어간다. 값이란 변수에 할당 되어지는 연산된 결과물.
*완료값 개발자도구-콘솔에서만 볼수 있는 특별한 값. *함수형 기반으로 코드를 짜야함. *심볼 - cs에선 식별자 JS에선 스코프
*코드를 작성하는 이유 2개 1. 문제해결. 2. 코드 자체가 문서.
*단항 산술 연산자 ++ 대신 += 쓰기 (나조차 헷갈리지 않게) *for문 대신 map filter reduce사용하기!!
