js
-
[JS] chapter14. 객체 지향 - 클로저 모듈 패턴codeStates front-end/Java Script 2023. 1. 13. 10:40
📌클로저 모듈 패턴 메서드 호출 객체.메서드() -> 객체 내에 메서드를 호출하는 방법 ⚠️ 화살표 함수 x 카운터 구현 예제 let counter1 = { value: 0, increase: function() { this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다 }, decrease: function() { this.value-- }, getValue: function() { return this.value } } counter1.increase() counter1.increase() counter1.increase() counter1.decrease() counter1.getValue() // 2 클로저를 이용해 매번 새로운 객체 생성 클로저란? 함수를 리..
-
[JS] chapter12. 유효성 검사/ <실습> 회원가입 구현 / classList errorcodeStates front-end/Java Script 2023. 1. 6. 11:46
유효성 검사 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등) 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다. 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다. 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다. 이러한 것들을 유효성 검사라고 한다. ---------------------------------------------------------------------------------------------------------------------------------------------------------------- 유효성 검사를 통한 회원가입 구현 해보기 추가적으로 비밀번호 입력 UI를 HTML을..
-
[JS] chapter9. spread/rest 문법codeStates front-end/Java Script 2023. 1. 5. 14:45
spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용 function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) sum(1,2,3,4)
-
[JS] Chapter 8. 클로저codeStates front-end/Java Script 2023. 1. 5. 14:44
클로저 함수를 리턴하는 함수 // 클로저 함수의 기본 형태 const adder = function (x) { return function(y) { // 리턴값이 함수의 형태 return x+y; } } 외부 함수와 내부 함수 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분됨 const adder = function (x) { return function(y) { return x+y; // 함수 안의 함수가 내부 함수 } // 전체가 외부 함수 } 실습) 외부 함수는 y에 접근 가능한가? 내부 함수는 x에 접근 가능한가? 바깥 스코프에서는 안쪽 스코프 접근 불가 정답 : x 바깥 스코프에서 선언한 변수 접근 가능 정답 : o 클로저의 활용 ☑️ 데이터를 보존하는 함수 외부 함수의 실행이 끝나더라도..
-
[JS] Chapter 7. 스코프codeStates front-end/Java Script 2023. 1. 5. 14:43
스코프 실습) 개념 학습 전 개발자 도구로 실행해보기 let username = 'kimcoding'; if (username) { let message = `Hello, ${username}!`; console.log(message); // Hello, kimcoding! } console.log(message); // undefined 첫 번째 콘솔 출력 결과 → Hello, kimcoding! 두 번째 콘솔 출력 결과 → undefined why? 함수 안에 선언된 변수 message가 바깥쪽에 접근 할 수 없기 때문! 스코프 변수에 접근할 수 있는 범위가 존재하는데 이를 스코프라고 함 스코프의 정의와 규칙 기억해두자! 바깥쪽 스코프에서 선언된 변수는 안쪽 스코프에서 사용 가능 안쪽에 선언한 변수는..
-
[JS] Chapter 5. 객체codeStates front-end/Java Script 2023. 1. 4. 10:22
객채(Object) 객체의 값을 사용하는 방법 let user = { firstName : 'Steve' , lastName : ':Martin' , email : 'steve@gmail.com' , city : 'NY' }; user.firstName; // 1. Dot notation user.city; // 1. Dot notation user['firstName']; // 2. Bracket notation user['city']; // 2. Bracket notation /* [] 안 '', "", 백티 로 반드시 감싸줘야 한다*/ 정리 let tweet = { writer : 'Steeve Martin' createdAt : '2022-02-03' content : 'so funny!' } t..
-
[JS] Chapter 4. 배열codeStates front-end/Java Script 2023. 1. 4. 10:22
배열 : 순서가 있는 값 값 - 요소(element) 순서 - 인덱스(index), 1이 아닌 0부터 번호를 매김 대괄호를 이용해 배열을 만들고, 각각의 원소는 쉼표로 구분 let myNumber = [73, 98, 86, 61, 96]; → myNumber 3번째 인덱스는 61이다. myNumber[3]; // 61 실습 1) myNumber의 1번째 인덱스의 값은? 실습 2) myNumber의 1번째 인덱스의 값의 0번째 인덱스의 값은? let myNumber = [[13,30], [73,8], [44,17]]; //1번째 인덱스의값은 [73,8] 이며, 실습2의 닶은 73이다] 배열로 할 수 있는 것들 let myNumber = [73, 98, 86, 61]; myNumber.length; ..