2022/08/10 - TIL

오늘 공부한 것

09장 타입 변환과 단축 평가

9.1 타입 변환이란?

타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 타입 변환을 할 때 주의해야할 것은, 원시 값은 변경 불가능한 값이므로 변경할 수 없으며, 타입 변환이란 기존 원시 값을 사용해 다른 새로운 원시 값을 생성하는 것이다. 암시적 타입 변환이 더 간결해 보일 수 도 있지만, 동료가 작성한 코드를 정확히 이해할 수 있게 작성해야한다.

9.1-1 명시적 타입 변환

값의 타입이 개발자의 의도에 따라 다른 타입으로 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다.

9.1-2 암시적 타입 변환

표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라고 한다

9.2 암묵적 타입변환

9.2.1 문자열 타입으로 변환

9.2.1-1 스트링 리터럴

자바스크립트 엔진이 표현식을 에러없이 평가하기 위해 기존 값을 바탕으로 새로운 타입의 값을 만들어서 연산을 한다.

//숫자 타입
1+'2' //'12'
-0+'' //'0'
-1+'' //'-1'
NaN + '' //'NaN'
-Infinity + '' //'-Infinity'

//불리언 타입
true + '' //'true'

//null 타입
null + '' //'null'
//undefined 타입
undefined + '' //'undefined'
//심벌 타입
(Symbol()) + '' //TypeError : Cannot convert a Symbol value to a string

//객체 타입
({}) + '' //[object Object]
Math + '' //[object Math]
[] + '' //"
[10, 20] + '' //'10, 20'
(function(){}) + '' //'function(){}'
Array + '' //'function Array() { [native code] }'

9.2.1-2 템플릿 리터럴

템플릿 리터럴의 표현식을 사용하면, 암묵적으로 타입이 문자열 타입으로 변경된다

console.log(typeof `${1+1}`)
//string

9.2.2 숫자 타입으로 변환

1*'10' //10
1/'10' //NaN

'1'>0 //true

문자열 타입
+'' //0
+'string' //NaN
+'1' //1

//불리언 타입
+true //1

//null 타입
+null //0

//undefined 타입
+undefined //Nan

심벌 타입
+Symbol() // TypeError:Cannot convert a Symbol value to a number

객체 타입
+{} //NaN
+[] //0
+[10, 20] //NaN
+(function(){}) //NaN

9.2.3 불리언 타입으로 변환

if('')console.log('1');//''->falsy
if(0)console.log('2')//0->falsay
if('str')console.log('3')//'str'->truthy

• false, undefined, null, 0, -0, NaN, “”는 false로 바뀌는 falsy값이다.

9.3 명시적 타입변환

9.3.1 문자열 타입으로 변환

1. 문자열 타입으로 변환

//1 String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1) //'1'
//2 Object.prototype.toString
(1).toString()

1. 숫자 타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법

//1. Number
Number('0');
//2. parseInt parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
ParseInt('0'); 0
//3. + 단순 산술 연산자를 이용하는 법
+"1"; //1
//4. * 산술 연산자를 이용하는 방법
'0' * 1;// 0

9.3.3 불리언 타입으로 변환

//1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x'); //true
//2. ! 부정 논리 연산자를 두 번 사용하는 방법
!!'x';//true

9.4 단축평가

9.4.1 논리 연산자를 사용한 단축 평가

표현식을 평가하는 도중에 평가 과정이 확정되는 경우 나머지 평가 과정이 생략되는 것을 말한다.

true||anything //true
false||anything //anything
true&&anything//anything
false&&anything//false

함수 매개 변수에 기본값을 설정할 때, 매개변수에는 undefined가 할당되는데, 단축 평가를 사용해서 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

9.4.2 옵셔널 체이닝 연산자

옵셔널 체이닝 연산자와 논리 연산자를 사용한 단축평가에서 다른 결과가 나오는 예시이다.

//사용하는 이유

var str = '';
var length1 = str&&str.length;
var length2 = str?!str.length;

console.log(length1)//''
console.log(length2)//0

논리 연산자 &&는 좌항 연산자가 false로 평가되는 Falsy(false, undefined, null, 0, -0,NaN, ‘’)이면 좌항 피연산자를 그대로 반환한다. 하지만 0이나 ‘’은 객체로 평가될 때도 있다.

9.4.3 null 병합 연산자

null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자가 반환된다

var foo = null ?? 'default string' //default string

10장 객체 리터럴

10. 1 객체란?

원시 타입의 값은 변경이 불가능한 값, 객체는 변경 가능한 값이다.

프로퍼티 값이 함수일지라도, 일반 함수와 구분하기 위해 매서드라고 부른다.

객체는 프로퍼티와 메서드로 구성된 집합체이다.

10.2 객체 리터럴에 의한 객체 생성

new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다. 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다. 객체 리터럴 값으로 평가되는 표현식이다.

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 키는 따옴표로 묶어야하지만, 자바스크립트에서 사용할 수 있는 유효한 이름인 경우, 따옴표를 생략해도 된다.

주의 : 대괄호 프로퍼티 접근을 할 때 프로퍼티 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

10.5 프로퍼티 접근

마침표 프로퍼티 : .를 이용하여 접근하는 마침표 표기법

대괄호 프로퍼티 접근 연산자를 사용하는 대괄호 표기법

var person ={
	name:'Lee'
}
console.log(person[name])//ReferenceError:name is not defined
console.log(person.age)//undefined

주의할 것 : 식별자 네이밍 규칙을 준수하지 않은 이름 같은 경우 반드시 대괄호 표기법을 준수해야한다. 단, 프로퍼티 키가 숫자로 이루어져있다면, 따옴표를 생략할 수 있다.

 var person ={
	'last-name' : 'Lee',
	1:10
}
person.'last-name' //Syntax Error
person.last-name // 브라우저 환경NaN
person[last-name] //ReferenceError : last is not defined
person['last-name'] // Lee

person.1 //Syntax Error
person.'1'//Syntax Error
person[1] //10
person['1']//10

10.9 ES6에서 추가된 객체 객체 리터럴 확장 기능

10.9.1 프로퍼티 축약 표현

프로퍼티 키와 프로퍼티 값을 그대로 객체에 넣는다면 동일한 값이 자동 생성된다.

10.9.2 계산된 프로퍼티 이름

var prefix = 'prop'
var i = 0;
obj[prefix+'-'+++i] = i;

10.9.3 메서드 축약 표현

var obj = {
	name:'Lee',
	SayHi : function(){
		console.log('Hi" + this.name)
}
}
const obj2={
	name = 'Lee',
	say(){
		console.log('Hi' + this name);
}
}

ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

11장 원시 값과 객체의 비교

원시 값 : 변경이 불가능한 값이고 실제 저장 값이다.

객체 : 변경 가능한 값이고, 참조 값이 저장된다

11.1 원시 값

변경이 불가능한 것은 변수가 아니라 값이 불가능하다는 것이기에, 변수를 재할당하는 것으로 변수가 바뀐다. 상수는 재할당이 금지되어 변수가 안바뀌는 것이다.

11.1.2 문자열과 불변성

숫자 값은 1과 100000도 동일한 8바이트가 필요하지만, 문자열의 경우 1개의 문자와 10개의 문자로 이루어진 바이트 요구량이 각각 다르다. 문자는 유사 배열 객체이면서 이터러블이다. 때문에 문자열의 일부 문자를 변경한다고 해도 변경되지 않는다.

var str = 'hi'
str[0] = 'H'
console.log(str) //'hi'

물론 변수에 새로운 문자열을 재할당하는 것은 가능하다.

11.1.3 값에 의한 전달

원시 값을 갖는 변수를 할당하면 값에 의한 전달이다. 즉 같은 값이지만 주소가 다르다.

var score = 80
var copy = score
score = 100

이라고 한다면,

1. score에 a라는 주소
2. copy에 score과 같은 값인 b라는 주소
3. score = 100이 될 때, c라는 주소가 생성됩니다

11.2 객체

변경 가능한 값으로 객체를 복사할 때는, 원시 값처럼 크기가 일정하지 않으며, 프로퍼티 값이 객체일 수도 있어 복사에 많은 비용이 들기 떄문에, 메모리의 효율을 위해 객체를 복사할 때 참조값을 복사한다

메모

연산자 : 값들을 이용해서 새로운 값을 변환한다.

delete 가 true를 반환하는 이유는 delete도 연산자이기 때문이다

궁금해진 사항

state1 vs state2의 차이가 있는가

const a = true;
const b = false;
//state1
if (a && b) {
  console.log(1)
}
//state2
if (a) {
  if (b) {
    console.log(1)
  }
}
////////////////////
//state3
if(a||b){
  console.log(2)
}
//state4
if(a){
  console.log(2)
}else if(b){
  console.log(2)
}