모던 자바스크립트

정의 > 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어. 메모리나 CPU같은 저수준 영역의 조작을 허용하지 않는 안전한 프로그래밍 언어. 스크립트(Script) : 자바스크립트로 작성한 프로그램. 웹페이지의 HTML 안에 작성할 수 있으며, 웹페이지를

자바스크립트와 관련된 가장 심도 있고 상세한 정보를 담고 있는 공식 문서. 이 명세서에서 자바스크립트라는 언어 정의처음 접하면 ECMA-262 고유한 형식 때문에 이해하기 어렵다. 가장 신뢰할 만한 자료이지만 일상적인 참고자료로는 적합하지 않은 자료...🤦🏻‍♀️E

크게 두 가지로 나뉜다.통합 개발 환경(IDE)경량 에디터 보통 '프로젝트 전체'를 관장하는 다양한 기능을 제공하는 강력한 에디터. 개발 환경을 쾌적하게 해주는 통합 환경을 제공한다.IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고, 파일 간의 탐색 작업이 수

브라우저에서 스크립트에 문제가 있어 에러가 발생할 때 에러를 확인할 수 있도록 지원해주는 도구대부분의 개발자는 Chrome이나 Firefox를 이용해 개발하는 걸 선호한다. 이 두 브라우저에서 제공하는 개발자 도구가 제법 훌륭하기 때문이다.그럼 브라우저 종류별 개발자

'script' 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.예시) 실행시키면 다음과 같은 결과가 나온다.'script' 태그에는 몇 가지 속성이 있다. 요즘엔 잘 사용하지 않지만, 오래된 코드에서는 종종 발견된다. 다음 두 속

💡 코드 블록 만드는 방법에 대해 알아보자.어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)✔ 코드에는 원하는 만큼 문을 작성할 수 있다. 이때, 서로 다른 문은 세미콜론(;)으로 구분한다.✔ 가독성을 위해 일반적으로 각 문은

자바스크립트는 꽤 오랫동안 호환성 이슈 없이, 기존 기능을 변경하지 않으면서 새로운 기능이 추가되며 발전해왔다. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었다. 하지만 동시에, 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박

데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'자바스크립트에서는 let 키워드를 사용해 변수를 생성한다.아래 문(statement)은 'message'라는 이름을 가진 변수를 생성(선언)한다.이제 할당 연산자 "="를 사용해 변수 안에 데이터를 저장해보자.문자열이 변

자바스크립트에는 8가지 기본 자료형이 있다. 이 글에서는 이 자료형 모두를 개괄적으로 다루도록 하겠다. 각 자료형에 대한 세부적인 내용은 이어지는 글에서 다룰 예정이다.자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일

확인(OK) 버튼을 누를 때까지 메시지를 보여주는 창: 메시지가 있는 작은 창💡 모달이란 단어에는 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 따라서 사용자는 확인 버튼을 누르기 전까지는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동변환된다. 이런 과정을 "형 변환(type conversion)"이라 한다.alert가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것이니, 수학 관련 연산자가 전달받은 값을 숫자로 변

이번 글에서는 사칙연산을 시작으로 학교에서는 다루지 않았던 자바스크립트에서만 제공하는 연산자에 대해 다루겠다.자바스크립트에서 지원하는 수학 연산자는 다음과 같다.덧셈 연산자 +뺄셈 연산자 -곱셈 연산자 \*나눗셈 연산자 /나머지 연산자 %거듭제곱 연산자 \*\*앞의

a가 b보다 큼 : a > ba가 b보다 작음 : a < ba가 b보다 크거나 같음 : a >= ba가 b보다 작거나 같음 : a <= b같음(동등) : a == b같지 않음(부등) : a != b❗ a = b는 동등 연산자가 아닌 할당 연산자이다.이번 글에

if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true면 코드 블록이 실행된다.EX. 위 예시의 조건은 if문이 어떤 건지 보여주기 위한 간단한 경우이고, 조건문은 더 복잡할 수 있다.조건이 true일 때 복수의 문을 실행하고 싶다면 중괄호로 코드

논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다.'OR'연산자는 두 개의 수직선 기호로 만들 수 있다.전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰인다. 인수 중 하나라도 true면

스펙에 추가된 지 얼마 안 된 문법. 구식 브라우저는 폴리필이 필요하다.null 병합 연산자를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다.a가 null도 아니고 undefined도 아니면 a그 외의 경우는 bnull 병합 연산

while 반복문

복수의 if 조건문은 switch문으로 바꿀 수 있다.Switch문은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있다.switch문은 하나 이상의 case문으로 구성된다. 대개 default문도 있지만, 이는 필

스크립트를 작성하다보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. (ex. 로그인/로그아웃 시 안내 메시지 출력)함수는 프로그램을 구성하는 주요 '구성 요소(building block)'이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않는다.이전 챕터에서 다룬 함수 선언 방식 외에 함수 표현식(Function Expression)을 사용해서 함수를 만들 수 있다.함수를 생성하고 변수에 값을

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다.바로 화살표 함수(arrow function)를 사용하는 것이다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다.이렇게 코드를 작성하면 인자 arg1, ... argN를 받는 함수 fu

테스트는 왜 해야 하는가? 함수를 하나 만들고 있다고 해보자. 대부분 매개변수 - 결과 관계를 중심으로 어떻게 코드를 작성할지 구상할 것이다. 개발 중엔 콘솔 창 등을 이용해 실제 실행 결과가 기대했던 결과와 같은지 계속 비교하면서 원하는 기능이 잘 구현되고 있는지

폴리필

객체 이전 글에서 자료형에 대해 다룬 적이 있다. 총 8가지의 자료형 중 7개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'이라 부른다. 반면, 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다! 키로 구분된

객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있다. 그런데, 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생길 수 있다.이때, new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.함수 이름의 첫 글자는 대문자로 시