javascript

F12, alt+F12 함수

문자열내에서 이스케이프문자(역슬래쉬)를 사용하는 이유 위와 같이 작은따옴표는 문자열시작과 끝을 나타내는 예약문자이기때문에 문자열내에 아무조치없이 사용하면 제대로 해석되지 않는다.역슬래시는 특수문자를 원래 문자로 읽기위한 용도로 만들어졌기때문에 역슬래시는 읽히고 난후에는

Number.MAX_SAFE_INTEGER 안전한 정수값Number.MAX_VALUE 최대값 넘어가면 InfinityNumber.NaN not-a-number이면 유형은 number인 값Number.isFinite() 유한한 값인가? Number.isFi

&& 와 || 연산자는 피연산자의 falsy, truethy를 평가하여 값을 반환하며 단락평가도한다.&&는 피연산자가 falsy라면 단락평가를 중단하고 피연산자의 평가값을 반환한다.변수 res값이 NaN이므로 NaN반환단락평가가 truty면 단락을 넘어간다.단락평가가

비교연산자는 피연산자의 타입이 다를때 피연산자를 숫자형으로 형변환후 비교연산을 하도록 되어있다.위의 경우 'a'가 문자열이므로 숫자로 형변환하면 NaN이되고 NaN과 숫자의 비교연산은 false를 반환한다.위의 규칙을 따르면 null은 숫자로 형변환되어 0이되어 0

!! not연산자를 두번사용하면 어떻게 될까?1\. Boolean형으로 형변환을 한후 부정연산을 한다.2\. 결과를 다시한번 부정연산을 한다.3\. 맨처음 Boolean형으로 형변환결과와 같다.따라서 2번 부정연산은 하지 않을 것이다.

?? 널병합연산자 피연산자가 null or undefined라면 새로운 값을 할당한다.||은 falsy를 검사한다.??은 null, undefined를 검사한다.2가지의 차이는 0, '', NaN, false 처리에 있다.

Object.assign(target, ...sources)타겟객체에 소스객체들을 복사한다. 하지만 소스객체에있는 하위객체는 얕은복사된다.객체에 객체를 복사하는 메소드Object.defineProperty(target, prop, descriptor)타겟객체에 특정 프

데이터 서술자(data descriptors)와 접근자 서술자(accessor descriptors) 두 가지 형식을 취할 수 있다.data descriptors : 값을 가지는 속성을 기술할 때 사용accessor descriptors : 접근자(getter)-설정자

객체생성을위한 함수를 생성자함수라 한다.자바스크립트에는 일반함수와 생성자함수의 기술적차이가 없다.따라서 아래와 같은 2가지 관례에따르면 생성자함수라 부른다.1\. 함수명 첫글자를 대문자로 한다.2\. this지시자를 사용하여 객체프로퍼티를 설정한다.new지시자 역활 :

자바스크립트는 객체의 임의프로퍼티에 접근할때 .연산자 , \[]연산자를 사용하여 접금할 수 있다.user.surname과같이 없는 프로퍼티에 접근했을때 자바스크립트는 오류를 발생시키면서 스크립트를 중지하지 않고 undefined를 반환한다.user.surname.len

객체 프로퍼티 키는 문자열타입과 심볼타입의 값만 사용할 수 있도록 규정되어 있다.숫자도 키값으로 사용된것처럼 보이지만 내부적으로 문자열로 형변환되어 저장된다.위 코드로보면 분명히 숫자형 값이 객체의 키값으로 사용되고 있으며 프로퍼티에 접근할때도 숫자형 값을 사용하고 있

객체도 연산 및 인자로 사용될때 암시적형변환이 발생할 수 있다.

자바스크립트에는 유형에는 원시형(string, number, boolean, bigInt, symbol, null, undefined) 7가지와 객체 object가 있다.객체는 object 1가지만 있지만 object로부터 상속받은 많은 종류의 내장객체들이 있다. (

문자열에서 특정문자열찾기등 인덱스를 반환하는 함수들이 있다.인덱스

문자열, arguments..등 유사배열객체는 length속성이 있으며 어떤 것은 length속성이 readonly다.배열은 length속성이 writable이기때문에 length=0;으로 설정하면 배열초기화로 사용할 수 있다.shift, unshift메소드를 사용하면

arr.push(addArr); arr.push.apply(null, addArr); 위 2가지 차이를 이해하자arr.push(addArr);은 arr객체의 메소드로 Array.prototype.push를 사용하고 push함수 내부에는 this와 매개변수로 전달된 배열

이터러블객체 : symbol.iterator 메소드를 가진 객체유사배열객체 : 인덱스와 length속성을 가진 객체이터러블객체와 유사배열객체는 독립적이다.문자열은 배열이 아니고 이터러블객체이면서 유사배열객체이다.자바스크립트는 문자열 한문자를 utf16(2byte)으로

Array.from()유사배열객체나 이터러블객체를 얕게 복사해 배열객체를 만든다.Object.keys() 객체의 열거가능한 속성이름들을 배열로 반환Object.values() 객체의 열거가능한 속성값들로 이루어진 배열을 반환이 배열은 for...in 구문과 동일한 순서

맵객체의 핵심은 객체 프로퍼티키로 객체를 사용할 수 있는 객체다.일반객체로는 객체를 프로퍼티키로 사용할 수 없다고 했다.

Set객체는 중복값을 허용하지 않는 배열이다.중복으로 add해도 추가되지 않는다.원소를 추가한 순서로 출력되지만 내부적으로 검색에 최적화되어있어 배열의 find보다 검색속도가 빠르다.set객체는 배열이 아니다.중복된 원소가 있는 이터러블객체를 인자로 사용하면 중복원소가

문자열은 배열이 아니고 이러터블한 유사배열객체다.문자열을 배열로 만드는 방법Array.from() 당연히 되지만 나이브하다.String.prototype.split('')

문자열 정렬하는 방법애너그램의미문자열을 정렬하고 정렬된문자열을 키로하고 원문자열을 값으로 맵객체에 넣으면 같은 키로 추가되는것은 하나의 값만 추가된다.맵객체 간단한 사용 set으로 추가하고 , values메소드로 값만 이터러블객체로 만든다.

자바스크립트는 C++과 달리 명시적 메모리해제명령이 없다.그대신 가비지콜렉션이라는 메모리관리시스템으로 참조하지 않는 메모리를 찾아 자동으로 메모리를 해제한다.리터럴객체가 메모리에 저장되며 변수 john이 리터럴객체를 참조하고있어 가비지콜렉션은 리터럴객체의 메모리를 해제

Map객체에이어 WeakMap객체라는 것이 있다.이름은 비슷하지만 용도는 전혀 다른것임을 유의하자.WeakMap은 가비지콜렉션과 밀접한 관계가 있는 객체다.Map객체는 가비지콜렉션과 전혀 관계가 없다.WeakMap객체는 키로 오직 객체만 사용할 수 있다.리터럴객체가 메

Map, Set, Array객체는 keys, values, entries 메소드를 기본적으로 지원한다. 위 객체들은 이터러블한 객체이므로 위 메소드를 지원하는 것이 이상하지 않다.유의할점은 위 메소드들이 반환하는 객체가 배열이 아니라 이터러블객체라는 것이다. 반환객체

배열구조분해할당구조분해는 단축표현과 비슷한 특별한문법구조체이다.\[] = 우항에 올수있는 객체는 무엇인가? 배열인가?모양을 보면 배열객체를 반복순회하면서 좌항변수에 할당하는 방식이 될것으로 예상된다. 그렇다 우항에 이터러블객체면 구조분해할당이 가능하다.우항에 이터러블객

배열은 키가없고 값만 있기때문에 좌항변수에 값을 할당하면 되는데 객체는 키를 기준으로 값을 가져와야하기때문에 구조분해할당되는 변수식별자도 객체의 키이름과 같아야 하는 조건이 발생한다.

위코드가 실행되면 Uncaught ReferenceError: title is not defined 에러가발생하면서 스크립트는 중단된다.title변수에 접근하는데 title변수가 가리키는 메모리번지가 없으므로 에러가 발생한다.여기서 사용된 중괄호는 코드블럭이며 바로 실

위와같이 함수의 매개변수를 여러개와 기본값을 정의하면 오기에의한 오류가 발생할 수 있으며 호출할때도 함수정의를 생각해야 하기때문에 가독성이 떨어진다.이런 상황에서 구조분해를 사용하면 제격이다.함수에 전달할 객체를 미리 정의하기때문에 가독성이 좋아진다.함수호출시에는 객체

GMT기준 로컬의 현재 표준시간을 문자열로 출력한다.

나머지연산자와 스프레드문법의 차이를 이해하자나머지연산자는 여러인자들을 하나의배열로 받는것이다. 스프레트문법은 하나의 배열을 여러개의 인자들로 확장하는 것이다.나머지연산자는 할당관계에서 받는쪽에 위치하며 반환값은 배열이다.(모든 연산자는 값을 반환한다)나머지매개변수는 항

자바스크립트 함수가 어떻게해서 유연성이 생기는지 자세히 알아보자. 실행컨텍스트객체 함수가 호출되면 실행관련정보(매개변수,인자,...)들을 가진 객체형태로 저장하여 스택에 추가한다. 함수가 수행됨에따라 필요한 정보를 실행컨텍스트객체내 정보를 참조한다. 실행컨텍스트객체

makeCounter함수가 호출되면 실행컨텍스트가 만들어저 스택에 추가되고 LexicalEnvironment에는 자기지역변수인 count변수정보를 가지고있고 outer-EnvironmentReference가 전역객체와 연결되어있다.전역객체의 실행컨텍스트에는 makeCo

var 변수는 함수코드블럭이 아닌 코드블럭에는 종속되지 않고 오직 함수블럭에만 종속된다.var변수는 렉시컬환경객체에 등록되면서 undefined로 초기화되어 바로 접근이 가능하다. 이것을 호이스팅이라 한다.즉시실행함수는 var변수를 코드블럭에서 사용후 소멸되도록 하기

함수는 Object으로부터 상속받은 콜러블객체임을 설명했다.객체는 프로퍼티들을 가질 수 있는 구조이므로 함수도 프로퍼티를 가질 수 있다.그렇다면 함수의 프로퍼티추가를 함수내부(본문)에 해야하나? 아니면 함수외부에 해야하나?1\. 함수내부에 추가할때위와같이 함수가 호출되

객체가 원시값으로 암시적이든지 명시적이든지 형변환되어야 한다면 Symbol.toPrimitive메소드를 추가하거나 toString, valueOf메소드를 추가해야 한다.만약 추가하지 않으면 Object.toString, Object.valueOf메소드가 호출된다.함수도

위와 같이 동적생성후 호출잘된다.value변수를 찾을 수 없다는 에러가 발생되어 스크립트가 중단된다.Function(alert(value)); value는 호출될때 접근하여 가져올값이다.위코드에서 let value='test';로 선언하여 반환함수는 클로저가되어 연결된

setTimeout, setInterval함수는 비동기함수로 정해진 시간후에 전달된 콜백을 실행한다. setTimeout, setInterval함수는 스케줄러역활을 하는것으로 이벤트 루프와 매크로태스크, 마이크로태스크를 이해해야 한다. setTimeout함수는 자기스

자바스크립트 함수는 탁월한 유연성을 제공하며 이곳저곳에 전달될 수 있고, 객체로 프로퍼티도 가질 수 있다.이러한 장점을 살린 함수 포워딩, 데코레이팅을 이해하자.순수함수 : 같은 값을 전달하면 언제나 같은 값을 반환하는 함수

컨텍스트와 함께 인수전체를 다른 함수에 전달하는 것을 콜포워딩(call forwarding)이라고 한다.call메소드는 개별적인 인자들로 호출해야 한다.전개문법은 이터러블객체만 사용가능하며 확장하여 호출한다.apply메소드는 배열또는 유사배열객체가 사용하다.

짧은 간격으로 이벤트가 지속적 또는 불특정간격으로 발생할때 모든 이벤트를 처리한다면 시스템부하가 발생하기 때문에 마지막 이벤트로부터 정해진 밀리초동안 이벤트가 발생하지 않으면 필요작업을 수행한다.만약 마지막 이벤트로부터 정해진 밀리초 이전에 계속 이벤트가 발생한다면 호

지속적 또는 불특정 짧은 간격으로 이벤트가 발생할때 모든 이벤트를 처리하지 않고 시작이벤트부터 정해진 밀리초간격으로 필요작업(함수호출)을 수행하는 방식이벤트가 발생하면 무조건 정해진 시간간격으로 처리작업 수행되고 수행후 이벤트가 발생하지 않으면 처리하지 않는다.예) 웹

함수가 호출되면 실행컨텍스트객체가 외부실행컨텍스트객체와 상하로 연결된 관계를 형성한다.객체는 존재만으로 상위객체와 연결관계를 형성한다.객체가 상위객체와 연결되는 목적은 상위객체의 프로퍼티에 접근하기위한 것으로 연결하는 방버에 차이가 있을 뿐이다.자바스크립트에서는 객체간

admin은 user를 상속받았으므로 user프로퍼티인 name, surname과 접근자프로퍼티에 접근할 수 있다.admin.fullName admin에는 fullName프로퍼티가 없으므로 user에 가보니 fullName이 접근자프로퍼티이며 내부에 this가 있네..

\_\_proto\_\_속성을 사용하여 객체간 상속을 왜 하는가?상위객체의 프로퍼티를 내것처럼 사용해야할 필요가 있기 때문이다.

자바스크립트는 일반함수와 생성자함수의 기술적차이가 없다고 했으며 모든 함수는 생성될때 prototype일반속성이 추가되고 빈객체를 생성하여 이속성에 참조할당한다고 했다.생성자함수 prototype속성이 가리키는 빈객체라고 했는데 실제로는 constructor라는 키와

자바스크립트의 모든 객체는 Object로부터 상속받는다? 아니지 Object.prototype객체로부터 상속받는다.Object는 뭐냐? 생성자함수다. 자바스크립트에 미리 정의되어있는 class다.자바스크립트에는 많은 내장class가 정의되어있는 Array, Date,

\_\_proto\_\_는 브라우저를 대상으로 개발하고 있다면 다소 구식이기 때문에 더는 사용하지 않는 것이 좋다. 표준에도 관련 내용이 명시되어있다.모던한 프로토타입 메소드를 사용하는 것이 좋다.\_\_proto\_\_ 속성을 대체하려면 객체의 \[prototype]

모던 자바스크립트에 class문법이 도입되었으며 생성자함수의 간편문법이 아님을 유의하자.class User{ ... } 클래스함수가 생성될때 수행되는 과정1\. User라는 생성자함수가 만들어지며 \[IsClassConstructor]:true 속성이 추가된다. c

Object.getOwnPropertyNames() 메소드가 핵심이다.Symbol유형의 프로퍼티를 제외한 모든 프로퍼티의 키콜렉션(배열)을 반환한다.

class field는 곧 표준화될 문법이다.class field는 public, private field 2가지가 있으며 데이터프로퍼티를 만든다.class field는 객체마다 만들어지는 프로퍼티다.복작한 표현식이나 함수를 사용할 수 있다.class field에 화살

자바스크립트 함수의 탁월한 유연성에 한가지더 내부에 this가 있을때를 생각해보자함수내 this는 런타임에 평가된다는 기본원칙이 있다.

this는 함수내부에 있어야하고 그 함수는 객체와 연결된 상태로 호출되어야 this가 제대로 평가됨을 알았다.

this가 있는 함수의 바인딩기법this는 일반함수 내부에 있고 함수는 객체메소드로 연결되어 있다면 호출시 제대로 평가될것이다.

함수도 객체이므로 프로퍼티를 가질 수 있다.그러나 함수본문은 자체가 프로퍼티이므로 다른 프로퍼티가 필요하다면 외부에서 프로퍼티를 설정해야 한다.함수내부에 this를 사용하고 외부에 정의한 프로퍼티에 접근하려는 의도는 너무 나이브한 생각이다.함수내 this는 함수가 될

지금까지 함수내 this를 바인딩하는 방법래퍼함수bind함수this있는 화살표함수(외부함수의 this로 바인딩)위 방법들의 공통점은 콜백과같이 this가 있는 함수를 전달해야 사용하는 방법이다.자바스크립트는 위 방법이외에도 여러가지 방법을 제공한다.지연데코레이터에 us

객체내 this를 바인딩하는 방법

반환되는 화살표함수내 this는 무엇인가?가장 가까운 일반함수에 연결된 객체를 가리켜야 하므로 fn에 연결된 객체는 전역객체다.반환되는 화살표함수내 this는 가장 가까운 일반함수에 연결된 객체를 가리키므로 fn함수에 연결된 객체는 user다.화살표함수내 this는 화

접근자프로퍼티, computed property는 객체와 class에서 사용가능하고 생성자함수에서는 사용할 수 없다.computed property에 \['get'+this.\_name]와 같이 this를 사용할 수 없다.this는 객체생성이 완료된상태에서 접근가능한것

이전글에서 상속클래스는 객체생성시 상위객체의 constructor를 자동으로 호출한다고 했다. 이부분에대해 보다 자세히 보자명세서에 따르면, 클래스가 다른 클래스를 상속받고 constructor가 없는 경우엔 아래처럼 ‘비어있는’ constructor가 만들어지도록

이전 글에서 class field는 constructor보다 먼저 처리된다고 했기때문에 constructor에서 this.name이 값을 가지고있다.즉 class field는 클래스가 생성될때 할당된다는 것이다.rabbit객체가 생성되면 Animal의 construct

이전글에서 super();는 super.constructor();와 같은 것이다.rabbit에서 상위객체의 this가있는 메소드를 호출하려면 this를 바인딩해야 한다.this.\_\_proto\_\_.eat.call(this);상위객체로 접근하면 위와같이 반드시 th

class에 static키워드를 사용하여 해당 프로퍼티는 static 프로퍼티가 된다.

자바스크립트는 다중상속을 지원하지 않지만 함수의 유연성을 사용하면 다중상속과 유사한 기능을 이용할 수 있다.객체 믹스인메소드를 담은 객체가 있다.User클래스로 생성되는 객체가 sayHiMixin객체의 메소드들을 사용하게하려면 어떤 방법이 좋을까?User클래스가 say

스크립트를 중단시키는 에러를 처리하기위해 try catch 에러핸들링을 한다.

자바스크립트 엔진은 코드 구문분석후 오류가 없다면 코드를 실행한다.구문분석중에 발생하는 오류는 잘못된 코딩으로인한 것으로 수정되어야 하는것이다.올바른 구문이지만 런타임에 에러가 발생하면 엔진은 에러객체를 생성해 던지고 스크립트를 중단하기때문에 try catch구문으로

try catch는 예외가 발생할것으로 예상되는 구문에 사용하기때문에 예외가 발생하지 않을것으로 예상했던 구문에서 예외가 발생하면 스크립트는 중단될 수 밖에 없으며 경험적으로 대처할 수 밖에 없다.스크립트가 중단되는 예외는 치명적인 상황이기 때문에 설사 발생했더라도 발

catch블럭에서 에러객체의 유형으로 구분하여 처리하는것을 보았다. 에러객체유형은 내장에러객체를 사용해도되고 사용자가 만든 어떤 객체도 사용가능하다.네트워크관련 HttpError, 데이터베이스관련 DbError, 검색관련 NotFoundError객체를 만들어서 사용하면

변수을 객체구조분해할당

예외객체를 세분화하는것은 예외에대한 정보를 자세히 알수있다는점에서 필요하다. 그러나 세분화될수록 종류가 많아져 가독성이 떨어지는 단점이 동반된다.예외를 세분화하되 예외를 처리하는 곳에서는 단순화하여 예외발생에대한 필수정보만 알수있도록 해도 충분하다. 이것을 예외감싸기

크게 보면 아래와 같다. let range = val=>{ num=>val+num } range는 함수이며 매개변수로 val을 갖으며 함수를 반환한다. 따라서 range(val);로 호출된다. let retFunc = range(val); 반환함수는 num=

서버에 데이터를 요청했을때 요청한 데이터를 전부 받은후에 해야할 작업이 있다고 하자.요청한 데이터를 전부 받았는지를 누가 알까?알 수 있는 방법을 브라우저가 제공하지 않는한 클라이언트에서는 알 수가 없다.그렇다면 브라우저가 그러한 방법을 제공하는가?다행히도 제공한다.

CSS 트랜지션 이벤트 활용원이 커지는 트랜지션이벤트가 완료되었을때 호출되는 콜백함수를 만들어서 버튼이벤트에부터 넣고 원그리는 함수에서 받고 트랜지션이벤트에서 호출해야 한다.

자바스크립트 비동기작업비동기작업에는 생산자와 작업결과를 기다리는 소비자가 있다.생산자는 작업시작과 동시에 Promise객체를 생성하고 바로 반환한다.promise객체는 비동기작업 완료후 소비자가 원하는 함수를 호출한다.

연속적인 비동기작업을 콜백방식으로 수행하면 콜백지옥이 있었는데 promise객체를 수행하면 어떻게 되는지 알아보자생산자가 비동기작업을 시작하고 완료되면 소비자가 처리하고 새로운 생산자가 비동기작업을 시작하고 완료되면 소비자가 처리하기때문에 마치 동기식처럼 순차적으로 처

fetch메소드를 이용한 promise체인닝을 알아보자

promise체이닝 에러가 발생되면 제어흐름상 제일 가까운 rejection핸들러에서 처리할 수 있다.

여러개의 promise를 묶어서 처리해야할때 사용하며 resolve값들을 하나의 배열로 반환한다.반환배열 원소들값은 완료되는 시점이 아닌 promise 배열순서를 따른다.여러개중 하나라도 reject되면 reject핸들러가 호출된다.

일반적인 콜백함수스크립트파일과 콜백함수를 같이 전달한다.loadScript함수를 promise화하는 방법

비동기함수는 이벤트루프에 콜백은 추가하고 호출은 이벤트루프에 위임한다고 했다.promise객체도 비동기작업으로 바로 fullfilled되어도 동기식코드가 수행된후 이벤트루프에의해 호출된다.이벤트루프에대해 자세히 알아보자V8엔진에는 마이크로태스크 큐(microtask q

지정한 유형의 이벤트를 이벤트타겟이 수신할 때마다 호출할 함수를 설정한다.일반적인 이벤트타겟은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있다.

함수앞에 async 지시자를 사용하면 함수는 비동기함수가되어 promise객체를 반환한다.

이터레이터란 객체프로퍼티 반복순회시 사용되는 객체다. let range = { [Symbol.iterator](){ return { nex(){ return {done:false,value:xxx} } }; }

Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체핸들러가 지정되지 않으면 proxy에 가해지는 모든 작업이 obj에 똑같이 적용된다.자바스크립트 객체에는 \[prototype]과 같은 숨김속성이 있듯이 숨김메소드가

Reflect는 중간에서 가로챌 수 있는 JavaScript작업에 대한 메서드를 제공하는 내장객체다. 메서드의 종류는 프록시 처리기와 동일하며 Reflect는 함수객체가 아니기때문에 생성자로 사용할 수 없다.

get(target, p, receiver)배열인덱스를 내부적으로는 p값을 문자열로 받는다.p = +p + target.length; 음수를 앞에서 숫자로 변환해서 연산한다.

브라우저에서는 아무것도 출력되지 않는다.여기에는 연산자가 두개 있다.점 '.'은 객체프로퍼티 obj.method에 접근하고괄호 ()는 접근한 프로퍼티가 함수라면 호출한다.두 연산을 각각 별도의 줄에서 두었다면 this 정보를 잃는 건 확실하다.자바스크립트 .연산자는 프

자바스크립트는 본래 웹브라우저에서 사용하려고 만들어진 언어로서 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였다.자바스크립트가 돌아가는 플랫폼을 호스트(host)라하며 브라우저, 웹서버등 여러가지가 있다.호스트는 랭귀지코어(ECMAScript)에 더하여

문서객체모델(Document Object Model, DOM)은 웹페이지 내의 모든 콘텐츠를 객체로 나타내주며 DOM은 수정가능하다.document객체는 웹페이지의 기본 ‘진입점’ 역할을 한다. document 객체를 이용해 페이지 내 컨텐츠를 변경할 수 있고, 추가할

HTML을 지탱하는 것은 태그(tag)이며 문서객체모델(DOM)에 따르면, 모든 HTML태그는 객체다. 태그하나가 감싸고 있는 ‘자식’태그는 중첩태그(nested tag)라고 부르며 태그내의 문자(text)역시 객체다.태그의 본질은 객체이고 태그내에 있는 텍스트도 객체

HTML페이지내 태그는 객체로서 DOM트리에서 노드를 구성한다.HTML페이지내 태그를 조작하려면 그에 상응하는 노드에 자바스크립트를 사용해서 접근해야 한다.DOM에 수행하는 모든 연산은 최상위 노드인 document노드로부터 시작하며 어떤 노드에도 접근할 수 있다.

document노드로부터 시작하여 원하는 노드에 접근하는 방법자바스크립트립트가 지원하는 자식노드 접근방법firstChild : 첫번째 자식노드lastChild : 마지막 자식노드childNodes : 자식노드 콜렉션자식노드의 구분자식노드(child node, child

childNodes, firstChild, lastChild, nextSibling, previousSibling, parentNode이러한 접근방법들은 노드의 종류에 구분없이 노드를 탐색하는 방법들이다.그러나 실무에서는 태그에 상응하는 노드 즉 요소노드에 접근하는 경

일부 DOM요소노드는 기본 프로퍼티 외에 추가적인 프로퍼티를 지원한다.< table >요소는 다음과 같은 프로퍼티를 지원한다.table.rows는 < tr >요소 컬렉션을 참조한다.table.caption/tHead/tFoot은 각각 < caption

문법을 외우려고하지 말고 문법의 흐름을 보려고 노력하자.문법의 탄생배경을 이해하려고 노력하자.개념은 되도록 간단히 정리하고 코드를 통해 원리를 이해하도록 노력하자.코드를 다이어그램으로 다이어그램을 코드로 바꿔가면서 학습하자.개념을 간단히 정리하고 코드실습으로 이해하도록

삼항연산자 우선순위가 낮음을 유의하자

정규표현식은 객체이기때문에 test, exec등의 메소드를 사용할 수 있다.리터럴 정규표현식으로 패턴이 고정일때 사용하며 이것도 객체다.패턴이 변수일때는 정규표현식 객체를 생성하는 생성자함수를 사용해야 한다.패턴식이 /abc/라면 어떤 문자열에 abc문자열이 있는지를

뷰의 message는 getter함수로 바인딩되어있어 \_prop프로퍼티값을 항상 보여준다.\_prop프로퍼티값이 변경되면 뷰의 message값도 변경된다.

옵셔널프로퍼티연산자 ?어떤값이 undefined타입이 될수 있다는 유니언타입임을 명시하는 연산자다.타입을 명시하기위해 사용되었다arg.charAt(1);arg가 undefined이면 에러가 발생되고 에러가 처리되지 않으면 스크립트는 중단된다.arg?.charAt(1)