IT&컴퓨터공학/Javascript
-
[Javascript] 구조 분해 할당 ( destructuring )IT&컴퓨터공학/Javascript 2021. 3. 10. 13:58
Vuex 를 공부하다가 destructuring에 대한 내용이 나와서 정리해보려고한다. 하나를 공부하는데 필요한 지식이 너무많아서 꼬리에 꼬리를 물고 계속 공부중이다 ! ( 재밌긴 하다 ) Destructuring 중 객체 구조 분해 할당 let obj = { name : "devlog", age : 1 }; let { name, age } = obj; // { "devlog" , 1 } 객체를 구조분해 할 때 주의해야 할 것은 할당 연산자의 왼쪽에 객체리터럴이 와야 하고,할당 연산자의 오른쪽에 오는 값이 null이나 undefined여서는 안된다는 것이다. Vuex - action 예시 // store/index.js const store = new Vuex.Store({ state: { count: ..
-
[Javascript] 문자열 그리고 쓸모있는 문자열 메소드IT&컴퓨터공학/Javascript 2021. 1. 23. 22:57
작은따옴표 , 큰 따옴표, 백틱의 차이점 작은따옴표와 큰 따옴표는 큰 차이가 없다. let name ="Molly"; console.log(`HI ! my dog's name is ${name}`); 백틱(` `)의 경우 , 위에서 볼 수 있듯이 ${ } 를 이용해서 변수를 넣을 때 자주 사용한다. 문자열 메소드 str.length ( 메소드는 아니지만 ) : 문자열의 길이 let name ="Molly"; console.log(name.length); // 5 str.toUpperCase() : 문자에있는 모든 소문자를 대문자로 바꿔주는 메소드 let name ="Molly"; name = name.toUpperCase(); console.log(name); // MOLLY str.toLowerCase..
-
[Javascript] 생성자 함수란 ?IT&컴퓨터공학/Javascript 2021. 1. 23. 22:21
객체 리터럴 let user={ name : 'Mike', age : 30, } 객체 리터럴은 위와 같이 만들 수 있다. 그러나 개발을 하다보면 위와같은 객체 여러개를 만들어야 하는 경우가 발생한다. 예를들어 회원 관리를 위해 위와같은 user 객체 여러개를 만들어야 하는 경우가 생겼을때, 생성자 함수를 이용한다. 생성자 함수 function User(name,age){ this.name = name; this.age = age; } let user1 = new User('Mike',30); let user2 = new User('Jake',20); let user3 = new User('Jain',25); let user4 = new User('Emily',40); 생성자 함수는 앞글자를 대문자로 쓴다..
-
[Javascript] if 문으로 undefined / null 체크 방법IT&컴퓨터공학/Javascript 2021. 1. 23. 20:28
undefined 와 null 의 차이점 - null 은 의도적으로 null 을 할당한 것으로 , "값이 없음" 을 나타낸다. 때문에 null 의 변수 타입은 object 이다 - undefined 는 변수를 선언하고 값을 할당하기 전의 형태이다. 즉, "값이 할당되지않음" 을 나타낸다. undefined & null 체크 방법 var a; if(a===undefined) console.log("^^"); // 따옴표를 쓰지 않아야 한다 ! // a==='undefined' 라고 쓰면 오류 ! var a=null; if(a===null) console.log("^^"); - 기본적으로 따옴표를 쓰지 않고 사용한다
-
[Javascript] async 와 awaitIT&컴퓨터공학/Javascript 2021. 1. 22. 14:25
Promise chaining 대신 동기 처리를 더 간단하게 할 수 있는 방법 async async function getData(){ return 'data'; } getData() .then((Data)=>console.log(Data)) .catch( (err) => console.log(err)); - 함수앞에 async 를 붙이면 이 함수는 Promise 를 반환한다. Promise 가 아닌것을 반환하더라고 Promise 로 감싸서 반환한다. await function asyncItem() { return new Promise((resolve, reject) => { var item = [1, 2, 3]; resolve(item); }); } async function logItems() { v..
-
[Javascript] 콜백지옥을 해결할 수 있는 PromiseIT&컴퓨터공학/Javascript 2021. 1. 21. 15:07
Promise : 콜백함수로 비동기 처리를 하는 경우 앞에서 살펴봤듯이 콜백지옥이 만들어져 가독성이 떨어지고 디버깅하는데 어려움이있다. 때문에 등장한게 바로 Promise 다 ! Promise 는 콜백함수를 대신하여 비동기를 간편하게 처리할 수 있도록 도와주는 자바스크립트 객체다. const promise = new Promise( (resolve,reject) => { // 네트워크 통신, 파일을 읽어오는 등의 heavy 한 작업들은 // 동기적으로 작업하면 밑에 코드가 실행이 안돼서 시간이 오래걸리므로 // 비동기적으로 구현해야한다 console.log('doing something...'); }); 이렇게 코드를 구현하면 콘솔에 'doing something' 이 출력되는데 , 즉 , Promise..
-
[Javascript] callback 함수와 callback 지옥IT&컴퓨터공학/Javascript 2021. 1. 21. 13:10
Javascript 는 기본적으로 synchronous ( 동기적 ) 이다 즉 , *호이스팅 되고나서 순서에 따라 하나하나씩 실행된다 *호이스팅 : var 변수 / function declaration 들이 자동으로 제일 위로 올라가는 것 callback function 자바스크립트의 asynchronous ( 비동기성 ) 을 표현하는 가장 일반적인 기법 → 파라미터로 함수를 전달하는 함수 Synchronous callback console.log('1'); setTimeout( () => console.log('2'), 1000 ); // 1초뒤에 2를 출력해라 console.log('3'); function printImmediately(print){ print(); } printImmediately..
-
[Javascript] var 변수의 특징과 const, let 의 차이점IT&컴퓨터공학/Javascript 2021. 1. 18. 22:46
var 1. function 단위의 scope 를 가진다. var str = "hello !"; function func(){ var str = "hello in function !" console.log(str); } console.log(str); // 결과 : hello ! func(); // 결과 : hello in function ! - 위의 코드에서 볼 수 있듯이 function 안에있는 var 변수의 유효범위는 ' function 내 ' 이다 var str = "hello !"; if(true){ var str = "hello in if sentence!"; } console.log(str); // 결과 : hello in if sentence! - var 변수의 유효범위는 { } 안이 아니..