[JavaScript] 자바스크립트 기초 문법

1. 템플릿 리터럴

let num1 = 10;
let num2 = 20;

// 연결 연산자 사용
console.log(num1 + "과 " + num2 + "를 더하면 " + (num1 + num2) + "입니다.");
// 템플릿 리터럴 사용
console.log(`${num1}과 ${num2}를 더하면 ${num1 + num2}입니다.`);

 

• 기존 : 문자열과 변수값을 연결할 때, + 기호(연결 연산자)를 사용해서 연결했다.
• 템플릿 리터럴 : 문자열과 변수를 연결하기 위해 나온 문법, 문자열 앞과 끝에 백틱(`) 사용, ${} 안에 변수명 혹은 연산 작성

 

2. 여러가지 함수 작성법

//1. 함수 선언하고 호출하기

// 함수 선언
function greeting(name){
    console.log(`${name} 님 안녕하세요.`);
}
// 함수 호출
greeting("mimi")

위 작성법은 함수의 가장 일반적인 사용법이다.

 

 

//2. 함수 표현식으로 선언하고 호출하기 
// 함수 선언
let greeting = function(name){
    console.log(`${name}님 안녕하세요`);
}
// 함수 호출
greeting('mimi')

함수에 이름을 붙이지 않고, 표현식으로 선언하여 사용할 수 있다.

함수가 이름 없이 하나의 식이 되는 것이고, 변수(greeting)에 할당하여 사용한다.

함수를 호출할 때는 변수 이름인 greeting을 함수 이름처럼 사용하면 된다.

 

 

//3. 함수 선언과 호출을 동시에
(function(a,b){
    console.log(`두 수의합:${a+b}`);
}(100,200))

가장 바깥쪽 () 소괄호는 바로 시작하라는 의미이다.

소괄호 안에 function(a,b){} 를 작성하고, a와 b값은 함수 옆에 (100,200) 으로 작성하였다.

 

결과 확인

 

 

3. 화살표 함수

화살표 함수는 ES6(에크마스크립트) 이후 나온 기능으로, 함수를 간략하게 표현하기 위해 사용하는 방법

function 이나 return 같은 키워드를 최소한으로 하여 핵심만 작성

 

// 함수 표현식
let hi1 = function() {
   return '안녕하세요?';
};

// 화살표 함수
let hi2 = () => { return '안녕하세요?' }

// 화살표 함수 생략하여 작성
let hi3 = () => '안녕하세요?'

 

화살표 함수의 {} 중괄호 안에 실행할 내용이 한 줄밖에 없고, return 문이 포함되어 있다면

return 과 중괄호를 생략할 수 있다.

 

// 화살표 함수
// let sum = (a, b) => { return a + b; };

// 화살표 함수를 좀더 간단하게
let sum = (a, b) => a + b;

sum(100, 200); // 300

매개변수가 있는 경우에도 동일하게 작성하면 된다. 

 

 

 

* 매개변수, 인수, 인자

함수를 선언할 때, 어떠한 값이 필요하다고 표시해 놓은 변수 : 매개변수, parameter(파라미터)
함수를 실행할 때, 함수를 호출하면서 던져주는 변수 : 인수

매개변수와 인수를 구분짓지 않고 "인자"라고 퉁쳐서 부르기도 함

 

let sum = (a,b) => a+b; 에서 (a,b)은 매개변수이고,

sum(100, 200); 에서 (100,200)은 인수이다.

 

 

4. 비동기 처리

function displayA(){
    console.log('A');
}
function displayB(){
    console.log('B');
}
function displayC(){
    console.log('C');
}

displayA();
displayB();
displayC();

위 함수를 실행했을 때의 결과는 다음과 같다.

A, B, C가 순서대로 출력되었다.

 

 

만약 displayB() 에서 시간이 오래 걸리는 작업을 한다고 가정하고 코드를 작성해보았다.

function displayA(){
    console.log('A');
}
function displayB(){
    setTimeout( ()=>{
    	console.log('B');
    }, 2000 );
}
function displayC(){
    console.log('C');
}

displayA();
displayB();
displayC();

displayB 함수 내부의 setTimeout( ()=>{} , msec) 함수는

Nmsec초의 시간 이후, ()=>{}를 실행하라 라는 함수이다.

 

A출력 → 2초 후 B 출력 → C 출력 되는 게 아니라,

A,C가 먼저 출력되었고 2초 후 B가 출력되었다.

 

 

위와 같은 특징을 "비동기(Asynchronous)"라고 한다.

- 하나의 요청에 대기 시간이 발생하면, 다른 요청부터 처리한다.

- 요청과 결과가 동시에 일어나지 않을 거라는 약속이다.

- 작업이 순서대로 일어나지 않을 수도 있다.

- "동기(Synchronous)"보다 복잡하지만, 여러개의 요청을 동시에 처리할 수 있다.

 

이러한 비동기는 자바스크립트의 가장 큰 특징이라 할 수 있다.

 

자바스크립트는 빨리 처리할 수 있는 작업부터 처리하고, 시간이 걸리는 작업은 나중에 처리한다.

그 이유는 작업을 처리하는 쓰레드가 하나이기 때문이다.

 

 

웹 개발을 하다보면 종종 시간 지연들이 일어난다.

서버에서 데이터를 가져오고 → 화면에 보여주어야 한다.

데이터를 가져올 때 시간지연이 발생한다면,

자바스크립트의 비동기적 특징에 의해 화면에 데이터를 그려주려는 함수가 실행되려고 할 것이다.

이러한 경우를 방지하기 위해 "A라는 작업 이후, B 작업을 실행하라" 라고 코딩해주어야 한다.

이러한 작업을 "비동기 처리" 라고 한다.

프로그램에서 처리해야 할 기능들을 원하는 순서에 맞게끔 조절해주는 것이 비동기 처리이다.

비동기 처리는 "콜백 함수"를 사용하여 처리한다.

 

function displayA(){
    console.log('A');
}
function displayB(callback){
    setTimeout( ()=>{
        console.log('B');
        callback();  //매개변수로 들어오는 콜백함수를 실행
    }, 2000 );
}
function displayC(){
    console.log('C');
}


// A,B,C 순서대로 실행되기를 원함
displayA();
displayB(displayC); //displayB 다음에 실행되어야 하는 함수 displayC를 매개변수로 작성

위와 같이 작성 후 실행해보았다.

 

A 출력 후 →  2초 후 B 출력 → C 출력 되었다.

 

displayB(displayC) 와 같이 

어떤 함수 안에 매개변수로 들어가는 displayC와 같은 함수를 "콜백 함수" 라고 한다.

 

 

 

자바스크립트 비동기 처리 방법

방법	버전	기능
콜백 함수	기존부터 사용	함수 안에 또 다른 함수를 매개변수로 넣어서 실행순서 제어함. 콜백함수가 많아지면 가독성 떨어짐
프로미스	에크마스크립트 2015부터 도입	프로미스 객체와 콜백함수를 사용해서 실행 순서를 제어함.
async/await	에크마스크립트 2017부터 도입	async와 await 예약어를 사용해서 실행 순서를 제어함.

* 프로미스 : 성공했을 때 실행할 함수, 실패했을 때 실행할 함수가 미리 약속되어 있음 

* asnyc/await : A 함수 실행 후 B 함수 실행하라는 순서를 지정할 수 있음

 

 

 

 

https://youtu.be/YVqMQyhdvwM?feature=shared

 

 

https://youtu.be/Gg4ZO3DlBc0?feature=shared