객체 (11) 썸네일형 리스트형 [Typescript] 인터페이스(interface) let user:object; user = { name : 'xx', age : 30 } console.log(user.name); // Error object에는 특정 속성 값에 대한 정보가 없기 때문에 위 코드는 에러가 발생한다. 이처럼 프로퍼티를 정해서 객체를 표현하고자 할 때는 인터페이스를 사용한다. interface User { name : string; age : number; } let user : User = { name : 'xx', age : 30 } console.log(user.age); // 30 인터페이스를 활용해 user 객체의 age 속성에 접근하면 에러가 발생하지 않는다. optional, readonly, index type Score = 'A'|'B'|'C'|'F'; i.. [Javascript] 클래스(Class) 지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용했었다. const User = function(name, age){ this.name = name; this.age = age; this.showName = function(){ console.log(this.name); }; }; const mike = new User("Mike", 30); 클래스로도 비슷한 형태의 객체를 만들 수 있다. 클래스는 ES6에 추가된 스펙이다. class User2 { constructor(name, age){ this.name = name; this.age = age; } showName(){ console.log(this.name); } } const tom = new User2("Tom", 10); cl.. [Javascript] 상속, 프로토타입(Prototype) const user = { name : 'Mike' } user.name; // "Mike" user.hasOwnProperty('name'); // true user.hasOwnProperty('age'); // false hasOwnProperty는 자신이 프로퍼티를 가지고 있는지 확인하는 함수이다. user 객체에 name이라는 프로퍼티가 있으므로 true가 나오고, age라는 프로퍼티는 없으므로 false가 나온다. hasOwnProperty는 만든 적이 없는데 어디에 있는 것일까? __proto__라는 객체에 들어있다. 객체에서 프로퍼티를 찾으려고 하는데 없으면 여기에서 찾는다. const user = { name : 'Mike' hasOwnProperty : function(){ console.. [Javascript] call, apply, bind 함수 호출 방식과 관계없이 this를 지정할 수 있는 call, apply, bind 메서드에 대해 알아보자. call call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있다. const mike = { name : "Mike", }; const tom = { name : "Tom", }; function showThisName(){ console.log(this.name); } showThisName(); // ? showThisName 메서드를 호출했을 때 아무것도 뜨지 않는다. 여기에서 this는 window를 가리킨다. window.name이 빈 문자열이기 때문에 아무것도 뜨지 않는 것이다. showThisName.call(mike); // Mike showThi.. [Javascript] 구조 분해 할당(Destructuring assignment) 구조 분해 할당이란? 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' let [user1, user2, user3] = users; 은 let user1 = users[0]; let user2 = users[1]; let user3 = users[3]; 과 같다. let str = "Mike-Tom-Jane"; let [user1, user2, user3] = str.split(.. [Javascript] 심볼(Symbol) 지금까지 객체의 property key는 문자형으로 만들었다. const obj = { 1: '1입니다.', false: '거짓' } Object.keys(obj); // ["1", "false"] obj['1'] // "1입니다." obj['false'] // "거짓" 숫자형이나 boolean형으로 만들어도 Object.keys로 key들을 가져오면 문자형으로 반환되며, 실제로 접근할 때도 문자형으로 접근할 수 있다. 문자형 외에 Symbol형이 가능하다. Symbol은 유일한 식별자를 만들 때 사용한다. const a = Symbol(); // new를 붙이지 않는다!! const b = Symbol(); console.log(a) // Symbol() console.log(b) // Symbol().. [Javascript] 계산된 프로퍼티(Computed property), 객체 메소드(Object methods) 계산된 프로퍼티(Computed property)[] 을 이용해서 객체의 변수명에 미리 계산된 변수를 넣는 것이 가능하다.let a = 'age';const user = { name : 'Mike', [a] : 30 // age : 30}식 자체가 들어가는 것도 가능하다.const user = { [1 + 4] : 5, // 5 : 5 ["안녕"+"하세요"] : "Hello" // 안녕하세요 : "Hello"} 객체 메소드(Object methods)Object.assign() : 객체 복제const user = { name : 'Mike', age : 30,}// const cloneUser = user;const newUser1 = Object.assi.. [Javascript] 생성자 함수 개발을 하다보면 비슷한 객체를 여러 개 만들어야 하는 상황이 생긴다. 그럴 때 쓸 수 있는 것이 생성자 함수이다. 생성자 함수는 첫 글자를 대문자로 해서 함수로 만들어준다. new 연산자를 사용해서 함수를 호출한다. function User(name, age){ this.name = name; this.age = age; } let user1 = new User('Mike', 30); let user2 = new User('Jane', 22); let user3 = new User('Tom', 17); 비슷한 객체 3개를 만들었다. 생성자 함수는 와플 틀이라면 생성되는 객체들은 와플이라고 생각하면 된다. 동작하는 방식은 function User(name, age){ //this = {}; this.nam.. 이전 1 2 다음
