배열 ... 정규표현식 -자바스크립트 기본 | 생활코딩

[출처 : https://opentutorials.org]

배열

: 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입.

​

배열에 원소 추가

var li = ['a', 'b', 'c'];

// 하나의 원소 추가
li.push('d');    // return 4; length를 반환

// 복수의 원소 추가
li = li.concat(['e', 'f']);    // return (6) ["a", "b", "c", "d", "e", "f"]; 원소를 반환

// 배열의 앞에 원소 추가
li.unshift('z');    // return 7; length를 반환

howmany, element1, ..., elementN);

 - 배열의 특정 위치(index)에 원소 혹은 배열을 추가하거나 삭제할 때 사용. 대상구간(howmany)에 해당하는 삭제될 원소들은 리턴 

 - howmany 값이 없을 경우, index 부터 모든 원소 삭제

 

배열의 원소 삭제

var li = ['a', 'b', 'c','d'];

// 배열 맨 앞의 원소 제거
li.shift();    // return 'a';

// 배열 맨 끝의 원소 제거
li.pop();    // return 'd'; 

# 배열의 정렬

 : .sort() 또는 .reverse() 메소드

li.sort();
li.reverse();    // 역순으로 정렬

 

 

객체

객체의 속성에 접근

var pesron = {'name': 'AGAL','age':15, 10: 'ten'};
pesron['10'];    // ten
pesron['na'+'me'];    // AGAL
pesron.age    // 15

pesron.'na'+'me'    //   Uncaught SyntaxError: Unexpected number
pesron.10;    // Uncaught SyntaxError: Unexpected number

객체와 반복문

 : for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 info에 담아서 반복문을 실행한다. 

var pesron = {'name': 'AGAL','age':15, 'city':'seoul'};
for (var info in pesron) {
  console.log('key : '+info+', value : '+pesron[info])
}

객체지향 프로그래밍

var person = {
  'list' : {'name': 'AGAL','age':15, 'city':'seoul'};,
  'show' : function() { 
    for (var info in this.list) {    // this는 함수가 소속된 객체 == person
      console.log(info, this.list[info]);
    }
  }
}
person.show();    // show() : 객체의 값으로 저장된 함수 == 메서드

- 서로 연관되어 있는 데이터('list')와 함수('show')를 하나의 객체로 그룹핑('person')한 프로그래밍 스타일 

 

 

속성 접근자

점 표기법

  - 프로퍼티 식별자는 알파벳( _ & $ 포함)로 시작한다. 숫자로 시작할 수는 없다.

  - 소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록

77 .toExponential();	(77).toExponential(); 	77..toExponential();	77.0.toExponential();

 

괄호 표기법

  - 프로퍼티 식별자는 문자열을 갖는다. 어떤 문자든 공백을 포함할 수 있다.

  - 변수가 문자열을 담고 있다면 변수 또한 쓸 수 있다.

 

 

코드를 여러개의 파일로 분리해서 얻을 수 있는 효과

  - 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.

  - 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.

  - 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.

  - 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.

 

 

# 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.

호스트 환경이란?
호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. 또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다. 여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.

라이브러리

  - 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합

 

 

UI와 API 그리고 문서보는 법

API(Application Programming Interface)란?

  : 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치 

 

# 튜토리얼은 언어의 문법을 설명하고, 레퍼런스는 명령어의 사전을 의미

 

# 자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다. 

 

자바스크립트 API 문서

  - ECMAScript (표준문서)

  - 자바스크립트 사전 (생활코딩)

  - 자바스크립트 레퍼런스 (MDN)

  - jscript 레퍼런스 (MSDN)

 

호스트 환경 API 문서

  - 웹브라우저 API

  - Node.js API

  - Google Apps Script API

 

 

정규표현식

컴파일

  : 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다. 

var pattern = /a/;    // 정규표현식 리터럴
var pattern = new RegExp('a');    // 정규표현식 객체 생성자

정규표현식 메소드 실행

 : 정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아내야 한다. 

// .exec(); 인자 안에 패턴에 해당되는 문자열이 있으면 값으로 하는 배열을, 없으면 null을 리턴한다.
console.log(pattern.exec('abcdef'));   // ["a"]
console.log(pattern.exec('bcdefg'));   // null

// .test(); 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.
console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false

문자열 메소드 실행

  : 문자열 객체의 몇몇 메소드는 정규표현식을 사용할 수 있다. 

'abcde'.match(pattern);    // ['a']
'abcde'.replace(pattern, 'A');    // Abcdef

옵션

: 정규표현식 패턴을 만들 때 옵션을 설정할 수 있다. 옵션에 따라서 검출되는 데이터가 달라진다.

// i를 붙이면 대소문자를 구분하지 않는다.
var I = /a/i;
console.log("Abcde".match(i));    // ["A"]

// g를 붙이면 검색된 모든 결과를 리턴한다.
var G = /a/g;
console.log("abcdea".match(i));    // ["a","a"]

// 패턴의 옵션은 조합 가능하다.
var IG = /a/ig;
console.log("Abcdea".match(i));    // ["A","a"]

사례

// 캡처 : 괄호안의 패턴은 마치 변수처럼 재사용할 수 있다. 
// 기호 $는 패턴에서의 그룹을 의미(\w+), 아래 코드는 coding과 everybody의 순서를 역전시킨다.
var pattern = /(\w+)\s(\w+)/;
"coding everybody".replace(pattern, "$2, $1");  // "everybody, coding"

 

참고

  - 생활코딩 정규표현식 수업

  - 정규표현식을 시각화

  - 정규표현식 빌더