Javascript

[Javascript] 실무 반복문 map / filter

map() 배열의 각 요소에 대해 동일한 동작을 반복하고 그 결과값을 모은 새 배열을 리턴한다. 간단하게 반복문이라고 생각하면 된다. for를 사용해서 만들 수 있는 함수는 map으로 거의 다 구현이 가능하다. 실무에서 for보다 훨씬 많이 사용한다고 함. (for는 요즘 실무에서는 거의 사용되지 않는다고.) 문법 // 1. 일반적인 배열 const classmates = ["철수", "영희", "훈이"] classmates.map((el) => (`${el}어린이`)) // `${el}어린이` 는 (el) + "어린이" 와 동일하다. // el은 element의 약자 // 2. 배열 안의 객체 const classmates2 = [ {name : "철수"}, {name : "영희"}, {name : "..

[Javascript] 호이스팅이란? | Hoisting

호이스팅이란? "끌어올린다"는 뜻. 함수 안에서 변수의 선언만 분리해서 코드의 최상단으로 옮기는 것이다. Code1 console.log(aaa) var aaa = 3 위와 같은 코드가 있다고 가정해보자. console.log(aaa)는 aaa를 선언하기 전에 불러왔으니 오류가 나야 정상이다. 하지만 undefined일 뿐 실행은 된다. 이것은 var aaa = 3 이 호이스팅 됐기 때문이다. 이러한 현상은 var로 변수/상수를 선언했을 때에 발생한다. Code2 console.log(bbb) const bbb = 2 그렇다면 let/const는 어떨까? 여기도 마찬가지로 호이스팅은 이루어지나, TDZ(Temporal Dead Zone)라는 별개의 임시공간에 저장되었기 때문에 오류가 난다. 이러한 작동이..

[Javascript] async와 await | 동기와 비동기 방식

동기와 비동기 방식이란? 서버와 통신하는 방식의 종류이다. 동기 (Syncronous: 동시에 일어나는) - 서버 컴퓨터의 작업이 끝날 때까지 기다리는 통신 방식 - 서버에 여러가지 요청을 보낼 경우, 이전 요청에 대한 응답이 끝나야 다음 요청을 보낼 수 있다. 비동기 (Asynchronous : 동시에 일어나지 않는) - 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신 방식 - 서버에 여러가지 요청을 보낼 경우, 이전의 요청에 대한 응답이 끝나지 않아도 다른 요청을 보낼 수 있다. - 비동기 처리는 Javascript의 중요한 이슈 중 하나이다. Javascript의 비동기 처리 비동기 처리 방식으로 작동되는 함수의 경우, 이전에 요청한 작업이 완료되지 않았는데 또 다른 요청을 보내는 바람에 오류..

[Javascript] 템플릿 리터럴 | Template literals

템플릿 리터럴이란? 내장된 표현식을 허용하는 문자열 리터럴이다. 백틱을을 이용하여 여러 조각으로 이루어진 문자열과 변수, 상수 등의 조합을 훨씬 읽기 편하게 입력할 수 있다. 문법 예시 const apple = 3 const banana = 10 console.log("철수는 사과를 " + apple + "개 가지고 있고, 바나나를 " + banana"개 가지고 있어요!") 이런 식으로 라인에 여러가지 요소가 들어가면 코드가 번잡해진다. 그럴 때 템플릿 리터럴을 사용하여 코드를 간결하게 만들 수 있다. console.log(`철수는 사과를 ${apple}개 가지고 있고, 바나나를 ${banana}개 가지고 있어요.`) 백틱(` `)안에 문자열을 넣고 스페이스 홀더( ${expression} ) 안에 표현..

[Javascript] 객체의 Key와 Value가 동일한 경우 | Shorthand Property

Javascript 객체에서 key와 value 값이 동일할 경우 생략이 가능하다. 이러한 것을 Shorthand property라고 부른다. ▶ Code1 createBoardInput: { writer:writer, password: password, title: title, contents: contents } ▶ Code 2 createBoardInput: { writer, password, title, contents } Code 1을 Code 2번 처럼 쓸 수 있다는 이야기. 잘 익히면 코드가 훨씬 간결해질 것이다.

[JavaScript] import 와 export

React 등 현대의 Javascript 기반 프로젝트 파일을 열어보면 import와 export가 무수히 많다. import와 export는 무엇일까? 사전적 정의 import : 수입, 가져오다. 1. to buy or bring in products from another country 2. to introduce new goods, customs, or ideas to one country from another export : 수출, 내보내다. 1. to send goods to another country for sale 2. to put something from one country into use in other countries 사전적 정의를 보아 짐작할 수 있듯, 소스코드를 각각 내보..

[Javascript] 자주 이용하는 내장 함수들

setTimeout(기능, 초) : 시간 지연 함수 setInterval(기능, 초) : 시간 반복 함수

[Javascript] 함수 작성 방법 세가지 | 선언식, 표현식, 화살표 함수

1. 함수 선언식 function hello() { alert('안녕하세요') } - 초기부터 있었던 함수 작성 방법 2. 함수 표현식 const hello = function() { alert("안녕하세요") } - 익명 함수를 만들어서 변수나 상수에 할당해주는 방식 - 호이스팅을 막기 위해 생긴 방법 3. 화살표 함수 const hello = () => { alert('안녕하세요') } - 함수 표현식의 변형 방법 - 실무에서 가장 많이 사용됨 * 작성 방법은 달라도, 실행 방법은 동일하다. hello()

[Javascript] 수학 객체 / 내장 함수

많이 사용되는 수학 객체 모음 Math.max(2,1,6) : 최대값 구하기 Math.min(2,1,6) : 최소값 구하기 Math.random() : 0~1 랜덤 수 만들기 Math.round(2.12) : 반올림하기 Math.ceil(2.12) : 올림하기 Math.floor(2.12) : 버림하기 Javascript 자주 사용하는 내장 함수 모음 String(a) : a를 문자열(String)으로 변환한다. Number('1') : 1를 숫자(Number)로 변환한다. padStart(6, '0') : 추후,, 확인 후 기입 setTimeout(기능, 초) : 시간 지연 함수 setInterval(기능, 초) : 시간 반복 함수 관련 참고 페이지 MDN Web Docs : https://develo..

[Javascript] 반복문

for (초기식; 조건식; 증감문;){ 반복해서 실행할 내용 } for (let i = 0; i