개발 일기

setTimeout ✔️ 일정 시간이 지난 후 함수를 실행 // setTimeout 기본 사용법1 function fn(){ console.log(3); } setTimeout(fn, 3000); //3초후 fn 실행 // setTimeout 기본 사용법2 setTimeout(function(){ console.log(3); },3000); //매개변수가 들어갔을 때 function showName(name){ console.log(name); } setTimeout(showName, 3000, 'Kay'); //3초후 Kay를 인수로 넣은 showName 함수 실행 clearInterval() 으로 실행을 종료할 수 있음. setInterval ✔️ 일정 시간 간격으로 함수를 반복 function sh..

Object.keys, values, entreis ✔️ Object.keys(obj) : 객체의 키만 담은 배열을 반환 ✔️ Object.values(obj) : 객체의 값만 담은 배열을 반환 ✔️ Object.entries(obj) : [키, 값] 쌍을 담은 배열을 반환. 객체 값들의 합 반환하기 function sumSalaries(salaries) { let result = 0; for (let value of Object.values(salaries)) { result += value; } return result; } let salaries = { "John": 100, "Pete": 300, "Mary": 250 }; console.log(sumSalaries(salaries)); 프로퍼티 ..

구조 분해 할당이란? ✔️ 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 ✔️ 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 유용. ✔️ 객체나 배열의 요소를 변수로 연결할 수 있다. 배열 구조 분해 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); //Mike //split으로 분해한 배열도 바로 변수에 할당할 수 있다. let str = "Mike-Tom-Jane"; let [user1, user2, user3] = str.split('-'); console.log(user2); //Tom //일부 반환값 무시하기 let ..

요소 추가 ·제거 메서드 arr.push( ) ✔️ 배열의 끝에 삽입 ✔️ 파라미터로 전달된 배열을 하나의 원소로 처리한다 -> 그래서 arr1.length = 4가 되어버림 //push() 함수로 배열 합치기 const arr1 = [1,2,3]; const arr2 = [4,5,6]; arr1.push(arr2); console.log(arr1); //[1,2,3,[4,5,6] ✔️ 배열의 원소들을 각각 넣어서 합치기 위해서는 spread operator도 함께 사용. const arr1 = [1,2,3]; const arr2 = [4,5,6]; arr1.push(...arr2); console.log(arr1); //[1,2,3,4,5,6] arr.pop( ) ✔️ 배열에서 마지막 요소를 제거하고 ..

백틱(`) ✔️ 문자와 변수를 자유롭게 사용할 수 있음 ✔️ 여러줄 사용 가능 let value = `이 식의 정답은 ${result} 이다.`; let value = `이 값은 줄 바꿔쓰기도 가능`; length ✔️ 문자열 길이 ✔️ 주로 가입시 아이디, 비밀버호의 길이 제한할때 사용 let desc = '안녕하세요.'; console.log(desc.length); //6 특정 위치에 접근 ✔️ 문자는 배열을 이용한 특정 위치에 접근할 수 있다. let desc = '안녕하세요'; console.log(desc[2]); //하 toUpperCase( ) / toLowerCase( ) let desc = "hi"; console.log(desc.toUpperCase()); // HI let desc ..

화살표 함수 ✔️ 함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 방법 ✔️ 본문이 한 줄인 함수를 작성할 때 유용. // 함수 표현식 let sum = function(a,b){ return a+b; } // 화살표 함수 let sum = (a,b) => a + b; // 본문이 여러줄인 화살표 함수 let sum = (a,b) => { let result = a+b; return result; } // 인수가 하나일때 괄호 생략 let double = n => n*2; // 인수가 없을 때 괄호 생략 불가 let sayHi = () => alert('hi'); Reference https://ko.javascript.info/arrow-functions-basics

함수 표현식 ✔️ 함수를 만들고 그 값을 변수에 할당하고 싶을 때 표현식으로 사용. //함수 선언 -> sayHi라는 함수 선언시 이 함수는 sayHi라는 변수에 저장된다. function sayHi(){ alert('hi'); } //함수 표현식 let sayHi = function(){ alert('hi'); } sayHi(); //hi // 함수 복사 let func = sayHi; func(); //hi 콜백 함수 ✔️ 함수를 함수의 인수로 전달하고 ✔️ 인수로 전달한 그 함수를 나중에 호출 function ask(question, yes, no){ if(confirm(question)) yes() else no(); } function showOk(){ alert('동의하셨습니다.'); } fu..

함수 선언 function showMessage(){ alert('안녕하세요'); } 함수 호출 function showMessage(){ alert('안녕하세요'); } showMessage(); 지역 변수 ✔️ 함수 내에서 선언한 변수는 함수 내에서만 접근할 수 있다. function showMessage(){ let message = '안녕'; alert(message); } showMessage(); //안녕하세요! alert(message); //ReferenceError 전역 변수 ✔️ 함수 외부에 선언된 변수 ✔️ 모든 함수에서 접근할 수 있다. let userName = 'John'; function showMessage(){ let userName = 'Bob'; let message =..

정적 메서드 ✔️ prototype이 아닌 클래스 함수 자체에 메서드를 설정하는 것. ✔️ static 키워드를 붙여 만들 수 있다. ✔️ 특정한 객체가 아닌 클래스에 속한 함수를 구현하고자 할 때 사용 ❓prototype 안에 설정하는 메서드가 아니라고 했느데... ❓ 타입스크립트에서와의 차이 class User { static staticMethos(){ alert(this === User); } } //class User를 객체로 만들어주지 않아도 호출할 수 있다. User.staticMethod(); // true 정적 프로퍼티 ✔️ 일반 클래스 프로퍼티와 유사하게 생겼지만 static 키워드가 추가된다. ❓ new 로 객체로 만들어주지 않아도... static을 붙이면 이 클래스 함수 자체의 메..

클래스 상속 왜 필요한건데? ✔️ 기존에 존재하는 클래스를 토대로 새로운 클래스를 만들고 싶을 때 사용함. extends 키워드 ✔️ 다른 클래스로 extends 키워드를 통해 프로토타입을 상속시켜줄 수 있다. class Animal { constructor(name){ this.speed = 0; this.name = name; } run(speed){ this.speed = speed; alert(`${this.name} 은 속도 ${this.speed}로 달립니다.`); } stop(){ this.speed = 0; alert(`${this.name} 이 멈췄습니다.`); } } let animal = new Animal('동물'); //이러한 Animal의 프로퍼티를 상속받는 Rabbit clas..