JS (Java Script) 80

반복문 for ~ in , for ~ of __ enumerable 한가? iterable 한가?

일단 enumerable과, iterable에 대해 알아보자. 1. enumerable 셀수 있는가 true 혹은 false로 말해줌.. 2. iterable 순회 가능한 for ( let a in 대상 ) 반복문 _____ (object 에서 쓰인다. ) 1. enumerable 한 것만 반복해 준다. 👉 enumerable 한 것인지 확인하는 방법 👀👉👉 Object.getOwnPropertyDescriptor(obj, key).enumerable let obj = {name : 'kim', age : 30}; Object.getOwnPropertyDescriptor(obj, 'name') {value: 'kim', writable: true, enumerable: true, configurable:..

JS (Java Script) 2023.09.13

프로미스 패턴 없이 프로미스 만들기. async 와 await

async 함수 앞에 붙이면, 함수 실행후 promise 오브젝트가 남는다. 화살표 함수 앞에다 붙일수도 있다. 프로미스 패턴을 만들지 않고도 프로미스를 사용할 수 있다. 👉 async 함수앞에 사용하면 언제나 프라미스를 반환한다. 👉 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스를 반환한다. 프로미스 패턴과는 다르게 함수를 실행시켜 주어야 작동한다. 단점 __ 성공했을 경우만 가능. 실패한 경우에는 강제로 설정하는 방법이 있기는 함. async function plue(){ return (10

JS (Java Script) 2023.09.13

ES6 프로미스 패턴 !!("콜백지옥" 으로 부터 탈출)

콜백함수 간단하게 말하면 어떤 함수의 인자 값으로 함수를 호출하는 거다. 파라미터와 인자를 혼동할 수 있는데, 파라미터는 함수를 정의할 때에 선언할 때에 쓰이는 것. 전달인자는 함수를 호출 할 때에 전달되는 값. function test (a){ console.log('테스트' + a) //테스트시작 } test("시작") 위 예시에서는 a가 파라미터, "시작" 이라는 문자가 전달인자 라고 볼 수 있겟다. 길고 복잡한 코드를 작성하다 보면, 콜백함수를 보기 어렵게 작성하게 될 수 있다. 예를 들어, 데이터를 불러온 다음에 setTimeout 함수가 실행되고, 그 다음에 어떤 데이터를 다시 불러온 다음에 이벤트리스너가 동작하도록 , 그리고 그 이벤트 리스너가 동작하면 또다른 setTimeout() 함수가 ..

JS (Java Script) 2023.09.13

자바스크립트 동기 ? 비동기? __ 코드가 웹 브라우저 에서 동작하는 과정.(씽글쓰레드, 멀티쓰레드 찍먹하기)

웹브라우저. 왜 중요한가? 대부분 프로그래밍 언어들은 운영체제(operating system, os ) 에서 실행되지만, 자바스크립트는 브라우저에서 HTML, CSS 와 함께 실행된다. 내가 짠 코드를 웹브라우저가 실행시켜 준다는 말이다. 그래서 웹브라우저 환경을 고려할 때 효율적 프로그래밍이 가능한 것이다. 참고. https://frontj.com/entry/1-Javascript%EC%99%80-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80 1. Javascript와 브라우저 Javascript 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 언어이며, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpre..

JS (Java Script) 2023.09.12

destructuring 문법__ 배열의 요소, 오브젝트 요소 변수에 담기.

array의 경우 원래는 배열의 요소를 담으려면 인덱스를 호출해야 했다. 배열의 몇번째 요소 꺼내서 변수에 담아줘 ~~이런식 그런데 이 destructuring 문법을 이용하면 좀더 편하게 많은 요소들을 담을 수 있다. let arr = [2,3,4]; // 원래 배열의 요소를 변수에 담으려면 인덱스를 호출해야 했다. let t = arr[0]; //destructuring 문법을 이용하면 이렇다. let [a,b,c] = arr; console.log(a, b, c ) //출력값은 2 3 4 //디폴트 값 지정도 가능하다. let [d,e,f, g=222]= arr; console.log(a,b,c,g ) //2,3,4,222 값이 없을 경우에는 undefined를 호출한다. object 의 경우 아까..

JS (Java Script) 2023.09.12

.js 파일 연결하기 (src) (export, import)

1. script 태그에 src로 파일 위치 적어주는 방법 //library.js 파일 let c = 30; export default c; 좀더 자세히 말하면 순서가 이렇다. 1️⃣ js 파일에 변수 c를 선언하고 값을 할당한다. 2️⃣ js 파일에서 변수 c를 export 해준다. html 파일에서 사용할 수 있도록! (export default 사용.) 3️⃣ html 파일에서 변수 c를 가져온다 . import 해준다. 이때 변수 이름은 마음대로 작성해도 된다. ❓❓ export default 로 js 파일에서 내보냈기 때문에 가능하다. export default 는 한번만 쓸 수 있기 때문에 값이 1개밖에 없다. 2) export {} //html 파일 //library.js 파일 let a =..

JS (Java Script) 2023.09.12

object 데이터 다룰때 함수 사용하기. (getter, setter)

object 데이터를 다루는 함수 만드는 이유.. object 자료구조가 복잡할때 이득. 꺼내사용하기 좋다. obj 의 내부에 있는 변수들을 건드리지 않아 실수 방지 할수 있다. 자료 수정 혹은 자료를 다룰때 오류를 미리 방지하는 함수를 만들어 둘 수 있다. let 사람 = { name : 'park', age : 30, setAge(a){ this.age = parseInt(a); } } 사람.setAge(20); console.log(사람) //{name: 'park', age: 20, setAge: ƒ} 사람.age = 20 으로 할수도 있지만, 데이터를 수정하기에 용이하지 않다. 그래서 함수를 만들어서 속성값을 변경해 보자 함수로 속성값을 변경하면 실수들을 미리 방지하기에 용이하다. 예를들어 숫자..

JS (Java Script) 2023.09.07

extends() 와 super()

extends() 옛날 개발자들이 extends라는 문법을 만들었다. 이미 있는 class와 유사한 class를 하나 더 만들고 싶을때 사용한다. (복사와 비슷하지만 정확히 말하면 상속하는것. ) 그냥 class하나 더 만들어도 되지만, 복사/상속 할 값이 많은 경우 extends 로 만드는 것이 더 낫기 때문에 사용.. class 할아버지{ constructor (name, name2){ this.성 = 'kim'; this.이름 = name; this.이름2 = name2; } saha(){ console.log('안녕하시렵니까 할아버지'); } }; let 할아버지1 = new 할아버지('만덕', '만득'); console.log(할아버지1); //할아버지 라는 class와 비슷하게 하나 더 만들고..

JS (Java Script) 2023.09.07

class ES6 문법 상속기능

class constructor , prototype 을 이용한 상속기능을 만들 수 있게 도와주는 문법. 기존 function부터 시작하던 문법과 기능상 차이는 크게 없고 약간 더 보기쉽게 표현해줄 뿐. class 속성 기능 사용 방법 1. constructor를 만들 때 (constructor를 만들기 위해서는 함수를 사용하던지 혹은 class를 사용한다. ) 만약 부모요소에 함수를 추가하고 싶다면 ? 부모요소의 constructor 안에다 작성할 수 있다. __장점!! 새로 생성되는 자식은 sayaHiho()를 직접 가지게 됨. 자유롭게씀. class Parents { constructor(){ this.name = 'kim', this.sayHiho = function(){ console.log('..

JS (Java Script) 2023.09.07

Object.create() ES5 문법. 상속기능 구현.

let a = Object.create(b) 이렇게 하면, a는 b의 모든 요소를 물려받는다. a의 프로토타입으로 b를 넣는 방법으로! object 에서 부모가 가진 요소를 그대로 물려받는 방법 1. constructor / 2.Object.create() / 3.class var 부모= { name : 'kim', age: 50}; var 자식 = Object.create(부모); console.log(자식); //{} 출력됨 console.log(자식.name, 자식.age); //kim 50 출력됨. 자식.age = 20; console.log(자식); //20 출력 //직접 할당한 것임으로. var 손자 = Object.create(자식); console.log(손자.name, 손자.age) //..

JS (Java Script) 2023.09.07