전체 글

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) { ..