Awesome

이벤트버블링이란?

- 하위 DOM에 연결된 이벤트가 상위로 전파되는 것.

이벤트캡쳐란?

- 상위 DOM에 연결된 이벤트를 하위 DOM으로 전파시키는 것. addEventListener를 할 때 옵션객체에서 capture: true로 지정해서 수행한다.

이벤트위임(Delegation) 이란?

- 상위 DOM에서 하위 DOM의 이벤트를 제어하도록 위임하는 것. 이렇게 하면 DOM마다 이벤트를 연결하지 않아도 되서 코드 양과 이벤트리스너마다 할당될 메모리 사용량이 줄어들고, 버튼 등의 DOM의 추가와 삭제가 유연해진다.

event.stopPropagation()

- 상위나 하위 DOM으로의 이벤트 전파(버블링 or 캡쳐)을 막는다.

event.stopImmediatePropagation()

- 같은 DOM의 다른 이벤트들의 발생을 막는다.

event.preventDefault()

- 태그의 기본 이벤트 수행을 막는다. ex) a 태그의 href 이동 기능을 preventDefault로 방지

return false; (jQuery에서)

- event.stopPropagation + event.preventDefault (원하는 DOM의 한 이벤트만 동작시키고 싶을 때)

기본적으로 웹 컨텐츠는 모든 브라우저에서 같게 보여야 한다. 

하지만 IE와 같은 구버전 브라우저의 경우 지원하지 않는 기능들이 있고, 

현실적으로 구버전이나 특정 기능이 지원되지 않는 브라우저에서 어떻게 보이게 할 것인가에 대한

방법론으로 점진적 향상법과 우아한 성능저하법이 있다.

점진적 향상법

구버전 브라우저에서는 기본적인 컨텐츠 가독이 가능하도록 하면서,

최신버전 브라우저에서는 부가효과 및 기능 또한 가능하도록 개발하는 방법이다.

우아한 성능저하법

최신버전 브라우저를 기준으로 개발을 하고,

구버전 브라우저에서는 대체되는 다른 방법을 사용하거나 구버전이 지원되지 않는다는 메시지를 표시하는 방법이다.

점진적 향상법은 구버전(기본적인 컨텐츠 가독)에서 > 최신버전(부가효과 및 기능)

우아한 성능저하법은 최신버전에서 > 구버전(대체방법 사용 혹은 지원되지 않음 표시)로 정리하면 될 듯하다.

참고

https://blog.sonim1.com/214

아래 코드는 간단하게 numbers 배열을 순회하면서 출력하는 코드이다. for - of 문을 사용하면 간결하게 쓸 수 있다.

const numbers = [10, 20, 30, 40, 50];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// output:
// 10
// 20
// 30
// 40
// 50

아래 코드는 위 코드를 for - of를 사용해 간결하게 바꾼 코드이다. 파이썬의 for와 비슷하다.

const numbers = [10, 20, 30, 40, 50];

for (let number in numbers) {
  console.log(number);
}

// output:
// 10
// 20
// 30
// 40
// 50

그렇다면 for - in 은 무엇일까? 바로 오브젝트에서 key를 가져오는 것이다. 

line 7~9의 console.log는 doggy 오브젝트에서 키, 밸류, 키와 밸류 모두를 가져오는 다양한 방법을 보여준다.

그리고 가장 아래의 for - in 문은 for - in이 오브젝트에서 key 값을 가져온다는 것을 보여주기 위한 예시이다.

const doggy = {
  name: "멍멍이",
  sound: "멍멍",
  age: 2
};

console.log(Object.entries(doggy));  // dict.items() in python
console.log(Object.keys(doggy));     // dict.keys() in python
console.log(Object.values(doggy));   // dict.values() in python

// output:
// [Array[2], Array[2], Array[2]] <- iterate할 수 있는 배열
// ["name", "sound", "age"]
// ["멍멍이", "멍멍", 2]

for (let key in doggy) {
  console.log(`${key}: ${doggy[key]}`);
}

// output:
// name: 멍멍이
// sound: 멍멍
// age: 2

array라는 배열이 있고, 이 배열 안에 있는 모든 값들의 제곱을 얻어서 squared라는 배열에 저장하려고 한다.

이럴 때 여러 가지 방법이 있다.

1. for문

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const squared = [];
for (let i = 0; i < array.length; i++) {
  squared.push(array[i] * array[i]);
}

2. forEach문

- forEach는 매개변수에 함수를 넣어서, 배열에서 하나씩 꺼내 함수에 집어넣는다. forEach의 리턴 값은 undefined이므로, 함수 실행 결과를 새로운 배열에 저장하고 싶으면 squared.push()처럼 함수 내에서 넣어주어야 한다.

- 주석 처리한 부분은 화살표 함수로 쓴 것

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const squared = [];

array.forEach(function(n) {
  squared.push(n * n);
});

/*
array.forEach(n => {
  squared.push(n * n);
});
*/

3. map

- map은 배열에서 하나씩 꺼내서 괄호 안에 있는 함수에 집어넣은 결과를 리턴한다.

- 아래 코드처럼 화살표 함수를 사용해 square 함수를 정의한 후, map에 square 함수를 콜백으로 넣어줄 수도 있고,

- 간결하게 쓰려면 주석처럼 square 함수를 따로 정의 안 하고 바로 map 안에 넣어줄 수도 있다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const square = n => n * n;
const squared = array.map(square);

// const squared = array.map(n => n * n);

2020. 07. 06

자바스크립트는 Java, Python와는 달리 비동기 언어이다.

쉽게 말해서 동기 방식은 시킨 대로 일을 하는 것이고, 비동기 방식은 동시에 일을 처리하고 대기하는 것이다.

즉, 내가 시킨 대로 일을 하지 않고 처리 시간이 짧은 일 먼저 끝나는 등 순서가 뒤죽박죽이 될 수 있다는 점을 유의해야 한다. 

예를 들어 1) console.log(1); 2) 파일 스트림 열어서 읽기 3) console.log(2);

이렇게 코딩을 했는데 1->3->2 이렇게 결과가 나올 수 있다.

이런 성질 때문에 에러가 발생할 수 있는데 이것은

동기적 함수

callback

promise

async / await 등으로 동기적으로 코딩할 수 있다.

객체의 비구조화 할당 혹은 구조분해 할당이라는 심오한 이름을 갖고있는 이것은 쉽게 말해서 구조체 안의 여러 값들을 불러올 때 짧게 쓰자는 것이다.

const myDog = {
    name: '멍멍이',
    age: 3,
    character: 귀여움
}

위와 같은 객체가 있을 때, 함수 내에서 객체의 속성(이름, 나이, 성격)을 불러오고 싶으면 myDog.name, myDog.age, myDog.character 등으로 불러와야 한다.

하지만 어차피 myDog의 값을 불러오는 건데, 계속 같은 타자를 치는 것은 귀찮은 일이다. 이럴때 짧게 불러올수있는 것이 바로 이 심오한 이름의 비구조화할당 혹은 구조분해할당이다.

const myDog = {
  name: "멍멍이",
  age: 3,
  character: "귀여움"
};


// non 비구조화 할당
function print_1(dog) {
  console.log(
    `우리 강아지 이름은 ${dog.name}, 나이는 ${dog.age}, 성격은 ${dog.character}`
  );
}


// 비구조화할당 방법1
function print_2(dog) {
  const { name, age, character } = dog;
  console.log(`우리 강아지 이름은 ${name}, 나이는 ${age}, 성격은 ${character}`);
}


// 비구조화할당 방법2
function print_3({ name, age, character }) {
  console.log(`우리 강아지 이름은 ${name}, 나이는 ${age}, 성격은 ${character}`);
}



// 비구조화할당 방법3
const { name, age, character } = myDog;
console.log(`우리 강아지 이름은 ${name}, 나이는 ${age}, 성격은 ${character}`);

2020. 06. 11

자바스크립트에서의 배열의 유연함을 구경하자.

let a = [1, "2", [3]];

a.length; // 3
a[0] === 1; // 결과: true. js에서 배열은 인덱스로 접근한다.
a[2][0] === 3; // 결과: true. 이차원 배열도 마찬가지이다.
a[3] = 4;  // 배열에는 미리 정해진 크기가 없으며, 언제든지 자유자재로 추가할 수 있다.


/* 가능은 하지만 사용에 주의해야 하는 것들 */
a[5] = 5; 
a.length  // 결과:5. 한 인덱스를 건너뛰고 추가하는 것도 가능하다. 
a[4];  // 결과: undefined. 건너뛴 배열의 값은 undefined지만, a[4] = undefined처럼 직접 대입한 것과 완벽히 같지는 않다고 한다.

a["last"] = 6;  // map처럼 인덱스를 문자열로 쓰는 것이 가능하다. 단, length는 늘어나지 않는다.
/****************************************/

let b = [ ];
b["99"] = 0;
b.length;  // 결과: 100. key로 10진수 모양의 문자열을 넣으면 숫자로 들어간다.

* 본 포스팅은 YOU DON'T KNOW JS를 요약한 것이며, 공부한 것을 정리하기 위한 목적임.

2020. 06. 11

1. 자바스크립트(ES6)에는 7가지 내장 타입이 존재한다.

• null
• undefined
• boolean
• number
• string
• object
• symbol

symbol을 제외한 타입을 Primitive Type(원시 타입)이라고 부른다.

2. 값의 타입이 null인지 알아보기 위해서는

let a = null;
!a && typeof a === "object"; // true

그냥 typeof null은 "object"이기 때문이다. (버그 비스무리한 것이라고 한다.)

3. 자바스크립트에서 값은 타입이 존재하지만, 변수에는 타입이 없다. 변수에는 어떠한 타입의 값이라도 넣을 수 있다.

let a = 1;
a = "1";

a라는 변수에 숫자를 넣었다가 문자를 넣었다가 하는 것이 가능하다.

4. 자바스크립트에서 undefined는 undefined or undeclared 이다.

// debug.js에 let DEBUG = true; 라고 정의되어 있음.

if (DEBUG) {
	console.log("디버깅을 시작합니다.");
}  // 에러 발생

if (typeof DEBUG !== "undefined") {
	console.log("디버깅을 진짜 시작합니다.");
}  // 올바른 방법

if (typeof atob === "undefined") {
	atob = function() {
    	........
    }
} //  이것을 이용하면 내장 API 존재유무 확인도 가능

* 본 포스팅은 YOU DON'T KNOW JS를 요약한 것이며, 공부한 것을 정리하기 위함임.