[Codeit;] 모던 자바스크립트

1. 모던 자바스크립트란?

ECMAScript: JavaScript가 갖추어야 할 내용을 정리해둔 '설명서' (자바스크립트 표준 명세서)

➡️ 모든 스크립트 언어가 지켜야 하는 표준 

JavaScript: ECMAScript를 준수해서 만들어낸 '결과물'

 

2. 자바스크립트의 동작 원리 

JavaScript: 유연한 데이터 타입

- 기본형: Number, String, Boolean, Null, Undefined, Symbol(유일한 값), BigInt(큰 수)

- 참조형: Object

 

Boolean 형변환

- Falsy 값: false, null, undefined, NaN, 0, ''

- Truthy 값: 나머지 값(빈 배열, 빈 객체 포함)

//AND와 OR의 연산 방식
console.log(true && true); //true 출력
console.log(true && false); //false 출력
console.log(false && true); //false 출력
console.log(false && false); //false 출력

//왼쪽 값 truthy → 오른쪽 값 return 
//왼쪽이 truthy해도 오른쪽 값 확인 필요

//왼쪽 값 falsy → 왼쪽 값 return
//왼쪽이 falsy하면 오른쪽 값 확인 필요X

console.log(true || true); //true 출력
console.log(true || false); //true 출력
console.log(false || true); //true 출력
console.log(false || false); //false 출력

//왼쪽 값 truthy → 왼쪽 값 return 
//왼쪽이 truthy하면 오른쪽 값 확인 필요X

//왼쪽 값 falsy → 오른쪽 값 return
//왼쪽이 falsy해도 오른쪽 값 확인 필요

console.log(null && undefined); //null 출력
console.log(0 || true); //true 출력
console.log('0' && NaN); //NaN 출력
console.log({} || 123); //{} 출력

 

//null 병합 연산자: 왼편의 값이 null이나 undefined인지 확인
const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

console.log(example1, example2, example3); // I love Codeit

 

 

3. 함수 다루기

//함수 선언식
//호이스팅 발생, 함수 스코프
function printCodeit() {
	console.log('Codeit');
}

  
//함수 표현식: 함수 선언을 값처럼 사용 
//호이스팅 X, 블록 스코프 
const printCodeit = function() {
	console.log('Codeit');
   }
   
 printCodeit;

//즉시 실행 함수: (함수 선언)(인수 전달)
(function () {
  console.log('Hi!');
})();

 

JS내의 함수: 일급 함수(객체 타입)

➡️ 함수 활용 가능 종류 

- 객체 안의 메소드

- 배열의 요소 

- 다른 함수의 파라미터(콜백 함수)

- 다른 함수의 리턴값 (고차 함수)

 

// arguments
function printArguments(a, b, c) {
for (const arg of arguments) {
console. log(arg);
 }// arguments 객체 
}

printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Jayden', 'Scott');
printArguments('Suri', 'Jack', 'Joy', 'Noel');
//단점: 마지막 n개의 argument 다루기 까다로움 


// Rest Parameter
// 배열 타입, 배열 함수(splice) 사용 가능 
function printArguments( ... args) {
for (const arg of args) {
console.log(arg);
  }

};


printArguments('Young', 'Mark', 'Koby');
printArguments('Captain');
printArguments('Jayden', 'Scott');
printArguments('Suri', 'Jack', 'Joy', 'Noel');



function func(arg1, arg2, ...args){	
return [arg1, arg2, args];}
func(1);   // [1, undefined, []]
func(1, 2, 3);// [1, 2, 3]
func(1, 2, 3, 4, 5); // [1, 2, [3, 4, 5]]

 

 

//기존 함수 선언

//변수에 함수 할당 
const getTwice = function(number) {
	return number * 2;
};
console.log(getTwice(5));

//다른 함수의 argument로 선언
const myBtn = document.querySelector('#myBtn')

myBtn.addEventListener('click', function() {
	console.log('button is clicked!');
});

//Arrow Function: 익명 함수
//함수 이름 삭제, 소괄호 오른쪽에 => 추가

//변수에 함수 할당 
const getTwice = (number) => {
return number * 2;
};
console.log(getTwice(5));

//다른 함수의 argument로 선언
const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', () => {
console. log('button is clicked!');
};

//Arrow function: arguments 객체 사용 불가
//this 값: Arrow function이 선언되기 이전에 유효한 this값

 

4. 자바스크립트의 문법과 표현

문장: 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리

표현식: 결과적으로 하나의 값이 되는 모든 코드

cf) 할당식, 함수 호출: 표현식 && 문장 

 

//Spread 구문
const numbers = [1, 2, 3];

console.log(... numbers);
//1 2 3 출력

const webPublishing = ['Html', 'CSS'];
const interactiveWeb = webPublishing; // 객체값 참조
const interactiveWeb = [...webPublishing, 'JavaScript']; // 배열값 복사


//여러 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];
console.log(arr3);

const arr4 = arr1.concat(arr2);
console.log(arr4);

//배열을 펼쳐서 각각의 arguments로 사용
const introduce = (name, birth, job) => {
    console.log(`저는 ${name}입니다.`);
    console.log(`저는 ${birth}년 생 입니다.`);
    console.log(`직업은 ${job}입니다.`);
}

const myArr = ['코드잇', 2017, '프로그래밍 강사'];
introduce(...myArr);

//객체에 담기
const members = ['태호', '종훈', '우재'];

const newObject = { ...members };

console.log(newObject); // { 0:'태호', 1:'종훈', 2:'우재'}

 

//구조분해 할당: 배열 오른쪽에 변수 작성 
const rank = ['효준', '유나', '민환', '재하'];

const [macbook, ipad, airpods, coupon] = rank;
console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

const rank = ['효준', '유나', '민환', '재하', '규식'];
const [macbook, ipad, airpods, ...coupon] = rank; 
console.log(coupon); // ['재하', '규식'];

//구조분해를 이용해 두 값 swap 
let macbook = '효준';
let ipad = '유나';

console.log('MacBook 당첨자:', macbook);
console.log('iPad 당첨자:', ipad);

let temp = macbook;  // [macbook, ipad] = [ipad, macbook];
macbook = ipad;
ipad = temp;

console.log('MacBook 당첨자:', macbook);   
console.log('iPad 당첨자:', ipad);

 

//객체 구조분해 할당 

const macbook = {
    title: '맥북프로 16형',
    price: 369000,
    memory: '16GB',
};

const { title: product, ...rest } = macbook; // title을 product로 이름을 변경함 

console.log(title);
console.log(price);

 

 

5. 자바스크립트의 유용한 내부 기능

// forEach와 map
const members = ['a', 'b', 'c', 'd'];

members.forEach((member, i, arr) => {
    console.log(`${i} ${member}`);
    console.log(arr);
});

// 새로운 배열의 결과 값을 return
members.map((member, i, arr) => {
    return members[i] + member;
});

 

//filter와 find 

const devices = [
{name: 'Galaxy', brand:'Samsung'},
{name: 'MacbookPro', brand:'Apple'},
{name: 'GalaxyWatch', brand:'Samsung'},
];

//조건을 만족하는 여러개의 값 추출
const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});

//조건을 만족하는 유일한 값 추출 
const myLaptop = devices.find((el) => el.brand === 'Gram');
console.log(myLaptop);

 

// some과 every
const numbers = [1,3,5,7,9];

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((el) => el > 5);

// some: 조건을 만족하는 요소가 1개 이상 있는지
const everyReturn = numbers.every((el) => el > 5);

const numbers = [1, 2, 3, 4];

numbers.reduce((acc, el, i, arr) => {
    return nextAccValue;
}, initialAccValue);

const sumAll = numbers.reduce((acc, el, i) => {
    console.log(`${i}번 index 요소로 콜백함수가 동작중입니다.`);
    console.log('acc:', acc);
    console.log('el:', el);
    console.log('----------------');

    return acc + el;
}, 0); //초기값 = 0

console.log('sumAll:', sumAll);

//Map: 이름 있는 데이터 저장(다양한 자료형 key 사용 가능)

// Map 생성
const codeit = new Map();

// set 메소드
codeit.set('title', '문자열 key');
codeit.set(2017, '숫자형 key');
codeit.set(true, '불린형 key');

// get 메소드
console.log(codeit.get(2017)); // 숫자형 key
console.log(codeit.get(true)); // 불린형 key
console.log(codeit.get('title')); // 문자열 key

// has 메소드
console.log(codeit.has('title')); // true
console.log(codeit.has('name')); // false

// size 프로퍼티
console.log(codeit.size); // 3

// delete 메소드
codeit.delete(true);
console.log(codeit.get(true)); // undefined
console.log(codeit.size); // 2

// clear 메소드
codeit.clear();
console.log(codeit.get(2017)); // undefined
console.log(codeit.size); // 0

 

//Set: 여러 개의 값 순서대로 저장, 개별 값 접근 불가능, 중복 비허용 

// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has 메소드
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

// size 프로퍼티
console.log(members.size); // 4

// delete 메소드
members.delete('종훈'); // false
console.log(members.size); // 4
members.delete('태호'); // true
console.log(members.size); // 3

// clear 메소드
members.clear();
console.log(members.size); // 0

 

6. 자바스크립트 모듈

모듈화: 하나의 프로그램 ➡️ 기능별 여러 개의 프로그램 

모듈: 독립적인 스코프 

<script type="module" src="printer.js"></script>
//독립적 스코프를 위해 type="module" 추가 + Live Server Extenstion

// printer.js
export const title = 'CodeitPrinter';

export function print(value) {
    console.log(value);
}

// index.js
import { title, print } from './printer.js';

// index.js
//import 시 변수 이름 바꾸기 
import { title as printerTitle, print } from './printer.js';

const title = 'Codeit';
print(title);

//'./printer.js' 파일에서 export 하는 변수 전부 import 
import * as printerJS from './printer.js';

//export문에서 as 사용 가능 
export { title as printerTitle, print };