기초/JavaScript에 해당하는 글 7

  1. Promise, async/await 2021.09.08

    Promise? Promise : 내용이 실행은 되었지만 아직 결과를 아직 반환하지 않은 객체 → 실행된 결과를 가지고 있다가 Then을 붙이면 결과를 반환한다. 실행이 완료되지 않은 경우에는 완료된 이후에 Then 내부 함수가 실행된다. 프로미스는 어떤 동작을 하는 것. (어떤 파일을 읽어라, 어디에 어떤 요청을 보내고 와라) 언제나 실패할 가능성을 염두에 두어야 함. 성공하면 resolve를 호출, 실패하면 reject를 호출한다. const condition = true; //true면 resolve, false면 reject const promise = new Promise((resolve, reject) => { if (condition){ resolve("성공"); } else { reject..


  2. 구조분해 할당 2021.09.06

    https://ko.javascript.info/destructuring-assignment 구조분해 할당? (destructing assignment) = 객체나 배열을 변수로 '분해'할 수 있게 해 주는 문법. const example = { a: 123, b: { c: 135, d: 146 } }; const a = example.a; const d = example.b.d; 위처럼 속성 이름을 변수로 만들어 주는 경우가 있는데, 값들을 꺼내기만을 위해서 example을 선언해 주고 있기 때문에 코드가 깔끔하지 않을 수 있움.. 이럴 땐 아래처럼 구조분해 할당을 활용할 수 있다. example에서 필요한 정보가 들어 있는 값들의 자리에 맞게 변수를 선언해 줄 수 있다. const { a, b: {d..


  3. 화살표 함수와 function 2021.09.06

    function add1(x,y) { return x + y; } const add2 = (x,y) => { return x + y; } 위의 함수 add1은 아래의 add2처럼 간단하게 작성할 수 있다. 함수의 이름은 변수명으로 적어 주고, function 자체는 =>로 대체된다. add2처럼 중괄호 다음에 바로 return이 나오면 중괄호는 생략할 수 있다. const add2 = (x,y) => { return x + y; } const add3 = (x,y) => x+y; 이렇게! add1, add2, add3는 결국 다 같은 함수를 나타낸다. 헷갈릴 수 있기 때문에 return값은 한 번 더 괄호로 묶어 주기도 한다. function not1(x) { return !x; } const not2 ..


  4. var, const, let 2021.09.06

    var vs const, let ES2015부터는 var를 const와 let이 대체한다. 무슨 차이인가? → 블록 스코프(var은 함수 스코프) if, for, while등의 중괄호({}) 안을 블록이라고 한다. if (true) { var x = 3; } console.log(x); //3 출력 if (true) { const y = 3; } console.log(y); //ReferenceError: y is not defined x : 블록은 빠져나갈 수 있지만, function의 중괄호 밖으로는 빠져나갈 수 없다. = 함수 스코프를 존중한다. y : 블록을 빠져나갈 수 없다. = 블록 스코프를 존중한다. const와 let의 차이? const a = 3; a = '5'; //Error const..


  5. 호출 스택, 이벤트 루프 2021.09.02

    코드가 어떻게 실행될 지 호출 스택을 그려 보면 쉽게 파악할 수 있다. 호출 스택은 자바스크립트가 동기적으로 어떻게 작동하는지 파악가능하게 해 줌. 호출 스택 : 맨 아래에 가상의 전역 컨텍스트(크롬에서는 Anonymous라고 함)가 있고, 함수 호출 순서대로 아래에서부터 쌓이며 실행은 역순으로 된다. 함수 실행이 완료되면 스택에서 빠진다. LIFO 구조라서 스택이라고 불린다. stack : 밑에서부터 쌓이고 위에서부터 꺼낼 수 있도록 하는 방식. 호출 스택은 실행 콘텍스트와 밀접한 연관이 있다. 하지만 호출스택만으로는 자바스크립트의 코드 실행순서를 모두 설명할 수 없다. 비동기함수 때문! 대표적으로 setTimeout 이 있다. = 일정 시간 이후에 특정 함수를 실행시키도록 하는 명령어 코드가 백그라운..


  6. 객체 지향 프로그래밍 2021.06.23

    Object Oriented Programming, OOP 객체 지향 프로그래밍. 프로그래밍을 한다 = 데이터 + 데이터를 처리하는 것 데이터를 사용하기 좋게 정리하는 도구 - array, object javascript에서 처리하는 코드가 많아지면 서로 연관되는 것들을 구분하여 그룹핑하기 위해서 각종 내장함수를 사용한다. 함수는 처리해야할 일에 대한 어떠한 정보를 담고 있는 일종의 구문(statement)이자 값이다. 함수를 변수에 넣을 수 있다 = 값이다. var j = function f1() { console.log(1 + 1); console.log(1 + 2); } var i = if(true){ console.log(1); } var k = while(true){ console.log(10)..


  7. JavaScript 객체 2021.06.23

    객체(Object)는... 추상적이고 철학적인 개념이긴 하지만 기능 중심으로 생각하면 쉽다~ Object vs Array 배열은 객체와 함께 정보를 정리정돈하는 수납수단이다. 정보를 정리정돈할 때 순서에 따라서이고 배열의 리터럴은 대괄호([]). 배열에서 각각의 정보들은 고유한 식별자가 있고 그 식별자는 숫자이다. → Array 순서가 없이 정보를 저장하는 최적의 수납수단, 리터럴은 중괄호({}). 숫자로 식별자를 주지 않고 이름으로 줄 수 있다. → Object var members = ["rouie", "effy", "doodoo", "moro"]; console.log(members[2]); //doodoo 출력 var roles = { bird: "rouie", cat: "effy", human:..