자바스크립트 문법정리 10 [ for in, for of]
2022. 5. 25. 01:26
자바스크립트
for에는 여러가지 자료형들이 있습니다. 1.그냥 for 반복문 (어려움) 2.forEach() 반복문 (Array 전용) 3.for in 반복문 (Object 전용) 4.for of 반복문(iterable 전용) 반복문은 용도가 2개라고 보시면 됩니다. 1. 코드 단순 반복 2. 자료형에 담긴 자료들을 하나씩 꺼내고 싶을 때 var 오브젝트 = { name : 'Kim', age : 30 }; for (var key in 오브젝트) { console.log(오브젝트[key]); } 이렇게하면 반복문은 오브젝트라는 자료 내부 데이터 갯수만큼 반복하게 되며 반복할 때마다 key라는 변수는 name, age 이렇게 데이터의 key값이 됩니다. 그럼 반복시마다 변경되는 key 값을 이용하면 오브젝트 내의 자료..
자바스크립트 문법정리 9 [async/await]
2022. 5. 25. 01:17
자바스크립트
async 키워드를 쓰면 Promise 오브젝트가 저절로 생성됩니다. 그럼 이 함수 자체가 Promise가 되어버립니다. 그래서 이 함수를 실행할 때 뒤에 then을 붙일 수 있습니다. Promise니까요. pomise 쓰기 싫으면 이거 쓰면 됌! async function 더하기(){ 1 + 1 ; } //1+1이 성공하면 아래 함수 실행 더하기().then(function(){ console.log('더하기 성공했어요') }); 1+1 값을 함수로 뱉고싶다면 return 으로 줘서 결과를 인자로 뱉어내주면됍니다. async function 더하기(){ return 1 + 1 ; } 더하기().then(function(결과){ console.log(결과) }); then함수 강제로 실패시키는 방법 as..
자바스크립트 문법정리 8 [ promise ]
2022. 5. 22. 03:26
자바스크립트
Promise를 들어가기전에 여러개의 콜백함수를 통해 고차함수를 만들게되면 첫째함수(()=>{ 둘째함수(()=>{ 셋째함수(()=>{ }) }) }) 이런식으로 어지러워지게되는데 코드가 더러워지는 콜백함수의 문제점을 해결하기 위해 나온게 바로 Promise 코드 디자인패턴 Promise가 어떻게 돌아가는지 봅시다 저런 위에 어지러운 코드가 var 프로미스 = new Promise() 프로미스 .then(function(){//프로미스가 성공일 경우 실행할 코드 }) .then(function(){ })//이렇게 하면 옆으로 길어지지않아서 좋음\ 이렇게 간단하게바뀝니다 또 몇개의 메소드가있는데 var 프로미스 = new Promise() 프로미스.catch(function(error){//실패할경우 }) ..
자바스크립트 문법정리 7 [구조 분해 할당 (Destructuring) ]
2022. 5. 22. 03:15
자바스크립트
Destructuring이란? 자리맞추기라고 생각하면됍니다. 예제를 통해 살펴봅시다. 아주 중요한 자료들을 전부 변수에 담으려면? var arr= [2,3,4]; var [a,b,c] = [2,3,4];//변수 세개를 만드는데 2랑 3이랑 4라는데이터를 집어넣어주세요 arr destructuring 할때 몇개를 빼먹는다면? var [a,b,c = 10] = [2,3];//등호로 기본값 지정가능 //이렇게하면 c는 10이나옴 or 아예 아무것도 할당을안하면 [] 이렇게 undifined라고뜸 obj 데이터를 꺼내 변수에 담으려면? var obj = {name: 'kim' , age: 30}; var name = obj.name; var age = obj.age; 자리맞추기라고했는데 어떤거냐면 var { n..
자바스크립트 문법정리 6 [ getter, setter]
2022. 5. 22. 02:37
자바스크립트
원래 처음에 객체 만들때 어떻게함? let 사람 = { name: 'park', age: 30, nextAge(){//내년 age 아는 방법 this ==사람 object return this.age +1; }, setAge(나이){//나이수정하는 함수 return this.age = parseInt(나이); } } 사람.age; 사람.nextAge();//그냥 위에꺼에 +1하면 더하면되는데 왜만들었음? //1.object 자료가 복잡할때 이득 //2.object 자료 수정시 편리,실수방지,관리가능 ex)데이터 수정시 미리 검사가능1.문자열을 입력했을수도있잖아요? 사람.setAge(20)//데이터 수정해주는 함수를 제작 이렇게 만듬 But 복잡한소괄호가 싫다면 let 사람2 = { name: 'park'..
자바스크립트 문법정리 5 [constructor ]
2022. 5. 22. 02:28
자바스크립트
constructor(기계)란? var 학생1 = { name : 'Kim', age : 15 }; var 학생2 = { name : 'Park', age : 15 }; ... 학생 출석부 이렇게하드코딩하면 힘들겠죠? 그래서 아래처럼 함수 기계를 만들어서 안에 값들을 집어넣습니다. function 기계(){ this.name='Kim', this.age=15, sayHi :function(){ console.log('안녕하세요' + this.name + '입니다') } } //this는 새로 생성되는 object를 뜻함 //this.age=15; //새로 생성되는 oject 에 값 부여가능 function 기계(이름,나이){ this.name=이름, this.age=나이, this.sayHi =funct..