2021. 06. 09(수) TIL

Javascript

자바스크립트의 객체, 배열, 함수

객체

  • 자바스크립에서는 기본자료형과 객체가 있다.
  • 기본자료형
    • string, number, boolean, null, undefined
    • 프로퍼티와 메소드를 갖지 못한다.
  • 객체
    • 기본자료형의 제외한 거의 모든 것들이 객체다.
    • 프로퍼티와 메소드를 가질 수 있다.
  • 함수와 메소드의 차이는?
    메소드는 함수의 한 종류다.
    함수가 특정 객체에 소속되어 있을 때 메소드라고 부른다.
    • 배열, 함수, 정규표현식, 날짜 등이 전부 객체다.
    • string, number, boolean은 객체가 될 수 있다.
      • new 키워드를 사용하면 객체 생성이 가능하다.
    • 객체는 맵과 유사하다.
      • key:value의 쌍으로 프로퍼티나 메소드를 담고 있다.
      • key는 문자열, value는 기본자료형, 배열, 객체, 함수 모두 가능
      • 언제든지 객체의 프로퍼티, 메소드를 추가/삭제/변경이 가능하다.
    • 객체 생성하기
      객체 리터럴 사용
      var obj = {} // 빈 객체가 생성된다.
      var obj = {name:"홍길동", age:48, display:function() { ... } }
      Object 생성자 사용
      var obj = new Object();
      obj.name = "홍길동";
      obj.age = 48;
      obj.display = function() { .... }
      * 생성자 함수 사용
      ```javascript
      // 1. 생성자 함수 정의하기, 생성자함수이름은 대문자로 시작하는 것이 관례다.
      function Person(name, kor, eng, math) {
      this.name = name;
      this.kor = kor;
      this.eng = eng;
      this.math = math;
      this.getTotal = function() {
      return this.kor + this.eng + this.math;
      }
      }
      // 2. new 키워드와 함께 생성자 함수 호출
      // - 빈 객체가 생성됨
      // - 빈 객체가 생성자함수의 this에 전달됨
      // - 생성자 함수의 수행문이 실행되면서 전달받은 객체(this)에 프로퍼티와 메소드가 추가됨
      // - 생성자 함수의 실행이 완료되면 전달받은 객체가 반환된다.
      var obj = new Person("홍길동", 100, 100, 80);
      ```
      			 
      * Prototope 객체	
        * 자바스크립트는 함수가 정의될 때 Function객체와 Prototype객체가 같이 생성된다.
        * Function객체에는 Prototype 객체를 참조하는 prototype 프로퍼티가 있다.
        * 생성자함수를 new와 함께 실행하면 객체가 생성되고, 
        그 객체는 __proto__ 프로퍼티를 사용해서 Prototype객체를 참조한다.
        * Prototype객체에 프로퍼티나 메소드를 추가하면 __proto__를 해당 Prototype객체를
      	참조하고 있던 모든 객체들은 해당 프로퍼티나 기능을 즉시 사용할 수 있다.
        * 따라서, 자바스크립트 객체는 프로토타입 객체로부터 프로퍼티나 메소드를 상속받을 수 있다.
				// 1. 생성자 함수 정의하기
				function Person(name, kor, eng, math) {
					this.name = name;
					this.kor = kor;
					this.eng = eng;
					this.math = math;
				}
				// 2. Prototye타입객체에 프로퍼티나 메소드 추가하기
				Person.prototype.getTotal = function() {
					return this.kor + this.eng + this.math;
				}
				Person.prototype.getAverage = function {
					return Math.trunc(this.getTotal)/3);
				}
				// 3. 생성자 함수를 사용해서 객체 생성하고, 메소드 사용하기
				var person1 = new Person("홍길동", 100, 100, 100);	
				var 총점 = person1.getTotal();

함수

  • 자바스크립트의 함수는 1급 시민이다.
    (변수에 저장할 수 있다. 매개변수로 전달할 수 있다. 반환값으로 사용할 수 있다)

  • 변수에 저장하기

function fn() { ... }
var x = fn;		// fn함수를 변수 x에 저장
x();			// x에 저장된 함수를 실행
			
var y = function() { ... }	// 이름이 없는 익명함수를 y에 저장
y();			
  • 매개변수로 전달하기
function attack(f) {	// f는 함수를 전달받는다.
	f();		// f로 전달받은 함수를 실행한다. 
}

function 찌르기() { ... }
function 총쏘기() { ... }
var 미사일쏘기 = function() { ... }			

attack(찌르기);		// 찌르기함수를 전달한다.
attack(총쏘기);		// 총쏘기함수를 전달한다.
attack(미사일쏘기);
attack(function() { ... })	// 익명함수를 직접 전달한다.
  • 반환값으로 제공할 수 있다.
function getFn(condition) {
  var x = function() { +++ };
  var y = function() { *** };

  if (condition == 1) {
      return x;
  } else {
      	return y;
      }
}
			
var f1 = getFn(1);	// f1에는 function() { +++ }가 제공된다.
var f2 = getFn(2);	// f2에는 function() { *** }가 제공된다.
f1();	// +++ 처리 실행
f2();	// *** 처리 실행
  • 콜백함수
    • 다른 함수의 인자로 이용되는 함수
    • 특정 이벤트에 의해 호출되어지는 함수
      • 특정 상황이 발생할 때 브라우저, 가상머신, 시스템 혹은 운영체제가
        실행시키는 함수

배열

  • 자바스크립트의 배열의 Java의 ArrayList와 같은 가변길이 배열이다.

    • 크기를 변경할 수 있다.
    • 추가하거나 삭제하면 배열의 길이가 자동으로 조정된다.
  • 배열 생성하기

    • 배열 리터럴로 생성하기
      var x = []; // 빈 배열이 생성된다.
      var x = ["김유신", "홍길동", "강감찬"];
    • 생성자함수로 생성하기
      var x = new Array();
      var x = new Array("김유신", "홍길동", "강감찬");
  • 주요 API

    • Property

      • length
        - 배열의 길이를 반환한다.
    • Method

      • push(item)
        - 배열의 끝에 새로운 요소를 추가한다.

      • pop()
        - 배열의 맨 마지막 요소를 삭제하고, 반환한다.

      • unshift(item)
        - 배열의 맨 앞에 새로운 요소를 추가한다.

      • shift()
        - 배열의 첫번째 요소를 삭제하고, 반환한다.

      • splice(index, howmany, item1, item2, item3, ..., itemN)
        - 배열의 요소를 삭제하고, 새로운 요소를 추가할 수 있다.
        index - 추가하거나 삭제할 위치를 지정한다.
        howmany - 삭제할 갯수, 0이면 삭제하지 않음
        item1, ..., itemN - 새로 추가할 값들
        사용예)
        x.splice(1, 1) <--- 1번째부터 1개 삭제
        x.splice(1, 2) <--- 1번째부터 2개 삭제
        x.splice(1, 0, value) <--- 1번째에 값 추가, 원래 1번째에 있던 값을 뒤로 밀린다.
        x.splice(1, 1, value) <--- 1번째부터 값을 하나 삭제하고, 1번째에 값을 추가

      • join(separator)
        - 배열의 각 요소를 지정된 문자로 연결된 문자열을 반환한다.
        * separator를 지정하지 않으면 ,가 구분문자가 된다.

      • indexOf(item)
        - 배열에서 item과 같은 값이 있으면 해당 index를 반환한다.
        * 값이 발견되지 않으면 -1를 반환한다.

      • forEach(callback)
        - 배열의 각 요소마다 callback함수를 실행한다.
        - function(item, index)
        item - 현재값
        index - 현재값의 인덱스

      • filter(callback)
        - 배열의 각 요소마다 callback함수가 실행되고, callback함수의 테스트를 통과한 아이템들로 구성된 새로운 배열이 반환된다.
        - 배열에서 원하는 요소들로만 구성된 새로운 배열을 만들 수 있다.
        - function(item, index)
        item - 현재값
        index - 현재값의 인덱스
        * 반환값 - 참 혹은 거짓

      • map(callback)
        - 배열의 각 요소마다 callback함수가 실행되고, callback함수의 실행결과 변형된 아이템들로 구성된 새로운 배열이 반환된다.
        - 배열의 각 요소를 다른 형태로 변환해서 새로운 배열을 만들 수 있다.
        - function(item, index)
        item - 현재값
        index - 현재값의 인덱스
        * 반환값 - 변형된 값

      • reduce(callback, initValue)
        - 배열의 각 요소마다 callback함수가 실행되고 최종결과로 단 하나의 값이 반환된다.
        - 배열의 각 요소에 대한 집계결과를 하나 반환한다.
        - function(total, item, index)
        total - initValue를 지정하지 않으면 이전에 실행한 함수의 반환값이 들어간다..
        initValue를 지정하면 해당값이 total의 초기값이 된다.
        item - 현재값
        index - 현재값의 인덱스
        return - 집계단계의 중간값

      • sort(callback)
        - 배열의 각 요소마다 callback함수가 실행되고 callback함수는 각각의 값들을 비교하는 코드가 포함되어야 한다.
        callback함수는 양수, 음수, 0를 반환해야 한다.
        - 배열의 각 요소를 정렬한다.
        - 원본 배열이 정렬된다.
        - function(a, b)
        a - 배열의 값
        b - 배열의 값
        * return - a와b를 비교연산한 결과
        정수값(양수, 음수, 0)

좋은 웹페이지 즐겨찾기