JavaScript (41) 썸네일형 리스트형 34. 스프레드(Spread) 스프레드(Spread) 연산자 -> 전개구문 - 모든 Iterable은 Spread가 될 수 있음 - 순회가능한 데이터는 펼쳐 질 수 있음 function 함수명(...Iterable) [...Iterable] {...obj} 스프레드 연산자 사용 function add(num1, num2, num3) { return num1 + num2 + num3; } const nums = [10,20,30]; console.log(add(nums[0], nums[1], nums[2])); // 60 // 스프레드 연산자 사용 console.log(add(...nums)); // 60 매개변수에서 스프레드 연산자 사용 // 매개변수에서 스프레드 연산자 사용 function sum(num1, num2, ...nums.. 33. 제너레이터(Generator) 제너레이터(Generator) - 실행을 멈췄다가 나중에 다시 접근할 수 있는 특이한 형태의 함수 - 나중에 다시 접근하기 위해 context(변수)를 저장된 상태로 남겨둠 - 이터레이터를 좀 더 유연하게 사용할 수 있음 - function 키워드 뒤에 *를 붙여 함수가 제너레이터 함수임을 나타냄 function* 제너레이터명(){ } yield - 제너레이터 함수에서 실행을 일시중단 하고, 값을 반환하는 키워드 32. 이터레이터(Iterator) 이터레이터(Iterator) - 반복 처리가 가능한 객체 - 내부적으로 next() 메서드를 가지며 next() 메서드는 IteratorResult 객체 value와 done이라는 프로퍼티를 가진 객체를 반환해야 함 이터러블(Iterable) - 반복이 가능한 객체 - Symbol.Iterator 메서드가 있어야 하며 Symbol.Iterator는 이터레이터 객체를 반환해야 함 - String, Array, Map, Set ..등 객체 - for 문법으로 반복이 가능 이터러블(Iterable) 예제1 이터러블(Iterable) 예제2 31. 이벤트(Event) 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생 - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 - 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델 이벤트타입(Event Type) - 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함 - 키보드, 마우스, HTML DOM, window 객체... 등을 처리하는 이벤트 제공 - https://developer.mozilla.org/ko/docs/Web/API/Event Event - Web API | MDN Event 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다. developer.mozilla.org 이벤트 타입(Event Type) 예제 이벤트 타입 문자열.. 30. wrapper wrapper object Primitive Types(기본 타입 == 원시타입) - string, number, bigint, boolean, undefined, symbol, null - 기본 타입 객체가 아님 - 기본 타입은 프로퍼티와 메서드를 정의할 수 없음 - new 키워드를 사용하여 기본 타입을 래퍼 객체로 생성할 수 있지만, 주로 사용하는 방법은 아님 let a = 'apple'; // Primitive Types으로 저장 let a= new String('apple'); // 객체로 저장 기본타입과 래퍼객체 - string -> String - number -> Number - bigint -> BigInt - boolean -> Boolean - symbol -> Symbol URL, U.. 28. 클래스 심화 클래스 심화 static - 정적 프로퍼티 및 메소드를 생성 - 클래스 레벨 메소드(static)에서는 this를 참조할 수 없음 class Fruit { static count_fruits = 10; // 정적 프로퍼티 선언 constructor(name, emoji){ this.name = name; this.emoji = emoji; } display = () => { console.log(`${this.name}: ${this.emoji}`); } static makeBanana(){ return new Fruit("banana", '🍌'); } } const apple = new Fruit("apple", '🍎'); const orange = new Fruit("orange", '🍊'); con.. 27. 객체 활용법 객체 활용법 객체 선언 let dog = { name: '루시', age:14, "dog-weight": 3.5, // 객체의 프로퍼티 이름에 특수문자를 넣고 싶은 경우, ""이나 ''안에 이름을 넣으면 가능 ["dog-height"]: 0.8 // []안에 ""이나 ''안에 프로퍼티 이름을 넣어도 가능 } 프로퍼티 값 접근 console.log(dog.name); // 루시 // []로 프로퍼티 값 접근하기 console.log(dog['age']); // 14 프로퍼티 추가 dog.family = '포메라니안'; console.log(dog.family); // 포메라니안 console.log(dog["family"]); // 포메라니안 프로퍼티 삭제 delete dog["dog-height"]; /.. 26. 함수 작성법 함수의 기본 // 함수 선언 function sum(num1, num2) { console.log("sum() 호출!"); return num1 + num2; } // 함수 사용 const result = sum(10, 3); console.log(result); // 13 //sum() 호출! 함수와 메모리 // sum() 함수를 add라는 상수에 담음 const add = sum; console.log(sum(10, 3)); // 13 //sum() 호출! console.log(add(10, 3)); // 13 //sum() 호출! 함수 작성 팁 - 조건식이 있을 때 조건을 만족하지 않는 경우 함수 도입부분에서 함수를 미리 종료시키는 것이 좋음 function print(num) { if (num a.. 이전 1 2 3 4 5 6 다음
