Front-End/JavaScript 13

[JavaScript] 객체를 병합하는 세 가지 방법 (Object merge)

1. Object.assign() 메서드 const object1 = {a: 1, b: 2}; const object2 = {c: 3, d: 4}; const mergedObject = Object.assign({}, object1, object2); console.log(mergedObject); // Output: {a: 1, b: 2, c: 3, d: 4} Object.assign() 메서드는 JavaScript에서 두 개의 객체를 병합하는 가장 간단한 방법이다. 두 개 이상의 객체를 인수로 전달하면, 모든 객체의 속성을 결합한 새 객체가 생성된다. 2. Spread operator '...' const object1 = {a: 1, b: 2}; const object2 = {c: 3, d: 4};..

[JavaScript] 문법(13) 클래스(Class)

1. 클래스 기초 클래스는 Javascript ES6(ECMAScript6)에 추가된 스펙 2. Class 문법과 사용 constructor(): 생성자 함수로 인스턴스를 생성할 때 실행되는 함수이다. Method: 클래스 내에 정의하는 Method는 prototype에 저장된다. Method는 Function과 다름에 주의한다. Method는 특정 객체에 종속된 것으로 객체가 아닌 반면, Function은 객체로 취급된다. Example Code class User { // 멤버 변수 정의 grade = "Master"; // 생성자 함수 constructor(name, age){ this.name = name; // this를 써줘야 클래스의 멤버 변수로 남는다 한다. this.age = age; }..

[JavaScript] 문법(10) setTimeout() / setInterval()

❑ JavaScript 문법(10) setTimeout() / setInterval() 1. setTimeout(): 일정 시간이 지난 후 함수를 실행 1.1) setTimeout() // 매개변수가 없는 함수 function tikTok() { console.log("tik-tok"); } setTimeout(tikTok, 3000); // 3초가 지난 후 tikTok 함수를 실행 > "tik-tok" // 매개변수가 있는 함수 function printName(name) { console.log(name); } setTimeout(printName, 3000, "citron"); // citron을 매개변수로 넘겨 printName 실행 > "citron" 1.2) clearTimeout(): set..

[JavaScript] 문법(9) 문자열 메소드(String methods)

❑ 문자열 메소드(String methods) 1. length: 문자열 길이 let test = "value"; console.log(test.length); > 5 2. 문자열 인덱싱 let test = "value"; console.log(test[0]); > "v" 3. toUpperCase(), toLowerCase(): 대/소문자로 변환 let test = "Value"; console.log(test.toUpperCase()); > "VALUE" console.log(test.toLowerCase()); > "value" 4. indexOf(): 문자열 위치 찾기 찾는 문자열의 첫 글자 위치를 반환한다. 없을 경우 -1을 반환한다. let test = "Value example"; conso..

[JavaScript] 문법(7) 객체 메소드(Object methods)

❑ 객체 메소드(Object methods) 1. Object.assign(): 깊은 복사(Deep copy) 독립적인 메모리를 사용하는 별도의 객체를 생성하는 깊은 복사를 할 땐 Object.assign() 메서드를 사용한다. 매개변수로는 기존 객체와 복사할 객체를 순서대로 넣는다. 즉, Object.assign(기존 객체, 복사할 객체)이다. 1.1. 빈 객체에 복사 const user = { name: "citron", age: 20 } // 기존 객체: {} (빈 객체) // 복사할 객체: user const user_deepcopy = Object.assign({}, user); // {} + {name: "citron", age: 20} 으로 보면 됨 user_deepcopy.name = "b..

[JavaScript] 문법(6) 대화상자 함수

❑ 대화상자 함수 javascript의 기본 대화상자 메서드 alert, prompt, confirm을 알아본다. 참고로 세가지 함수는 css로 스타일링이 불가하므로 html과 css로 별도의 대화상자를 구현하기도 한다. 디자인과 창의 위치는 브라우저를 따라가는 단점이 있지만 빠른 적용의 장점이 있다. 1. alert(): 알려준다 // 예시) alert("안녕하세요"); 2. prompt(): 값을 입력 받는다 // 예시) const name = prompt("이름을 입력하세요"); 유자바나나 prompt 창을 띄울 때 기본 값을 입력해놓을 수 있다. // 예시) const name = prompt("예약일을 입력해주세요", "2021-09-")..

[JavaScript] 문법(4) 함수(function)

1. 함수 선언 문법 3가지 1.1. 함수 선언문 JavaScript의 함수는 return 타입과 매개변수 타입을 지정하지 않는다. function myFunction(param1, param2, ...) { ... logic return ...; } 1.2. 함수 표현식 let myFunction = function(param1, param2, ...) { ... logic return ...; } [함수 선언문과 함수 표현식의 차이] 함수 선언문은 함수를 호출하는 코드의 위치가 어디서든(함수 선언 위치보다 위/아래) 가능하지만, 함수 표현식은 함수 선언 위치보다 '아래'에서만 가능하다 1.3. 화살표 함수(arrow function) let myFunction = (param1, param2, .....

[JavaScript] 문법(3) 연산자 - 산술(+,-), 비교(==, !=), 논리(OR, AND)

❑ 연산자 기본적인 +, -, *, /, %은 다루지 않는다. 거듭제곱: ** // 예시) console.log(2**3); > 8 증가/감소 연산자: ++, -- // 예시) let num = 10; let result = ++num; console.log(result); > 11 ❑ 비교 연산자 기본적인 , = 는 다루지 않는다. Eqaul: == // 예시) console.log(1==1); > true 주의) 숫자형과 문자형을 비교할때 주의해야 한다 // 예시) console.log(1=="1"); > true 숫자형이 문자형으로 자동 형변환 되기 때문으로 유추할 수 있다. Not Equal: != // 예시) console.log(1!=1); > false Value and Type Eqaul:..

[JavaScript] 문법(2) 형 변환

❑ 형 변환 1. String(): 문자형으로 변환 // 예시) console.log(typeof String(3)); // Number → String console.log(typeof String(true)); // Boolean → String console.log(typeof String(null)); // object → String console.log(typeof String(undefined)); // undefined → String 2. Number(): 숫자형으로 변환 // 예시) // String → Number console.log(typeof Number("3")); > "number" console.log(Number("3")); > 3 console.log(typeof Num..

[JavaScript] 문법(1) 변수 선언과 자료형

변수 선언 1. let : 변수 선언시 사용 수정이 가능한 변수를 선언할 때 사용한다. let 을 사용하면 동일한 변수명으로 두번 이상 let으로 정의할 수 없다. // 예시) // let 변수 선언 let test = "value"; console.log(test); > "value" // 변수 수정 test = "update"; console.log(test); > "update" // let 변수 동일 이름 선언: 위에서 선언했기 때문에 error let test = "value"; > "Identifier 'test' has already been declared" 2. const : 상수 선언시 사용 수정이 불가한 상수를 선언할 때 사용한다. // 예시) // const 변수 선언 const t..