Javascript

일반적으로 메모리 공간에 저장된 값을 식별할 수 있는 각각의 고유한 이름을 변수(variable) 라고 부릅니다. 그리고 이 변수에 저장된 실제하는 값을 변수 값(value) 이라고 부르며, 변수가 소지하고 있는 변수의 값 자체나 그 주소를 읽어오는 작업을 참조(ref

자바스크립트는 ES6(ECMAScript 2015) 이후로 총 일곱가지 타입이 존재하며, 큰 틀에서 '원시타입' 과 '객체 타입'으로 나뉘어집니다. 그 중 원시 타입과 객체 타입의 결정적 차이는 '불변성' 에서 크게 보이는데, 이 장에서는 원시 타입이 무엇인지, 그 종

객체란 자바스크립트를 구성하는 거의 모든 것을 의미하며, 리액트의 컴포넌트와 비슷한 의미를 가지기도 합니다. 이러한 객체의 구성은 크게 프로퍼티와 메서드로 구성되는데, 프로퍼티는 키(빈 문자열을 포함하는 모든 문자열 또는 심볼 값)와 값(자바스크립트에서 사용할 수 있는

객체 생성시 키(속성)과 값(value)이 둘을 쌍으로 이루는 말을 프로퍼티라고 정리할 수 있는데요. 이러한 프로퍼티의 유무를 확인하는 방법 또한 존재합니다. 대표적으로 in 연산자, property.hasOwnProperty, Reflext.has 등의 방법이 존재합

1. 불변성과 가변성 > 자바스크립트의 경우, 원시 타입의 경우 한 번 생성된 값은 변경되지 않습니다. 즉 메모리에 한 번 저장된 기존의 값은 변수의 값이 변경 될 때 삭제 되거나 변경 되는 것이 아니며, 다른 메모리 공간에 변경 되는 값이 새로 저장된 후 그 메모리

1. 타입 변환의 개념 타입 변환이란 하나 이상의 값의 타입이 명시적, 혹은 암묵적으로 형 변환 되는 전체 개념을 아우르며, 방금 말씀드린대로 자바스크립트에서의 형변환은 명시적 타입 변환(explicit coercion)과 암묵적 타입 변환(implicit coerc

연산자는 하나 이상의 피연산자를 대상으로 각종 연산을 수행하여 값을 반환하는 주체를 의미합니다. 연산자의 종류는 기본적으로 사칙 연산을 제외하고도 대입, 할당, 비교 연산자 등이 존재하며 연산자들 마다 처리되는 과정에서 기존의 값이 변화하는 '부수 효과(side eff

1. 제어문이란? > 제어문은 전체 프로그램의 일부의 실행을 제어하는 등, 전체적인 코드의 실행 흐름을 제어하는데 사용됩니다. > >이러한 제어문은 주로 코드 블록 내({})에서 특정 명령 및 작업이 수행되도록 코드를 작성하게 되며 크게 반복문, 조건문, 함수 선언문

앞서 제어문 총정리 1에서 조건문을 살펴보았습니다. 이번 장에서는 조건문과 함께 제어문을 대표하는 반복문에 대해서 살펴보겠습니다.반복문은 한마디로 "사용자가 지정한 일정 범위만큼 코드 블록을 실행하거나 특정 조건에서만 무한으로 코드를 실행하도록 하는 제어문" 이라고 할

스코프는 자바스크립트 뿐만 아니라 모든 프로그래밍 언어의 기본적인 주요 개념중 하나입니다. 이러한 스코프의 개념을 간단히 정의한다면, '변수나 함수의 유효 범위'를 의미하며, 이러한 개념을 변수에 적용해 본다면 대표적으로 전역 변수(Local Variables)와 지역

객체에서 잠깐 언급했지만, 객체 안에서 생성 되는 키와 값 한 쌍을 우리는 프로퍼티라고 정의합니다. 그리고 이러한 프로퍼티에도 두 종류가 있는데, 우리가 기본적으로 객체에서 생성해내는 프로퍼티들은 데이터 프로퍼티(data property)라고 부르고,이러한 데이터 프로

접근자 프로퍼티는 앞서 소개한 데이터 프로퍼티와 같이 프로퍼티의 종류로서 자체적으로 값을 가지고 있지 않지만 다른 데이터 프로퍼티의 값을 읽거나(get) 재설정(set)할 때 사용하는 접근자 함수로 구성된 프로퍼티 입니다. 접근자 프로퍼티는 다음과 같은 프로퍼티 어트리

앞서 살펴본 Object 빌트인 객체의 메서드를 이용해 프로퍼티 상태(attribute)를 제어하는 것이 가능했습니다. 이러한 메서드들의 역할은 사용자에 의해 객체의 프로퍼티들이 변경 됨으로, 자칫 해쳐질 수도 있는 해당 프로퍼티들의 무결성과 보안성을 예방하고자 하는

수학에서의 함수는 입력(input)을 받아 출력(output)을 내보내는 일련의 과정을 의미합니다. 그리고 자바스크립트에서의 함수란 이러한 수학에서의 함수처럼 일련의 과정을 거쳐 결과값을 반환하거나, 반환 없이 특정 코드를 실행하는 과정이라고 정의 할 수 있습니다.이러

앞서 소개해 드린 장에서는 함수의 기본 구성 및 정의 종류들에 대해서 알아봤는데요. 이러한 함수들은 그 정의에 대한 종류들 뿐만 아니라 함수 자체의 쓰임새에 따라 좀 더 다양하고 독특한 구성을 가진 함수들 또한 존재합니다. 이번 장에서는 독특한 특징들로 구성된 함수들에

앞서 함수 섹션들에서도 살펴본 바와 같이 객체를 생성 함에 있어서 객체 리터럴 및 함수 리터럴을 사용하여 객체를 생성하는 방법도 있었는데요. 단순히 객체 리터럴을 이용해 객체를 생성하는 방식은 직관적이고 간편하다는 장점을 가지고 있으나 여러 객체 간의 공통된 프로퍼티가

1. 키워드의 정의 > 키워드(Keyword)란 프로그래밍 언어에서 특정한 의미나 기능을 가진 단어로서, 언어의 문법에서 특별한 역할을 수행하도록 사전에 정의된 예약어입니다. > > 특히 자바스크립트에서의 키워드는 ECMA International(ECMAScript

1. 일급 객체란? > 일급 객체는 다음의 조건을 만족하며, 객체와 동일하게 취급 되어 값이 사용될 수 있는 곳에 사용 되는 함수를 의미합니다. > > 이러한 일급 객체가 일반 객체간의 비교에서 차이를 보일 수 있는 결정적 차이점이라고 한다면 일반 객체는 호출을 할

자바스크립트는 클래스 기반의 객체지향 프로그래밍 언어보다 효율적이며, 더 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향 프로그래밍 입니다. 이는 원시 타입을 제외한 나머지 값들이 객체인 것을 보면 더욱 명확히 알 수 있는데요. 이를 좀더 알기

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 객체에 접근하려는 프로퍼티가 없을 경우, \[Prototype] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는데 이를 프로토타입 체인이라고 하며 이는 자바스크립트의 객체지향

프로토타입을 교체하는 것이 가능할까요? 가능합니다. 하지만 그럴 경우 기존의 생성자 함수의 프로토타입 객체가 가지고 있던 constructor 프로퍼티는 사라지게 되므로 이때 생성자 함수에 의해 생성된 인스턴스가 상속받는 프로토타입 객체는 생성자 함수의 프로토타입 객체

1. 빌트인 객체란? > 빌트인 객체는 ECMAScript(자바스크립트의 표준화된 버전을 정의하는 스크립트 언어의 규격) 사양에 정의된 객체를 뜻하는데,해당 애플리케이션 전역(실행 환경)에 공통 기능을 제공하므로 자바스크립트 실행 환경(Node든 웹이든)과 관계없이

자바스크립트에서 코드가 실행 되기 전 단계(런타임 이전)에서 JS 엔진에 의해 의해 어떤 객체보다도 먼저 생성되는 객체를 전역 객체라고 하는데요. 계층적 구조상 어떠한 객체에도 속하지 않는 최상위 객체를 의미하며, 앞서 살펴본 표준 빌트인 객체 또한 전역 객체 중 하나

1. 실행 컨텍스트란? > 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 이 원리를 이해하면, 스코프를 기반으로하는 자바스크립트의 식별자 및 식별자에 바인딩 되는 값을 관리하는 방법, 호이스팅의 발생 이유등 전반적인 자바스크립트의 동작 원리를

1. 클로저? > 1-1 클로저란? 클로저는 ECMAScript 사양에 등장하지 않으며, 고유의 개념도 아닙니다. 그러나 MDN에서는 클로저에 대해 "함수와 그 함수가 선언된 렉시컬 환경과의 조합" 이라고 설명하고 있습니다. 즉 앞서 살펴본 실행 컨텍스트에서 해당 함

렉시컬 환경은 실행 컨택스트에서 키와 값을 갖는 객체 형태의 각각의 스코프를 생성하여 식별자를 키로 등록(환경 레코드)하고, 식별자에 바인딩 된 값을 관리하며 상위 스코프에 대한 참조를 스코프 체인으로 기록(외부 렉시컬 환경 참조)하는 자료구조로서 실행 컨텍스트 스택과

1. 실행 컨텍스트 스택(Excution Context Stack)이란? > 실행 컨텍스트 스택이란 실행 컨텍스트에서 소스코드의 타입을 분류할 때 각각의 코드를 평가 후 해당하는 실행 컨텍스트를 생성하여 흐름에 따라 실행 컨텍스트 스택에 각각의 컨텍스트들을 추가(pus

고급프로그래밍 언어라면 동일한 타입의 연속된 데이터의 집합인 배열 개념은 당연히 가지고 있을 겁니다. 자바나 C++ 에서도 말이죠. 하지만 자바스크립트에서의 배열은 동일하지 않은 타입의 연속된 데이터의 집합 개념으로서 단순히 문자열(String), 숫자(Number),

자바스크립트에서는 배열의 메서드를 사용할 때 기존의 배열을 변경하는 메서드와, 변경을 하지 않고 새로운 배열로 반환하는 메서드로 구분됩니다. 간략하게만 정리하자면 다음과 같은데요.기존의 배열 변경 메서드push(): 배열 끝에 요소를 추가합니다.pop(): 배열 끝의

1. 원본 복사하여 코드를 처리하는 배열 메서드 > 앞서 소개한 대로 자바스크립트의 배열 메서드는 크게 원본을 변경하는 메서드와, 원본을 복사한 카피본에 코드문을 처리하여 그 카피본을 반환하는 배열 메서드로 나뉘는데요. > 이번 시간에는 원본을 변경하지 않는 메서드들에

Math 빌트인 객체는 함수 섹션 에서도 소개해 드렸듯이 생성자 함수가 아닙니다. 그래서 해당 빌트인 객체의 프로퍼티와 메서드를 사용하고자 할때에는 정적인 형태로서만, 즉 빌트인 객체를 직접 호출하여 작성하는 방법으로 사용되는데요.이러한 Math 빌트인 객체의 자바스크

해당 빌트인 객체는 주로 매개변수를 String 타입으로 변환하는 용도로 사용되는데요. 이때 Number 빌트인 생성자 함수와는 달리 원본 그대로의 매개변수를 문자열로 변환합니다.인스턴스를 생성하지 못하는 몇몇의 객체들을 제외하면 자바스크립트에서의 빌트인 객체들은 대부

ES6부터 이터러이션 프로토콜 사양이 확립되어 반복적으로 순회 가능한 개체들을 확립했는데요. 이들의 특징은 다음과 같습니다.Symbol.iterator 메서드: 이터러블 객체들은 각각의 고유한 심볼 Symbol.iterator 메서드를 구현하여 next메서드가 포함된

구조 분해 할당은 쉽게 얘기해서 ES6에 추가된, 자바스크립트의 묶음 데이터를 추출한 후 특정 변수들에 한 번에 할당하는 방법을 의미하며, 이러한 방법을 이용하면 배열 및 객체의 데이터를 손 쉽게 부분 및 전체 추출하여 할당할 수 있습니다.배열은 이터러블 이기도 한데요

Math 빌트인 객체는 자바에서의 Date와 유사점이 많은데요.다만 자바처럼 여러 Date 내장 객체가 있는건 아니기에 JS에서의 날짜 내장 객체는 Date가 대표적이라는 점만 알아두시면 될 듯 합니다. (물론 JS를 위한 여러 커스텀 라이브러리들 또한 존재합니다.)아

동기(synchronous)와 비동기(asynchronous)를 간단히 말씀드려보자면, 일차선 고속도로와 다차선 고속도로에 비유할 수 있는데요.좀 더 자세히 말하자면 1차선 고속도로는 앞차의 속도에 따라 뒷차의 목적길 도착 시간도 그만큼 느려질수도 있고, 빨라질수도 있

JS에서도 자바와 마찬가지로 클래스가 존재하는데요. 다만 객체를 생성하는 경우는 거의 생성자 함수로 처리를 하다보니 잘 사용하지 않습니다만, 그래도 JS 또한 엄연히 클래스를 가지고 있답니다. 물론 양식도 자바의 클래스와 선언이나 사용법도 타입 선언을 제외한 나머지는

콜백 지옥이란, 비동기 프로그래밍에서 각 스레드의 순서를 지키기 위해 각 콜백 함수를 중첩해서 호출할 경우에 발생 되는 가독성 저해 문제인데요.다음의 코드는 setTimeout 메서드와 콜백 함수를 각각 하나씩 보관하고 있는 세 개의 작업 메서드를 중첩해서 차례대로 실

BOM (Browser Object Model)과 DOM (Document Object Model)은 자바스크립트와 웹 브라우저 환경에서 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 요소로서 활용되는데요. BOM은 브라우저 창이나 프레임을 나타내는 객체와 관련된

1. DOM이란? DOM (Document Object Model)은 자바스크립트와 웹 브라우저 환경에서 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 요소로서 활용되는데요. 자바스크립트의 꽃은 DOM이라는 말이 있을 정도로 DOM은 JS에서 굉장히 중요한 요소이

만약 다음과 같이 사용자에게서 ID를 받아오는 입력창과 버튼이 있다고 생각해 봅시다.위 양식에서 사용자로부터 아이디를 입력받을텐데요. 이때 사용자에게 입력 받을 아이디에 대해서 제약 사항을 정해본다면 다음과 같이 지정할 수 있을 것 같습니다.아이디는 무조건 이메일 형식

앞전에 배운 비동기 함수를 Promise 객체로 선언한 코드가 있다고 쳐보겠습니다.이때 반환 받은 Promise의 상태가 정상 상태(resolve)일 경우에 대한 코드로는 다음과 같이 then-catch를 이용해 작성할 수 있는데요.JS에서는 이러한 비동기 함수인 Pr

fetch 메서드는 앞서 살펴본 비동기 함수들을 이용해 서버와 비동기로 데이터를 주고 받도록 도와주는 브라우저 지원 API로, window 전역 객체의 프로퍼티로서 여러 데이터 형식을 지원하나, 주로 JSON(JavaScript Object Notation) 데이터 통

jQuery란 자바스크립트 라이브러리 중 하나로, HTML 문서를 탐색하고 조작하기 쉬운 API를 제공하여 웹 개발을 단순화 하는데 사용되는 라이브러리인데요. 제이쿼리를 이용하면 HTML 문서의 탐색 및 조작, 이벤트 처리, 애니메이션, Ajax와 같은 기능을 쉽게 사