(AngularJS,React를 위한 자바스크립트)getter, setter of class_AngularJS교육/ReactJS교육/자바스...탑크리에듀(구로디지털단지역3번출구 2분거리)
자바스크립트의 프로퍼티는 성질에 따라서 데이터 프로퍼티와 접근자 프로퍼티로 구분합니다. 이번 시간에는 접근자 프로퍼티와 관련된 얘기입니다.
이해를 돕기 위해서 예를 들어 보면, 자바언어에서 getter, setter 메소드는 로직을 위한 메소드가 아니라 객체가 갖고 있는 변수에 접근해서 값을 가져가거나 수정하는 용도로 사용하는 메소드입니다. 부가적으로 값을 가공하는 로직정도를 두기도 합니다.
자바스크립트는 자바언어에서 지원하는 접근자(예: private, protected, public) 개념이 없기 때문에 자바스크립트의 게터, 세터를 단지 프로퍼티의 값을 접근하거나 수정하는 용도로 사용한다면 사실 큰 의미가 없습니다. 프로퍼티에 직접 접근해서 사용할 수 있기 때문이지요. 차라리, 자바스크립트의 게터, 세터는 값을 조작해서 가져가거나 조작해서 수정하고자 하는 부가적인 로직을 두고 싶은 경우에 사용한다고 이해하시는게 좋겠습니다.
[IT기술칼럼 #4] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원탑크리에듀(구로디지털단지역3번출구 2분거리)
탑크리에듀(www.topcredu.co.kr), 송석원 교수의 IT기술칼럼#4
자바스크립트는 ES6버전에서 class 키워드를 도입했습니다. 자바스크립트는 객체지향 언어였지만 다른 객체지향언어처럼 사용하기에는 많은 불편함이 있었습니다. 심지어 자바스크립트는 객체지향언어라고 볼 수 없다고 하는 분들도 있었을 정도였죠. 최근에 선풍적인 인기를 얻고 있는 React, Angular 같은 기술은 클래스 문법을 채택했습니다. 따라서, 클래스 문법에 대한 이해가 깊다면 새로운 기술을 습득할 때 많은 도움이 될 것 입니다.
다른 객체지향 언어와 자바스크립트의 차이를 이해하지 못하고 사용하게 되면 많은 문제점이 발생합니다. 안타깝지만 자바스크립트를 사용하고 있는 개발자들 중에서도 제대로 이해하고 사용하시는분은 많지 않은 듯 합니다.
이를 해소하기 위해서 새로 도입한 문법이 class 키워드로 대표되는 클래스 문법입니다. 객체지향 개발방법의 익숙한 개발자들을 위해서 자바스크립트가 새로운 문법을 도입한 것 입니다. 개인적으로 “JavaScript: The Good Parts”의 저자이신 Douglas Crockford 님께서 이를 어떻게 생각하는지 궁금합니다. 자바스크립트를 자바처럼 사용하는 것에 우려를 표하셨었는데, 그 사이 많은 시간이 지났으므로 입장이 바뀌었을지 궁금하군요. 선도적인 개발자들은 ES6에서 도입한 클래스 문법이 좋은 것인가 나쁜 것인가를 갖고 토론을 하기도 합니다.
(AngularJS,React를 위한 자바스크립트)getter, setter of class_AngularJS교육/ReactJS교육/자바스...탑크리에듀(구로디지털단지역3번출구 2분거리)
자바스크립트의 프로퍼티는 성질에 따라서 데이터 프로퍼티와 접근자 프로퍼티로 구분합니다. 이번 시간에는 접근자 프로퍼티와 관련된 얘기입니다.
이해를 돕기 위해서 예를 들어 보면, 자바언어에서 getter, setter 메소드는 로직을 위한 메소드가 아니라 객체가 갖고 있는 변수에 접근해서 값을 가져가거나 수정하는 용도로 사용하는 메소드입니다. 부가적으로 값을 가공하는 로직정도를 두기도 합니다.
자바스크립트는 자바언어에서 지원하는 접근자(예: private, protected, public) 개념이 없기 때문에 자바스크립트의 게터, 세터를 단지 프로퍼티의 값을 접근하거나 수정하는 용도로 사용한다면 사실 큰 의미가 없습니다. 프로퍼티에 직접 접근해서 사용할 수 있기 때문이지요. 차라리, 자바스크립트의 게터, 세터는 값을 조작해서 가져가거나 조작해서 수정하고자 하는 부가적인 로직을 두고 싶은 경우에 사용한다고 이해하시는게 좋겠습니다.
[IT기술칼럼 #4] 고급자바스크립트 for AngularJS, React_고급자바스크립트,AngularJS,React전문교육학원탑크리에듀(구로디지털단지역3번출구 2분거리)
탑크리에듀(www.topcredu.co.kr), 송석원 교수의 IT기술칼럼#4
자바스크립트는 ES6버전에서 class 키워드를 도입했습니다. 자바스크립트는 객체지향 언어였지만 다른 객체지향언어처럼 사용하기에는 많은 불편함이 있었습니다. 심지어 자바스크립트는 객체지향언어라고 볼 수 없다고 하는 분들도 있었을 정도였죠. 최근에 선풍적인 인기를 얻고 있는 React, Angular 같은 기술은 클래스 문법을 채택했습니다. 따라서, 클래스 문법에 대한 이해가 깊다면 새로운 기술을 습득할 때 많은 도움이 될 것 입니다.
다른 객체지향 언어와 자바스크립트의 차이를 이해하지 못하고 사용하게 되면 많은 문제점이 발생합니다. 안타깝지만 자바스크립트를 사용하고 있는 개발자들 중에서도 제대로 이해하고 사용하시는분은 많지 않은 듯 합니다.
이를 해소하기 위해서 새로 도입한 문법이 class 키워드로 대표되는 클래스 문법입니다. 객체지향 개발방법의 익숙한 개발자들을 위해서 자바스크립트가 새로운 문법을 도입한 것 입니다. 개인적으로 “JavaScript: The Good Parts”의 저자이신 Douglas Crockford 님께서 이를 어떻게 생각하는지 궁금합니다. 자바스크립트를 자바처럼 사용하는 것에 우려를 표하셨었는데, 그 사이 많은 시간이 지났으므로 입장이 바뀌었을지 궁금하군요. 선도적인 개발자들은 ES6에서 도입한 클래스 문법이 좋은 것인가 나쁜 것인가를 갖고 토론을 하기도 합니다.
이것이 자바다 익명 객체 + Chap.11 기본 API 클래스(java) 발표용 PPT.
간단하게 정리한 것.
이것이 자바다 책을 기반으로 작성한 강의용 PPT입니다.
부족한 게 많으니 쓰실 때에는 추가하셔서 쓰세요~
참고 자료 : 이것이 자바다
사진 첨부 : http://palpit.tistory.com/
1. 객체란?
• 숫자, 문자열, 불리언(true/false), null, undefined를 제외한 다른 모든 값
• 변경 가능한 속성들의 집합
• 배열, 함수, 정규 표현식 등과 객체
• 이름과 값이 있는 속성들을 포함하는 컨테이너
• 속성의 이름은 문자열이면 모두 가능(빈 문자열도 포함)
• 속성의 값은 undefined를 제외한 모든 값
• 객체 하나는 다른 객체를 포함할 수 있다
2. 01 객체 리터럴
• 표기법
var empty_object = {};
var stooge = {
“first-name” : “Jerome”,
“last-name” : “Howard”
}
• 속성 이름에 사용한 따옴표는 자바스크립트에서 사용할 수 있는 유효한 이름
이고 예약어가 아닐 경우 생략 가능(first_name O, first-name X)
• 쉼표(,)는 “속성이름”:”값” 쌍들을 구분하는데 사용
• 속성값은 어떠한 표현식도 가능
var flight = {
airline: “Oceanic”,
number: 815,
departure: {
IATA: “SYD”
},
arrival: {
IATA: “LAX”
}
}
3. 02 속성값 읽기
• stooge[“first-name”] // “Jerome”
• flight.departure.IATA // “SYD”
• 존재하지 않는 속성을 읽으면 undefined 반환
• stooge[“middle-name”]
• flight.status
• stooge[“FIRST-NAME”]
• || 연산자를 사용하여 다음과 같이 기본값을 지정
• var middle = stooge[“middle-name”] || “(none)”;
• var status = flight.status || “unknown”;
• 존재하지 않는 속성(undefined)을 참조하려 할 때 TypeError 예외가 발생, 방
지하기 위해 && 연산자를 사용할 수 있다
• flight.equipment // undefined
• flight.equipment.model // throw “TypeError”
• flight.equipment && flight.equipment.model // undefined
4. 03 속성값 갱신
• 객체의 값은 할당에 의해 갱신
• 속성 이름이 이미 존재하면 속성의 값만 교체
• stooge[‘first-name’] = ‘Jerome’;
• 속성 이름이 없는 경우 객체에 해당 속성을 추가
• stooge[‘middle-name’] = ‘Lester’;
• stooge.nickname = ‘Curly’;
• flight.equipment = {
• model: ‘Boeing 777’
• }
• flight.status = ‘overdue’;
5. 04 참조
• 객체는 참조 방식으로 전달, 복사되지 않음
var x = stooge;
x.nickname = ‘Curly’;
var nick = stooge.nickname;
// 변수 nick의 값은 ‘Curly’
var a = {}, b = {}, c = {};
// a,b,c는 각각 다른 빈 객체를 참조
a = b = c = {};
// a,b,c는 모두 같은 빈 객체를 참조
6. 05 프로토타입 - 1
• 모든 객체는 Object(자바스크립트 표준객체)의 속성인 prototype 객체에 연
결됩니다.(Object.prototype)
• 객체 생성시 해당 객체의 프로토타입이 될 객체를 선택할 수 있습니다.
if (typeof Object.create !== ‘function’) {
Object.create = function(o) {
var F = function() {};
F.prototype = o;
return new F();
}
}
var another_stooge = Object.create(stooge);
• 프로토 타입 연결은 값의 갱신에 영향을 받지 않습니다. 즉 객체를 변경하더
라도 객체의 프로토타입에는 영향을 미치지 않습니다.
another_stooge["first-name"] = 'Harry';
another_stooge["middle-name"] = 'Moses';
another_stooge.nickname = 'Moe';
• 프로토타입 연결은 오로지 객체의 속성을 읽을 때만 사용
• 객체의 특정 속성의 값을 읽으려고 하는데 존재하지 않는 경우 프로토타입에
서 속성을 찾으려고 합니다. 이러한 시도는 프로토타입 체인의 가장 마지막
에 있는 Object.prototype 까지 계속해서 이어집니다.
7. 05 프로토타입 - 2
• 프로토타입 관계는 동적 관계입니다. 해당 프로토타입에 새로운 속성이 추가
되면 해당 프로토타입을 근간으로 하는 객체는 즉각적으로 이 속성이 나타납
니다.
stooge.profession = 'actor';
another_stooge.profession // ‘actor’
8. 06 리플렉션
• 객체에 있는 속성의 타입을 살펴보는 typeof 연산자
• typeof flight.number // number
• typeof flight.status // string
• typeof flight.arrival // object
• typeof flight.manifest // undefined
• 해당 객체의 속성이 아니라 프로토타입 체인 상에 있는 속성을 반환할 수도
있다.
• typeof flight.toString // function
• typeof flight.constructor // function
• 객체에 특정 속성이 있는지를 확인하는 hasOwnProperty 메소드
• hasOwnProperty 메소드는 프로토타입 체인을 바라보지 않습니다.
• flight.hasOwnProperty(‘number’) // true
• flight.hasOwnProperty(‘constructor’) // false
9. 07 열거
• for in 구문을 사용하면 객체에 있는 모든 속성의 이름을 열거할 수 있습니다.
이러한 열거방법은 함수나 프로토타입에 있는 속성 등 모든 속성이 포함되기
때문에 원하지 않는 것들을 걸러낼 필요가 있습니다.
var name;
for (name in another_stooge) {
if (typeof another_stooge[name] !== ‘function’) {
document.writeln(name + “:” + another_stooge[name]);
}
}
• for in 구문의 경우 속성들이 이름순으로 나온다는 보장이 없습니다. 특정 순
으로 속성 이름들이 열거되기를 원한다면 열거되기 원하는 순서를 특정 배열
로 지정하고 이 배열을 이용하여 객체의 속성을 열거할 수 있습니다.
10. 08 삭제
• delete 연산자를 통해 객체의 속성을 삭제할 수 있습니다.
• 해당 객체에 속성이 있는 경우에 삭제를 하며 프로토타입 연결 상에 있는 객
체들은 접근하지 않습니다.
• 객체에서 특정 속성을 삭제했는데 같은 이름의 속성이 프로토타입 체인에 있
는 경우 프로토타입의 속성이 나타납니다.
another_stooge.nickname // Moe
delete another_stooge.nickname;
another_stooge.nickname // Curly
11. 09 최소한의 전역변수 사용
• 자바스크립트에서는 전역변수 사용이 매우 쉽습니다.
• 전역변수는 프로그램의 유연성을 약화하기 때문에 가능하면 피하는 것이 좋
습니다.
• 전역변수 최소화의 방법중 한 가지는 애플리케이션에서 전역변수 사용을 위
해 다음과 같은 전역변수 하나를 만드는 것입니다.
var MYAPP = {};
MYAPP.stooge = {
"first-name": "Joe",
"last-name": "Howard"
};
• 이러한 방법으로 전역변수를 이름 하나로 관리하면 다른 애플리케이션이나
라이브러리들과 연동할 때 발생하는 문제점을 최소화활 수 있습니다. 또한
MYAPP.stooge 가 명시적으로 전역변수라는 것을 나타내기 때문에 가독성도
높아집니다.