본문 바로가기

Front-end41

[JavaScript] 동기, 비동기 동기/ 비동기 차이 스레드는 코드를 한 줄 한 줄 실행시켜준다. 동기적 방식으로 처리한다는 것은 단일 스레드를 이용하여 taskA, taskB, teskC가 있다면 동기방식은 세 일을 하나씩 차례로 수행한다. -> 동기적 방식의 문제점 : 하나의 작업이 오래걸린다면 모든 작업이 그때문에 올스탑되기 때문에 전반적인 흐름이 느려진다. 멀티스레드 : 스레드를 여러개 사용해서 일들을 동시에 해결함 하지만 자바스크립트는 이를 지원하지 않는다. function one(){ return 1; } function two(){ return ont() + 1; } function three(){ return two() + 1; } 위 함수들은 동기함수이므로 그림과 같이 callstack에 함수들이 스택형식으로 쌓이고 차례.. 2023. 7. 18.
[JavaScript] spread 연산자 객체에 사용 객체를 여러개 생성할 때 프로퍼티가 겹치는 경우 유용하게 사용할 수 있는 기능이다. const cookie = { base : "cookie"; madeIn : "korea"; }; const chocochipCookie = { ...cookie, toping : "chocochip"; }; 새로운 객체에 ...객체명을 프로퍼티에 넣으면 해당 객체에 있는 프로퍼티가 자동으로 생성된다. 배열에 사용 const list1 = ["a","b"]; const list2 = ["c","d","e"]; const list3 = [...list1,"s",...list2];//["a","b","s","c","d","e"]; 앞서 배열을 concat로 합치는 것을 했었는데, spread로 이와 같은 기능을 .. 2023. 7. 17.
[JavaScript] 비 구조화 할당 변수에 배열, 객체에 있는 값들을 간단하게 넣을 수 있는 기능이다. let arr = ["one", " two", "three"]; let one1 = "one"; let two2 = "two"; let three3 = "three"; //////////////////////////////////////////// let[one1, two2, three3] = arr //비구조화 할당 빗금친 부분의 위 아래 코드가 같은 기능을 한다. 이렇게 비구조화 할당으로 간단하게 정리할 수 있다. let [one1,two2,three3] = ["one","two","three"]; 위와 같은 방식처럼 따로 선언하지 않고도 가능하다. swap에 활용 let a = 9; let b = 7; [a,b] = [b,a]; 객.. 2023. 7. 17.
[JavaScript] 조건문 심화 includes를 쓰면 기존 방법보다 더 간단하게 조건문을 쓸 수 있다. function Food(food){ if(food === "불고기"|| food === "비빔밥" || food === "떡볶이"){ return true; } return false; } function Food(food){ if(["불고기","떡볶이","비빔밥"].includes(food)){ return true; } return false; } 또한 객체를 활용하면 여러 조건에 따른 각각의 명령어가 있을 때 조건문을 다루기 편리하다. const meal = { 한식 : "불고기", 중식 : "짜장면", 일식 : "초밥" }; const getmeal = (meal)=>{ return meal[meal] || "없음"; };.. 2023. 7. 17.
[JavaScript] 단락회로 평가 단락회로평가는 &&이나 || 연산에서 두 요소중에 하나만 봐도 결과값이 결정되는 것을 말한다. if(조건1 || 조건2); 이 경우 조건 1이 참이면 무조건 참이다. if(조건1 && 조건2) 이 경우는 조건 1이 거짓이면 무조건 거짓이다. 단락회로는 함수에서 유용하게 사용된다. const getAge = (person) => { return person && person.name; }; 이렇게 하면 person이 널일경우 에러가 발생하지 않는다. const getAge = (person) => { const name = person && person.name; return name || "객체가 아닙니다."; }; 이렇게 하면 name이 faulty일 때 객체가 아닙니다가 리턴된다. 2023. 7. 17.
[JavaScript] 삼항 연산자 기본 형태 조건 ? 조건이 참일 때 : 조건이 거짓일 때 조건에 따라 글 출력하기 a가 양수일 때와 음수일 때로 나뉘어지는 조건문 let a = 3; if(a>0){ console.log("양수"); } else{ console.log("음수"); } 이는 삼항연산자로 더 간단하게 표시할 수 있다. let a = 3; a>=0 ? console.log("양수") : console.log("음수"); 변수에 값 넣기 let k = a>0 ? 4 : 6 a가 양수이면 k에 4를 넣고 아니면 6을 넣는다. 중첩 삼항연산자는 가독성이 떨어져 잘 쓰지 않는다. 2023. 7. 16.