I'm a Fig, Not a Pig

목차 1. 단축평가 2. 옵셔널 체이닝 연산자 3.nullish 병합 연산자 '??' 1. 단축평가 단축 평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. 단축 평가의 논리곱과 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 1. 논리곱(&&) 연산자 논리곱(&&) 연산자는 두개의 피연산자가 모두 true 로 평가될 때 true 를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. ( false가 우선 나와버리면 AND 뒤에 나오는 연산은 생략 ) 2. 논리합(||) 연산자 논리합(||) 연산자는 두개의 피연산자 중 하나만 true 로 평가되어도 true 를 반환한다. 논리합 연산자 또한 좌항에서 우항으..

목차 1. 배열에서의 Spread Operator 2. 객체에서의 Spread Operator 3. Destructuring 4. 함수에서의 Spread Operator 스프레드 연산자는 ES6에서 추가된 문법이다. 점 세개가 연달아 있는 '...'로 표시되며 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다. 1. 배열에서의 스프레드 연산자 - 배열병합 ES6의 Spread 연산자를 사용하면 배열병합이 가능하다. let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr = [...arr1, ...arr2]; console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] - 배열복사 ES6의 Spread 연산자를 사용하면 다음과 같이 새..

목차 1. 배열 디스트럭처링 (Array destructuring) 2. 객체 디스트럭처링 (Object destructuring) 디스트럭처링이란 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 변환할 때 유용하다. 1. 배열 디스트럭처링 (Array destructuring) ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다. // ES6 Destructuring const arr = [1, 2, 3]; // 배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당 // 변수 one, t..

1. interpreter vs compiler컴파일 언어와 인터프리터 언어의 가장 큰 차이점은 컴파일 유무이다.둘의 차이를 알려면 우선 컴파일이 어떤건지 알아야 한다.- 컴파일이란?인간이 알아듣기 쉬운 프로그래밍 언어인 High Level Language(고수준언어)를 기계가 알아들을 수 있는 0과 1로 이루어진 기계 언어인 Low Level Language(저수준언어)로 변환시키는 것 이다.- 그렇다면 고수준언어, 저수준언어는 무엇일까?1. 저수준언어0과 1로만 이루어져 있는, 컴퓨터가 이해하기 쉬운 언어를 뜻한다.2. 고수준 언어사람이 이해하기 쉬운 언어를 말한다. print,if,while 등의 문법 같이 인간이 사용하는 언어들로 이루어져 있다. 공식적인 분류법은 아니고 자연스럽게 사람들이 부르기..

오늘은 class를 추가해주는 방식 중 하나인 classList에 대해 다룰 것 이다. 'click'이라는 이벤트를 실행할 때마다 폰트 컬러를 바꾸는 예제를 통해 classList의 사용 방법에 대해 알아보자. 우선 html, javascript 파일에 다음과 같은 코드를 작성했다. -html This works - js const title = document.querySelector("#title"); 이후 각각의 css, javascript 파일에 clicked 이라는 클래스를 추가했다. - css h1 { color: blue; } .clicked { color: green; } - js const CLICKED_CLASS = "clicked" 다음으로 클릭이라는 이벤트를 실행할 때마다 색이 바뀌..

목차 1. target, currentTarget 2. target과 currentTarget의 차이 3. 퀴즈 자바스크립트에서 이벤트를 다룰 때 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 1. target, currentTarget 요약 - target: 이벤트가 발생한 바로 그 요소를 직접 가리킴 - currentTarget: 이벤트 리스너를 가진 요소를 가리킴 예제 다음과 같은 코드가 있습니다. span 실행결과 위 결과에서 검은색은 div, 핑크색은 span입니다. 코드를 보면 onClick 이벤트는 div에 설정을 했지만 검은색, 핑크색 클릭 시 둘 다 이벤트가 발생합니다. div에만 이벤트를 설정했는데 자식요소인 span..

목차 1. event.stopPropagation(); 2. event.preventDefault(); 1. event.stopPropagation(); Propagation는 전파, 확산이라는 의미를 가지고 있다. 사용자가 웹페이지 내의 버튼을 누르면 대부분의 사람들은 버튼만 반응했다고 생각하지만 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그를 또한 클릭 이벤트에 반응하게 된다. Hello 위의 코드를 보면 a태그는 li, ul 두 개의 부모태그가 있다. 사용자가 a태그를 클릭하면 클릭이벤트가 li, ul 태그가 순차적으로 실행된다. 만약 a태그를 클릭했을때 li, ul 태그가 실행되지 않게 하려면 event.stopPropagation();를 사용하면 된다. 2. event.preventDefau..