FE/JavaScript 9

Modern JS - 비동기 처리

* JavaScript 비동기 처리 - 동기적 작업: 하나의 작업이 끝날 때까지 기다리는 동안 다른 작업은 중지상태가 되므로 다른 작업을 진행할 수 없습니다. 먼저 진행된 작업이 끝난 후 다음 예정된 작업이 진행가능합니다. - 비동기적 작업: 하나의 작업이 먼저 진행된다 하더라도 동시에 여러 가지 작업을 처리가 가능하므로 대기상태에서 다른 함수도 호출이 가능합니다. function work() { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); }, 0); } console.log('작업 시작!'); ..

FE/JavaScript 2022.01.05

Modern JS - 유용한 JS 문법

* 기본 파라미터 사용법 function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); // NaN - 이렇게 사용을 하면 Not a Number, undefined 가 나와버립니다. // function 사용 function calculateCircleArea(r = 1) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); // 3.141592653589793 // arrow function 사용 const calculateCircleArea = (r=1) => Ma..

FE/JavaScript 2022.01.03

Modern JS - 입문

* 변수 사용 - 기존 JS qustnsms var, let, const 를 사용하였습니다. - 모던 JS에서는 let, const를 사용하는것을 권장하며, var 사용은 지양하는것을 권장한다고 합니다. * JS 객체 비구조화 할당 - 객체 비구조화 할당 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성 할 수 있습니다. const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero) { const { alias, name, actor } = hero; cons..

FE/JavaScript 2022.01.03

JS기본 #2

JS 변수 1. let: 블록 유효 범위 변수를 선언 할 수 있습니다 // myLetVariable는 여기에서 보이지 *않습니다* for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { // myLetVariable는 여기에서 유효합니다 } // myLetVariable는 여기에서 보이지 *않습니다* 2. const: 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. const Pi = 3.14; // 변수 Pi 설정 Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생. 3. var: 가장 일반적인 변수 선언 키워드, 변수가 선언 된 함수 블록에서 사용 할 수 있습니다. // myVarVariable는 여기에서 사..

FE/JavaScript 2021.07.08

class & object

class : template에 속함 [- ES6에서 추가 -] object: 클래스에 데이터를 넣어서 사용하는것. // class 선언 방식 class Person{ constructor(name, age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name}: hello!`); } } //object create const userName = new Person("userName1", 20); console.log(userName.name); console.log(userName.age); userName.speak(); ==> class, object 사용예제 // Getter & Setter class User{ const..

FE/JavaScript 2021.06.30

JS 기본 #1

* 원시타입 - number - string - boolean - null : 의도적으로 변수에 값이 없다는 것을 명시할 때 사용. - undefined : 선언 이후 값을 할당하지 않은 변수는 undefined값을 가진다. 즉, 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다. - symbol: ES6에서 새롭게 추가된 타입, 변경 불가능한 원시 타입의 값. 주로 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용함. * 객체타입 - object => JS는 변수 선언시 데이터 타입을 미리 지정하지 않아도 된다. * 객체 - 객체 기반의 스크립트 언어이며, 원시타입을 제외한 나머지 값들(함수, 배열, 정규표현식)은..

FE/JavaScript 2021.06.29

Array의 여러 메소드

* Array의 기본 형식 - var 배열 = [1, 2, 3, 4, ...] //숫자, 문자등 구성 가능 - 첫번째 요소는 0부터 시작 * push - 배열의 마지막 요소에 넣고자하는 새로운 메소드 추가 - 배열.push("new number"} ==> 배열변수의 배열 요소는 [1, 2, 3, 4, "new number"] 로 변경 *pop - 배열의 마지막 요소를 제거 후, 제거한 요소를 반환 - 배열.pop(); ==> 배열변수의 배열 요소는 [1, 2, 3, 4] 로 변경되며 제거된 반환 요소는 "new number" 이다. *shift - 배열의 첫 번째 요소를 제거한 후, 제거한 요소를 반환 - 배열.shift(); ==> 배열변수의 배열 요소는 [2, 3, 4] 로 변경되며 제거된 반환 요소..

FE/JavaScript 2020.12.25

구구단 만들기

Problem! - 컴퓨터가 제시하는 문제를 사용자가 맞추는 프로그램을 만들어보자 코딩시 고려사항 - 랜덤함수 사용하기 (문제가 랜덤하게 나오도록 하는것) - 구구단의 단수를 제한할것 (1~9단까지) - 조건문 사용해서 true/false 알려주기 순서도 생각해보기 - 컴퓨터 랜덤 문제 제시 - 사용자 답을 제출 - 답이 맞았는가? 틀렸는가? [코드 직접 구현] while(true) { var number1 = Math.floor(Math.random()*9)+1 //1~9 사이 랜덤숫자 변수에 넣기 var number2 = Math.floor(Math.random()*9)+1 var result = number1 * number2 var condition = true while(condition) { ..

FE/JavaScript 2020.12.20

끝말잇기 만들기

끝말잇기 간단 알고리즘 첫 제시어 저장 ↓ ↖ 대답(단어) ↓ ↖ 첫 제시어 끝과 대답 첫 글자가 같은가? NO ↓ YES → 끝말잇기에 필요한 문법이 무엇이 있을까 생각해보자 Ex) 사과 -> 과일 -> 일몰 -> 몰수 필요한 사항들 단어 입력 받는 곳 조건문(단어가 알맞는 조건에 들어가면 단어를 이어주고, 아니면 아니라고 표시해줘야함) 반복문(끝말잇기를 언제까지 할것인가?) 글자수를 제한할지 말지? [코드 직접 구현] var firstWord = "apple" while(true) { var lastWord = prompt(firstWord) if(firstWord[firstWord.length - 1] === lastWord[0]) { firstWord = lastWord } else if(last..

FE/JavaScript 2020.12.18