[JS] 개요 - 함수, 배열, 객체, 모듈, Reference 참조, 정규식

생활코딩/

[JS] 개요 - 함수, 배열, 객체, 모듈, Reference 참조, 정규식

hayjo 2020. 9. 1. 20:16

[강의 출처] opentutorials.org/course/743/4729

함수 - 생활코딩

함수 함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 함수의 형식 함수의 형식은 아래와 같다. function 함수명( [인자...[,인자]] ){ 코드 return 반환값 }

opentutorials.org

함수(function):

재사용성, 유지보수의 편리함, 가독성에 유의해서 작성

함수 정의방법1

// 함수 정의방법 1
function get_argument(arg1, arg2){  // 매개변수(parameter)
    return arg1 + arg2;
};

console.log(get_argument(10, 20));  // 인자(argument)

함수 정의방법2

// 함수 정의방법 2
f = function(){
    return '함수를 정의하는 다른 방법';
};

f();

함수 정의방법3

// 함수 정의방법 3
(function (){
    return '익명함수'; // 정의와 호출을 같이해서 1회성으로 사용할 때 사용
})();

배열(array):

var data = ['data1', 'data2', 'data3'];
data.length; // 3

배열의 .length 메소드는 최대 인덱스에 하나를 더한 값으로, defined 값의 총 개수가 아니다.

var a = ["dog", "cat", "hen"];
a[100] = "fox";
a.length; //  101
/* 이제 a를 호출하면 아래와 같은 101개짜리 배열이 된다.
 [ "dog", "cat", "hen", <7 empty slots>, … ] */

// https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

반복문과 함께 사용할 경우

// 반복문과 결합해서 사용
for(var i = 0; i < data.length; i++){
    console.log(data[i].toUpperCase());
};

for(var i in data){
    console.log(data[i].toUpperCase());
};

데이터 추가하기

// 데이터 추가하기
data.push('data4');                       // 원소 1개 맨뒤에 추가
// data = ['data1', 'data2', 'data3', 'data4']
data = data.concat(['data5', 'data6']);   // 리스트 결합 후 재할당
// data = ['data1', 'data2', 'data3', 'data4', 'data5', 'data6']
data.unshift('data0');                    // 원소 1개 맨앞에 추가
// data = ['data0', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6']
data.splice(3, 1, 'data2-1', 'data2-2');  // 특정 위치의 원소 변경
// .splice(index, howmany(delete), element1, element2 ... )
/* 인덱스인 data[3] 위치('기존 data3')부터 howmany인 1개 원소를 삭제하고
 * 그 위치에 elements들을 삽입. 위 과정에서 삭제된 원소들의 배열을 리턴함 */
// data = [ "data0", "data1", "data2", "data2-1", "data2-2", "data4", "data5", "data6" ]

데이터 삭제하기

// 데이터 삭제하기
data.shift();                             // 맨앞의 원소를 삭제 후 리턴
// data = [ "data1", "data2", "data2-1", "data2-2", "data4", "data5", "data6" ]
data.pop();                               // 맨뒤의 원소를 삭제 후 리턴
// data = [ "data1", "data2", "data2-1", "data2-2", "data4", "data5"];

데이터 정렬하기

// 데이터 정렬
var alpha = ['a', 'e', 'd', 'b', 'c'];
alpha.sort();    // 오름차순으로 정렬
// alpha = [ "a", "b", "c", "d", "e" ]
alpha.reverse(); // 내림차순으로 정렬
// aplpha = [ "e", "d", "c", "b", "a" ]
// .sort(sortfunc)처럼 직접 function 작성도 가능

객체(object):

정의 및 인덱싱

// 객체 정의하기1
var obj = {'a': 25, 'b': 45, 'c': 70};

// 객체 정의하기2
var obj = {};
obj['a'] = 25;
obj['b'] = 45;
obj['c'] = 70;

// 객체 정의하기3
var obj = new Object();
obj['a'] = 25;
obj['b'] = 45;
obj['c'] = 70;

// 데이터 가져오기 & 인덱싱
obj['a'] // 25
obj.a    // 25

반복문과 함께 사용하는 경우

// 반복문과 결합해서 사용
for(var key in obj){   // key도 i처럼 관습적인 변수명임
    console.log("key: " + key + " value: " + obj[key]);
};

객체에는 함수나 객체를 담을 수도 있다.

함수 내의 this는 함수가 소속되어 있는 객체를 가리킨다.

var food = {
    'vegetables' : {
        'a': 'avocado',
        'b': 'beet',
        'c': 'carrot'
    },
    'fruits': {
        'a': 'apple',
        'b': 'banana',
        'c': 'citrus'
    }
};

food['vegetables']['a'] // 'avocado'


var funcs = {
    'hello' : function(){
        console.log(this);
        return 'Hello';
    },
    'world' : function(){
        console.log(this.hello());
        return 'World';
    }
};

for(key in funcs){
    console.log(funcs[key]());
};
/*
Object { hello: hello(), world: world() }  // hello() 내부의 this
Hello                                      // 함수 hello()의 리턴
Object { hello: hello(), world: world() }  // world()에서 this.hello() 호출 -> hello() 내부의 this 호출
Hello                                      // 함수 hello()의 리턴
World                                      // 함수 world()의 리턴
*/

모듈(module)/라이브러리(library):

자바스크립트가 구동되는 '호스트 환경(클라이언트 js, Node.js, Google AppScript, ...)'에 따라 모듈 사용방법이 다름

<!DOCTYPE html>
<html>
  <head>
    <script scr="모듈이 될 자바스크립트 파일.js"></script>
    <script scr="jquery.js"></script> <!--jQuery를 다운받아서 저장해둔 경우 이렇게 모듈로 불러오기 가능-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 이런식으로 url에서 바로 가져오는것도 가능 -->
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul id="list">
      <li>empty</li>
      <li>empty</li>
      <li>empty</li>
    </ul>
    <input type="button" value="execute" id="execute_btn">
    <script type="text/javascript">
      $('#execute_btn').click(function(){
        $('#list li').text('not empty');
      })
      
      /* js로만 하는 경우
      function change(){
          var d = document.querySelectorAll('#list li');
          for(i in d){
             d[i].textContent = 'non empty';
          }
      };
      change();
      */
    </script>
  </body>
</html>

UI·API·참고자료:

User Interface: 사용자와 상호작용하는 입출력 부분

Application Programming Interface: 프로그래머와 상호작용하는 입출력 부분

Reference:

참고자료는 크게 안내서 성격의 튜토리얼과 사전 성격의 레퍼런스로 구분되며,

통상 튜토리얼을 완료 후 레퍼런스를 찾아가며 공부하는 것이 일반적.

여기에 관련 자료 목록들이 잘 정리되어 있다

정규표현식(regular expression):

리터럴(//)이나 정규표현식 객체(new Regexp)를 만든 다음 메소드로 매치&리턴

// 패턴 생성
var pattern = /[A-Z]+/;              // 정규표현식 리터럴
var pattern = new RegExp('[A-Z]+');  // 정규표현식 객체 생성자

// 일치된 문자열 추출
pattern.exec('Apple Microsoft Facebook'); // Array [ "A" ]

// 문자열 여부에 따라 true/false 리턴
pattern.test('Apple Microsoft Facebook'); // true


// .exec 와 유사한 .match
'Apple Microsoft Facebook'.match(pattern); // Array [ "A" ]

// .replace
'Apple Microsoft Facebook'.replace(pattern, 'a'); // "apple Microsoft Facebook"

리터럴이나 객체 생성시에 플래그 옵션을 통해 대소문자, 복수결과 등의 처리가 가능하다.

생성자를 사용하는 경우 new RegExp('pattern', flag) 형태로 넣어준다. [참조-MDN-플래그를 사용한 고급검색]

// i 대소문자 구분 X
var pi = /[A-Z]+/i;
pi.exec('Apple Microsoft Facebook');      // Array [ "Apple" ]

// g 복수의 결과를 리턴
var pg = /[A-Z]+/g;
'Apple Microsoft Facebook'.match(pg);     // Array(3) [ "A", "M", "F" ]

// i+g 옵션 동시 사용도 가능
var pig = /([A-Z]+)/ig;     // Array(3) [ "Apple", "Microsoft", "Facebook" ]

// 역참조 기호는 $를 사용
'Apple Microsoft Facebook'.replace(pig, '$1 !'); // "Apple ! Microsoft ! Facebook !"

시각화 관련 참고 페이지는 이쪽:

regexper.com/

Regexper

regexper.com