자바스크립트 기초 (5)

Coosla·2021년 1월 5일
0
post-thumbnail

1. 함수

함수란?

변수처럼 자바스크립트를 메모리에 저장했다 필요할때 마다 호출하여 사용합니다.

  • 변수와 함수의 차이점

    변수

    1개의 데이터만 저장
    var이라는 키워드를 이용하여 선언
    문자형, 숫자형, 논리형 데이터를 보관
    객체를 참조


    함수

    자바스크립트 코드를 저장
    function이라는 키워드를 이용하여 선언
    출력문, 제어문 등의 코드를 저장, 데이터를 반환

  • 함수 선언

    기본형

    function 함수명(매개변수){
        자바스크립트 코드;
    }

    익명 함수

    참조 변수 = function(매개변수){
        자바스크립트 코드;
    }

    람다식을 이용한 함수 선언

    참조 변수 = (매개변수) => {
        자바스크립트 코드;
    }
  • 매개변수로 데이터 가져오기

    매개변수가 있는 함수

    function 함수명(매개변수1, 매개변수2, ...){
        자바스크립트 코드;
    }
    함수명(데이터1, 데이터2, ...);

    매개변수 없는 함수

    function 함수명(){
        arguments; // 함수가 호출될때 전달되는 데이터들을 arguments에 배열로 저장
        자바스크립트 코드;
    }
    함수명(데이터1, 데이터2, ...);

2. return문의 역활

return문이란?

함수에서 결과값을 반활할 때 사용하며 break문과 비슷하게 코드가 강제로 종료됩니다.

  • return문

    return문 기본형

    function 함수명(){
        자바스크립트 코드1;
        return 데이터();
        자바스크립트 코드 2;
    }
    var 변수 = 함수명(); // 변수에는 자바스크립트 코드1에서 나온 데이터가 들어갑니다.
  • 재귀 함수
    함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라 하고 반복문과 비슷합니다.

    기본형

    function 함수명(){
        자바스크립트 코드;
        함수명();
    }
    함수명();

3. 함수 스코프

스코프란?

자바스크립트에서의 스코프는 변수 또는 함수의 유효 범위를 나타냅니다.

  • 지역변수와 전역변수

    전역변수

    자바스크립트 어디에서든 사용할 수 있는 변수

    지역변수

    함수 스코프에서만 사용할 수 있는 변수

    기본형

    var 변수명; // 전역 변수
    function{
        var 변수명; // 지역 변수
    }
  • 전역 함수와 지역 함수

    전역함수

    자바스크립트 어디에서든 사용할 수 있는 함수

    지역함수

    함수 스코프에서만 사용할 수 있는 함수, 함수 스코프 밖에서 호출 시 전역 함수가 실행되며 경고창이 나타납니다.

    기본형

    function 함수명1(){ // 전역 함수
        자바스크립트 코드;
    }
    function 함수명2(){
        function 함수명3(){ // 지역 함수
            자바스크립트 코드;
        }
    }
  • 전역과 지역으로 나누는 이유
    규모가 큰 프로그램을 개발할 때 여러 개발자들이 협업을 하여 개발하게 되는데 같은 이름의 전역 변수나 전역 함수를 사용하여 충돌이 발생합니다. 그래서 충돌을 피하기 위해 전역과 지역을 나누어 사용합니다.

  • 즉시 실행 함수
    같은 이름으로 선언된 함수의 충돌을 피하기 위해 즉시 실행 함수를 사용합니다. 이것을 사용하면 함수를 선언하는 동시에 함수를 호출합니다.

    즉시 실행 함수 기본형

    (function(){
        자바스크립트 코드;
    }());

4. 객체 생성자 함수

객체 생성자 함수란?

객체를 생성할 때 사용하는 함수입니다.

  • 객체 생성자 함수

    기본형

    function 함수명(매개변수1, 매개변수2, ...){ // 객체 생성자 함수
        this.속성명 = 데이터;
        this.함수명 = function(){
            자바스크립트 코드;
        }
    }
    var 참조변수(인스턴트 네임) = new 함수명(); // 객체 생성
    var 참조변수 = { // 중괄호를 이용하여 객체 생성
                      속성명 : 데이터,
                      함수명 : fucntion(){ ... }
                  }
  • 프로토타입(Prototype)

    프로토타입의 등장 배경

    같은 객체를 여러개 생성하면 객체를 생성한 만큼 함수가 등록됩니다. 이는 객체에 들어있는 프로터피와 함수를 객체수만큼 등록하게 되어 메모리의 낭비를 초래할 수 있습니다. 그래서 메모리 낭비를 해결하기 위해 나온 것이 프로토타입(Prototype)입니다.

    프로토타입이란?

    생성자 함수로 생성된 객체들이 프로터피와 함수를 공유하기 위해 사용되는 객체이고 함수만 갖고 있는 프로퍼티 입니다.

    프로토타입의 기본형

    function 함수명1(매개변수1, 매개변수2, ...){
        this.속성명 = 데이터;
    }
    함수명1.prototype.함수명2 = function(){
        자바스크립트 코드;
    }
    var 참조 변수(인스턴스 네임) = new 함수명();

5. 자바스크립트 내장 함수

종류설명
encodeURI()문자를 유니 코드값으로 인코딩(영문, 숫자, 일부기호( ; , / ? : @ & = + $)제외)
encodeURIComponent()문자를 유니 코드값으로 인코딩(영문, 숫자 제외)
decodeURI()유니 코드값을 디코딩해 다시 문자화
decodeURIComponent()유니 코드값을 디코딩해 다시 문자화
parseInt()문자열 데이터를 정수형 데이터로 반환
parseFloat()문자형 데이터를 실수형 데이터로 반환
String()문자형 데이터로 반환
Number()숫자형 데이터로 반환
Boolean()논리형 데이터로 반환
isNaN()is Not a Number의 약자, 숫자가 아닌 문자가 포함되어 있으면 true 반환
eval()문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리
profile
프로그래밍 언어 공부 정리

0개의 댓글