JavaScript 6

JavaScript 자료구조와 자료형2

객체 → 키가 있는 컬렉션 저장 배열 → 순서가 있는 컬렉션 저장 1. iterable 객체 반복 가능한(iterable) : for .. of 를 사용할 수 있는 객체 - Symbol.iterator 메서드가 반드시 구현 되어 있어야 함 ** 문자열이나 배열같은 내장 iterable → Symbol.iterator 구현되어 있음 - 객체 {done: Boolean, value: any}을 반환하는 next() 메서드가 구현 되어 있어야 함 예시) 배열, 문자열 ... ** Symbol.iterator는 for .. of에 의해 자동으로 호출됨 (명시적 호출 가능) for (let char of "test") { // 글자 하나당 한 번 실행 (4회 호출). alert( char ); // t, e, s..

JavaScript 2023.03.14

JavaScript 고차함수

다른 함수(caller)의 인자(argument)로 전달되는 함수 ⇒ Callback 함수 Callback 함수를 받는 함수 ⇒ 고차 함수 (higher order function) ** 고차 함수나 콜백 함수나 똑같은 함수 (쓰임에 따라 이름만 다름) ** 메서드 : 객체에 들어 있는 함수 일급객체 (First-class citizen) - 특별한 대우를 받는 함수 - 변수에 할당(assignment)할 수 있음 - 다른 함수의 인자(argument)로 전달될 수 있음 - 다른 함수의 결과로서 리턴될 수 있음 ** 함수가 일급 객체라 고차 함수로 활용 가능 고차함수 (higher order function) - 함수를 인자로 받을 수 있음 - 함수의 형태로 리턴할 수 있음 ** Curry functio..

JavaScript 2023.03.13

JavaScript 자료구조와 자료형1

원시값의 메서드 - JS는 원시값을 객체처럼 다룰 수 있게 해줌 - null 과 undefined를 제외한 원시값에 다양한 메서드를 호출 가능 * 원시값에 메서드를 호출 → 임시 객체가 만들어짐 ⇒ 원시 래퍼 객체(object wrapper) // 예시 - 문자열 let str = "Hello"; alert( str.toUpperCase() ); // HELLO // 예시 - 숫자형 let n = 1.23456; alert( n.toFixed(2) ); // 1.23 ** 내부에서 일어나는 일 1. 문자열 str(원시값)의 프로퍼티(toUpperCase)에 접근하면 원시 래퍼 객체가 만들어짐 2. 메서드가 실행되고, 새로운 문자열이 반환됨 3. 원시 래퍼 객체는 없어지고 원시값 str만 남게 됨 숫자형 ..

JavaScript 2023.03.09

JavaScript 객체

객체 - 몇 가지 특수한 기능을 가진 연관 배열(associative array) - 원시형(primitive type)과 달리 다양한 데이터를 담을 수 있음 - 중괄호를 이용해 만들고 프로퍼티(키-값 쌍)를 저장 ** key : 문자형만 가능 ** Value : 모든 자료형 가능 빈 객체를 만드는 방법 // 객체 생성자 문법 let user = new Object(); // 객체 리터럴 문법 let user = {}; 객체 생성 let user = { name:"jisu", // key : value age: 10, "likes birds" : true // 복수의 단어는 따옴표로 묶음 }; 객체 프로퍼티 사용 - 점 표기법: 키가 유효한 식별자인 경우에만 사용 가능 ** 유효한 식별자 - 공백x, 변..

JavaScript 2023.03.06

JavaScript 기본 문법 요약

1.코드 구조 - 코딩 컨벤션과 같은 스타일 지침서 대부분은 문장 끝에 세미콜론 붙이는걸 권장함 ** Coding Conventions : 읽고 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약 - 세미콜론이 없어도 되는 자리에 세미콜론을 붙이면 무시됨 → 오류 발생하지 않음 // 여러 구문은 세미콜론으로 구분 alert('a'); alert('b'); // 줄 바꿈도 구문 구분에 사용 -> automatic semicolon insertion alert('a') alert('a') // 함수 선언문 끝엔 세미콜론 필요 없음 function f() { ... } // 반복문 끝에도 세미콜론 필요 없음 for(;;) { ... } 2. 엄격 모드 - ECMAScript5(ES5)에 새로운 기능이 추가되..

JavaScript 2023.02.28

JS를 이용하여 간단한 그림판 만들기

JS 개념을 다시 잡아보고 싶어서 강의를 찾아보던 중 아래의 강의가 재밌어보여서 들어봄 https://nomadcoders.co/javascript-for-beginners-2/lobby 개발환경 vscode vscode의 Live Server - 서버 사이드 페이즈를 위한 라이브 서버 (참고) - 수정 후 새로고침 할 필요 없이 바로 확인 가능 - 파일 이름을 index.html로 만들어야 서버에 의해 자동으로 파일이 열림 프로젝트 구성 - 프로젝트 폴더 생성 ( jsPaintMaker) - app.js, index.html, styles.css 파일 생성 vscode에서 index.html 파일을 열고 i를 입력 후 엔터를 누르면 html양식 자동으로 제공해줌 Canvas API - Java Scri..

JavaScript 2023.02.21