To infinity/Javascript 이론
-
[Javascript] Object_프로토타입 1To infinity/Javascript 이론 2021. 7. 8. 11:55
자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 객체지향 프로그래밍? - 객체의 집합으로 프로그램을 표현하려는 패러다임. - 속성을 통해 실체를 인식 - 여러 속성 중 필요한 속성만 추려내는 것 -> 추상화 - 객체: 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적 자료구조 상태데이터와 동작을 하나의 논리 단위로 묶은 복합적 자료구조 (속성(프로퍼티); 상태를 나타내는 데이터, 정적 / 동작(메서드); 상태 데이터를 조작, 동적) 예를들어, 원의 반지름은 '상태'이고 해당 반지름으로 원의 넓이, 부피, 둘레 등을 구하는 것은 '동작'이다. => 객체는 프로퍼티와 메서드로 이뤄져있다. 상속과 프로토타입 function Circle(radius) { this.radius = radius..
-
[Javascript 이론] Object_함수는 일급객체, 함수 고유의 프로퍼티는?To infinity/Javascript 이론 2021. 7. 8. 10:34
1. 일급객체 다음 조건을 만족한다면, 넌, 일급객체다. 무명의 리터럴로 생성가능. 즉, 런타임에 생성이 가능하다 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. => 함수형 프로그래밍을 가능케하는 자바스크립트의 장점 자바스크립트의 함수는 위 조건을 모두 충족하므로 일급객체다. 즉, 함수를 객체와 동일하게 사용할 수 있다는 것이다. 객체는 값이므로 함수는 값이다. 함수객체는 일반객체에 없는 함수 고유의 프로퍼티를 소유한다. 프로퍼티 예를 들어보자 __proto__ : Oject.prototype 객체의 프로퍼티 (접근자 프로퍼티) arguments, caller, length, name, prototype: 함수 객체 고유의 프..
-
[Javascript 이론] Object 프로퍼티 열거 시 특징 (for...in문)To infinity/Javascript 이론 2021. 7. 8. 08:59
모든 프로토타입 열거 for..in문은 순회하는 객체의 프로퍼티 뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다. 즉, 객체의 프로토타입 체인 상에 존재하는 모~든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]] 값이 true인 항목은 모두 열거한다는 것이다. [참고] 프로퍼티 어트리뷰트 [[Enumerable]] 는 프로퍼티의 열거가능 여부를 나타내며 불리언 값을 갖는다. 좀 쉽게 얘기하자면 나의 프로퍼티뿐만 아니라 내가 속해있는 프로토타입의 프로퍼티를 모두 열거한다는 것이다. 하지만 객체 자신의 프로퍼티인지 확인해야해 만약에 객체 나 자신의 프로퍼티만 열거하고 싶다면 Ojbect.prototype.hasOwnProperty 메서드를 사용해 객체 자신의 프로퍼티인지를 ..
-
[Javascript 이론] 객체의 프로퍼티 키, 값 불러오는 법To infinity/Javascript 이론 2021. 7. 8. 07:47
1. for..in문 사용 for (변수선언문 in 객체) {...} 1. 객체의 프로퍼티 개수만큼 순회한다. 2. 변수선언문에서 선언한 변수에 프로퍼티 키를 할당한다. 3. 따라서 프로퍼티 값을 불러오고 싶다면 객체[프로퍼티키] 를 불러와주면 된다. 말로만 보면 뭔소린지 모르니까 예시를 보자. let result = { 'a':2, 'b':1 } let answer = [] for (const key in result) { answer.push(key) // ['a','b'] 키를 가져와 열거한다. answer.push(result[key]) // [2,1] 밸류을 가져와 열거한다. } 1) const key in result // result의 key를 불러온다. 'a', 'b' 2) result[k..
-
[Javascript 이론] Map (feat. object)To infinity/Javascript 이론 2021. 7. 4. 21:30
1. 생성자함수 - const map = new Map( [[ 'key', 'value' ]] ) [ 'key', 'value' ]로만 적으면 오류남. - Map 객체에는 중복된 키를 갖는 요소가 존재하지 않는다. (덮어쓰기가 되기 때문) 2. 요소 개수 확인 - const { size } = new Map([[ '1', 1 ] , [ '2', 2 ]]); - getter 함수만 존재(setter X), 요소개수 변경 불가. 3. 요소 추가 - map.set('2', 2); - 새로운 요소가 추가된 객체를 반환하므로 연속적으로 호출이 가능함. - NaN과 Nan, 그리고 +0과 -0을 같다고 판단하기에 key로서의 중복추가가 불허하다. - 키 타입에 제한없음 4. 요소 취득 -map.get 5. 요소 존..
-
[Javascript 이론] 일반함수, ES6 메서드 함수, 화살표함수 비교To infinity/Javascript 이론 2021. 7. 4. 13:00
문제 함수 사용목적에 따른 명확한 구분이 없음 해결 ES6에서 함수 사용 목적에 따라 세가지 종류도 구분 사진 1. 일반함수 2. 메서드 - 일반적으로는 메서드는 객체에 바인딩된 함수를 일컫는 의미 - ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미 - super, argument만 갖음 const test = { test : function () {} //일반함수 } const test = { test() {} //메서드 축약 표현 } - 메서드는 호출객체를 참조해야하니까 화살표함수로 정의하지 말고 ES6 메서드를 사용할 것. - 클래스 필드에 할당할 때에도 메서드 사용. 3. 화살표함수 - 콜백함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안 일반함수와의 비교 -..
-
[Javascript] 객체리터럴 vs 생성자함수, 그리고 thisTo infinity/Javascript 이론 2021. 6. 27. 14:31
객체 리터럴 vs 생성자 함수 // 객체리터럴 = { key : value } 즉, : 로 연결 const profile = { name: 'buzz', born: 1995 } console.log(profile); //{ name: 'buzz', born: 1995 } // 생성자함수 = { this.key = value 인자} function inform(name, born) { this.name = name, this.born = born } const profile2 = new inform('buzz',1995) console.log(profile2); //inform { name: 'buzz', born: 1995 } 1. 객체리터럴로 객체를 생성할 때랑 생성자함수로 생성할 때랑 키랑 값을 연결..