2022/08/18 - TIL

19.13 프로퍼티 존재 확인

19.13.1. in 연산자

const obj ={
	key : 'value'
}
console.log(
	'key' in obj, //obj객체에 key 프로퍼티가 존재한다 true
	'key1' in obj //obj객체에 key1 프로퍼티가 존재한다 false
	'toString' in obj //true 
	Reflect.has(obj, 'key') //true. Reflect.has는 in과 같게 동작한다
/*
	toString 같은 경우 obj가 가지고 있지는 않지만
	obj의 프로토타입 체인에 toString 프로퍼티를 가지고 있기 때문이다.
	toString은 Object.prototype 메서드이다
*/
)

19.13.2 Object.prototype.hasOwnProperty 매서드

obj.hasOwnProperty('name') //true
obj.hasOwnProperty('toString') //false -> 상속이 아닌 본인이 가진 프로퍼티여야 한다
//메서드를 이용하여 특정 프로퍼티가 존재하는지 알 수 있다

19.14 프로퍼티 열거

19.14.1 for … in 문

for (변수 선언문 in 객체) {…}

const obj ={
	key : 'value',
	__proto__ : {
		keyinproto : 'valueinproto'
	}
	[symbol] : 1
}
for(const key in obj){
	console.log(key+ ':' obj[key])
}
//key : value
//keyinproto : valueinproto

console.log('toString' in obj);//false
//[[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거하는 것이 for...in

//만일, 상속받은 값들을 제외하고 열거하려면 
//Object.prototype.hasOwnProperty를 if 조건문으로 넣으면 된다

배열에는 for…in문 이 아니라 일반적인 for문이나 for…of 문 혹은 Array.prototype.forEach 메서드를 사용하는 것을 권장한다. 사실 배열도 객체이므로 프로퍼티와 상속받은 프로퍼티가 포함될 수 있기 때문이다

const a = [1,2,3];
arr.x = 10;

for(const i in rar){console.log(arr[i]} //1 2 3 10
for(let i=0;i<arr.length;i++){console.log(arr[i])}//1 2 3
arr.forEach(v=>console.log(v));//1 2 3
for(const value of arr){console.log(value}//1 2 3

19.14.2 Object.keys/values/entries 메서드

for in => 상속된 것 포함
Object.keys(obj) =>본인 프로퍼티
Object.values(obj) =>본인 프로퍼티
Object.entries(obj) =>본인 프로퍼티

20장 strict mode

20.1 strict mode란?

function foo(){x = 10;}
foo();
console.log(x) //10

원래대로라면 ReferenceError를 발생시킬 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 x프로퍼티를 동적 생성하기 때문에, x 프로퍼티는 마치 전역 변수처럼 사용할 수 있다.

이러한 현상을 암묵적 전역 이라 한다. 암묵적 전역은 오류를 발생시킬 확률이 높기 때문에, 키워드 var, let, const를 사용하여 변수 선언한뒤 사용해야한다

이러한 잠재적인 오류를 없애기 위해 ES5부터 strict mode가 추가되었다. ESLint 도구같은 경우 정적 분석 기능을 통해 소스 코드를 스캔하여 오류만이 아니라 잠재적 오류까지 찾아내고 오류의 원인을 리포팅해준다. 린트 도구가 strict mode 오류는 물론이고, 코딩 컨벤션을 정의할 수 있기 때문에 린트 도구가 더 좋아보인다.

ES6이후에 도입된 클래스와 모듈은 strict mode가 기본적으로 작동한다

20.2 strict mode의 적용

function foo(){x = 10}//에러가 없다

function boo(){
	'use strict';
	y=10 //ReferenceError
}

use strict를 코드 선두에 적용시키지 않으면 strict mode가 제대로 동작하지 않는다

20.3 전역에 strict mode를 적용하는 것은 피하자

<div>
<script>
'use strict'
/*
use strict 적용범위
*/
</script>
/*
use strict 적용이 안된다.
*/
<script>

</script>
</div>

use strict는 다른 스크립트에 영향을 주지않고 해당 스크립트에 한정되어 적용된다.

주의할 것은, strict mode와 non-strict mode 스크립트를 혼용하는 것은 오류를 발생시킬 수 있따. 라이브러리가 non-strict mode인데 strict mode가 적용되면 오류가 발생할 수 있다

//즉시 실행 함수의 선두에 strict mode 적용하면 다른 곳에 영향을 미치지 않는다
(function(){
	'use strict';
}())

20.4 함수 단위로 strict mode를 적용하는 것도 피하자

참조할 외부의 컨텍스트에 strict mode를 적용하지 않는다면 문제가 생길 수 잇기 때문에 실행함수로 감싸서 적용하는 것이 바람직하다

(function(){
	var let = 10;
	function foo(){
		'use strict';
	let =20;//SyntaxError	
}
foo();
})

20.5 strict mode가 발생시키는 에러

20.5.1 암묵적 전역

선언하지 않은 변수를 참조하면 ReferenceError가 발생한다.

20.5.2 변수, 함수, 매개변수의 삭제

delete 연산자로, 변수, 함수, 매개변수를 삭제하면 SyntaxError가 발생한다.

20.5.3 매개변수 이름의 중복

중복된 매개변수 이름을 사용하면 SyntaxError가 발생한다

20.5.4 with 문의 사용

with 문은 전달된 객체를 스코프 체인에 추가한다. with문은 동일한 객체의 프로퍼티를 반복해서 사용할 때 객체 이름을 생략해서 사용할 때 객체 이름을 생략할 수 있어서 코드가 간단해지만 성능과 가독성이 나빠지니 사용하지 않는것이좋다

20.6 strict mode 적용에 의한 변화

20.6.1 일반 함수의 this

use strict모드에서 일반 함수의 this는 undefined이다.

일반 함수에서는 생성자함수를 사용하지 않기 때문이다.

20.6.2 arguments 객체

strict mode에서는 매개변수에 전달된 인수를 재할당하여 변경해도 arguments 객체에 반영되지 않는다.

(function(a){
	'use strict';
	a = 2;
	console.log(arguments); //{0:1, length:1}
})(1)

21장 빌트인 객체

21.1 자바스크립트 객체의 분류

• 표준 빌트인 객체

ECMAScript 사양에서 정의된 객체로, 
1. Nodejs, 브라우저 상관없이 사용가능하다.(어플리케이션 전역의 공통기능을 제공한다)
2. 전역 객체의 프로퍼티로서 제공된다
3. 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 잇다

• 호스트 객체

ECMAScrip 사양에는 정의되어있지 않지만,
자바스크립트 실행환경(Nodejs, 브라우저)에서 추가로 제공하는 객체를 말한다

• 사용자 정의 객체

사용자가 직접 정의한 객체를 말한다

21.2 표준 빌트인 객체

Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체이다.

String, Number, Boolean, Function, Array, Date는 생성자 함수로 호출하여 인스턴스를 생성할 수 있다.

const strObj1 = String('Lee')
const strObj2 = new String('Lee')
console.log(typeof strObj1, typeof strObj2)//string, object

21.3 원시값과 래퍼 객체

const str = 'hello'
console.log(str.length, str.toUpperCase()) //5, HELLO

문자열이나 숫자, 불리언은 원시값이 존재하는데도 String,Number,Boolean등 표준 빌트인 생성자 함수가 존재한다.

위에서 str.length를 보면, 원시값은 객체가 아니므로 프로퍼티나 메서드를 가질 수 없는데도 원시값인 문자열이 마치 객체처럼동작한다. 이는 원시값인 문자열, 숫자, 불리언 값으 경우 마치 객체처럼 마침표 표기법으로 접근하면 자바스크립트 엔진이 일시적으로 원시값을 연관된 객체로 변환하기 때문이다.(그리고 다시 되돌린다)

이처럼 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체를 래퍼 객체라한다. 그리고 문자열은 래퍼 객체의 [[ StringData]] 내부 슬롯에 할당되고, 문자열 래퍼 객체인 String 생성자 함수의 인스턴스는 String.prototype의 메서드를 상속받아 사용할 수 있다.

만일 new 연산자와 함께 값을 생성한다면 임시 인스턴스인 래퍼를 만들지 않아도 된다.

임시 래퍼가 있기 때문에, 굳이 new 연산자와 사용할 필요는 없고, Symbol은 생성자 함수가 아니고, null, undefined도 래퍼 객체를 생성하지 않는다.

21.4 전역 객체

전역 객체는 코드가 실행되기 이전에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며, 어떤 객체에도 속하지 않은 최상위 객체다.

전역 객체는 환경에 따라서 다른 이름이 불린다.’

전역객체의 특징

1. 전역 객체는 개발자가 의도적으로 생성할 수 없다. 전역 객체를 생성할 수 있는 생성자 함수가 제공되지 않는다.
2. 전역 객체를 참조할 때는 window, global을 생략할 수 있다.

script 태그가 끊겨도, 하나의 전역 객체를 공유한다

21.4.1 빌트인 전역 프로퍼티

NaN, Isfinity, undefined

21.4.2 빌트인 전역 변수

21.4.2.1 eval

자바스크립트 코드를 나타내는 몬자열을 인수로 받는다.

21.4.2.2 isFinite

21.4.2.3 isNaN

21.4.2.4 parseFloat

21.4.2.5 parseInt

• 21.4.2.6 encodeURI/decodeURIdecodeURI는 eoncodeURI로 바꾼 이스케이프 처리 이전으로 바꾸어 준다.
• encodeURI 함수는 네트워크를 통해 정보를 공유할 때 어떤 시스템에서도 읽을 수 있는 아스키 문자 셋으로 변환하는 것을 말한다.한글어 같은 외국어는 URL에 올 수 없기 때문에 이스케이프 처리가 필요하다.
• 21.4.2.7 encodeComponent / decodeURIComponent
• 인수로 전달받은 문자열을 URI 구성 요소인 쿼리 스트링의 일부로 간주한다

수업시간 내용 메모

---

console.log(generatorFunction.hasOwnProperty(x));//전형적인 객체지향
generatorFunction은 this로 보고, hasOwn는 인자로본다
console.log(Object.hasOwn(generatorFunction, x))//함수 지형

prototype은 상태 표시에 사용된다. 문제는 자바스크립트의 프로퍼티는 퍼블릭이라는 것이다. 이는 클로저를 통해서 숨겨야한다.

생성자 함수는 자료구조를 사용할 때 좋다. 예시 → 링크드리스트 만들기

객체지향의 장점 : 생태를 변경하기 쉽다(접근 제한자가 있을 때) ⇒ 자바스크립트는 접근 제한자가 없기 떄문에 굳이 이다.

클래스로 컴포넌트를 만들다가 function을 사용하게 되었다.

OrdinaryObjectCreate는 리터럴 오브젝트를 만드는 방식이다.

new Function은 클로저도 만들고 함수를 그대로 실행시킬 때 사용한다.

delete는 프로퍼티를 삭제하는 개념이지 프로토타입을 삭제하는 것이 아니다.

Array.prototype.length가 Array.length가 아닌것을 보면 접근자 프로퍼티일 것이다.

연산자 in : key in object ⇒는 상속된 것들도 있나 없나 체크를 한다

enumerable의 default value 는 false이다. in은 enumerable false일때도 나온다.

for in문은 안티 패턴축에 든다. ⇒in은 enumerable true/false 모두 나온다 for in은 enumerable이 true인것만 나온다

Object.keys({a:1, b:2, __proto__:{c:2}})
__proto__를 사용하여, 상속받은 것을 정할 수 있다.

isNaN이나, isFinite가 형변환을 하기 때문에 안쓰는게좋다. 그래서

Number.isNan, Number.isFinite

paarseInt → 진법일떄만 쓰자.

1.toFixed()

(1).toFixed()

1..toFixed()