WHAT I LEARNED 114

모던 자바스크립트 32. String

표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공한다.또한 생성자 함수 객체이다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. length 프로퍼티length 프로퍼티는 문자열의 문자 개수를 반환한다.앞에서 배웠듯 string 래퍼 객체는 유사 배열 객체이므로, 인덱스를 나타내는 숫자를 프로퍼티 키로, 각 문자를 프로퍼티 값으로 갖는다.  String 메소드배열에는 원본 배열을 직접 변경하는 메소드와 새로운 배열을 생성하여 반환하는 메소드가 있다.하지만 String 객체에는 유사배열객체일지라도 원본 String 래퍼 객체를 직접 변경하는 메소드는 존재하지 않고,늘 새로운 문자열을 반환한다. 문자열은 변경 불가능한 원시 값이므..

모던 자바스크립트 30. Date

표준 빌트인 객체인 Date는 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체이며 생성자 함수이다.'현재 날짜와 시간'이라 함은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다.따라서 한국은 KST(한국표준시, UTC+9시간)으로 표시된다. 1. Date 생성자 함수Date는 생성자 함수이다.생성자 함수 Date로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다.이 정수값은 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초이며, 이를 타임스탬프라고 한다. 즉, 생성자 함수 Date로 생성한 Date 객체는 내부적으로 타임스탬프를 반환한다고 할 수 있다. 1) new Date()Date 생성자 함수를 인수 없이 ..

모던 자바스크립트 26. ES6 함수의 추가 기능

ES6 이전의 함수는 일반 함수로도 호출할 수 있고, 생성자 함수로서 호출할 수도 있고, 메소드로 호출할 수도 있었다.다시 말해 ES6 이전의 모든 함수는 callable이면서 constructor이다. 즉, 사용 목적을 구분하지 않고 사용되었다.하지만 이는 실수를 유발할 수 있고 성능면에서도 손해이다. 따라서 ES6부터는 함수를 사용 목적에 따라 1.일반함수 2.메소드 3.화살표함수 세 가지 종류로 구분하기 시작했다.일반 함수는 함수 선언문이나 함수 표현식으로 정의한 함수를 말하며, 이는 ES6 이전과 차이가 없다.하지만 메소드와 화살표 함수는 ES6 이전과 명확한 차이가 있어서 비교하여 살펴 볼 필요가 있다.ES6 함수의 구분constructorprototypesuperarguments일반 함수OOX..

모던 자바스크립트 24. 클로저

MDN에서는 클로저를 “함수와 그 함수가 선언된 렉시컬 환경과의 조합”이라고 정의하고 있다. “함수가 선언된 렉시컬 환경”이 클로저를 이해하기 위한 핵심 키워드이므로 먼저 알아봐야한다. 렉시컬 스코프자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다.실행 컨텍스트 파트에서 공부했듯 ‘스코프’란 실행 컨텍스트의 렉시컬 환경이다.이 렉시컬 환경은 자신의 “외부 렉시컬 환경에 대한 참조”를 통해 상위 렉시컬 환경과 연결된다.이 원리로 이루어지는 것이 바로 스코프 체인인 것. 따라서 함수의 상위 스코프를 결정한다는 것은 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다는 것과 같다.렉시컬 환경의 외부 렉시컬 환경에 대한 참..

모던 자바스크립트 22. this

면접 대비 질문 리스트를 뽑을 때마다 꼬옥 나오는 this.. 봐도봐도 모르겠던 this를 이번 기회에 아주 조져보겠다.01. this란const circle = { radius: 5, getDiameter() { return 2 * circle.radius; }};console.log(circle.getDiameter()); // 10 (ⓐ) getDiameter 메소드 내에서는 메소드 자신이 속해있는 객체 circle을 참조하고 있다.getDiameter 메소드가 호출되는 시점(ⓐ)에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 circle이라는 식별자에 생성된 객체가 할당된 이후이다. 따라서 getDiameter 메소드 내부에서 circle 식별자를 참조할 수는 있..

모던 자바스크립트 16. 프로퍼티 어트리뷰트

1. 프로퍼티 어트리뷰트란??프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)와 같은 프로퍼티의 상태. 자바스크립트 엔진은 프로퍼티를 생성할 때 이 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 1) Object.getOwnPropertyDescriptor인수로 참조와 프로퍼티 키 값을 넘겨주면 해당 프로퍼티(1개)의 프로퍼티 어트리뷰트를 프로퍼티 디스크립터 객체로 반환한다.트프로퍼티 어트리뷰트에 직접 접근할 순 없지만, Object.getOwnPropertyDescriptor메소드를 통해 간접적으로 접근이 가능하다.  단, ES8부터 도입된 Object.getOwnPropertyDescriptors ..

모던 자바스크립트 14. 전역 변수의 문제점

1. 전역 변수의 문제점1) 암묵적 결합전역 변수를 선언하는 것은 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 의미와 동일하다.이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다.이렇게 변수의 유효범위가 크면 클수록 코드의 가독성이 나빠지고 의도하지 않은 변경이 일어날 위험이 증가한다. 2) 긴 생명주기전역 변수의 생명주기는 애플리케이션의 생명 주기와 동일하다.즉, 코드가 로드 되자마자 곧바로 해석되고 실행되며 더 이상 실행할 코드문이 없을 때 종료한다.  전역 변수는 생명 주기가 애플리케이션의 생명 주기와 동일한 만큼 메모리 리소스도 오랜 기간 소비한다.그만큼 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많아지는 것이다. 3) 스코프 체인 상 ..

모던 자바스크립트 13. 스코프

1. 스코프란?모든 식별자(변수명, 함수명, 클래스명 등)의 유효범위 즉, 다른 코드가 식별자 자신을 참조할 수 있는 유효범위.모든 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위가 결정된다.let x = '반원재'; // ⓐfunction foo() { let x = '이규리'; // ⓑ console.log(x);}foo(); // 이규리console.log(x); // 반원재위의 코드처럼 동일한 변수가 다른 곳에서 선언되었을 경우, foo() 안의 x와 console.log(x)에서의 x가 무엇을 참조할 지는 자바스크립트 엔진이 결정하게 되는데, 이를 식별자 결정이라고 한다. 위의 코드는 코드의 가장 바깥 영역에서 선언된 x변수(ⓐ)는 어디서든 참조할 수 있다.(전역 스코프)하지만..

모던 자바스크립트 11. 원시 값과 객체의 비교

1. 원시 타입 - 변경 불가능한 값(읽기 전용[readOnly]) let str = 'string'; str[0] = 'S'; // 문자열은 원시값이라서 변경할 수 없다. 에러도 발생하지 않는다. console.log(str); // string - 원시 타입 값을 변수에 할당하면 실제 값이 저장된다. - 원시 값을 갖는 변수를 다른 변수에 할당하면 원시값이 복사되어 전달된다(값에 의한 전달) - '재할당'을 제외하곤 변수 값을 변경할 수 있는 방법 X = 예기치 못한 변경이 일어나지 않는다 = 데이터 신뢰성을 보장한다 cf. 재할당은 기존 문자열을 변경하는 것이 아니라 새로운 문자열을 새롭게 할당하는 것이기 때문. let str = 'hello'; // 식별자(변수) str은 문자열 'hello'가 ..