JavaScript

오늘부터는 자바스크립트에 대해 공부를 해보도록 하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.정의자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다.자바스크립트로 작성한 프로그램을 스크립트(Script)라고 부른다.스크립트는 웹페이지의

오늘은 자바스크립트의 매뉴얼과 명세서에 대해서 알아보도록 하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.ECMA-262 명세서(specification)는 자바스크립트와 관련된 가장 심도 있고 상세한 정보를 담고 있는 공식 문서다. 이 명세서에서 자바스크립트라는

오늘은 코드 에디터(code editor)에 대에서 알아보겠습니다.마찬가지로 모던 자바스크립트 튜토리얼을 참고하였습니다.개발자는 코드 에디터와 가장 많은 시간을 보낸다.코드 에디터는 크게 통합 개발 환경(IDE)와 경량 에디터로 나뉘는데, 많은 개발자가 둘 중 하나를

오늘은 개발자 콘솔에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.그런데 브라우저는 스크립트에 문제가 있어서 에러가 발생해도 이를 사용자에게 직접 보여주지 않는다. 에러가 발생했는지조차 모르면 에러를 고칠 수 없을 것이다.브라우저엔 개발자 도구 라는

오늘은 자바스크립트의 기본 중에 기본을 공부해보겠습니다.모던 스크립트 튜토리얼을 참고하였습니다.코어 자바스크립트를 다루고 있긴 하지만, 학습을 위해선 스크립트를 실행할 수 있는 환경이 필요하다. 본 튜토리얼은 온라인으로 제공되기 때문에 실행환경으로 브라우저를 사용한다.

오늘은 자바스크립트의 엄격모드에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 있다.이런 상

오늘은 자바스크립트의 변수와 상수에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.온라인 쇼핑몰 - 판매 중인 상품이나 장바구니 등의 정보채팅 어플리케이션 - 사용자 정보, 메시지 등의 정보변수는 이러한 정보를 저장하는 용도로 사용된다.자바스크립트에선

오늘은 자바스크립트의 자료형에 대해 공부를 하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.자바스크립트에는 여덟 가지 기본 자료형이 있다.자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자

오늘은 자바스크립트의 형 변환에 대해 공부해보겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.alert가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것이나, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시

오늘은 자바스크립트의 기본 연산자와 수학에 대해 공부하겠습니다. 모던 자바스크립트 튜토리얼을 참고하였습니다. 덧셈 +, 곱셈 *, 뺄셈 -과 같은 연산은 학교에서 배워서 이미 알고 있을 것이다. 이런 기본 연산자를 시작으로 학교에선 다루지 않았던 자바스크립트에서만 제공

오늘은 자바스크립트의 비교 연산자에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.이번엔 비교 시 일어나는 기이한 현상을 포함하여 다양한 자료형을 대상으로 자바스크립트가 어떻게 비교를 하는지를 보자.자바스크립트에서만 일어나는 '기이한 현상'을 어떻게 예

오늘은 자바스크립트의 if와 '?'를 사용한 조건 처리에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.위 예시에선 조건(year == 2015)이 간단한 경우만 다뤘는데, 조건문은 더 복잡할 수도 있다.조건이 true 일 때 복수의 문을 실행하고 싶다

오늘은 자바스크립트의 nullish 병합 연산자 '??'에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어

오늘은 자바스크립트의 while과 for 반복문에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.개발을 하다 보면 여러 동작을 반복해야 하는 경우가 종종 생긴다.상품 목록에서 상품을 차례대로 출력하거나 숫자를 1부터 10까지 하나씩 증가시키면서 동일한

오늘은 자바스크립트의 switch문에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.복수의 if 조건문 switch문으로 바꿀 수 있다.switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. 코드 자체가 비교 상황을 잘 설

오늘은 자바스크립트의 함수에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.사용자가 로그인이나 로그아웃을 했을 때 안내 메세지를 보여주는 동작 같은 경우 말이다.함수는 프로그램을 구성하는 주요 '구성 요소(building block)'이다. 함수를 이용

오늘은 자바스크립트의 함수 표현식에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.이전 시간에 함수 선언(Function Declaration), 함수 선언문 방식으로 함수를 만들었다.함수 선언 방식 외에 함수 표현식(Function Expression

바로 화살표 함수(arrow function)를 사용하는 것이다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다.이렇게 코드를 작성하면 인자 arg1..argN를 받는 함수 func이 만들어진다. 함수 func는 화살표(=>) 우측의 표현식(expression

오늘은 자바스크립트의 기본 챕터를 복습해보도록 하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.줄 바꿈도 여러 개의 구문을 구분하는 데 사용되므로 아래 코드는 정상적으로 동작한다.이런 동작 방식을 '세미콜론 자동 삽입(automatic semicolon inser

오늘은 자바스크립트의 Chrome으로 디버깅 하는 법을 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미한다. 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로

오늘은 자바스크립트의 코딩 스타일에 대해 알아보겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.개발자는 가능한 한 간결하고 읽기 쉽게 코드를 작성해야한다.복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술이다. 좋은 코

오늘은 자바스크립트의 주석에 대해 좀 더 알아보겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.그러나 좋은 코드엔 '설명이 담긴(explanatory)' 주석이 많아선 안된다. 주석 없이 코드 자체만으로 코드가 무슨 일을 하는지 쉽게 이해할 수 있어야한다.이와 관련

오늘은 자바스크립트의 객체에 대해 공부하도록 하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.자료형 챕터에서 배웠듯이 자바스크립트엔 여덟가지 자료형이 있다. 이중 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type

오늘은 자바스크립트의 객체 부분의 참조에 의한 객체 복사에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다는 것이다.원시값(문자열, 숫자, 불린

오늘은 자바스크립트 객체의 가비지 컬렉션에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다.원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지한다. 그렇다면 더는 쓸모 없어지게 된

오늘은 자바스크립트 객체의 메서드와 this에 대해 공부하겠습니다.모던 자바스크립트 튜토리얼을 참고하였습니다.객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다.사용자는 현실에서 장바구니에서 물건 선택하

오늘은 모던 자바스크립트 튜토리얼 객체의 new 연산자와 생성자 함수에 대해 공부하겠습니다.객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다. 복수의 사용자, 메뉴 내 다양한 아

오늘은 모던 자바스크립트 튜토리얼의 객체, 옵셔널 체이닝 '?.'에 대해 공부하겠습니다.옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.사용자가 여러 명 있는데 그중 몇 명은 주소 정보를

오늘은 모던 자바스크립트 튜토리얼 객체의 심볼형에 대해 공부하겠습니다.자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용한다. 숫자형, 불린형 모두 불가능하고 오직 문자형과 심볼형만 가능하다.지금까지는 프로퍼티 키가 문자형인 경우만 살펴보았다. 이번엔 프로

오늘은 모던 자바스크립트 튜토리얼 객체의 객체를 원시형으로 변환하기에 대해 공부하겠습니다.obj1 + obj2 처럼 객체끼리 더하는 연산을 하거나, obj1 - obj2 처럼 빼는 연산을 하면 어떤 일이 일어날까? alert(obj)로 출력하면 무슨 일이 발생할까?이

오늘은 모던 자바스크립트 튜토리얼 자료구조와 자료형의 원시값의 메서드에 대해 공부하겠습니다.자바스크립트는 원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 해준다. 원시값에도 객체에서처럼 메서드를 호출할 수 있다. 원시값과 객체는 다음과 같은 차이점이 있다.원시

오늘은 모던 자바스크립트 튜토리얼, 자료구조와 자료형의 숫자형에 대해 공부하겠습니다.모던 자바스크립트는 숫자를 나타내는 두 가지 자료형을 지원한다.일반적인 숫자는 '배정밀도 부동소수점 숫자(double precision floating point number)'로 알려

오늘은 모던 자바스크립트 튜토리얼, 자료구조와 자료형의 문자열에 대해 공부하겠습니다. 자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없어서 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다. 문자열은 페이지 인코딩 방식과 상관없이 항상 'U

오늘은 자바스크립트의 자료구조와 자료형 파트의 배열에 대해 공부하겠습니다. 배열 키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장하는데, 객체만으로도 다양한 작업을 할 수 있다. 그런데 개발을 진행하다 보면 첫 번째 요소, 두 번째 요

자바스크립트 자료구조와 자료형 파트 중 배열과 메서드에 대해 공부하겠습니다. 배열과 메서드 배열은 다양한 메서드를 제공한다. 요소 추가·제거 메서드 배열의 맨 앞이나 끝에 요소(item)를 추가하거나 제거하는 메서드는 이미 학습한 적이있다. arr.push(...i

자바스크립트 자료구조와 자료형의 iterable 객체에 대해 알아보겠습니다.배열은 대표적인 이터러블이다. 배열 외에도 다수의 내장 객체가 반복 가능하다. 문자열 역시 이터러블의 예이다.배열이 아닌 객체가 있는데, 이 객체가 어떤 것들의 컬렉션(목록, 집합 등)을 나타내

자바스크립트 자료구조와 자료형 파트의 맵과 셋에 대해 공부하겠습니다.하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족하여 맵(Map)과 셋(Set)이 등장하게 되었다.맵에는 다음과 같은 주요 메서드와 프로퍼티가 있다.맵은 객체와 달리 키를 문자형으로 변환하지

자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 대대 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않는다. 객체의 프로퍼티나 배열의 요소, 맵이나 셋을 구성하는 요소들이 이에 해당한다.예를 들어보자. 배열에 객체 하나를 추가해보자. 이때 배

이전에 순회에 필요한 메서드 map.keys(), map.values(), map.entries()에 대해 알아보았다.이 메서드들은 포괄적인 용도로 만들어졌기 때문에 메서드를 적용할 자료구조는 일련의 합의를 준수해야한다. 커스텀 자료구조를 대상으로 순회를 해야 한다면

키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다.개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤한다.가끔은 객체나 배열에 저장된 데이터 전제가 아닌 일부만 필요한 경우가 생기기도

Date 객체와 날짜 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체 Date에 대해 알아보자. Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로 활용할 수 있다. 객체 생성하기

JSON과 메서드 복잡한 객체를 다루고 있다고 가정해보자. 네트워크를 통해 객체 어딘가에 보내거나 로깅 목적으로 객체를 출력해야 한다면 객체를 문자열로 전환해야 한다. 이때 전환된 문자열엔 원하는 정보가 있는 객체 프로퍼티 모두가 포함되어야만 한다. 아래와 같은 메

문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 "재귀"라고 부른다.구현하는 방법은 두 가지가 있다.1\. 반복적인 사고를 통한 방법 : for 루프재귀적인 사고를 통한 방법 : 작업을 단순화하고

이번엔 이렇게 임의의(정해지지 않은) 수의 인수를 받는 방법에 대해 알아보자. 또한 함수의 매개 변수에 배열을 전달하는 방법에 대해서도 알아보자.함수를 정의할 땐 인수를 두 개만 받도록 하고, 실제 함수를 호출할 땐 이보다 더 많은 '여분의' 인수를 전달했지만, 에러가

변수의 유요범위와 클로저 자바스크립트는 함수 지향 언어이다. 이런 특징은 개발자에게 많은 자유를 준다. 함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수에 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출 할 수도 있기 때문이다. 함수 내부에서

전역 객체는 언어 자체나 호스트 환경에 기본 내장되어 있는 경우가 많다.브라우저 환경에선 전역 객체를 window, Node.js 환경에선 global 이라고 부르는데, 각 호스트 환경마다 부르는 이름은 다르다.전역 객체의 이름을 globalThis로 표준화하자는 내용

모든 값은 자료형을 가지고 있는데, 그렇다면 함수의 자료형은 무엇일까함수는 객체이다.함수는 호출이 가능한(callable) "행동 객체"라고 이해하면 쉽다.우리는 함수를 호출 할 수 있을 뿐만 아니라 객체처럼 함수에 프로퍼티를 추가-제거하거나 참조를 통해 전달할 수도

새로 만들어지는 함수는 인수 arg1...argN과 함수 본문 functionBody로 구성된다.인수 두 개가 있는 함수를 직접 만들어 보면서 new Function 문법에 대해 이해해보자.인수가 없고 함수 본문만 있는 함수를 만들어보자.기존에 사용하던 방법과 new

호출 스케줄링을 구현하는 방법은 두 가지가 있다.자바스크립트 명세서엔 setTimeout과 setInterval가 명시되어있지않다. 하지만 시중에 나와 있는 모든 브라우저, Node.js를 포함한 자바스크립트 호스트 환경 대부분이 이와 유사한 메서드와 내부 스케줄러를