Section 1.
4강. 자바스크립트 기초 문법(1)
템플릿 리터럴
이게 나오기 전까지 문자열과 변수값을 연결해 하나의 문자열을 만들 때는 + 기호를 사용했다.
console.log(num1 + "과 " + num2 + "를 더하면 " + (num1+num2) + "입니다");+ : 연결 연산자, 문자열을 연결
그러나 현재는 js를 통한 웹 개발의 범위가 워낙 커져서 덧셈에서의 산술 연산자와 연결 연산자의 기호가 같아서 불편한 점들이 생겼다. 이에 따라 산술 연산자와 연결 연산자를 구별해서 사용하는 것이 훨씬 더 유리해졌다. 이러한 배경을 바탕으로 템플릿 리터럴이 등장했다.
console.log(`${num1}과 ${num2}를 더하면 ${num1+num2}입니다.`);` (백틱) : 문자열을 묶을 때 사용
${ } : 변수를 묶을 때 사용
기습 tip) 명령어 cd 후 이동하고 싶은 폴더를 드래그해서 터미널에 끌어놓으면 절대 경로가 복사된다.
문자열과 변수를 연결해서 사용할 때는 웬만하면 백틱을 사용하자.
JS 기초 - 다양한 함수 형태
함수 이름으로 선언
js에서 함수를 선언하는 기본적인 방법의 예시는 다음과 같다.
function greeting(name){
console.log(`${name} 님, 안녕하세요?`);
}이렇게 선언한 함수를 호출하려면?
greeting('홍길동');함수 표현식으로 선언
함수에 이름을 붙이지 않고 표현식으로 만들 수도 있다. 이를 함수 표현식이라 한다. 이렇게 되면 함수가 식이 되어 변수에 할당이 가능해진다.
let greeting = function(name){
console.log(`${name} 님, 안녕하세요?`);
}위처럼 let ~을 통해 변수를 만들고 할당하여 사용할 수 있다. 앞서 변수가 이름을 가졌기 때문에 이름이 필요하지 않다. 호출할 때는 변수 이름을 함수처럼 써주면 된다.
greeting('홍길동');즉시 실행 함수
선언하면서 동시에 실행하는 방법도 있다.
(function(a,b){
console.log(`두 수의 합 : ${a+b}`);
}(100,200))함수에 넘겨줄 인자 값은 중괄호 다음에 작성한다. 이 방법은 앞선 두 방법처럼 여러번 호출하여 사용할 수 없다.
화살표 함수
좀 더 함수를 간략하게 표현하기 위해 사용하는 방법이다. function, return 등등 키워드를 최소한으로 줄이고 인자, 중괄호 안의 내용을 중점적으로 표현한다.
매개변수가 없는 경우
let hi = function() {
return '안녕하세요?';
};위 함수 표현식을 화살표 함수로 바꿔보겠다.
let hi = () => '안녕하세요?';매개변수가 존재하지 않기 때문에 빈 괄호를 쓴다. 매개변수와 중괄호 사이에 화살표가 들어간다. 또한 함수 안에서 실행할 내용이 한 줄 뿐이고, return 이 포함되어 있다면, return 을 생략할 수 있다. 또 한 줄 밖에 없기 때문에 중괄호도 필요하지 않다.
매개변수가 있는 경우
매개변수 : 함수가 선언 시 어떤 값이 필요하다고 표시해 놓은 변수
인수 : 함수 호출(실행) 시 넘겨주는 변수
요즘 보통 '인자'로 퉁쳐서 부르기도 한다.
let sum = function (a, b) {
return a + b;
}
console.log(sum(100, 200));위 함수 표현식을 화살표 함수로 바꿔보자.
let sum = (a, b) => a + b;실행할 내용이 많다면, 중괄호를 생략하지 않고 그 안에 내용을 작성하면 된다.
5강. 자바스크립트 기초 문법(2)
비동기 처리
js에서 중요한 개념이므로 잘 알아두자.
function displayA(){
console.log('A');
}
function displayB(){
console.log('B');
}
function displayC(){
console.log('C');
}
displayA();
displayB();
displayC();위처럼 3개의 함수를 선언하고 실행하는 코드가 있다. 결과는 A B C가 각 줄에 순차적으로 콘솔에 출력될 것이다.
A
B
C만일 displayB 함수에서 시간 지연이 생긴다고 가정하자.
timer 함수 : 지정한 시간 이후에 실행되도록 하는 함수
function displayB(){
setTimeout(() => {console.log("B");}, 2000)
}displayB를 이렇게 바꾸면 해당 작동을 2초 후에 하라는 의미이다. 이 경우에 출력은
A
C
B // 2초 후에 출력js는 시간이 걸리는 작업이 있을 경우, 빨리 처리할 수 있는 작업부터 우선적으로 처리하고 나중에 시간 걸리는 작업을 처리한다. 왜냐하면 js는 작업을 처리하는 쓰레드(thead)가 하나여서 동시 작업이 불가능한 언어이기 때문이다.
우리가 코딩을 하다보면 웹 개발에서는 시간 지연들이 종종 일어난다. 예를 들어 서버에서 데이터를 가져오고 난 후에 화면에 보여줄때 서버에서 가져오는 시간이 더 오래 걸린다면 js는 화면에 내용을 표시하는 함수를 먼저 실행하려고 할 것이다. 이런 경우에 "서버에서 데이터를 가져오는 작업을 먼저 하고 그 다음 표시하는 작업을 해라" 처럼 작업 순서를 정해주도록 코딩하는 것이 비동기 처리이다.
비동기 처리 : 함수들이 어떤 순서로 연결되어야 할지를 지정.
콜백 함수
displayC를 지연되는 displayB보다 먼저 실행되지 않게 하기 위해 비동기 처리를 해보자.
function displayA(){
console.log('A');
}
function displayB(callback){
setTimeout(() => {
console.log("B");
callback();
}, 2000)
}
function displayC(){
console.log(`C`);
}
displayA();
displayB(displayC);이럴 때 가장 많이 사용하는 방법이 바로 콜백 함수이다.
콜백 함수 : 함수 안에 매개변수로 들어가는 함수
ex) displayB(displayC);
console.log("B")를 수행 후 callback 함수를 수행하라는 의미이다.
js의 다양한 비동기 처리 방법
콜백 함수 : 함수 안에 다른 함수를 매개변수로 넘겨 실행 순서 제어. 간단한 경우에 편리하나, 콜백 함수가 많아질수록 가독성이 떨어질 수 있음.
프로미스 : 프로미스 객체, 콜백 함수를 사용해 실행 순서를 제어. 성공, 실패했을 때 실행할 함수가 미리 약속되어 있다.
async / await : 이 키워드를 사용해 실행 순서를 제어할 수도 있다.
여담으로 Node.js에서도 이와 똑같은 형식으로 비동기를 처리한다.
