JavaScript
1.[JS] 입문
1995년 최고의 인터넷 브라우저 점유율을 가지고 있던 넷스케이프에 근무하던 브렌드 아이크가 개발이름 변경 과정모카(Mocha) -> 라이브스크립트(LiveScript) -> 자바스크립트(JavaScript)자바스크립트가 개발된 뒤 많은 회사에서 스크립트 언어를 개발하
2.[JS] 기초 문법
script 태그는 자바스크립트 코드를 작성할 영역을 선언하는 것head 태그 영역과 body태그 영역에 선언하여 사용 가능.선언문 안에 설명글을 적거나 코드를 생략할 때 주석처리를 하면됨.예시script.jsindex.htmlscript태그의 src속성을 이용하여 J
3.[JS] 제어문과 조건문
프로그램의 흐름을 제어할 수 있도록 도와주는 코드조건문 : 조건을 만족하는지의 여부에 따라 코드를 제어할 수 있다.선택문 : 변수에 일치하는 경우 값에 따라 코드를 제어할 수 있다.반복문 : 특정 코드를 여러 번 반복해서 실행한다.조건식의 값이 참인지, 거짓인지에 따라
4.[JS] 객체 (Object)
자바스크립트에서의 객체는 속성과 함수들의 집합내장 객체자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용가능내장 객체의 종류로는 문자, 날짜, 배열, 수학 객체등 여러가지 객체가 존재브라우저 객체 모델 (BOM)브라우저에 계층 구조로 내장되어 있는 객체브라우저
5.[JS] 함수(function)와 return
변수처럼 자바스크립트의 메모리에 저장했다가 필요할 때마다 호출하여 사용1개의 데이터만 저장var라는 키워드를 이용하여 선언문자형, 숫자형, 논리형 데이터를 보관객체를 참조자바스크립트 코드를 저장function이라는 키워드를 이용하여 선언출력문, 제어문 등의 코드를 저장
6.[JS] map( ) /filter( ) /reduce( )
Number, Boolean, Null, undefinedArray, Object, Function기본형은 값을 복사한다.y의 값은 변경되지 않음참조형은 주소값을 복사한다.x와 y는 동일한 참조를 담고 있고, 동일한 객체를 가르킨다.arr2 = arr1 와 같이 대입을
7.[JS] 호이스팅 (Hoisting)
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.실행 컨텍스트가 생성될 때 변수객체가 생성이 된다.변수 객체는 밤수가 실행되는데 사용되는 변수들을 찾는 위치이고 없을 경우 스코프체인을 따라 올라간다.호이스팅은 변수 객체를 생성할 때
8.[JS] this와 실행 컨텍스트(Execution Context)
인스턴스 자신을 가리키는 참조변수, 인스턴스의 주소가 저장되어있다.호출되는 시점과 상황에 따라 값이 달라져 디버깅을 유발하는 키워드이다.console에 this를 찍었을 때 console에는 window객체가 출력된다.일반적으로 브라우저의 요소와 자바스크립트 엔진과 관
9.[JS] call( ) / apply( ) / bind( )
call(), apply(), bind()는 this를 이해하기 위한 발판이다.자바스크립트에서 this를 자유자제로 바꿀 수 있도록 해주는 메소드이다.ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했다.apply()
10.[JS] 비동기 (promise / async / await)
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 말한다.예시예측 결과콘솔창 결과자바스크립트의 대표적인 내장 비동기 함수인 setTimeout( ) 이다.첫번째 인자로 실행할 콜백함수를 담고 두번째 인자로 들어온 시간만큼 기다린
11.[JS] 이벤트 버블링 / 이벤트 캡쳐
화면의 특정요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위요소들로 전달되어 가는 특성위의 코드에서 최하위 div 태그 <div class="three"></div>를 클릭하면 console에서는 다음과 같은 결과가 실행된다.브라우저는 화면의 특정 요소에서
12.[JS] 디스트럭처링(Destructuring) 할당
구조화된 배열 또는 객체를 비구조화하여 1개 이상의 분수에 개별적으로 할당하는 것.순서에 의미가 있다.변수와 배열의 개수가 일치하지 않아도 된다.디스트럭처링을 사용하기 위해선 오른쪽에 반드시 배열이 있어야 한다. (단독 사용 불가)기본값을 설정할 수 있다.배열 디스트럭
13.[JS] 스프레드 문법
하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것.값을 만드는게 아니기 때문에 변수에 할당할 수 없다.이터러블에 한정되어 사용될 수 있다.단독으로 사용될 수 없고 다음과 같이 사용될 수 있다.함수 호출문의 인수 목록배열 리터럴의 요소 목록
14.[JS] 옵셔널 체이닝
프로퍼티가 없는 중첩 객체에서도 에러 없이 안전하게 접근할 수 있는 방법이다.?.의 앞 대상을 평가하여 undefined 또는 null을 반환하면 평가를 멈추고 undefined를 반환한다.user라는 빈 객체 생성 후 user의 address의 프로퍼티 내부의 nam
15.[JS] 가비지 컬렉터 (Garbage Collector)
가비지 컬렉터는 메모리 관리 기법 중에 하나이로 'GC'라고 한다.시스템에서 더이상 사용하지 않는 메모리 블록을 찾아 자동으로 다시 사용 가능한 자원으로 회수하는 시스템 (=가비지 컬렉션 Garbage Collection)을 수행하는 부분JavaScript의 언어는 G
16.[JS] 브라우저 저장소와 데이터 범위 및 보안
Html5에서는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함됬다.Web Storage에서는 key: value를 쌍으로 저장하고 key를 기반으로 데이터를 조회한다.영구저장소 LocalStorage와 임시저장소
17.[JS] 유용한 자바스크립트 테크닉
if 조건문 안에 수많은 || 조건을 넣어야 할 때 includes를 사용?? 연산자는 왼쪽 피연산자값이 null이나 undefined일 때 오른쪽 피연산자를 반환만약 null이나 undefined 외에도 0이나 ''같은 값을 함께 처리하고 싶다면 ?? 대신 ||을 사