01_Simple Coding - Modern Js - 기본 요약

forbobpro

2024년 05월 06일

01_Simple Coding – Modern Js – 기본 요약

쉬운 목차

📃 요약

자바스크립트는 과거 기본적으로 웹브라우저 환경에서 동작했으나 Node.js 가 개발되면서 웹브라우저 이외의 환경에서도 실행될 수 있게 됨. 그러면서 여러가지 최신 사용법들이 나오게 되었는데 그 사용법들을 ECMA(ES5, ES6…) 자바스크립트라고 부르고, 통칭해서 모던 자바스크립트 사용법이라고 함.

  - 모던 자바스크립트(ECMA Javascript) : 줄여서 ES5, ES6으로 부르며 ES 다음 숫자가 커질수록 최신버전임을 의미함
  - Node.js : 웹브라우저 이외의 환경에서 실행할 수 있게 해주는 환경
  https://nodejs.org/en/ 사이트에서 윈도우(맥) 환경에 맞는 설치파일을 다운로드 받아 설치해야 콘솔(명령 프롬프트)에서 자바스크립트 사용 가능함

요소 기술 :

– Basic : 모던 자바스크립트

📃 기술 구현

스펙 :

- vscode
- js (es6)

📃 모던 자바스크립트 다양한 기능 및 사용법

– 객체 정의 : 2가지 방법이 있으며 사용법은 아래와 같음

- let 객체명 = {
    속성명 : 값,
   속성명2: 값2,
  함수명: function() {
       실행문;
   }
}

예) 
const pet = {
        name: '구름',
        age: 10,
        eat (food) { 
          alert(this.name + '은/는 ' + food + '을/를 먹습니다.')
        }
      }

// 메소드를 호출합니다.
pet.eat('밥')

class : java 의 클래스와 유사하며 자세한 사용법은 백엔드 자바를 통해 상세히 다룰 예정
( React 에서도 사용하나 공식 홈페이지에서는 클래스 대신 함수형태를 사용할 것을 권고함)

객체 정의 :

class 객체명 {
 // 생성자 : 클래스의 객체생성은 생성자함수를 통해 생성함
 // 객체의 속성은 constructor 함수안에 기술된 this.속성이 객체의 속성임
 constructor(매개변수, 매개변수2…매개변수n) {
     this.속성 = 매개변수;
     this.속성2= 매개변수2;
     …
     this.속성n= 매개변수n;
 }
 함수명(매개변수, 매개변수2…매개변수n) {
    실행문
 }
}

객체 생성
let 변수명 = new 클래스명();


예)
class Calculator {
add(x, y) {
 return x + y;
}
subtract(x, y) {
 return x - y;
}
}

// 객체 생성 : 객체의 정의와 생성이 분리되어 있음
// let 변수명 = new 클래스명();
let calc = new Calculator();
calc.add(1,10); // 11

### - 호이스팅 : 함수 또는 변수의 정의(선언)가 암묵적으로 제일 위로 올라가는 현상(자바스크립트 만 그런 현상이 발생함)
    - 대상 : 함수정의식(선언식), var 정의된 변수
```js
예) 함수정의식은 자바스크립트 기본편에서 배운 함수를 정의하는 방법을 의미함
    // 함수정의식
     function sum(a,b) {
         return a+b;
     }

     var num = 1; // 과거 변수 정의 방식 , 현재는 사용안함(let, conset 사용할것)

– 함수표현식 : 함수 정의식(선언식) 뿐만 아니라 아래의 형태로도 함수를 정의할 수 있음, 호이스팅을 방지하기 위해 나온 또다른 함수 정의 사용법

사용법: 
 let 함수명 = function() {
     실행문;
 }

예) 
   // 함수표현식
   let sum = function(a, b) {
        return a+b;
   }
   // 함수 호출(실행)
  let result = sum(a,b);
   console.log(result)

– 화살표함수: 함수의 축약버전으로 모던 자바스크립트에서 사용법이 제시됨

사용법 :
1) function 예약어를 없애고 () {} 사이에 => 추가함
2) {} 안에 실행문이 1줄이면 {} 생략가능(생략없이 사용도 가능)
3) {} 안에 실행문이 2줄이상이면 반드시 {} 사용해야함
```
예) 함수표현식 -> 화살표 함수
// 함수 표현식
let sum = function(a, b) {
    return a+b;
}

// 화살표 함수로 변경
let sum = (a, b) => a+b;
```

– 스프레드 연산자 : 배열의 값/객체의 속성을 복사하는 연산자

사용법)
1) 배열의 값 복사
[…배열명, 배열요소n]

예)
let arr = [1,2,3,4,5];
let arr2 = […arr, 6,7,8]; // [1,2,3,4,5,6,7,8] 결과가 됨

2) 객체속성복사
{…객체명, 객체속성n:값n}

예)
var currentState = { name: '철수', species: 'human'};
currentState = { ...currentState, age: 10}; 
console.log(currentState)// {name: "철수", species: "human", age: 10}

– 백틱(“) : 문자열을 표현하는 사용법, “”, ‘’ 와 결과는 같지만 줄바꿈 특수기호를 사용하지 않고 키보드 엔터키가 그냥 적용되어 편리한 사용법임

사용법) `` 안에 변수를 사용시 ${변수명} 으로 사용해야함
   let 변수명=값;
   let val = `문자열${변수명}`;
예) let hello = “안녕”;
      let val = `hi 는 한국어로 ${hello} 입니다.`;  // hi는 한국어로 안녕입니다.

– 모듈 내보내기/가져오기 :

모듈 : js 파일을 여러개의 js 파일로 분리하는 것
목적 : js 1개의 파일에 모든 로직을 넣으면 파일 내용이 너무 길어져서 가독성이 떨어짐 => 여러개의 파일로 분리해서 가독성을 높임

export : 변수, 함수를 다른 파일에서 가져오기로 사용할 수 있도록 내보내기 기능

사용법) 
1) 2개 이상이면 export {} 사용
// 변수, 함수 합해서 2개 이상일 경우
변수 = 값;
함수() {};
export {변수, 함수};

2) 1개만 내보내기할 경우
   변수 = 값;
   export default 변수;

– import : 다른 파일의 기능(변수, 함수)을 가져와서 이용할 수 있게 하는 기능

사용법)
  // 변수, 함수 2개 이상일 경우
  import {변수, 함수} from “ js파일경로”;

// 1개일 경우
  import 변수 from “js파일경로”;

– 구조분해 할당 : 배열 또는 객체를 분해해서 다른 변수에 간단하게 넣는 사용법

사용법)
// 1) 배열: 배열의 순서에 따라 변수에 저장됨
let [변수, 변수2…변수n] = [배열원소,배열원소2…배열원소n];

예)
let array = [1,2];
•   
let [first, second] = array;
console.log(first, second); // 1 2

// 2) 객체 :  변수명(==속성명)에 따라 속성의 값이 저장됨(변수명==속성명이 일치해야함)
let 객체명 {
    속성명:값,
    속성명2:값2
}
let {속성명, 속성명2} = 객체명;

예) 
let candyMachine = {
    name: "캔디",
    count: 5
}
// 객체의 속성명 == 변수명 일치
let {name, count} = candyMachine;
console.log(name, count);

– Promise 객체 : 비동기함수 코딩시 결과 순서를 지켜(동기화) 코딩을 진행할 수 있게 보장하는 객체

- 결과가 언제 전달될지 모르나 결과가 온 다음에 실행문을 실행할 것을 약속함

– async/await : 비동기 프로그래밍에서는 결과가 요청한 순서대로 전달되지 않고 결과처리가 빠른 순서부터 전달됨.

- 결과 순서가 중요할 경우 오류를 발생시킬 수 있고, 결과 순서에 맞게 코딩하기 위해서는 Promise 객체를 처리할수 있는 함수가 필요함. 
- 과거에는 콜백함수 처리(콜백지옥발생), then().catch() 방법도 있으나 코딩라인이 길어져 최근에 그것을 개선한 새로운 사용법이 등장함

사용법) 
let 함수명 = async () => {
    // js 에러처리 : try/catch 문
    try {
        // 프라미스 결과가 올때까지 기다리고 다음 라인 실행됨 
        let response = await 프라미스객체(또는 프라미스리턴함수());  
        // 다음 실행문
        console.log(response);
    } catch(e) {
        console.log(e); // 에러 출력
    }
};

예) 
let asyncFunc = async () => {
    try {
        await goSchool;  // 프라미스 결과가 올때까지 기다리고 다음 라인 실행됨 
        console.log("교실에서 열심히 코딩을 합니다.");
    } catch(e) {
        console.log(e);
    }
};

📃 함수형 프로그래밍의 대표적 함수 3가지

함수형 프로그래밍에서 가져온 함수들 현재 java , javascript 에서 적극적으로 사용법을 받아들여 제공되고 있음, 배열변수에 대해 사용할 수 있음

1) forEach :

1) 매개변수로 주어진 함수를 배열 요소 각각에 대해 반복적으로 실행하는 함수
주로 단순 출력용으로 사용(배열의 값 출력)
2) 리턴값 없음
3) 배열변수에 대해 사용가능
4) 매개변수는 순서에 따라 사용되는 값이 틀림

매개변수 : 배열의 값
매개변수2 : 배열의 인덱스번호
매개변수3 : 배열

사용법)

매개변수 : 배열의 값
매개변수2 : 배열의 인덱스번호
매개변수3: 배열
배열변수.forEach((매개변수, 매개변수2, 매개변수3) => (실행문(매개변수,매개변수2,매개변수3))

예)
 const myArr = [1, 2, 3, 4, 5];

 myArr.forEach((value, index, array) => {
     console.log(`배열값: ${value}`);
     console.log(`배열인덱스번호: ${index}`);
     console.log(`배열: ${array}`);
     console.log(`---------`)
 });

2) map : (*****) React 에서 반복문으로 사용됨

1) 매개변수로 주어진 함수를 배열 요소 각각에 대해 반복적으로 실행하는 함수
주로 배열의 값을 조작할 때 사용됨( 배열값 변경, 조작 전후 배열개수는 일치함)
2) 리턴값 있음
3) 배열변수에 대해 사용가능
4) 매개변수는 순서에 따라 사용되는 값이 틀림

매개변수 : 배열의 값
매개변수2 : 배열의 인덱스번호
매개변수3 : 배열

사용법)

매개변수 : 배열의 값
매개변수2 : 배열의 인덱스번호
매개변수3: 배열
배열변수.map((매개변수, 매개변수2, 매개변수3) => (실행문(매개변수,매개변수2,매개변수3))

예)
 let numbers = [1, 2, 3, 4, 5]; 
 let result = numbers.map(number => number * number); 
 console.log(result); // [1, 4, 9, 16, 25]

3) filter :

1) 매개변수로 주어진 함수를 배열 요소 각각에 대해 반복적으로 실행하는 함수
주로 조건식이 참일때의 배열원소만 새로운 배열로 만들때 사용( 조작전후 배열개수가 달라짐)
2) 리턴값 있음
3) 배열변수에 대해 사용가능
4) 매개변수는 순서에 따라 사용되는 값이 틀림

매개변수 : 배열의 값
매개변수2 : 배열의 인덱스번호
매개변수3 : 배열

사용법)

매개변수 : 배열의 값
매개변수2 : 배열의 인덱스번호
매개변수3: 배열
배열변수.filter((매개변수, 매개변수2, 매개변수3) => (실행문(매개변수,매개변수2,매개변수3))

let numbers = [1, 2, 3, 4, 5]; 

-   let result = numbers.filter(function(number) { 
     return number > 3; // 조건식이 참인 배열원소만 가져옴
}); 
console.log(result); // [4, 5]

VUE

simple-coding, vue

simple-coding

+ 00 00 0000

01_Simple Coding – Modern Js – 기본 요약