Javascript

프로퍼티에 속성을 설정하면 사용자가 내장 객체와 유사하게 동작하는 객체를 정의할 수 있다.특히 라이브러리 개발에서 유용하게 사용된다.프로퍼티는 키와 값이 한 쌍을 이룬 것, 그리고 별개로 내부적인 속성을 가지고 있다.ES5기준으로 쓰기가능(writable), 열거 가능

ES6가 많이 사용되며 템플릿 문자열은 많이 쓰고있다. 하지만 태그가 붙어있는 템플릿 리터럴은 거의 사용해보지 않았을 것이다. 단, styled-components를 사용해 봤다면 자기도 모르게 사용해 봤을 것이다.위 코드에서 h1은 태그가 아니라 메서드이다. 보통 태

객체의 확장 가능 속성 (extensible)속성은 객체에 새로운 프로퍼티를 추가할 수 있는지 결정한다.true => 추가 가능. false => 추가 불가능.Object.preventExtensions 메서드를 이용해 객체의 확장을 방지한다. 번복이 불가하다.Obje

믹스인이란 특정 객체에 다른 객체가 가지고 있는 프로퍼티를 붙여 넣어 '뒤섞는' 기법을 말한다.상속을 사용하지 않고 특정 객체의 프로퍼티를 동적으로 다른 객체에 추가한다.mixin 함수의 첫 번째 인수가 타깃 객체이며 두 번째 인수가 프로퍼티를 제공하는 원본 객체이다.

JSON이란 다른 프로그래밍 언어와의 데이터 송수신을 위한 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.이러한 객체 리터럴을 JSON 데이터로 변형하면 아래와 같다.JSON.stringify는 인수로 받은 객체를 JSON 문자열로 바꿔서 반환해 준다.첫 번째

Array Buffer에 대해서 알아 보기 전에 메모리 관리에 대해서 알아 볼 필요가 있다.어떤 머신을 서랍장 머신에 탑재된 메모리를 서랍의 한 칸이라고 생각해보자.이러한 서랍 한 칸(메모리)은 1층, 2층이라는 주소가 부여된다. 이 주소를 이용하여 서랍 칸(메모리)에

이터레이터의 경우 생성하면 기본적으로 next 함수 하나만 있다고 생각하면 된다.next 함수에서는 done과 value 두 항목을 담은 객체를 반환한다.done은 이터레이터가 끝이 났는지 아직 남은게 있는지를 의미한다.value는 이터레이터가 아직 순회 중일 때 값을

Map ES6 이전에는 키와 값을 연결하려면 객체를 이용했다. 하지만 단순 객체를 사용한다면 아래의 단점이 발생한다. 프로토타입 체인으로 의도하지 않은 연결이 발생. 객체 안에 프로퍼티의 수를 쉽게 알아내기 힘들다. 객체는 프로퍼티 순서를 보장하지 않는다. 키는 반드

일단 비동기 방식을 알아보기 전에 동기, 비동기의 차이점을 먼저 살펴보자.Synchronous (동기) 는 현금 인출기를 사용하는 상황과 비슷하다.줄이 길게 서있는 현금 인출기에서 처리하고 있는 내용은 지금 현금 인출기를 사용하고 있는 고객의 계좌에 대한처리일 것이다.

앞에서 살펴본 내용 (자바스크립트 비동기 처리) 마지막 부분에서 콜백 함수들을 순차적으로 계속 사용하면 가독성이 떨어지고 에러 처리가 복잡해지는 콜백 지옥에 대해서 설명했다.이러한 콜백 지옥에서 벗어나기 위해 Promise, async / await에 대해 순서대로 알

ES6 이전에는 키와 값을 연결하려면 객체를 이용했다. 하지만 단순 객체를 사용한다면 아래의 단점이 발생한다.프로토타입 체인으로 의도하지 않은 연결이 발생.객체 안에 프로퍼티의 수를 쉽게 알아내기 힘들다.객체는 프로퍼티 순서를 보장하지 않는다.키는 반드시 문자열 또는

예외란 간단히 말해서 오류이다. 프로그램에서 오류가 발생하면 보통 프로그램은 강제로 종료된다.하지만 예외 처리를 통해서 오류가 발생해도 프로그램을 계속 실행 가능하게 해준다.프로그램을 실행하다보면 예기치 않은 오류가 발생할 수도 있고, 오류는 아니지만 어떠한 처리가 필

search 메서드는 인수로 받은 정규 표현식 객체와 일치한 최초 문자열의 첫 번째 문자 위치를 반환한다. 일치하는 문자열이 없을 경우에 -1을 반환한다.replace 는 첫 번째 인수로 받은 정규 표현식과 일치하는 문자열을 검색, 두 번째 인수로 받은 문자열로 치환한

웹 브라우저에서 사용할 수 있는 호스트 객체에 대해서 알아보자.ECMAScript로 규정된 기본 객체 외에 자바스크립트 실행 환경에 정의된 객체를 호스트 객체라고 한다.웹 브라우저에 구현된 여러 호스트 객체를 이용하여 HTML, CSS 문서를 제어할 수 있고 웹브라우저

Location 객체 Location 객체는 창에 표시되는 문서의 URL을 관리한다. Location 객체의 프로퍼티는 수정이 가능하고 웹 서버에 수정을 요청ㅇ하고 응답에 따라 창을 갱신한다. URL이 어떻게 구성이 되고 Location 객체의 프로퍼티를 다음 그

변수에 접근할 수 있는 범위를 그 변수의 유효 범위 또는 스코프라고 한다.자바스크립트는 프로그램의 구문만으로 유효 범위를 정하는 어휘적 범위 또는 렉시컬 스코프이다.자바스크립트 변수는 유효 범위에 따라 두 가지로 나눠진다.전역 변수함수 바깥에서 선언된 변수로 유효 범위

자바스크립트 엔진은 Executable code를 만나면 코드를 평가해 실행 문맥으로 만든다.실행 가능한 코드는 다음과 같다.전역코드 : 전역 객체 아래에 정의된 함수함수 코드 : 함수eval 코드 : eval 함수실행 문맥은 실행 가능한 코드가 실제로 실행되고 관리되

프로그램 실행과 실행 문맥 실행 문맥은 스택이라는 구조로 관리된다. 스택이란 일종의 자료 구조로 데이터를 아래에서 위로 쌓아 올려 마지막으로 추가한 데이터를 먼저 꺼내는 후입 선출 방식으로 관리된다. 배열의 push, pop 메소드를 생각하면 이해하기 쉽다. 항상 전

코드 스테이츠 이번 스프린트 주제였던 바닐라 자바스크립트로 fake twitter 만들기를 진행하면서 느낀 점은 리액트를 이용해서 app을 만드는게 상당히 편한거였구나 깨달았다. 생각보다 바닐라 자바스크립트로만 구현하기가 까다로웠다. (정확하게는 귀찮은게 많았다..)그

!youtubesgWPNKvibfItodo.js이번에는 todo item 등록, 삭제 그리고 로컬 스토리지에 저장하는 기능을 구현했다.기능을 크게 나눠보면 template 태그를 이용해 element를 생성 및 추가해주는 기능과 추가할 때 생성해 준 각각 아이템의 id

자바스크립트의 컨텍스트 바인딩에 대해서 이야기 해보려고 한다.자바스크립트를 공부하다 보면 항상 this가 무엇일까 고민을 하게 만드는 순간이 있다.그런 고민을 줄여줄 this가 결정되는 5가지 요인들을 알아보자.1\. 기본 바인딩2\. 암시적 바인딩3\. 명시적 바인딩

대부분의 자바스크립트 서적이나 설명을 보면 자바스크립트는 객체 지향 프로그래밍을 지원한다고 설명한다.그렇다면 과연 여기서 말하는 객체 지향 프로그래밍이 무엇일까?객체 지향 프로그래밍 (Object Oriented Programming, OOP) 의 정의를 보자면 다음과

자바스크립트에서 객체를 생성할 때 크게 두 가지 방법을 사용한다. 그때의 상속 방법을 비교해 보자.https://img.hankyung.com/photo/201810/20181007125725_5bb98425a2610_1.jpgES5 기준으로 생성자 함수로 객