31일차 복습

함수

자바와 마찬가지로 입력값 유무, 리턴값 유무로 4가지 종류의 함수가 존재한다.

자바스크립트의 함수는 크게 두가지로 나눠진다.

1. 익명함수

변수에 함수를 저장한다.

사용하기 쉬워서 짧은 수행문을 수행하는 경우 쓴다.

단점) 호이스팅이 적용 안된다.

*호이스팅*

함수를 한번이라도 만들면, 함수를 선언한 곳보다 위에서 함수를 호출할수 있게 하는 기능. 함수를 선언하면 자동적으로 코드의 가장 위로 올린다.

2. 일반함수

우리가 아는 일반적인 함수.

함수의 선언 방법

1. 일반함수 선언

function 함수이름 (파라미터){
    실행문;
    return 문;
};

2. 익명함수 선언(함수형 변수)

let func = function(파라미터){
               실행문;
               return 문;
              };

3. 화살표함수 선언

let func = (파라미터) => {  
                          수행문;
                           return 문;
                           };

4. 화살표 함수의 생략 선언 (한줄일때만 가능)

let func = ( 파라미터 ) => 리턴값;  //(return 생략가능);

자바스크립트를 비롯한 3세대 함수형 언어들에서는 변수에 함수를 담을 수 있다. 이경우, 변수 이름이 함수 이름처럼 사용된다.

일반 함수와 비슷하게 사용되지만, 호이스팅이 적용되지 않는다는 차이점이 있다.

Object의 key, value 구조

앞서 말했듯, 자바의 배열은 map 처럼 key와 value를 가진다. 이때 숫자를 key로 가지면 배열, 문자열을 key로 가지면 key-value형태의 객체로 인식된다.

**따라서 key-value형태의 객체를 원하면, 오직 문자열만으로 key로 설정해야 한다.**

value의 타입은 다양하게 가질수 있다. 당연히 함수형 역시 가능하다. 이때 key가 변수이름 역할을 해줌으로 화살표 선언과 같은 익명함수 선언도 가능하다.

형식

let obj =[ key1 : value1,
           key2 : value2,
           key3 : value3 ];

배열과 근본은 똑같음으로, 호출 형식 역시 똑같다.

obj[ 'key1' ] = value1

당연히 순환 역시 가능하다.

for( keys in obj){
    console.log( keys );  // key값 순환
    console.log( obj[ keys ]; // value값 순환
    };
    출력값 : key1, key2, key3
            value1, value2, value3

for of 순환 역시 가능하지만, 배열이 아닌 Object이기때문에 entries() 함수를 사용해야 하며, key : value 형식으로 받아야 한다.

for( const [ key : value ] of Object.enties( obj )){
     console.log(key, value);
     };
     출력값 : key1, value1,
              key2, value2,
              key3, value3

이 방법은 복잡하니 for in 순환문을 사용하는게 낫다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <!-- ex31 -->
  <title>Key-Value 객체</title>
  <script>
    // JS : 키-밸류 객체
    // 자바 : 맵 map
    //괄호 정리
    // 소괄호 ( ) : 함수 fuction func(), 조건문 if() switch(), 반복문 for() while()
    // 중괄호 { } : 함수 { 코드본체 }, 조건문 if(){ } switch() { }, 반복문 for() { }
    //               while() {   }
    //            : K-V 객체 { key : value }
    // 대괄호 [ ] : 배열 var array=[10,20,30]   array[0]
    //            : K-V 객체 값을 참조시 keyValue['key']

    //Key-Value 객체 선언 : key는 반드시 문자열, value는 다양한 타입
    var keyValue = {
      apple : 1000,
      banana : 2000,
      pear : 3000
    }
    console.log( keyValue['apple'] );
    console.log( keyValue.apple );
    //익명함수(함수형변수)도 값으로 넣을 수 있음.
    var person = {
      name : '홍길동',
      action : () => { console.log("액션배우~") }
    }
    console.log( person.name );
    person.action(); //익명함수 실행

    //값 타입이 서로 다른 KV 객체를 선언해보자
    var toy = {
      name : '마블 피규어',
      price : 1000,
      lang : '한국어',
      color : 'White & Red' 
    }
    //KV 객체 전체순환
    // for in문 : key를 받아옴
    for( var key in toy ){
      console.log( 'key:' + key );
      console.log( 'value:' + toy[ key ] );
    }
    // for of문 : key,value를 함께 받아옴
    for( const [key,value] of Object.entries(toy) ) {
      console.log( 'key:' + key );
      console.log( 'value:' + value );
    }

    //연습문제 14
    // student KV객체를 선언하고,
    // 이 학생의 국어, 영어, 수학 성적을 각각 70, 80,90으로 설정하고,
    // 합산과 평균을 내는 익명함수를 각각 sum, avr로 설정하고,
    // 익명함수를 통해, sum과 avr값을 출력하시오.
    // 그리고 국어,영어,수학 점수도 각각 출력하시오.
    let student = {
      kor : 70,
      eng : 80, 
      math : 90,
      sum : (a,b,c) => {
        return a + b + c;
      },
      avr : (a,b,c) => {
        return (a + b + c) / 3;
      }
    }
    console.log( student.kor );
    console.log( student.eng );
    console.log( student.math );
    console.log( student.sum( student.kor, student.eng, student.math) );
    console.log( student.avr( student.kor, student.eng, student.math) );

  </script>
</head>
<body>
  
</body>
</html>

클래스

ES6 전부터는 없던 기능. 그전에는 prototype을 이용해서 상속을 지원했으나 문법이 복잡해 이제는 잘 사용하지 않는다.

클래스의 선언방법

class 클래스 이름{
    변수;
    함수();
    };

클래스의 객체 생성

let class1 = new Class();

클래스 역시 변수에 담겨질 수 있다.

생성자함수( constructor)

    class Person2 {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      };
      run(){
        console.lor(`${name}은 뛴다.`)
        };
    };

자바스크립트의 생성자함수는 constructor을 사용해 선언한다.

**자바스크립트의 this는 다른 언어들의 this와 다르다. 다른 언어들에서 this는 원본 클래스를 가르키지만, JS에서 this는 자신을 호출한 객체를 가르킨다.**

get/set함수

자바에서는 접근을 어렵게 하기 위해 만들어진 함수지만, JS에서는 변수 뒤에 값을 추가하기 위해 사용한다.

 class Person3 {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      
      get name() { // _name 호출
        return this._name + "님 어서오세요~";
      }
      
      set name(newValue) { // _name 추가
        if(newValue){                //null이나 empty가 아니면
          if( String(newValue).length > 5 ){
            console.log( "이름이 다섯자리이상입니다." );
          }else{
            this._name = newValue;
          }
        }
      }
    }

여기서 _는 언어적인 의미를 가지지 않는다.

선언하지 않은 변수 역시 호출할수 있는 JS의 특성을 생각해보면, JS의 get/set함수는 아예 새로운 변수에 새로운 값을 추가시키는 것이다. 이는 출력값을 보면 더 명확하게 이해할 수 있다.

그러면 name를 호출하면 무슨 값이 나올까? 한번 살펴보자,

name 에서 추가한 값이 붙은 것을 볼 수 있다. 이처럼 변수를 출력하면서 뭔가 더 추가하고 싶을때, get/set을 사용한다.

그러면 이어서 조건문을 추가한 출력값을 보자.

set함수에 조건문을 넣어서 name값이 바뀌지 않은 것을 볼 수 있다.

클래스의 상속

자바와 마찬가지로 extends를 사용한다. 메소드 오버라이딩( 부모 클래스의 메소드를 재정의 하는것) 역시 그냥 하면 된다.

    class Man {
      constructor() {  }
      run() {
        console.log("남자가 달린다.");
      }
    }
    class Superman extends Man {
      //메소드 오버라이딩 : 자식클래스에서 부모클래스의 메소드 재정의
      run() {
        console.log("수퍼맨이 달린다.");
      }
    }
    let superman = new Superman();
    superman.run();   출력값: 수퍼맨이 달린다.

'공부 > javascript' 카테고리의 다른 글

32일차 복습 (0)	2022.12.27
프로퍼티(property) (0)	2022.12.27
31일차 복습-2 (0)	2022.12.26
30일차 복습 (0)	2022.12.25
29일차 복습 (0)	2022.12.22

프로그래밍 공부 이야기

31일차 복습 - 1

'공부 > javascript' 카테고리의 다른 글

티스토리툴바

31일차 복습 - 1

'공부 > javascript' 카테고리의 다른 글

관련글

티스토리툴바