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}`);

'프론트엔드 > JavaScript' 카테고리의 다른 글

(Javascript) for, for - of, for - in  (0) 2020.07.15
(Javascript) for, forEach, map  (0) 2020.07.11
(JavaScript) 동기와 비동기  (0) 2020.07.06
(JavaScript) 배열  (0) 2020.06.11
(JavaScript) 변수의 타입  (0) 2020.06.11

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를 요약한 것이며, 공부한 것을 정리하기 위함임.

+ Recent posts