JavaScript 기본 용어

생성자 constructor

비슷한 객체들을 여러개 생성하기 위해 키밸류 값을 일일이 입력해서 만드는 것이 아니라,

하나의 생성자를 만들어놓으면 그 생성자를 이용해 간편하게 해당 객체(인스턴스)를 생성할 수 있게 해준다.

-이름 처음은 대문자로 시작해야 한다.

-this. 으로 접근하여 키값을 할당해줌.

 

 function Student(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
          console.log(
            `안녕하세요 제 이름은 ${name}이고 나이는 ${age}입니다.`
          );
        };
      }//Student 생성자

인스턴스 : inheritance(상속)

ex) var user1 = new user('kim');  ->user1이라는 새로운 인스턴스가 생김

원래의 객체인 클래스나 프로토타입이 가지고 있는 프로퍼티(property)와 메소드(method)를 모두 상속받아 인스턴스에서도 동일하게 사용이 가능

 

프로토타입(prototype)

자바스크립트의 모든 객체는 프로토타입(prototype) 객체를 가지고 있다.

모든 객체는 그들의 프로토타입으로부터 프로퍼티, 메소드를 상속받는다.

이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며,

이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.

• prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.
• 자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다.
• Prototype Link - 자신을 만들어낸 객체의 원형
• Prototype Object - 자신을 통해 만들어질 객체의 원형
• __proto__ -  자신을 만들어낸 객체의 원형과 연결된 속성이다.
• constructor - 생성자로써, 자신을 만들어낸 객체와 연결된 속성이다.
• prototype - 자신을 원형으로 만들어진 새로운 객체들과 연결된 속성이다.

function Dog(color, name) { // 생성자 함수 작성
    this.color = color;          // 색에 관한 프로퍼티
    this.name = name;            // 이름에 관한 프로퍼티
}//생성자 함수만 프로퍼티를 가짐

var myDog = new Dog("pink", "mong"); // myDog객체는 Dog이라는 프로토타입을 가짐.
(인스턴스는 프로토타입이 없기 때문)

 

함수 (function)

하나의 로직을 재실행 할 수 있도록 하는 것. (로직: 프로그램의 논리적인 흐름/입력과 처리, 출력단계)

-코드의 재사용성을 높여줌 

-아래에선 numbering이 함수명

function numbering(){
    i = 0;
    while(i < 5){
        document.write(i);
        i += 1;
    }   
}
numbering();

 

'콜백함수'와 '고차함수'

콜백함수 : 다른 함수(고차함수)에 매개변수로 넘겨준 함수

우선 함수를 등록을 한 후, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수이다.

 

고차함수 : 매개변수를 통해 콜백함수를 전달받거나, 함수를 결과로 리턴하는 함수

function say(count, a, b) {
  console.log(`꾸벅${count}번`+a()+b());
}

function me() {
  console.log('반갑습니다');
}

function you() {
  console.log('안녕?')
}

say(1, me, you); //say:고차함수(매개변수로 콜백함수를 전달받음) / me,you:콜백함수

 

function hello() {
   return function() {
      console.log("Hello!");
   }
} //hello:고차함수(함수를 반환return하는 함수)

 

일급 객체 (First Class Object)

다른 객체들에게 일반적으로 적용 가능한 연산을 모두 지원하는 객체

JavaScript에서 함수는 1급 객체이다.

보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.
*일급객체의 특징
-변수에 저장할 수 있다.(리터럴로 표현이 가능하다.)
-함수의 매개변수에 전달할 수 있다.
-반환값(return 값)으로 사용할 수 있다.
-동적으로 프로퍼티 할당이 가능하다.

 

변수 (Variable)

(문자나 숫자같은)값을 담는 컨테이너

-값을 유지할 필요가 있을 때 사용

ex) var a = 1;  ->a변수

 

매개변수 (parameter파라미터)=인자

-매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미.

(ex.아래 예제에선 (a,b,c) )

-인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값

(ex.아래 예제에선 (1,2,3) )

function num(a, b, c) { // a, b, c라는 3개의 매개변수를 가지는 함수 num()을 정의함.

    return a + b + c;

}

addNum(1, 2, 3); // 인수로 1, 2, 3을 전달하여 함수를 호출함. -> 6
addNum();        // 인수로 아무것도 전달하지 않고 함수를 호출함. -> NaN

 

전역변수 (Global Variable)

함수 외부에서 선언된 변수

-프로그램 전체에서 접근할 수 있다.

 

지역변수(Local Variable)

함수 내부에서 선언된 변수

-함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수 / 함수 외부에서는 접근할 수 X

 

객체 (object)

여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입

-객체는 변수이지만 객체에는 많은 값이 포함될 수 있다.

-각각의 Key / Value를 저장할 수 있는 구조이다. (property로 구성)

-중괄호{}표기를 이용하여 만들 수 있다.

-객체는 한쌍의 Key / Value 뒤에 ,쉼표를 이용해 그 뒤에 오는 Key / Value와 구분해준다.

-객체에서 명명된 값을  Properties라 함.

-변수는 예약어의 이름을 가질 수 없지만 객체는 어떤 이름이어도 상관 없다.

-아래에선 객체는 user

var user = {
  name: "kim nana",
  age: 20
};

 

*객체의 종류: 

ex)var t = new Date();

-날짜,수학,배열,함수,객체,정규표현식, new키워드로 정의된 경우 가능할 수 있는(Boolean,숫자,문자열)

-원시값(원시값:어떤 특성 또는 방법이 없는 값/기본데이터 형식:원시값을 갖는 데이터)을 제외한 모든 자바스크립트값은 객체

-객체가 아닌 기본 데이터 유형: String, number, boolean, null, undefined

 

*객체의 구성

1. JavaScript 내장객체 (Built-in Object)

: 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용

- Global, Object, String, Number, Boolean, Date, Array, Math

기본형:참조변수(인스턴스 이름)=new 생성함수(); 

ex) var t = new Date("2002/5/31"); 

 

2. 브라우저 내장 객체 (Native Object)

: JavaScript가 구동되는 시점에서 바로 사용이 가능한 객체들, 브라우저마다 사용함에 있어 구성을 달리하는 경우가 있음

-브라우저 객체 모델 (BOM)

-문서 객체 모델 (DOM)

ex) alert(), open()메서드, location 객체

 

3. 사용자 정의 객체 (Host Object)

: 사용자가 생성한 객체들, 생성자 함수나 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 객체들이기에 내장 객체들이 구성된 이후에 구성됨.

 

전역객체 (global object)

자바스크립트에 미리 만들어진 객체

- 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 한다

- this연산자 대부분은 전역을 가리킴
- 새롭게 브라우저가 로드되면 자바스크립트는 전역객체를 만들고 프로퍼티를 초기화시킴

 

wrapper 래퍼 객체

(래퍼객체: 원시값(ex. const num=2022; 참조x)을 싸고 있는 객체

원시값이 메서드나 프로퍼티에 접근할 수 있게 해주는 특수 객체

ex)String, Number, Boolean, Symbol과 같음

 

"hello world".toUpperCase();    //result : "HELLO WORLD"

→ 위 예제에서 생성한 "hello world"는 string타입의 원시 자료형이지만 메소드를 호출하였다.

프로그램이 문자열 "hello world"의 프로퍼티를 참조하려고 할때, 자바스크립트는 new String("hello world")를 호출한 것처럼 래퍼객체로 임시 변환하기 때문이다.

이렇게 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 래퍼 객체(wrapper object)라고 한다.

 

객체 리터럴

{}중괄호안에 key : value의 목록 

var user = {
	Name:"nana",
	age:15
};

 

프로퍼티 (Property)

객체 내부의 속성 / key(키): "value(값)"의 형식

-key : 속성명 / 문자열만 가능(따옴표가 있어도 업어도 무방, 띄어쓰기 있는 경우엔 있어야 함)

-value : 속성값 / 어떤 값이든지 가능(문자열, 숫자, 객체, 함수 등)

          객체에 함수를 정의할 경우, 속성값이라 하지 않고 메소드(Method)라고 부름

-객체 안의 ,쉼표로 구분되어 할당됨

var person = {
    name: "나나",      // 이름 프로퍼티를 정의/name은 key/"나나"는 value(값)
    birthday: "980101",  // 생년월일 프로퍼티를 정의
}

 

메소드 (Method)

객체가 갖고 있는 동작. 객체 내의 프로퍼티로 정의된 함수

-메소드 수행을 위해선 객체를 통해서 해당 메소드를 수행, 그 동작을 수행하는 주체=객체

const hello = {
    sayHi: function() {
    	console.log('Hi');
    }  //sayHi 메소드
};

hello.sayHi(); // Hi 출력 / 객체의 메소드 참조:객체이름.메소드이름() / 이름 뒤에 ()소괄호 붙여야 함수 내용이 호출