하서망 블로그

안녕하세요. 오늘은 널 병합(??) 연산자와 옵셔널 체이닝(?.) 연산자에 대해서 알아보겠습니다. 1. 널 병합 연산자 널 병합 연산자(??)는 falsy 값(0,'',false,NaN,null,undefinced) 중 null과 undefined만 따로 구분합니다. 밑의 예제를 보면 || 연산자의 경우 변수 a에 falsy 값인 0이 들어가있기 때문에 falsy 값이 아니라 뒤에 있는 값인 1을 변수 b에 대입했습니다. 하지만 널 병합 연산자의 경우 falsy값 중에서 null과 undefined만 구분하기 때문에 a가 null이나 undefined가 아니므로 b는 a인 0이 대입됩니다. const A = X ?? Y ; 1. X가 null ,undefined 인 경우 -> A = X; 2. X가 nu..

안녕하세요, 오늘은 프로미스를 더 간략하게 하는 async/await에 대해서 알아보겠습니다. 프로미스는 콜백헬을 없앨 수 있지만 .then을 계속해서 써야하기 때문에 보이는게 그리 단순해보이지 않을 수 있습니다. 코드를 더 간편하게 보이도록 하기 위해서 나타난 것이 async/await입니다. 1. async async 키워드는 function 앞에 위치합니다. async function 함수는 항상 프로미스를 반환합니다. 프로미스가 아닌 값을 반환하더라도 resolve 값을 해당 반환값으로 만들어서 프로미스가 반환되도록 합니다. //프로미스가 아닌 정수형 반환 async function func1(){ return 1; } //명시적으로 프로미스 반환 async function func2(){ ret..

안녕하세요! 오늘은 자바스크립트의 프로미스에 대해서 알아보겠습니다. 1. 동기 vs 비동기 코드는 기본적으로 동기적으로 실행됩니다. 동기적으로 실행된다는 말은 코드가 위에서부터 아래 순서대로 실행된다는 말입니다. 하지만 프로그래밍을 하다보면 코드 순서 상관없이 필요한 상황에 필요한 코드가 작동돼야하는 상황이 반드시 옵니다. 이때 코드를 병렬으로 처리하는 것이 비동기적으로 실행한다고 말합니다. 비동기적으로 코드를 실행하려면 여러가지 방법이 있습니다. ajax, setTimeout, callback 와 같은 방법으로 개발자들은 비동기 처리를 진행합니다. 프로미스(promise)는 세 방법 중에서 callback을 해결하기 위해서 나타났습니다. //동기 : 1 2 3 console.log(1); console..

안녕하세요! 오늘은 구조분해할당에 대해서 포스팅하겠습니다. 구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다. 1. 배열 밑의 코드는 구조 분해 할당을 이용한 예제입니다. 원래 방식은 하나하나 직접 인덱싱하는 방법이고, 구조 분해 할당은 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 자리를 맞추는 방식입니다. 배열 ex의 0번 자리에 a변수가 들어가있으므로 a=1입니다. b,c,d,e,f 변수도 똑같습니다. //원래 방식 const ex=[1,2,3,4,5] const a=ex[0]; const b=ex[1]; const c=ex[2]; //구조 분해 할당 방식 const [a,b,c,d,e]=ex; console.log(a); //1 구조 분해 할당에서는 ...을 사..

안녕하세요, 오늘은 자바스크립트의 화살표 함수에 대해서 알아보겠습니다. 화살표 함수(arrow function)은 기존의 함수를 깔끔하고 편리하게 쓸 수 있도록 하는 함수입니다. function {} 대신에 => 기호로 함수를 선언 변수에 대입할 경우 재사용 가능 화살표 함수 내부에 return 문만 있는 경우, 중괄호({ })와 return 생략 가능 매개변수가 하나일 경우 매개변수를 묶는 소괄호( ) 생략 가능 위에 있는 특징들을 활용해서 모두 같은 기능을 하는 함수를 다른 방식으로 구현했습니다. //기존 방식 function add(x,y){ return x+y; } //화살표 함수 기본 형태 const add=(x,y)=>{ return x+y; } //return과 중괄호 생략 const add..

안녕하세요. 오늘은 자바스크립트에서 백틱 `을 어떻게 쓰면 좋을지에 대해서 알아보겠습니다. 백틱의 사용법은 두가지가 있습니다. 템플릿 문자열과 함수 호출입니다. 1. 템플릿 문자열 원래 문자열은 작은 따옴표(' ')나 큰 따옴표(" ")를 사용해서 나타냅니다. 이때 문자열과 변수를 이어서 쓸 경우 +를 활용해서 나타냅니다. 하지만 백틱(`)을 사용하면 한번에 깔끔하게 나타낼 수 있습니다. 백틱(`)을 사용하면 문자열 안에 변수를 넣을 수 있기 때문입니다. //백틱 사용 const x='x'; const y='y'; const z='z'; console.log(`${x}는 x, ${y}는 y, ${z}는 z이다. `); //x는 x, y는 y, z는 z이다. 2. 함수 호출 백틱(`)은 함수를 호출할때도 ..

안녕하세요, 자바스크립트에서 어떻게 변수 선언을 하는지, 각각의 방법은 어떤 것이 다른지 알아보도록 하겠습니다. 1. 변수 선언 방법 자바스크립트는 변수를 선언할때 const, let, var를 사용합니다. 경우에 따라 쓰이는 곳이 다릅니다. 이를 알기 위해선 블록 스코프와 함수 스코프 에 대해서 알아야합니다. //변수 선언 방법 var x=3; const x=3; let x=3; 2. 블록 스코프 vs 함수 스코프 블록 스코프는 블록 밖에서 변수에 접근할 수 없는 것을 의미하고 함수 스코프는 함수 밖에서 변수에 접근할 수 없다는 것을 의미합니다. 이때 블록의 범위는 if, while, for, function 등에서 볼 수 있는 중괄호 사이 입니다. 예를 들어서 밑의 코드와 같이 if 안에 변수를 선언..

안녕하세요! 오늘은 자바 스크립트와 HTML에 대해서 알아보겠습니다. JavaScript는 HTML 위에서 동작하는 언어입니다. HTML과 JavaScript의 가장 큰 차이점은 HTML은 정적이고, JavaScript는 동적이라는 점입니다. HTML은 쉽게 말해서 웹페이지를 구성하는 뼈대 작업하는 언어입니다. HTML로 구성된 페이지가 사용자와 상호작용할 수 있도록 Javascript로 HTML 위에 코딩해야합니다. 1. script 태그 javascript를 HTML위에서 사용하려면 어떻게 해야할까요? 2. 이벤트 상호작용하는 사이트를 만들기 위해서는 사용자의 동작을 확인할 수 있어야합니다. 자바스크립트에서는 이벤트를 활용해서 사용자의 동작을 확인합니다. 이벤트 종류는 다양하게 있습니다. 밑의 이벤트..