-
[JS] 개요 - 함수, 배열, 객체, 모듈, Reference 참조, 정규식생활코딩/ 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
regexper.com
'생활코딩 > ' 카테고리의 다른 글
[JS] 탬플릿 리터럴(`를 이용한 표현식) (0) 2020.09.09 [JS] 객체 지향 - 표준내장객체와 확장, 데이터 타입, 참조 (0) 2020.09.07 [JS] 객체 지향 - 생성자와 new, 전역객체, this, 상속, prototype (0) 2020.09.05 [JS] 함수 - 유효범위, 콜백, 클로저, arguments, 호출 (0) 2020.09.03 [JS] 개요 - 숫자와 문자열, 변수, 비교연산자, 조건문, 반복문 (0) 2020.08.31