modern javascript

script 태그 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다. 브라우저는 태그를 만나면 안의 코드를 자동으로 JS 엔진으로 처리하고 실행한다. 모던 마크업 태그에는 몇 가지 속성이 있다. 요즘에는 잘 사용하지 않지

statement(선언, 문)는 어떤 작업을 수행하는 문법구조와 명령어를 의미한다. alert("Hello, world!"); 가 하나의 statement 라고 할 수 있다. 서로 다른 statement는 세미콜론으로 구분된다. 세미콜론으로 구분하면 한 줄에 여러 개의

자바스크립트는 오랫동안 호환성 이슈 없이 발생해왔다. 기존의 기능을 변경하지 않으면서 새로운 기능을 추가했기 때문이다. 덕분에 기존에 작성한 코드의 기능이 절대 망가지지 않는다는 장점이 있었지만, 초기 자바스크립트 창시자들이 했던 실수들이 영원히 박제된다는 단점도 있었

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

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 여덟가지 기본 자료형이 있다. 자바스크립트의 변수는 어떤 순간에는 문자열일 수도, 다른 순간에는 숫자가 될 수도 있다. 이처럼 자료의 타입은 있지만, 변수에 저장되는 값의 타입은

사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창을 계속 띄운다. 메시지가 있는 작은 창은 모달 창이라고 무른다. ‘모달'이라는 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 내포되어 있다. 따라서 사용자는 확인 버튼을 누르기 전까지는 모달 창 바

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데, 이를 ‘형 변환'이라고 한다. alert 가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여 주는 것, 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적

피연산자는 연산자가 연산을 수행하는 대상이다. 5 \* 2 에는 왼쪽 피연산자 5와 오른쪽 피연산자 2로 총 두 개의 피연산자가 있다. ‘피연산자'는 ‘인수'라는 용어로 불리기도 한다.피연산자를 하나만 받는 연산자는 단항 연산자라고 한다. 피연산자의 부호를 뒤집는 단항

true 가 반환되면, 긍정, 참, 사실을 의미false 가 반환되면, 부정, 거짓, 사실이 아님을 의미반환된 불린값은 다른 값처럼 변수에 할당할 수 있다.자바스크립트는 사전순(정확히는 유니코드 순)으로 문자열을 비교한다. 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전

조건에 따라 다른 행동을 취해야 할 경우, if 문과 조건부 연산자 ? 를 사용한다. if (...) 는 괄호 안에 들어가는 조건을 평가해 그 결과가 true 이면 코드 블록을 실행한다. if (...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.

자바스크립트에는 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)가 있다. 논리 연산자는 피연산자로 불린형 뿐 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 있다. ‘OR’ 연산자는 두 개의 수직선 기호로 만들 수 있다.

nullish 병합 연산자 ?? 를 사용하면 여러 피연산자 중 그 값이 ‘확정되어 있는' 변수를 찾을 수 있다. a ?? b 의 평가 결과는 다음과 같다. a 가 null 도 아니고 undefined 도 아니면 a그 외의 경우는 b같은 기능을 하는 코드를 ?? 없이

상품 목록에서 상품을 차례대로 출력하거나 숫자를 1에서 10까지 하나씩 증가시키면서 동일한 코드를 반복 실행해야 하는 경우 반복문을 사용한다. while 문의 문법은 다음과 같다. 조건이 truthy 이면 반복문 본문의 코드가 실행된다. 아래 반복문은 조건을 만족할 동

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

사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작처럼 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다. 함수를 이용하면 유사한 동작을 하는 코드를 중복해 작성하지 않고도 여러 번 호출할 수 있다. 함수를 직접 만드는 방법을 알아보자! 함수선언

자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 다른 언어에서는 함수를 ‘특별한 동작을 하는 구조'로 취급하는 것과 차이가 있다. 함수 선언 방식이 아닌 함수 표현식으로도 함수를 만들 수 있다. 함수 생성 방식에 관계 없이 함수는 값이고, 따라서 변수에 할당할 수

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있다. 화살표 함수를 사용하는 것이다. 화살표 함수 작성 방법은 다음과 같다. 이렇게 코드를 작성하면 함수 func 이 만들어진다. 함수 func 는 화살표 우측 표현식을 평가한 뒤 결과를 반환한다.

여러 개의 구문은 세미콜론을 기준으로 구분할 수 있다.줄 바꿈도 여러 개의 구문을 구분하는데 사용된다. 이 경우 ‘세미콜론 자동 삽입'이 발생한다.아래 코드와 같은 상황에서는 세미콜론 자동 삽입이 발생하지 않아 에러가 발생한다.코드 블록 끝에는 세미콜론을 붙이지 않아도

자바스크립트에는 여덟 가지 자료형이 있다. 이 중 일곱 개는 오직 하나의 데이터만을 담을 수 있는 ‘원시형'이다. 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있다. 객체는 자바스크립트 거의 모든 면에 녹

객체와 원시 타입의 근본적인 차이 중 하나로 저장, 복사 방식이 있다. 원시 타입은 값이 그대로 저장, 할당되고 복사된다. 반면, 객체는 ‘참조에 의해’ 저장되고 복사된다. 원시 타입을 먼저 보자. 이를 실행하면 message, phrase 라는 각각의 독립된 변수에

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지한다. 그렇다면 더는 쓸모없어지게 된 것들은 어떻게 처리될까? 자바스크립트는 도달 가능성이라는 개념을 사용해 메모리 관리를 수행한다. ‘도달

객체는 사용자, 주문 등과 같이 실제 존재하는 개체를 표현하고자 할 때 생성된다. 사용자는 현실에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 한다. 사용자를 나태나는 객체 user 도 특정한 행동을 할 수 있다. 자바스크립트에서는 객체의 프로퍼티에 함수를

객체 리터럴 {} 를 사용하면 객체를 쉽게 만들 수 있다. 그런데 개발을 하다 보면 메뉴 내 다양한 아이템을 객체로 표현하는 경우 등 유사한 객체를 여러 개 만들어야 하는 경우가 생긴다. 이럴 때 ‘new’ 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게

옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝은 왜 등장했을까? 몇 가지 사례를 통해 알아보자! 사용자가 여러 명 있는데, 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이런 경우 주소 정보에 접

자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용한다. 이번에는 프로퍼티 키로 심볼값을 사용해 보면서, 심볼형 키를 사용할 때의 장점을 살펴보자! 심볼은 유일한 식별자를 만들고 싶을 때 사용한다. Symbol() 을 사용하면 심볼값을 만들 수 있다. 심볼

객체끼리 더할 때, 뺄 때, alert() 로 출력할 때 무슨 일이 발생할까? 모든 경우 객체는 원시값으로 자동 형 변환된 후 의도한 연산이 수행된다. 객체는 논리 평가에서 true 를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다. 숫자형으로의