모던자바스크립트 deepdive 정리 (9~11장)

9장 타입변한과 단축 평가

9.1 ) 타입 변환 이란 ? 

 자바스크립트의 모든값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅 이라 한다.

var x = 10;
var str = x.toString( ) ; // 숫자를 문자열로 타입 캐스팅
console.log(typeof str, str); // string 10
console.log(typeof x, x); // number 10 // 변수의 값이 변경된것은 아니다

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되기 도한다.

이를 암묵적 타입변환 또는 타입강제변환 이라 한다

var x = 10;
varstr = x + '';
console.log(typeof str, str); // string 10
console.log(typeof x, x) // number 10 // x 변수의 값이 변한 것은 아니다.

9.2) 암묵적 타입 변환

암묵적 타입 변환이 발생하면 문자여르숫자,불리언과 같은 원시타입중 하나로 타입을 자동 변환한다.

`1+1 = ${1+1} ` // "1 + 1 = 2 "

템플릿 리터럴 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다.

false
undefined
null
0, -0
NaN
' ' (빈문자열)

자바스크립트 엔진은 불리언 타입이 아닌값을 Truthy 값 (참으로 평가 되는 값) 또는 Falsy값 (거짓으로 평가되는값)으로 구분한다.  위값은 false로 평가 되는 Falsy 값이다

function isFalsy(V) {
return !v;
}

=>전달받은 인수가 Falsy 값이면 true , Truthy 값이면 false 를 반환한다.

 

9.3) 명시적 타입 변환

(1).toString(); // "1"
(NaN).toStrig(); // "NaN"
(Infinity).toString();//"Infinity"

1+ '' ; // "1"
true + '' ; // "true"

숫자타입 -> 문자열 타입

불리언 타입 -> 문자열 타입

1. Number 생성자 함수를 new 연산자 없이 호출 하는방법
Number('0') // 0
Number(true) //0
2. paseImt . parseFloat 함수를 사용하는 방법 ( 문자열만 변환 가능)
paseInt('0') // 0
3. + 단항 산술 연산자를 이용하는 방법
+'0'; //0
+'-1'; //-1
+true; //1
4. * 산술 연산자를 이용하는 방법
'0' *1 //0
true *1; // 1

9.4) 단축 평가

단축평가 표현식
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

논리합(||) 연산자는 두개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다 

논리곱(&&)연산자는 두개의 피연산자가 모두 true 로 평가 될때 true를 반환한다 , 좌항 피연산자가 false로 평가되는 Falsy값 (false, undefined , null , 0 , -0 ,NaN , '')이 면 좌항 피연산 자를 그대로 반환한다 . 

 

 

이처럼 논리 연산의 결과를 결정하는 피연산자를 탑입 변환하지 않고 그대로 반환한다 . 이를 단축 평가라 한다 . 단축평가는 표현식을 평가하는 도중에 평과 결과가 확정된 경우 나머지 평가 과정을 생략 하는것을 말한다 

 

<객체를 가리키기를 기대하는 변수가 null 또는 undeifined가 아닌지 확인하고 프로퍼티를 참조할때>

단축평가를 사용하면 에러를 발생시키지 않는다 

var elem= null;
var value = elem && elem.value; //null

<함수 매개변수에 기본값을 설정할 때 >

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

function getStringLength(str){
 str = str || ' ' ;
 return str.length  ; 
 }
getStringLength() // 0
getStringLength('hi') // 2

Es6의 매개변수의 기본값 설정
function getStringLength(str=''){
 return str.length  ; 
 }
getStringLength() // 0
getStringLength('hi') // 2

 

 

10장 객체 리터럴

10.1)객체란 자바스크립트를 구성하는 거의 모든것이 객체다 원시값을 제외한 나머지값(함수,배열,정규 표현식 등)은 모두 객체이다 . 

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

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

 

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

객체 생성 방법 중에서 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다 

리터럴은 사람이 이해핼 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다 . 

객체 리터럴은 객체를 생성하기 위한 표기법이다.

 

10.3) 프로퍼티

객체는 프로퍼티의 집합이며 , 프로퍼티는 키와 값으로 구성된다 .

 

10.4) 메서드

프로퍼티 값이 함수일 경우 이반 함수와 구분하기 위해 메서드 라고 부른다

즉 메서드는 객체에 묶여 있는 함수를 말한다 

 

10.5)프로퍼티 접근

프로퍼티에 접근하는 방법은 다음과 같이 두가지다

• 마침표 프로퍼티 접근연산자(.)를 사용하는 마침표 표기법
• 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법

10.6) 프로퍼티 값 갱신

이미존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다

 

10.7) 프로퍼티 동적 생성

존재하지 않는 프로퍼티 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

 

10.8) 프로퍼티 삭제

delet 연산자는 객체의 프로퍼티를 삭제한다. 

 

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

let x= 1, y =2;
const obj = {x,y};
cosole.log(obj); // {x:1 , y:2}

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

const obj={
 name :'Lee',
 sayHi(){
   console.log( 'Hi!' + this.name);
  }
 };
 obj.sayHi(); // Hi!Lee

 

 

11장 원시값과 객체의 비교

원시값을  갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다.

이를 값에 의한 전달 이라 한다.

이에 비해 객체를 가르키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 

이를 참조에 의한 전달 이라 한다.

const o = {}; //const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다

//const 키워드를 사용해 선언한 변수에 할당안 원시값*상수는 변경 할수없다
//하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할수있다
o.a = 1;
console .log(o) //{a:1}

=>원시값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수는 없다 . 따라서 불변성을 갖는 원시값을 할당한 변수는 재할당 이외에 변수값을 변경할 수 있는 방법이없다.

var str = 'string';
//문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.

console.log(str[0]);// s

//원시값인 문자열이 객체처럼 동작한다.

console.log(str.length) ; //6
console.log(str.toupperCase()); //STRING

변수에 새로운 문자열을 할당하는 것은 가능하다 이는 기존 문자열을 변경하는 것이 아닌 새로운 문자열을 새롭게 할당하는것이다.

 

var = score = 80;
var copy = score;

console.log(score, copy); // 80 80
console.log(score === copy); //true

score= 100;

console.log(score,copy); //100 80
console.log(score===copy); //false

=> score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.

    따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.

"값에 의한 전달"은 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문이다.

이는 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있다는 것!

 결국 ! 두변수에 원시값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다는것

 

11.2) 객체

객체는 프로퍼티의 개수가 정해져 있지않으며, 동적으로추가되고 삭제 할수 있다.

<객체(참조) 타입의값, 즉 개체는 변경 가능한 값>

원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시값에 접근할 수 있다.

하지만 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조값을 통해 실제 객체에 접근한다.

-> 원시값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하려면 재할당 외에는 방법이 없다.

하지만 객체는 변경 가능한 값이다 .

따라서 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.