모던 자바스크립트

(function init() { // 프로그램이 실행 될 때 기본적으로 동작할 코드들.. })();

const firstName = Young; const lastName = Kang; const greetingMessage = (function () { const fullName = `${firstName} ${lastName} `; return `Hi! My name is ${fullName}`; })();

const getTwice = (number) => { return number *2; } const getTwice = number => number *2; myBtn.addEventListener('click',() =>{console.log('button is called');});

if(조건){ }else{ } 조건 연산자 -> 삼항연산자 조건 ? truthy할 때 표현식 : falsy할 때 표현식 return score > CUT_OFF? '합격!': '불합격!'; const msg = x > 3 ? 'x는 3보다 크다.' : 'x는 3보다 크지 않다.'; 조건에 따른 결과 값을 msg에 넣는 것

여러개의 배열을 개별적인 요소로 펼치는 것 const numbers = [1,2,3]; console.log(...numbers); -> 1,2,3 => Rest Parameter랑 문법이 비슷하다. 근데 동작하는 방식이 다르니까 착각하지 말자! 객체 타입은 참조형으로 전달된다. 이 때 배열을 복사할 때 spread구문을 사용하며 복사가 가능하다. const interacttiveWeb = [...webPublishing, 'Javascript']; 여러개의 parameter가 있는 함수에 스프레드 구문을 활용하여 펼쳐서 전달할 수 있다. 스프레드를 펼쳐서 객체로 만들면 index -> property 가 된다. const newObject = {... members };

const codeit = { name: 'codeit', }; const codeitClone = { ...codeit,// spread 문법! }; console.log(codeit);// {name: "codeit"}console.log(codeitClone);// {name: "codeit"}

const latte = { esspresso: '30ml', milk: '150ml' }; const cafeMocha = { ...latte, chocolate: '20ml', } console.log(latte);// {esspresso: "30ml", milk: "150ml"}console.log(cafeMocha);// {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}

const latte = { esspresso: '30ml', milk: '150ml' }; const cafeMocha = { ...latte, chocolate: '20ml', } [...latte];// Error (function (...args) { for (const arg of args) { console.log(arg); } })(...cafeMocha);// Error

const title = 'Codeit'; const birth = 2017; const job = '프로그래밍 강사'; const user = { title: title, birth: birth, job : job } 변수에 할당된 값을 활용해서 프로퍼티를 만들 수 있다. 활용할 변수의 이름과 프로퍼티 네임이 같다면 하나만 작성하는 표현이 가능하다.] const title = 'Codeit'; const birth = 2017; const job = '프로그래밍 강사'; const user = { title birth job } 변수 뿐만 아니라 함수 또한 메소드로 할 때 축약형 표기가 가능하다. 객체 내부에서 메소드를 선언할 때도 활용할 수 있다. const user = { getFullName: function(){ return '${this.firstName} ${this.lastName}'; } } 콜론과 function을 생략할 수 있다. const user = { getFullName(){ return '${this.firstName} ${this.lastName}'; } } 계산된 속성명(computed property name) 대괄호로 감싸서 속성을 작성할 수 있다. 변수에 감싸면 함수의 리턴값이나 변수의 이름을 속성이름으로 사용할 수 있다. const user = { ['Code'+'it']: 'value'; } console.log(user)

nction printCatName(user) { console.log(user.cat?.name); }

function printCatName(user) { console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name); }

function printCatName(user) { console.log(user.cat?.name ?? '함께 지내는 고양이가 없습니다.'); } const user2 = { name: 'Young', } printCatName(user2);// 함께 지내는 고양이가 없습니다.

const [macbook. ipad, airpods, coupon] = rank; rank 배열에 있는 요소들을 각 변수에 집어넣는 것 할당 연산자의 오른쪽이 배열의 형식이 아니거나 아예 아무거도 할당하지 않으면 오류가 난다. 선언된 길이의 변수와 배열의 길이가 같을 필요는 없다. 인덱스에 따라 순서대로 변수에 할당된다. 변수가 부족하면 그냥 배열 요소가 할당이 안된다. 가장 마지막 변수에 마침표 세개를 붙이면, 남은 요소를 마지막 변수에 배열로 할당한다. const[macbook, ipad, airpods, ...coupon] = rank; 할당하는 배열의 길이가 변수 개수 길이보다 작으면 남은 변수에는 undefined가 할당된다. 기본값을 할당할 수 있다. const [macbook,. ipad, airpods, coupon = "기본"]; 변수 값을 swap할 때 쓰인다. [macbook, ipad ] = [ipad, macbook];

const {title,price} = macbook; 객체에서 변수의 이름과 똑같은 property name이 있으면 그 값을 집어넣는다. 객체에 존재하지 않는 프로퍼티 네임으로 변수가 되어있으면, undefined가 뜨고, 기본값을 지정할 수도 있다. const{ title, ...rest} = macbook; 해당하는 프로퍼티 네임에 값을 넣은 다음에, 나머지 프로퍼티 네임들을 모아서 객체로 넣는다. const[title: product, ...rest} = macbook; 이러면 title이라는 프로퍼티가 product라는 변수에 집어넣는다.

//배열// function getArray(){ return ['컴퓨터','냉장고','세탁기'] } const [el1,el2,el3] = getArray(); 함수의 리턴값이 배열일 때 destructuring할 수 있다. rest파라미터가 배열이라는 점을 가지고, destructuring을 할 수 있다. 애초에 파라미터 부분에서 destructuring문법을 바로 활용할 수도 있다. //객체// 파라미터를 객체의 형태로 작성한 경우 함수에서 프로퍼티들을 접근할 때, destructuring문법을 사용해서 간결하게 사용할 수 있다. 파라미터 부분에서 바로 destructuring 문법을 사용할 수 있다. DOM 이벤트를 다룰 때 다루기 쉽다. 이벤트 핸드러를 다룰 때, 이벤트 핸들러의 타겟 프로퍼티로 destructuring

console.log('시작!'); const title = '코드잇'; console.log(title); console.log('끝!');

const members = {} members.forEach(function(member){ console.log('${member}님이 입장하셨습니다.') }); 객체.forEach(함수,인덱스,반복중인 배열); 배열의 경우에는 변수에 담지 않은 배열에 접근해서 쓰고 싶을 때 주로 쓴다. map 객체.map(함수,인덱스,반복중인 배열); 콜백 함수 내에서 리턴 값을 작성해주게 되면 결과값을 담은 새로운 배열을 리턴한다. 단순히 배열의 반복 작업 -> forEach 반복 작업을 통해서 새로운 배열이 필요하면 -> map 최대 반복 횟수: 콜백 함수 내부에서 반복 중인 배열을 편집할 수 있다. 반복횟수는 초기의 반복 대상의 길이이다. 다만 요소를 제거하는 경우에는 반복 횟수도 줄어든다.

const apples = devices.filter((el) ==> el.brand === 'Apple'); 어떤 조건에 대해 필터링된 새로운 배열을 얻고 싶을 때 const myLaptop = devices.find((el) => el.name == "Gram"); 리턴 값이 값이다. find의 경우에는 조건을 만족하는 하나의 경우만 찾아서, 찾고나면 바로 종료된다. 존재하지 않는 값을 find로 찾으려고 하면 undefined 값이 도출된다.

some: 조건을 만족하는 요소가 1개 이상 있는지 every: 모든 요소가 조건을 만족하는지 const someReturn = numbers.some((el) => el>5); const everyReturn = numbers.every((el) => el>5); const someReturn = numbers.some((el,i)=> { console.log('some:',i); return el > 5; }); some => 만족하는 요소가 하나라도 있는 순간 true를 리턴하고 반복을 종료 every => 조건을 만족하지 않는 요소가 찾아지는 순간 false를 리턴하고 반복을 종료 빈 배열인 경우 some -> false, every -> true이다.

const numbers = [1,2,3,4]; numbers.reduce((acc,el,i,arr) => { return nextAccValue;},initialAccValue); acc => Accumulator 처음 함수의 콜백 함수의 리턴 값을 그 다음 콜백 함수의 acc에 전달한다. initialAccValue => 첫번째 콜백 함수가 동작할 때 acc값 두번째 argument => 선택사항 생략하면 배열의 0번 인덱스에 있는 값이 첫번째 acc로 전달된다. 근데 이럴 경우에 동작하기로는 1번째 배열부터 시작된다.

const letters = ['D', 'C', 'E', 'B', 'A']; const numbers = [1, 10, 4, 21, 36000]; letters.sort(); numbers.sort(); console.log(letters);// (5) ["A", "B", "C", "D", "E"]console.log(numbers);// (5) [1, 10, 21, 36000, 4]

const numbers = [1, 10, 4, 21, 36000]; // 오름차순 정렬 numbers.sort((a, b) => a - b); console.log(numbers);// (5) [1, 4, 10, 21, 36000]// 내림차순 정렬 numbers.sort((a, b) => b - a); console.log(numbers);// (5) [36000, 21, 10, 4, 1]

const letters = ['a', 'c', 'b']; const numbers = [421, 721, 353]; letters.reverse(); numbers.reverse(); console.log(letters);// (3) ["b", "c", "a"]console.log(numbers);// (3) [353, 721, 421]

// 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('동욱'));// trueconsole.log(members.has('현승'));// false// size 프로퍼티console.log(members.size);// 4// delete 메소드 members.delete('종훈');// falseconsole.log(members.size);// 4 members.delete('태호');// trueconsole.log(members.size);// 3// clear 메소드 members.clear(); console.log(members.size);// 0

// Set 생성const members = new Set(); // add 메소드 members.add('영훈');// Set(1) {"영훈"} members.add('윤수');// Set(2) {"영훈", "윤수"} members.add('동욱');// Set(3) {"영훈", "윤수", "동욱"} members.add('태호');// Set(4) {"영훈", "윤수", "동욱", "태호"}for (const member of members) { console.log(member);// 영훈, 윤수, 동욱, 태호가 순서대로 한 줄 씩 콘솔에 출력됨. }

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

const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4]; const uniqNumbers = new Set(numbers); console.log(uniqNumbers);// Set(5) {1, 3, 4, 2, 5}

export const title = 'CodeitPrinter'; export function print(value){ console.log(value); } import {title, print} from './printer.js'; print(title);