최말짱 블로그

JAVAScript 개념 한 번에 정리하기(객체,상속,프로토타입 등등..) 본문

카테고리 없음

JAVAScript 개념 한 번에 정리하기(객체,상속,프로토타입 등등..)

최말짱 2022. 11. 2. 01:53
728x90

 

 

javascript

자바스크립트는 동적인 웹 페이지를 만들기 위해 웹 브라우저 위에서 실행되도록 만들어진 프로그래밍 언어이다.

  • java랑 javascript는 직접적인 관계가 없는 별개의 언어이다.
  • 둘 다 기본 문법인 C언어에 근거하기 때문에 기본 문법이 비슷하다는 점 외에는 서로 아무런 관계가 없다.

객체란?

  • 추상적인 개념이 실체화 된 것

객체생성방법

  1. Object() 객체 생성자를 이용해서 생성
// 비어있는 객체 생성

var person1 = new Object();
// 객체의 프로퍼티를 할당
person1.name = 'goun'
person1.age = 23
person1.sayHello = function(){
	console.log(this.name + 'Hello!');
}

console.log(person1)
  1. 객체 리터럴 방식 사용하기
var person1 = {
		name : 'goun',
		age : 27,
		sayHello : function(){
				console.log(this.name+'Hello');
}
};

Object 객체 생성자 vs 객체 리터럴 방식

  • 객체 리터럴 방식이 좀 더 직관적이라서 좋다.
  • 그리고 객체 리터럴이 객체 생성과 동시에 프로퍼티를 할당하기 때문에 좋다.
  1. 생성자 함수 사용하기
function Person(name,age){
				this.name = name;
				this.age = age;
				this.sayHello = function(){
							console.lgo(this.name + 'Hello!')};
var person1 = new Person('goun',23);
var person2 = new Person('koko',30);

}
  • 한 번 생성자 함수(Person)을 만들어 놓으면 여러개의 객체를 만들 수 있기 때문에 좋다.
    • 문제점 : 하지만 메모리 효율 측면에서 좋지 않다. 객체를 만들 때마다 해당 프로퍼티의 공간이 메모리에 만들어진다.
    • 예를 들어 sayHello 함수 같은 경우에 객체를 만들 때마다 중복된다.
      • 그래서 이러하게 공용으로 사용되는 부분을 선언시 한 번만 메모리에 할당되도록 할 수 있도록 prototype을 선언한다.
  • → prototype 을 사용하여 메모리 아끼기 !
  1. prototype(프로토타입)
function Person(name,age){
				this.name = name;
				this.age = age;
				**Person.prototype.sayHello** = function(){
								console.log(this.name + 'Hello!');
}
};

var person1 = new Person('goun',23);

DOM이란?(Document Object Model)

  • 브라우저에서 제공하는 기능, api
  • 문서 객체 모델
  • 자바스크립트는 HTML 문서를 조작하기 위해 만들어진 언어이다. 그러면 HTML 파일을 자바스크립트로 어떻게 제어할 수 있는 걸까?
  • 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진이라는 게 있는데 브라우저로 HTML 파일을 열면 렌더링 엔진이 HTML 문서를 한 줄 한 줄 해석하고 해석이 끝나면 이러한 문서를 "객체화"하여 자바스크립트로 접근 할 수 있도록 하는데요. 그래서 문서를 객체화 했다고 하여 문서 객체 모델이라고 하는 겁니다

변수 선언 방법

  • JavaScript에서 변수는 var로 시작한다. var은 변수를 선언하겠다는 것을 의미한다.

논리 연산자

  • and 연산자 : &&
  • or 연산자 : ||
  • '!'는 부정의 의미로, Boolean의 값을 역전시킨다.

break

for(var i = 0; i < 10; i++){
    if(i === 5) {
        break;
    }
    document.write('coding everybody'+i+'<br />');
}

continue

  • 실행은 중단하면서 반복은 계속

함수의 정의와 호출

function numbering(){ //함수 정의
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
**numbering(); //함수 호출**

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
**members = get_members();**
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());   
    document.write('<br />');
  • 이렇게도 가능,, 그냥 신기해서 넣어봄 ~ ㅎㅎ

배열

1. 
var li = ['a', 'b', 'c', 'd', 'e'];
**li.push('f'); //push를 통해 원소 추가**
alert(li);
2. 
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.**concat(['f', 'g']**); //concat을 통해 합치고 다시 리스트에 넣어주면서 병합
alert(li);
3. //원소 제거

//첫 번째 원소 제거
li.shift();
//마지막 원소 제거
li.pop();

객체 생성

방법 1. 
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

방법 2. 
**var grades = {};**
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

방법 3. 
var grades = **new Object();**
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

모듈화

모듈화란 ? 개발할 수 있는 작은 단위로 나누는 것이다.

'규모가 큰 것을 여러 개로 나눈 조각'이라고 생각할 수 있다.

모듈화를 통해서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있다.

  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.

모듈의 사용

// greeting.js
function welcome(){
    return 'Hello world';
}

//main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src=**"greeting.js"**></script> // js를 들고온다고 소스 설정
</head>
<body>
    <script>
        alert(**welcome()**); // greeting.js의 함수 사용가능
    </script>
</body>
</html>

라이브러리

라이브러리란? 모듈과 비슷한 개념이다.

모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다. 프로그래밍의 세계에는 휼룡한 라이브러리가 많다. 좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심이라고 할 수 있다.

유명 라이브러리 jQuery

jQuery란 ? HTML 조작을 단순화 하도록 설계된 자바스크립트 라이브러리이다.

<!DOCTYPE html>
<html>
<head>
    <script src="<https://code>.**jquery**.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

자바스크립트의 API

API란? Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다.

자바스크립트의 API

자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다.

자바스크립트 자체의 API

  • ECMAScript
  • MDN
  • MSDN(Microsoft Developer Network)

호스트 환경의 API

  • node.js
  • 웹 브라우저 API

함수 지향

  • 전역변수와 지역변수
    • 함수 밖에서 변수를 선언 - 전역변수
    • var를 사용하지 않은 지역변수는 전역변수가 된다.
    var vscope = 'global'; //전역변수
function fscope(){
    var vscope = 'local'; //지역변수
    alert('함수안 '+vscope);
}
fscope();
alert('함수밖 '+vscope);

** 중요 **
함수 안에서 var을 통해 초기화해주지 않은 변수는 **전역변수**이다.

var vscope = 'global';
function fscope(){
    **vscope = 'local'; //전역변수 !!!!**
    alert('함수안'+vscope);
}
fscope();
alert('함수밖'+vscope);
  • 자바스크립트는 함수에 대한 유효범위 만을 제공한다. 많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과 다른 점이다.
for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name); // {}괄호 안에 있는 변수라도 출력 가능.(java는 안 됨.)

QUIZ

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();
  • 함수가 선언된 시점에서의 유효범위를 갖는다.
  • 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬(lexical scoping)
  • 위의 출력 결과는 5이다.

메소드

위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.

a = {
    b:function(){
    }
};

** 겁나 신기 ... ** 

function cal(func, num){
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1));
alert(cal(decrease, 1));

function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode];
}
alert(cal('plus')(2,1));
alert(cal('minus')(2,1));

잘은 모르겠지만, 이런 것이 가능하다는 것 기억하자 !

콜백(CallBack)

콜백이란? 함수(객체)의 인자로 넘겨지는 함수를 콜백 함수(callback function)

쉽게 말해, 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말한다.

👉그렇기 때문에 non-block이며, 비동기 방식의 함수를 사용한다.

프로그래밍에서 콜백은 다른 코드의 인수(argument)로써 넘겨주는 실행 가능한 코드를 말합니다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도, 나중에 실행 할 수도 있습니다.

function first(a,b,**callback**){
	let v=a*b;
	callback(v);
}

first(1,2,function(v){ //익명함수 function(v)
	console.log(v);		//2
})
  • 위와 같이 아래에서 first 함수를 호출하는데 호출할 때 익명 함수를 parameter로 넘겨준다.
  • 그러면 first 함수에서는 그 함수 parameter를 callback이라는 이름으로 받고 있다.
  • first가 실행되면 a,b를 곱한 결과 값을 callback함수의 parameter로 넣어준다.
  • 여기서 callback함수는 아래의 익명 함수이므로 그 익명 함수가 실행된다.

콜백의 장점

  • 비동기 처리를 가능하게 한다.(non-block)
  • 자바스크립트의 비동기 처리란 특정 코드가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 코드를 실행하는 병렬적 실행을 말한다 !
function doStudy(subject, callback){
		alert('오늘 공부할 과목은 ${subject}입니다.');
		callback();
}
function alertFinished(){
		alert('오늘 공부는 끝났어.');
}

doStudy('자바스크립트',alertFinished);

//alert '오늘 공부할 과목은 자바스크립트 입니다. 오늘 공부는 끝났어.'

객체지향

등장 원인 : 소프트웨어 언어의 발달과 컴파일러의 발달로 하드웨어가 소프트웨어의 발달을 따라오지 못하는 상황이 발생

  • 객체지향 프로그래밍은 개발하려는 것을 기능별로 묶어 모듈화를 함으로써 하드웨어가 같은 기능을 중복으로 연산하지 않도록 하고, 모듈을 재활용하기 때문에 하드웨어의 처리량을 획기적으로 줄여주었습니다.
  • 실제 세계를 모델링하여 소프트웨어를 개발하는 방법

객체지향의 3대 특성

  1. 캡슐화
    1. 관련된 데이터와 알고리즘(코드)이 하나의 묶음으로 정리된 것
    2. 사용자가 몰라도 사용방법만 알면 사용가능(캡슐화)
  2. 상속
    1. 이미 작성된 클래스를 이어 받아서 새로운 클래스를 생성하는 기법으로 위에서 말한 기존 코드를 재활용해서 사용하는 것
  3. 다형성
    1. 하나의 이름(방법)으로 많은 상황에 대처하는 기법입니다. 개념적으로 동일한 작업을 하는 함수들에 똑같은 이름을 부여할 수 있으므로 코드가 더 간단해지는 효과
    • 프로그램이 커지면 엄청나게 많은 메소드들이 생겨나게 된다. 메소드와 변수를 관리하는 것은 점점 어려운 일이 되기 시작한다.
    • 그 도약 중의 하나가 객체 지향 프로그래밍이다. 이것의 핵심은 연관된 메소드와 그 메소드가 사용하는 변수들을 분류하고 그룹핑하는 것이다.
    생성자
    • 생성자(constructor)는 객체를 만드는 역할을 하는 함수다.

    상속

    • 상속은 객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능을 의미
    • 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다.
    function Person(name){
		this.name = name;
}
Person.prototype.name = null;
Person.prototype.introduce = function(){
		return 'My name is '+this.name;
}

function Programmer(name){
		this.name = name;
}
// 상속받기
Programmer.prototype = new Person(); 

-> ## Programmer도 Person의 메소드 사용가능

var p1 = new Programmer('egoing');
document.write(p1.introduce()+"<br />");
    *위의 Person 객체를 상속받아 보기
    • Programmer이라는 생성자를 만들었다. 그리고 이 생성자의 prototype과 Person의 객체를 연결했더니 Programmer 객체도 메소드 introduce를 사용할 수 있게 되었다.
    function Person(name){
		this.name = name;
}
Person.prototype.name = null;
Person.prototype.introduce = function(){
		return 'My name is '+this.name;
}

function Programmer(name){
		this.name = name;
}
Programmer.prototype = new Person(); ->Person 상속받기
Programmer.prototype.coding = function(){
		return 'hello world';
}

var p1 = new Programmer('egoing');
document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");
    • Programmer는 Person의 기능을 가지고 있으면서 Person이 가지고 있지 않은 기능인 메소드 coding을 가지고 있다.(중요)

    Prototype 프로토타입

    • prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.
    function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp);

//결과는 true
    1. 객체 o에서 ultraProp를 찾는다.
    2. 없다면 Sub.prototype.ultraProp를 찾는다.
    3. 없다면 Super.prototype.ultraProp를 찾는다.
    4. 없다면 Ultra.prototype.ultraProp를 찾는다.
    표준 내장 객체
    • Object
    • Function
    • Array
    • String
    • Boolean
    • Number
    • Math
    • Date
    • RegExp
    참조
    • 변수 b에 담긴 객체의 id 값을 2로 변경했을 뿐인데 a.id의 값도 2가 된 것이다.
    • 이것은 변수 b와 변수 a에 담긴 객체가 서로 같다는 것을 의미한다.
    • 심볼릭링크와 같이 그 내용이 실시간으로 반영되는 것과 비슷하다.
    출처 : 생활코딩 https://www.opentutorials.org/course/743/6585
  4. var a = {'id':1}; var b = a; -> a 와 b는 서로 같다 !! 하나만 바껴도 둘 다 바뀜 b.id = 2; console.log(a.id); // 2
  5. 자바스크립트가 기본적으로 가지고 있는 객체들을 의미