![]()
이전에 숫자형을 공부할 때 다음의 부호들을 배웠다. 덧셈, 뺄셈, 곱셈, 나눗셈을 다음과 같은 부호들로 사용하고 퍼센트는 나머지를 구할 때 사용된다. 나머지 값은 생각보다 유용하고 자주 사용된다. 예를 들어 2로 나눈 나머지가 1인지 0인지에 따라 홀수인지 짝수인지 알 수 있고 5보다 작은 수를 얻고 싶으면 아무리 큰 수라도 5로 나눈 나머지를 구해 보면 0에서 4까지의 값만 얻을 수 있다. 거듭제곱을 할 때는 곱하기 부호를 두 번 적으면 된다. 2**3은 2의 3승이므로 8을 반환한다. 연산자를 우선 순위를 갖는다. 곱셈과 나눗셈은 덧셈과 뺼셈보다 우선 순위가 높다. 원하는 값을 얻으려면 괄호를 적절하게 사용해야 한다. 몇몇 연산자는 줄여서 쓸 수 있다. 예를 들어 'num = num + 5'는 'nu..
![]()
toString() // 우리가 실생활에서 사용하는 숫자는 10진수 // 개발하다 보면 2진수나 색상 표현을 위해 16진수가 필요할 때가 있음 let num = 10; num.toString(); // "10" num.toString(2); // "1010" let num2 = 255; num2.toString(16); // "ff" Math // 자바스크립트에는 수학과 관련된 프로퍼티와 메소드를 가지고 있는 Math라는 내장 객체가 있음 // 대표적 프로퍼티의 예로 Math.PI가 있는데 원주율을 보여줌 // Math.PI Math.PI; // 3.141592653589793 // Math.ceil() : 올림 let num1 = 5.1; let num2 = 5.7; Math.ceil(num1); //..
![]()
property key: 문자형 // 객체 프로퍼티 키는 문자형으로 가능 const obj = { 1: '1입니다.', false: '거짓', }; Object.keys(obj); // ['1', 'false'] obj['1']; // "1 입니다." obj['false']; // "거짓" Symbol 유일한 식별자 만들 때 사용 유일성 보장 전체 코드 중 딱 하나라는 것 const a = Symbol(); // new를 붙이지 않는다. const b = Symbol(); console.log(a); // Symbol() console.log(b); // Symbol() a === b; // false a == b; // false // Symbol을 만들 때 설명을 붙여줄 수도 있음 // 설명을 붙여주..
![]()
계산된 프로퍼티(Computed Property) // a라는 변수와 user라는 객체 let a = 'age'; const user = { name: 'Mike', age: 30, // [a] : 30도 가능 // 이렇게 대괄호로 묶으면 a라는 문자열이 아니라 변수 a에 할당된 문자열이 들어가게 됨 // 이를 computed property(계산된 프로퍼티)라고 함 }; // 이렇게 식 자체를 넣는 것도 가능 const user = { [1 + 4]: 5, ['안녕' + '하세요']: 'Hello', }; console.log(user); // {5: 5, 안녕하세요: 'Hello'} 객체 메서드(Object Methods) 객체에서 사용할 수 있는 몇 가지 메서드 소개 Object.assign(): ..
![]()
객체 리터럴 개발하다 보면 비슷한 객체를 여러 개 만들어야 하는 경우 생김 예를 들어 회원, 상품 등.. 그럴 때 쓸 수 있는 것이 바로 생성자 함수 객체에 대한 개념 잘 잡고 있어야 이후 프로토타입, 상속, 클래스에 대해 학습할 수 있음 이해 안 되는 부분 있으면 꼭 복습하기! let user = { name: 'Mike', age: 30, }; 생성자 함수 생성자 함수는 보통 첫 글자를 대문자로 User라는 함수를 만들고 이름과 나이를 인자로 받아 this에 넣어주고 있음 그리고 new 연산자를 사용해 함수를 호출 각각 다른 변수명을 이용해 함수를 호출 전달하는 값도 각각 다르게 전달했음 생성자 함수는 붕어빵 틀이나 와플 팬과 비슷한 역할 필요한 재료들을 넣고 찍어주는 개념(여기에서는 이름, 나이) ..
![]()
let과 const는 ES6부터 생겼다. 그 이전에는 var를 사용했다. var와 let은 크게 다르지 않다. 둘을 바꿔 사용해도 문제가 생기지 않는다. 그런데 var는 한번 선언된 변수를 다시 선언할 수 있다. // var는 한번 선언된 변수를 또 선언할 수 있다. var name = 'Mike'; console.log(name); // "Mike" var name = 'Jane'; console.log(name); // "Jane" // 같은 상황에서 let은 에러가 발생한다. let name = 'Mike'; console.log(name); // "Mike" let name = 'Jane'; console.log(name); // SyntaxError // var는 선언하기 전에 사용할 수 있다...
![]()
Generator 함수의 실행을 중간에 멈췄다가 재개할 수 있는 독특한 기능 Generator 함수 실행하면 Generator 객체가 반환됨 Generator 객체는 next() 메서드가 있음 function* fn() { console.log(1); yield 1; console.log(2); yield 2; console.log(3); console.log(4); yield 3; return 'finish'; } const a = fn(); // 이렇게 Generator 함수 실행하면 Generator 객체만 반환되고 함수 본문 코드는 실행되지 않음 console.log(a); // fn {} console.log(a.next()); // 1 // {value: 1, done: false} conso..
![]()
async async/await을 사용하면 Promise에 then 메서드를 chain 형식으로 호출하는 것보다 가독성이 향상된다. // 함수 앞에 async를 붙이면 항상 Promise를 반환한다. async function getName() { return 'Mike'; } console.log(getName()); // Promise {: 'Mike'} // 그래서 함수를 호출하고 then을 사용할 수가 있다. async function getName() { return 'Mike'; } getName().then((name) => { console.log(name); // "Mike" }); // 만약에 여기서 반환값(return)이 Promise면 해당 값을 그대로 사용한다. async func..
![]()
const user = { name: 'Mike', }; console.log(user.name); // "Mike" console.log(user.hasOwnProperty('name')); // true console.log(user.hasOwnProperty('age')); // false 상속 const car = { wheels: 4, drive() { console.log('drive..'); }, }; const bmw = { color: 'red', navigation: 1, }; const benz = { color: 'black', }; const audi = { color: 'blue', }; bmw.__proto__ = car; const x5 = { color: 'white', n..
![]()
Class ES6에 추가된 스펙 new를 통해 호출했을 때, 내부에서 정의된 내용으로 객체를 생성하는 것은 동일 일단 class라는 키워드를 사용하고, 내부에 constructor가 있음 constructor는 객체를 만들어 주는 생성자 메서드 new를 통해 생성하면 자동 실행 const User = function (name, age) { this.name = name; this.age = age; this.showName = function () { console.log(this.name); }; }; const mike = new User("Mike", 30); class User2 { constructor(name, age) { this.name = name; this.age = age; } //..
![]()
setTimeout 일정 시간이 지난 후 함수를 실행한다. function fn() { console.log('3초'); } setTimeout(fn, 3000); // 3000 = 3s // 이 코드는 3초 후에 로그를 찍어줌 setTimeout(function () { console.log('3초'); }, 3000); // 위 코드와 동일 const tId = function showName(name) { console.log(name); }; setTimeout(showName, 3000, 'Mike'); // setTimeout(함수, 시간, 인수); clearTimeout(tId); // 예정된 시간을 없애기 // 3초가 지나기 전에 이 코드가 실행되므로 아무 일도 일어나지 않음 setInte..
![]()
인수 전달 function showName(name) { console.log(name); } showName('Mike'); // 'Mike' showName('Mike', 'Tom'); // 'Mike' // 자바스크립트에서 함수에 넘겨주는 인수의 개수는 제약 없음 // 인수 개수 정해놓고 함수 만들어도 실제 호출할 때 정확히 그 개수 맞출 필요도 없음 showName(); // undefined => 이렇게 아무것도 전달하지 않아도 작동되긴 함 arguments 함수로 넘어온 모든 인수에 접근 함수 내에서 이용 가능한 지역 변수 length / index 배열 아니고 Array 형태의 객체 배열의 내장 메서드 없음(forEach, map 사용 불가능) function showName(name) { ..
![]()
배열 구조 분해 let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 1 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; // let user1 = users[0]; // let user2 = users[1]; // let user3 = users[2]; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' let str = 'Mike-Tom-Jane'; let [user1, user2, user3] = str.split('-'); console.log(user1);..
![]()
arr.sort() 배열 재정렬, 배열 자체가 변경되니 주의 인수로 정렬 로직을 담은 함수를 받음 let arr = [1, 5, 4, 2, 3]; arr.sort(); console.log(arr); // (5) [1, 2, 3, 4, 5] let arr = ['a', 'c', 'd', 'e', 'b']; arr.sort(); console.log(arr); // (5) ['a', 'b', 'c', 'd', 'e'] let arr = [27, 8, 5, 13]; arr.sort(); console.log(arr); // (4) [13, 27, 5, 8] let arr = [27, 8, 5, 13]; arr.sort((a, b) => { console.log(a, b); return a - b; // 8 ..
![]()
Array push() // 뒤에 삽입 pop() // 삭제 unshift() // 앞에 삽입 shift() // 앞에 삭제 arr.splice(n, m, x) n번째 요소부터 m개를 지운다. x로 교체할 수도 있다. let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); console.log(arr); // [1, 4, 5] let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); console.log(arr); // [1, 100, 200, 5] let arr = ["나는", "철수", "입니다"]; arr.splice(1, 0, "대한민국", "소방관"); // ["나는", "대한민국", "소방관", "철수", "입니다"] arr.s..
![]()
구조 분해 할당 ES6의 구조 분해 할당(Destructuring)은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다. 객체 구조 분해 할당 클린 코드를 위해 사용한다. function buildAnimal (animalData) {...} function buildAnimal(animalData) { let accessory = animalData.accessory, animal = animalData.animal, color = animalData.color, hairType = animalData.hairType; } let obj = { accessory: "horn", animal: "horse", color: "purple", hairTyp..
