본문 바로가기

프로그래밍 공부/JavaScript

 (55)
JavaScript - 캡슐화 캡슐화는 잘못 사용될 수 있는 객체의 특정 부분을 사용자가 사용할 수 없게 막는 기술이다. 생성자 함수를 이용한 사각형의 넓이를 구하는 코드 function Rectangle(width, height){ this.width=width; this.height=height; } Rectangle.prototype.getArea=function(){ return this.width*this.height; } let rectangle = new Rectangle(5,7); alert('넓이 : '+rectangle.getArea()); 위에 경우는 실행할때는 문제가 없지만, 길이에 음수를 넣을 수 있다. 제작자는 당연히 길이에 음수가 들어갈 수 없다는 것을 알고 있지만 사용자들 중에는 넣을 수 있기 때문이다. ..
JavaScript - 계산기
JavaScript - 클래스 객체지향이라는 이념은 프로그래밍 언어에서 두 가지 방법으로 구분이 된다. 하나는 이전에 배웠던 '프로토타입 기반 객체지향 언어' 이고 다른 하나는 '클래스 기반 객체지향 언어' 이다. 클래스 기반 객체지향 언어 프로토타입 기반 객체지향 언어 C++ 자바스크립트 자바 루아(Lua) C# 파이썬 루비 Objective-C Swift 자바스크립트는 프로토타입 기반 객체지향 언어지만 ECMAScript 6 버전부터 클래스 기반 객체지향 언어처럼 사용이 가능하다. 클래스를 선언할 때는 class를 이용해 선언을 하고 내부에 생성자 함수를 넣는다. 생성자 함수와 마찬가지로 this 키워드를 선언한다. 클래스 기반 언어, 클래스 선언 일반적인 생성자 함수 선언 class Rectangle{ constructor(wi..
JavaScript - 프로토타입 생성자 함수는 일반 함수와 별반 차이가 없어보인다. 지금까지 만들어온 각각의 객체는 여러가지 속성들을 포함하고 또 여러가지 메서드를 함께 포함하는 객체를 만들었었다. 속성은 모든 객체가 다른 값을 가지게 되지만 메서드는 모두 같은 값을 가지게 된다. 이것은 각각의 객체를 생성할 때 마다 동일한 함수를 계속해서 생성해왔다는 것이다. 적은 자료량이라면 상관없지만 자료량이 1000개 2000개씩 늘어나면 같은 함수를 그만큼 1000번 2000번 만큼 돌리는 비효율적인 일이 일어나는 것을 방지하는 것이 프로토타입(prototype)이다. 프로토타입은 생성자 함수로 생성된 객체가 공통으로 가지는 공간이다. 각각의 객체들이 하나의 공통된 프로토타입 공간으로 연결이 되어있는 형태를 취한다. 함수가 여러번 작동을해 메..
JavaScript - 생성자 함수 생성자 함수를 만드는 형태는 아래와 같다. Student 생성자 함수를 만드는 코드이다. 1 2 3 4 5 function Student(){ }; let student=new Student(); cs 위의 function Student(){}; 생성자 함수를 만들고 아래에 new 키워드를 입력해 객체를 생성할 수 있다. 생성자 함수의 이름은 일반적으로 대문자를 사용한다. 대문자로 시작하지 않아도 문제는 없다. 이후 this 키워드를 통해 생성자 함수로 생성될 객체의 속성을 지정하고 생성자 안에 메서드를 만들어서 넣을 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function Student(name, korean, math, english, science){ t..
JavaScript - 객체 연습문제 1. 다음의 표를 객체로 만들어라 속성 값 이름 Nature of Code 가격 30000원 저자 Deniel Shifman ISBM 9788968481901 페이지 620 더보기 1 2 3 4 5 6 7 8 let bookinformation={ 이름:'Nature of Code', 가격:'30000', 저자:'Deniel Shifman', ISBM:9788968481901, 페이지:620 }; console.log(bookinformation); cs 2. 다음의 데이터를 객체 배열로 만들어라 이름 미네랄 가스 보급품 일벌레 50 0 1 여왕 150 0 2 바퀴 75 25 2 히드라리스크 100 50 2 타락귀 150 100 2 더보기 1 2 3 4 5 6 7 let unit=[]; unit.push..
JavaScript - 객체와 배열을 사용한 데이터 관리 현실에 있는 객체를 모두 모방하는 것이 아니라 프로그램에 필요한 속성만을 가져와서 객체화 하는 것을 추상화 라고 한다. 학생들의 성적 총점과 평균을 계산하는 경우를 예로 들수 있다. // 데이터를 통합할 배열을 생성 let students = []; // push() 메서드를 이용해서 각각의 학생 객체 데이터들을 배열에 추가 students.push({ 이름: '최ㅇㅇ', 국어: 99, 수학: 92, 영어: 99, 과학: 91 }); students.push({ 이름: '김ㅇㅇ', 국어: 88, 수학: 88, 영어: 95, 과학: 88 }); students.push({ 이름: '국ㅇㅇ', 국어: 98, 수학: 78, 영어: 99, 과학: 78 }); students.push({ 이름: '이ㅇㅇ', 국어..
JavaScript - 객체의 속성 추가 / 제거 객체에 미리 속성을 넣지않고 빈 객체인 상태로 선언을 하고 동적으로 객체에 속성을 추가하거나 제거할 수 있다. // cart를 식별자로 하는 빈 객체를 선언 let cart={}; // 동적으로 cart 객체에 속성을 추가 cart.item1='MSI Gaming Laptop'; cart.item2='SAMSUNG Galaxy S10+'; cart.item3='Apple iPhone X'; cart.item4='Geforce RTX 2080'; // 메서드도 추가 가능하다. cart.show = function () { let result = ''; for(let key in this) { // 메서드는 출력되지 않게 만든다. if(key != 'show') { result += key + '\t' + ..

티스토리툴바