Skip to content

Latest commit

 

History

History
1411 lines (1003 loc) · 43.6 KB

0809.md

File metadata and controls

1411 lines (1003 loc) · 43.6 KB

170809

Js Date

  • 생성자 함수로 반드시 생성해야한다 리터럴 방식이 없다.

1. Date Constructor

  • Date 생성자를 사용하여 날짜와 시간을 가지는 인스턴스를 생성한다.
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month[, day, hour, minute, second, millisecond])
  • Date() 생성자 함수를 new 연산자없이 사용하면 Date 객체를 반환하지 않고 결과값을 문자열로 반환한다.
var date = new Date();
console.log(typeof date, date); //object Thu May 12 2016 00:51:36 GMT+0900 (KST)

date = Date();
console.log(typeof date, date); // string Thu May 12 2016 00:51:36 GMT+0900 (KST)

console.dir(Date);

1.1 new Date()

  • 매개변수가 없는 경우 현재 날짜와 시간을 가지는 인스턴스를 반환한다.
var d = new Date();
console.log(d); // Thu May 12 2016 15:38:39 GMT+0900 (KST)

1.2 new Date(milliseconds)

  • 매개변수에 밀리초를 전달하면 1970년 1월 1일 00:00(UTC)을 기점으로 전달된 밀리초만큼 경과한 날짜와 시간을 가지는 인스턴스를 반환한다.
var d = new Date(0);
console.log(d); // Fri Jan 01 1970 09:00:00 GMT+0900 (KST)

var d = new Date(86400000);
console.log(d); // Fri Jan 02 1970 09:00:00 GMT+0900 (KST)
  • 86400000ms는 1day를 의미한다.

1.3 new Date(dateString)

  • 매개변수에 날짜와 시간을 나타내는 문자열을 전달하면 지정된 날짜와 시간을 가지는 인스턴스를 반환한다.
    • 문자열로 나타내진다.
var d = new Date('2017/08/08/20:00:00');
console.log(d); // Tue Aug 08 2017 20:00:00 GMT+0900 (KST)

1.4 new Date(year, month[, day, hour, minute, second, millisecond])

  • 매개변수에 년, 월, 일, 시, 분, 초, 밀리초를 의미하는 숫자를 전달하면 지정된 날짜와 시간을 가지는 인스턴스를 반환한다. 이때 년, 월을 반드시 지정하여야 한다.
    • 숫자로 나타내진다.
    • year 1900년 이후의 년
    • month 월을 나타내는 0 ~ 11까지의 정수 (주의: 0부터 시작, 0 = 1월)
    • day 일을 나타내는 1 ~ 31까지의 정수
    • hour 시를 나타내는 0 ~ 23까지의 정수
    • minute 분을 나타내는 0 ~ 59까지의 정수
    • second 초를 나타내는 0 ~ 59까지의 정수
    • millisecond 밀리초를 나타내는 0 ~ 999까지의 정수
var d = new Date(1999);
console.log(d); // Thu Jan 01 1999 09:00:01 GMT+0900 (KST)

var d = new Date(1999, 10, 3, 11, 33, 30, 0);
console.log(d); // Wed Nov 03 1999 11:33:30 GMT+0900 (KST)

var d = new Date(1999, 10);
console.log(d); // Mon Nov 01 1999 00:00:00 GMT+0900 (KST)

var d = new Date('1999/10/3/11:33:00:00');
console.log(d); // Mon Nov 01 1999 00:00:00 GMT+0900 (KST)

2. Date Method

2.1 Date.now()

  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환한다.
var n = Date.now();
console.log(n);

2.2 Date.parse()

  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 매개변수로 전달된 지정 시간(new Date(dateString)의 인수와 동일한 형식)까지의 밀리초를 숫자로 반환한다.
    • UTC로 지정을 안해주면 컴퓨터의 로컬을 기준으로 반영한다.
var d = Date.parse('Jan 2, 1970 00:00:00 UTC'); // UTC
console.log(d); // 86400000

var d = Date.parse('Jan 2, 1970 09:00:00'); // KST
console.log(d); // 86400000

var d = Date.parse('1970/01/02/09:00:00'); // KST
console.log(d); // 86400000

2.3 Date.UTC()

  • 1970년 1월 1일 00:00:00(UTC)을 기점으로 매개변수로 전달된 지정 시간(new Date(year, month[, day, hour, minute, second, millisecond]))의 인수와 동일한 형식)까지의 밀리초를 숫자로 반환한다.

  • UTC() 메소드는 new Date(year, month[, day, hour, minute, second, millisecond])와 같은 형식의 인수를 사용한다. 하지만 UTC() 메소드의 인수는 local time(KST)가 아닌 UTC로 인식된다.

var d = Date.UTC(1970, 0, 2);
console.log(d); // 86400000

var d = Date.UTC('1970/1/2');
console.log(d); // NaN

2.4 Date.prototype.getFullYear()

  • 해당 연도를 나타내는 4자리 숫자를 반환한다.
var today = new Date();
var year = today.getFullYear();

console.log(today); // Tue Aug 08 2017 20:53:24 GMT+0900 (KST)
console.log(year);  // 2017

2.5 Date.prototype.setFullYear()

  • 해당 연도를 나타내는 4자리 숫자를 설정한다. 연도 이외 월, 일도 설정할 수 있다.
dateObj.setFullYear(yearValue[, monthValue[, dayValue]])


var today = new Date();
today.setFullYear(2000);
var year = today.getFullYear();

console.log(today); // Tue Aug 08 2000 20:54:21 GMT+0900 (KST)
console.log(year);  // 2000

today.setFullYear(1900, 0, 1);
year = today.getFullYear();

console.log(today); // Mon Jan 01 1900 20:54:21 GMT+0900 (KST)
console.log(year);  // 1900

2.6 Date.prototype.getMonth()

  • 해당 월을 나타내는 0 ~ 11의 정수를 반환한다. 1월은 0, 12월은 11이다.

2.7 Date.prototype.setMonth()

  • 해당 월을 나타내는 0 ~ 11의 정수를 설정한다. 1월은 0, 12월은 11이다. 월 이외 일도 설정할 수 있다.

2.8 Date.prototype.getDate()

  • 해당 날짜(1 ~ 31)를 나타내는 정수를 반환한다.

2.9 Date.prototype.setDate()

  • 해당 날짜(1 ~ 31)를 나타내는 정수를 설정한다.

###2.10 Date.prototype.getDay()

  • 해당 요일(0 ~ 6)를 나타내는 정수를 반환한다. 반환값은 아래와 같다.
    • 0은 일요일 6은 토요일이다.
var today = new Date();
var day = today.getDay();

console.log(today); // Tue Aug 08 2017 20:58:22 GMT+0900 (KST)
console.log(day);   // 2

2.11 Date.prototype.getHours()

  • 해당 시간(0 ~ 23)를 나타내는 정수를 반환한다.

2.12 Date.prototype.setHours()

  • 해당 시간(0 ~ 23)를 나타내는 정수를 설정한다. 시간 이외 분, 초, 밀리초도 설정할 수 있다.

2.13 Date.prototype.getMinutes()

  • 해당 분(0 ~ 59)를 나타내는 정수를 반환한다.

2.14 Date.prototype.setMinutes()

  • 해당 분(0 ~ 59)를 나타내는 정수를 설정한다. 분 이외 초, 밀리초도 설정할 수 있다.

2.15 Date.prototype.getSeconds()

  • 해당 초(0 ~ 59)를 나타내는 정수를 반환한다.

2.16 Date.prototype.setSeconds()

  • 해당 초(0 ~ 59)를 나타내는 정수를 설정한다. 초 이외 밀리초도 설정할 수 있다.

2.17 Date.prototype.getMilliseconds()

  • 해당 밀리초(0 ~ 999)를 나타내는 정수를 반환한다.

2.18 Date.prototype.setMilliseconds()

  • 해당 밀리초(0 ~ 999)를 나타내는 정수를 설정한다.

2.19 Date.prototype.getTime()

  • 1970년 1월 1일 00:00:00(UTC)를 기점으로 현재 시간까지 경과된 밀리초를 반환한다.

2.20 Date.prototype.setTime()

  • 1970년 1월 1일 00:00:00(UTC)를 기점으로 현재 시간까지 경과된 밀리초를 설정한다.

2.21 Date.prototype.getTimezoneOffset()

  • UTC와 지정 로케일(Locale) 시간과의 차이를 분단위로 반환한다.

2.22 Date.prototype.toDateString()

  • 사람이 읽을 수 있는 형식의 문자열로 날짜를 반환한다.
var d = new Date('1988/8/17/13:30');

console.log(d.toString());     // Sat Sep 17 1988 13:30:00 GMT+1000 (KDT)
console.log(d.toDateString()); // Sat Sep 17 1988

2.23 Date.prototype.toTimeString()

  • 사람이 읽을 수 있는 형식의 문자열로 시간을 반환한다.
var d = new Date('1988/8/17/13:30');

console.log(d.toString());     // Wed Aug 17 1988 13:30:00 GMT+1000 (KDT)
console.log(d.toTimeString()); // 13:30:00 GMT+1000 (KDT)

3. Date Example

  • 현재 날짜와 시간을 초단위로 반복 출력하는 예제이다.
(function printNow() {
  var today = new Date();

  var dayNames = ['(일요일)', '(월요일)', '(화요일)', '(수요일)', '(목요일)', '(금요일)', '(토요일)'];
  // getDay: 해당 요일(0 ~ 6)를 나타내는 정수를 반환한다.
  var day = dayNames[today.getDay()];

  var year   = today.getFullYear(),
      month  = today.getMonth() + 1,
      date   = today.getDate(),
      hour   = today.getHours(),
      minute = today.getMinutes(),
      second = today.getSeconds();
      ampm   = hour >= 12 ? 'PM' : 'AM';

  // 12시간제로 변경
  hour = hour % 12;
  hour = hour ? hour : 12; // 0 => 12

  // 10미만인 분과 초를 2자리로 변경
  minute = minute < 10 ? '0' + minute : minute;
  second = second < 10 ? '0' + second : second;

  var now = year + '년 ' + month + '월 ' + date + '일 ' + day + ' ' + hour + ':' + minute + ':' + second + ' ' + ampm;

  console.log(now);
  setTimeout(printNow, 1000);
}());

170809

Js String

1. String Constructor

  • String 객체는 String() 생성자 함수를 통해 생성할 수 있다. 이때 전달된 인자는 모두 문자열로 변환된다.
    • new를 넣지 않는다면 그냥 문자로만 변환한다.
var x = 'Lee';
var y = new String('Lee');

console.log(x == y);  // true
console.log(x === y); // false

console.log(typeof x); // string
console.log(typeof y); // object

2. String Property

2.1 String.length

  • 문자열 내의 문자 갯수를 반환한다.
var str = 'Hello';
console.log(str.length); // 5

str = '안녕하세요';
console.log(str.length); // 5

3. String Method

3.1 String.prototype.charAt()

  • 매개변수로 전달한 index 번호에 해당하는 위치의 문자를 반환한다.
  • index 번호는 0 ~ (문자열 길이 - 1) 사이의 정수이다.
str.charAt(index)

var str = 'Hello';

console.log(str.charAt(0)); // H
console.log(str.charAt(1)); // e
console.log(str.charAt(2)); // l
console.log(str.charAt(3)); // l
console.log(str.charAt(4)); // o
// 지정한 index가 범위(0 ~ str.length-1)를 벗어난 경우 빈문자열을 반환한다.
console.log(str.charAt(5)); // ''

for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i));
}

3.2 String.prototype.indexOf()

  • 문자열 내에 매개변수로 전달된 문자 또는 문자열이 처음 발견된 곳의 index를 반환한다.
  • 발견하지 못한 경우 -1을 반환한다.
str.indexOf(searchValue[, fromIndex])
// searchValue: 검색할 문자 또는 문자열
// fromIndex : 검색 시작 index (생략할 경우, 0)

var str = 'Hello World';

console.log(str.indexOf('l'));  // 2
console.log(str.indexOf('or')); // 7
console.log(str.indexOf('or' , 8)); // -1

3.3 String.prototype.lastIndexOf()

  • 문자열 내에 매개변수로 전달된 문자 또는 문자열이 마지막으로 발견된 곳의 index를 반환한다. 발견하지 못한 경우 -1을 반환한다.

  • 2번째 인수(fromIndex)가 전달되면 검색 시작 위치를 fromIndex으로 이동하여 역방향으로 검색을 시작한다. 이때 검색 범위는 0 ~ fromIndex이다.

var str = 'Hello World';

console.log(str.lastIndexOf('World')); // 6
console.log(str.lastIndexOf('l'));     // 9
console.log(str.lastIndexOf('o', 5));  // 4
console.log(str.lastIndexOf('o', 8));  // 7
console.log(str.lastIndexOf('l', 10)); // 9

console.log(str.lastIndexOf('H', 0));  // 0
console.log(str.lastIndexOf('W', 5));  // -1
console.log(str.lastIndexOf('x', 8));  // -1

3.4 String.prototype.replace()

  • 첫번째 인수로 전달된 문자열 또는 정규표현식을 대상 문자열에서 검색하여 두번째 인수로 전달된 문자열로 대체한다.
    • 검색된 문자열이 복수 존재할 경우 첫번째로 검색된 문자열만 대체된다.
  • 기본자료형이라서 원본은 변경되지 않는다.
var str = 'Hello Hello';

var replacedStr = str.replace('Hello', 'Lee');
console.log(replacedStr);  // Lee Hello
console.log(str); // Hello Hello

replacedStr = str.replace(/hello/gi, 'Lee'); // 정규표현식
console.log(replacedStr); //  Lee Lee
console.log(str); //  Hello Hello

/hello/의 패턴을 검색하는데 (g반복해서 계속) (i 대소문자를 구분하지 말라)해서 찾는다.

3.5 String.prototype.split()

  • 첫번째 인수로 전달된 문자열 또는 정규표현식을 대상 문자열에서 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열을 반환한다.

  • 인수가 없는 경우, 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.

str.split([separator[, limit]])
// separator: 구분 대상 문자열 또는 정규표현식
// limit: 구분 대상수의 한계를 나타내는 정수

var str = 'How are you doing?';

var splitStr = str.split(' ');
console.log(splitStr); // [ 'How', 'are', 'you', 'doing?' ]

splitStr = str.split();
console.log(splitStr); // [ 'How are you doing?' ]

splitStr = str.split('');
console.log(splitStr); // [ 'H','o','w',' ','a','r','e',' ','y','o','u',' ','d','o','i','n','g','?' ]

splitStr = str.split(' ', 3);  // 앞에서 부터 3개만 가져와.
console.log(splitStr); // [ 'How', 'are', 'you' ]

splitStr = str.split('o');
console.log(splitStr); // [ 'H', 'w are y', 'u d', 'ing?' ]

3.6 String.prototype.substring()

  • 첫번째 인수로 전달된 index에 해당하는 문자부터 두번째 인수로 전달된 index에 해당하는 문자의 바로 이전 문자까지를 모두 반환한다. 이때 첫번째 인수 < 두번째 인수의 관계가 성립된다.
    • 첫번째 인수 > 두번째 인수 : 두 인수는 교환된다. ex) 4,1이면 1,4로 변경된다.
    • 두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.
    • 인수 < 0 또는 NaN인 경우 : 0으로 취급된다. ex) -2를 주면 전체를 애기한다.
    • 인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다. 빈문자를 출력한다.
var str = 'Hello World'; // str.length == 11

var res = str.substring(1, 4);
console.log(res); // ell

// 첫번째 인수 > 두번째 인수 : 두 인수는 교환된다.
res = str.substring(4, 1);
console.log(res); // ell

// 두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.
res = str.substring(4);
console.log(res); // o World

// 인수 < 0 또는 NaN인 경우 : 0으로 취급된다.
res = str.substring(-2);
console.log(res); // Hello World

// 인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다.
res = str.substring(1, 12);
console.log(res); // ello World

res = str.substring(11);
console.log(res); // ''

res = str.substring(20);
console.log(res); // ''

res = str.substring(0, str.indexOf(' '));
console.log(res); // 'Hello'

res = str.substring(str.indexOf(' ') + 1, str.length);
console.log(res); // 'World'

3.7 String.prototype.toLowerCase()

  • 문자열의 문자를 모두 소문자로 변경한다.

3.8 String.prototype.toUpperCase()

  • 문자열의 문자를 모두 대문자로 변경한다.

3.9 String.prototype.trim()

  • 문자열 양쪽 끝에 있는 공백 문자를 제거한 문자열을 반환한다.
var str = '   foo  ';
var trimmedStr = str.trim();
console.log(trimmedStr);
console.log(str);
  • 이때 해당 문자열 자신은 변경되지 않는다. 문자열은 변경 불가능한 값(immutable value)이기 때문이다.

170809

Js RegExp

1. 정규표현식 (Regulat Expression)

  • 정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다.
var tel = '0101234567팔';

var myRegExp = /^[0-9]+$/;

console.log(myRegExp.test(tel)); // false
var myRegExp = /regexr/i;
  • regexr = 패턴(pattern), i = 플래그(Flag)

1.2 플래그

  • 플래그는 여러가지 종류가 있다.
    • i Ignore Case 대소문자를 구별하지 않고 검색한다.
    • g Global 문자열 내의 모든 패턴을 검색한다.
    • m Multi Line 문자열의 행이 바뀌더라도 검색을 계속한다.
var targetStr = 'Is this all there is?';
var regexr = /is/;

console.log(targetStr.match(regexr)); // [ 'is', index: 5, input: 'Is this all there is?' ]

regexr = /is/ig;

console.log(targetStr.match(regexr)); // [ 'Is', 'is', 'is' ]
  • match() method를 사용하면 배열로 반영한다.
  • test() method를 통하여 있는지 없는지를 찾아내기만 한다.

1.2 패턴

  • 패턴에는 찾고자 하는 대상을 문자열로 지정한다.
  • 패턴은 특별한 의미를 가지는 메타문자(Metacharacter) 또는 기호로 표현할 수 있다.
var targetStr = 'AA BB Aa Bb';
// 임의의 문자 3개
var regexr = /.../;
  • .를 3개 연속하여 패턴을 생성하였으므로 패턴과 일치하는 3자리 문자를 추출한다.
  • 반복하기 위해서는 플래그 g를 사용한다.
var targetStr = 'AA BB Aa Bb';
// 임의의 문자 3개를 반복하여 검색
var regexr = /.../g;
console.log(targetStr.match(regexr)); // [ 'AA ', 'BB ', 'Aa ' ]
  • 대소문자를 구별하지 않게 하려면 플래그 i를 사용한다.
var targetStr = 'AA BB Aa Bb';
// 'A'를 대소문자 구분없이 반복 검색
var regexr = /A/ig;
console.log(targetStr.match(regexr)); // [ 'A', 'A', 'A', 'a' ]
  • 앞선 패턴을 최소 한번 반복하려면 앞선 패턴 뒤에 +를 붙인다.
var targetStr = 'AA AAA BB Aa Bb';
// 'A'가 한번이상 반복되는 문자열을 반복 검색 / 1번도 대상이다.
var regexr = /A+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'AAA', 'A' ]
  • |를 사용하면 or의 의미를 가지게 된다.
var targetStr = 'AA BB Aa Bb';
// 'A' 또는 'B'를 반복 검색
var regexr = /A|B/g;
console.log(targetStr.match(regexr)); // [ 'A', 'A', 'B', 'B', 'A', 'B' ]
  • 분해되지 않은 단어 레벨로 추출하기 위해서는 +를 같이 사용하면 된다.
var targetStr = 'AA AAA BB Aa Bb';
// 'A' 또는 'B'가 한번이상 반복되는 문자열을 반복 검색
var regexr = /A+|B+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'AAA', 'BB', 'A', 'B' ]
  • []내의 문자는 or로 동작한다 위의 | 와 같다.
var targetStr = 'AA BB Aa Bb';
// 'A' 또는 'B'가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[AB]+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'BB', 'A', 'B' ]
  • 범위를 지정하려면 []내에 -를 사용한다. 아래의 경우 대문자 알파벳을 추출한다범.
var targetStr = 'AA BB ZZ Aa Bb';
// 'A' ~ 'Z'가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[A-Z]+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'BB', 'ZZ', 'A', 'B' ]
  • 대소문자를 구별하지 않고 알파벳을 추출하려면 아래와 같이 한다.
var targetStr = 'AA BB Aa Bb';
// 'A' ~ 'Z' 또는 'a' ~ 'z'가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[A-Za-z]+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'BB', 'Aa', 'Bb' ]
  • 숫자를 추출하는 방법이다.
var targetStr = 'AA BB Aa Bb 24,000';
// '0' ~ '9'가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[0-9]+/g;
console.log(targetStr.match(regexr)); // [ '24', '000' ]
  • 컴마 때문에 결과가 분리되므로 패턴에 포함시킨다.
var targetStr = 'AA BB Aa Bb 24,000';
// '0' ~ '9' 또는 ','가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[0-9,]+/g;
console.log(targetStr.match(regexr)); // [ '24,000' ]
  • \d는 숫자를 의미한다. \D는 \d와 반대로 동작한다.
    • \D는 숫자말고 다른 것을 다 포함한다.
var targetStr = 'AA BB Aa Bb 24,000';
// '0' ~ '9' 또는 ','가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[\d,]+/g;
console.log(targetStr.match(regexr)); // [ '24,000' ]

// '0' ~ '9'가 아닌 문자(숫자가 아닌 문자) 또는 ','가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[\D,]+/g;
console.log(targetStr.match(regexr)); // [ 'AA BB Aa Bb ', ',' ]
  • \w는 알파벳과 숫자를 의미한다. \W는 \w와 반대로 동작한다.
    • \W는 알파벳과 숫자가 아닌것을 찾는다.
var targetStr = 'AA BB Aa Bb 24,000';
// 알파벳과 숫자 또는 ','가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[\w,]+/g;
console.log(targetStr.match(regexr)); // [ 'AA', 'BB', 'Aa', 'Bb', '24,000' ]

// 알파벳과 숫자가 아닌 문자 또는 ','가 한번이상 반복되는 문자열을 반복 검색
var regexr = /[\W,]+/g;
console.log(targetStr.match(regexr)); // [ ' ', ' ', ' ', ' ', ',' ]

1.3 자주 사용하는 정규표현식

  • 특정 단어로 시작하는지 검사한다.
    • ^를 사용한다.
var targetStr = 'abcdef';
// 'abc'로 시작하지 검사
var regexr = /^abc/;
console.log(regexr.test(targetStr)); // true
  • 특정 단어로 끝나는지 검사한다.
    • $를 사용한다.
var targetStr = 'abcdef';
// 'ef'로 끝나는지 검사
var regexr = /ef$/;
console.log(regexr.test(targetStr)); // true
  • 숫자인지 검사한다.
    • /^\d+$/를 사용한다.
var targetStr = '12345';
// 모두 숫자인지 검사
var regexr = /^\d+$/;
console.log(regexr.test(targetStr)); // true
  • 공백으로 시작하는지 검사한다.
    • ^[\s]+/; 를 사용한다.
var targetStr = ' Hi!';
// 1개 이상의 공백으로 시작하는지 검사
var regexr = /^[\s]+/;
console.log(regexr.test(targetStr)); // true
  • 아이디로 사용 가능한지 검사한다. (영문자, 숫자만 허용, 4~10자리)
    • /^[A-Za-z0-9]{4,10}$/ 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사의 조건을 사용한다.
var targetStr = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~10자리인지 검사 
var regexr = /^[A-Za-z0-9]{4,10}$/
console.log(regexr.test(targetStr)); // true
  • 메일 주소 형식에 맞는지 검사한다.
    • /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;를 사용한다.
var targetStr = 'ungmo2@gmail.com';
var regexr =  /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
console.log(regexr.test(targetStr)); // true
  • 핸드폰 번호 형식에 맞는지 검사한다.
    • /^\d{3}-\d{3,4}-\d{4}$/;를 사용한다.
var targetStr = '010-1234-5678';
var regexr = /^\d{3}-\d{3,4}-\d{4}$/;
console.log(regexr.test(targetStr)); // true
  • 특수 문자 포함 여부를 검사한다.
    • /[{}[]/?.,;:|)*~`!^-_+<>@#$%&\=('"]/gi 를 사용한다.
    • 특수문자가 있으면 true 없으면 false이다.
var targetStr = 'abc#123';
var regexr = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
console.log(regexr.test(targetStr)); // true

2. Javascript Regular Expression

2.1 RegExp Constructor

  • RegExp 객체를 생성하기 위해서는 리터럴 방식과 RegExp 생성자 함수를 사용할 수 있다.
  • 일반적인 방법은 리터럴 방식이다.
// 정규식 리터럴
var myRegExp = /ab+c/i;

var myRegExp = new RegExp('ab+c', 'i');

var myRegExp = new RegExp(/ab+c/, 'i');

var myRegExp = new RegExp(/ab+c/i); // ECMAScript 6

2.2 RegExp Method

2.2.1 RegExp.prototype.exec()

  • 문자열을 검색하여 매칭 결과를 반환한다. 반환값은 배열 또는 null이다.
var target = 'Is this all there is?';
var regExp = /is/;

var res = regExp.exec(target);
console.log(res); // [ 'is', index: 5, input: 'Is this all there is?' ]

2.2.2 RegExp.prototype.test()

  • 문자열을 검색하여 매칭 결과를 반환한다. 반환값은 true 또는 false이다.
var target = 'Is this all there is?';
var regExp = /is/;

var res = regExp.test(target);
console.log(res); // true

170809

Js Array

1. 배열의 생성

var arr = [1,2,3]; // 리터럴 방식으로 만들수 있다.
  • 프로퍼티가 없고 값만 존재한다.
  • index를 사용하여서 순회가 가능하다.
  • Array() // Array 생성자로 생성하며 prototype관계가 성립한다.
    • 주의: Array는 object type이다.

1.1 배열 리터럴

var emptyArr = []; // 빈배열

var numbersArr = [
  'zero', 'one', 'two', 'three', 'four',
  'five', 'six', 'seven', 'eight', 'nine'
];

console.log(emptyArr[1]);       // undefined
console.log(numbersArr[1]);     // 'one'
console.log(emptyArr.length);   // 0
console.log(numbersArr.length); // 10
console.log(typeof numbersArr); // object
  • 요소(element)에는 모든 값이 올 수 있다.(배열, 객체, undefined 등등)

  • 배열은 무조건 []로 표현하며 안의 값으로는 index가 들어간다.

  • 아래는 유사배열 객체이다.

var numbersObject = {
  '0': 'zero',  '1': 'one',   '2': 'two',
  '3': 'three', '4': 'four',  '5': 'five',
  '6': 'six',   '7': 'seven', '8': 'eight',
  '9': 'nine'
};
  • 유사배열객체의 단점

    • 유사배열객체는 접근이 힘들다.
    • 순서가 보장되지 않는다.
    • for-in문으로 돌리면 우리가 원하는 동작을 할 수 없다.
  • 배열 리터럴은 객체 리터럴과 달리 프로퍼티명이 없고 각 요소(element)의 값만이 존재한다.

    • 배열 리터럴은 인덱스를 가지고 있다.
  • 두 객체의 근본적 차이는 numbersArr는 Array.prototype을 상속받았으나 numbersObject는 Object.prototype을 상속 받았다는 것이다.

  • 대부분의 언어에서 배열의 요소들은 모두 같은 데이터 타입이어야 하지만, 자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함할 수 있다.

var misc = [
  'string', 98.6, true, false, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity
];

misc.length   // 10

1.2 Array() 생성자 함수

  • Array() 생성자 함수는 매개변수의 갯수에 따라 다르게 동작한다.
  • new를 꼭 붙여야한다.
  • literal 방식으로 만드는 것이 더 좋다.
new Array(arrayLength)
  • 매개변수로 전달된 숫자를 length 값으로 가지는 빈 배열 생성
    • 값이 안들어 간곳에는 undefined가 된다.

2. 배열 요소의 추가와 삭제

2.1 배열 요소의 추가

  • 객체가 동적으로 프로퍼티를 추가할 수 있는 것처럼 배열도 동적으로 요소를 추가할 수 있다.
  • 순서에 맞게 값을 저장할 필요는 없고 필요한 인덱스 위치에 값을 저장할 수 있다.
  • 값이 할당되지 않은 인덱스 위치의 요소의 값은 undefined가 되고 배열의 길이(length)는 최종 인덱스 위치의 기준으로 산정된다.
var arr = [];
console.log(arr[0]); // undefined

arr[0] = 'one';
arr[3] = 'three';
arr[7] = 'seven';

console.log(arr); // ["one", undefined × 2, "three", undefined × 3, "seven"]
console.log(arr.length) // 8

2.2 배열 요소의 삭제

  • 배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.
  • 해당 요소가 삭제되는 것이 아니라 요소 값이 삭제되어 undefined가 된다.
  • 해당 요소를 완전히 삭제하기 위해서는 Array.prototype.splice() 메소드를 사용한다.
var numbersArr = ['zero', 'one', 'two', 'three'];

// 요소의 값만 삭제된다
delete numbersArr[2]; // ['zero', 'one', undefined, 'three']
console.log(numbersArr);

// 요소 일부를 삭제 (배열 시작점, 삭제할 요소수)
numbersArr.splice(2, 1); // ['zero', 'one', 'three'] 2번째에서 1개 지워라.
console.log(numbersArr);
  • splice(2,1)를 사용하면 2번째 인덱스부터 1개를 지우고 지운 뒤에는 index값들이 자동으로 바뀐다.

3. 배열 요소의 열거

  • 일반 for 문을 사용하여서 열거를 할 수 있다.
var numbersArr = ['zero', 'one', 'two', 'three'];
numbersArr.foo = 10;

for (var prop in numbersArr) {
  console.log(prop, numbersArr[prop]);
  // 0 zero / 1 one / 2 two / 3 three / foo 10
}

for (var i = 0; i < numbersArr.length; i++) {
  console.log(i, numbersArr[i]);
  // 0 'zero' / 1 'one' / 2 'two' / 3 'three'
}

for in 문은 property까지 다가져온다. 그래서 for문과 다르게 foo 10이 나온다. ES6에서는 유사배열을 돌리는 for of문을 사용한다.

4. Array Property

4.1 Array.length

  • 순회가능한 것에는 length가 필요하다
var myArray = [];
console.log(myArray.length); // 0

myArray[1000] = true;  // [ undefined, undefined, ... , true ]

console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined
  • 1000번째 인덱스에 값이 들어왔으니 0~999까지는 undefined가 채워지기에 length는 1000+1 = 1001이다.

  • length 프로퍼티는 명시적으로 값을 변경할 수 있다.

  • length 프로퍼티의 값을 현재 보다 작게 설정하면 설정한 값보다 크거나 같은 인덱스에 해당하는 요소는 모두 삭제된다.

var arr = [
  'zero', 'one', 'two', 'three', 'four',
  'five', 'six', 'seven', 'eight', 'nine'
];

// 배열 길이의 명시적 설정
arr.length = 3; // [ 'zero', 'one', 'two' ]

// 배열 끝에 새 요소 추가
arr[arr.length] = 'san'; // [ 'zero', 'one', 'two', 'san' ]

arr.length = 5; // [ 'zero', 'one', 'two', 'san', undefined ]

// 배열 끝에 새 요소 추가
arr.push('go'); // [ 'zero', 'one', 'two', 'san', undefined, 'go' ]
  • push() method는 마지막 인덱스 위치에 값을 할당한 것과 같다.
  • push보다 arr.length에다가 추가하는것이 속도적으로 더빠르다.

5. Array Method

5.1 Array.isArray()

  • static method이다
  • 객체가 배열이면 true, 배열이 아니면 false를 반환한다.

일반 method는 호출시 object명.method명, static은 생성자함수명.method명 을 사용한다. static의 생성자함수의 method는 new가 필요없이 GO에 이미 값이 올라가 있다.

// true
Array.isArray([]);   //true
Array.isArray([1, 2]); // true
Array.isArray(new Array()); // true

// false
Array.isArray();           
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(1);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);

5.2 Array.prototype.indexOf()

  • 배열에서 인수로 지정된 요소를 검색하여 인덱스를 반환한다
  • 중복되는 요소가 있는 경우 첫번째 인덱스만 반환된다. 만일 해당하는 요소가 없는 경우, -1을 반환한다.
var arr = [1, 2, 2, 3];
arr.indexOf(2); // 1
arr.indexOf(4); // -1
  • 반환 값이 -1이면 실패했다는 처리를 해줘야한다.

5.3 Array.prototype.concat(item…)

  • 인수로 넘어온 값들(배열 또는 값)을 자신의 복사본에 요소로 추가하고 복사본을 반환한다. 이때 원본 배열은 변경되지 않는다.
var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];

var c = a.concat(b);
console.log(c); // ['a', 'b', 'c', 'x', 'y', 'z']

var d = a.concat('String');
console.log(d); // ['a', 'b', 'c', 'String']

var e = a.concat(b, true);
console.log(e); // ['a', 'b', 'c', 'x', 'y', 'z', true]

// 원본 배열은 변하지 않는다.
console.log(a); // [ 'a', 'b', 'c' ]

5.4 Array.prototype.join()

  • 배열 요소 전체를 연결하여 문자열을 만든다. 기본구분자는 ‘,’이다.
    • option으로 원하는 값을 넣을 수 있다.
  • Array.prototype.join() 메소드는 + 연산자보다 빠르다.
str = arr.join([separator = ','])

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

var x = arr.join();
console.log(x);  // 'a,b,c,d';

var y = arr.join('');  // 다붙인다.
console.log(y);  // 'abcd'

var z = arr.join(':');
console.log(z);  // 'a:b:c:d'

5.5 Array.prototype.pop()

  • pop은 push와 함께 배열을 스택(LIFO: Last In First Out)처럼 동작하게 한다.(후입 선출)
  • pop 메소드는 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
  • 빈 배열일 경우 undefined를 반환한다.
var a = ['a', 'b', 'c'];
var c = a.pop();

// 원본 배열이 변경된다.
console.log(a); // a --> ['a', 'b']
console.log(c); // c --> 'c'

5.6 Array.prototype.push(item…)

  • 인수로 넘어온 항목을 배열의 끝에 추가한다.
  • concat 메소드와 다르게 배열 자체를 변경하여 넘어온 인수 전체를 배열에 추가한다.
  • 반환값은 배열의 새로운 length 값이다.
var a = ['a', 'b', 'c'];
var b = ['x', 'y', 'z'];

// push는 원본 배열을 직접 변경하고 변경된 배열의 length를 반환한다.
var c = a.push(b, true);
console.log(a); // a --> ['a', 'b', 'c', ['x', 'y', 'z'], true]
console.log(c); // c --> 5;

// concat은 원본 배열을 직접 변경하지 않고 복사본을 반환한다.
console.log([1, 2].concat([3, 4])); // [ 1, 2, 3, 4 ]
  • 요소로 배열이 들어올 수 있다.
  • 배열의 마지막에 값을 추가 할 때는 Array.prototype.push(), 선두에 추가 할 때는 Array.prototype.unshift(), 중간에 추가할 때는 Array.prototype.splice() 메소드를 사용한다.

push, unshift 메소드는 사용하기 간편하나 performance 면에서는 좋은 방법은 아니다.

var arr = [1, 2, 3, 4, 5];

arr.push(6);
arr[arr.length] = 6; // 43% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1

arr.unshift(0);
[0].concat(arr); // 98% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1

5.7 Array.prototype.reverse()

  • 배열 요소의 순서를 반대로 변경한다. 이때 원본 배열이 변경된다. 반환값은 변경된 배열이다.
var a = ['a', 'b', 'c'];
var b = a.reverse();

// 원본 배열이 변경된다
console.log(a); // [ 'c', 'b', 'a' ]
console.log(b); // [ 'c', 'b', 'a' ]

5.8 Array.prototype.shift()

  • shift는 push와 함께 배열을 큐(FIFO: First In First Out)처럼 동작하게 한다.
  • 배열에서 첫요소를 제거하고 제거한 요소를 반환한다. 만약 빈 배열일 경우 undefined를 반환한다.
var a = ['a', 'b', 'c'];
var c = a.shift();

// 원본 배열이 변경된다.
console.log(a); // a --> [ 'b', 'c' ]
console.log(c); // c --> 'a'

5.9 Array.prototype.slice(start, end)

  • 배열의 특정 부분에 대한 복사본을 생성한다.
    • 원본을 건드리지 않는다.
  • 첫번째 매개변수 start에 해당하는 인덱스를 갖는 요소부터 매개변수 end에 해당하는 인덱스를 가진 요소 전까지 복사된다.
var items = ['a', 'b', 'c'];

// items[0]부터 items[1] 이전(items[1] 미포함)까지 반환
var res1 = items.slice(0, 1);
console.log(res1);  // [ 'a' ]

// items[1]부터 items[2] 이전(items[2] 미포함)까지 반환
var res2 = items.slice(1, 2);
console.log(res2);  // [ 'b' ]

// items[1]부터 이후의 모든 요소 반환
var res3 = items.slice(1);
console.log(res3);  // [ 'b', 'c' ]

// 인자가 음수인 경우 배열의 끝에서 2개의 요소를 반환
var res4 = items.slice(-2);
console.log(res4);  // [ 'b', 'c' ]

// 모든 요소를 반환
var res5 = items.slice();
console.log(res5);  // [ 'a', 'b', 'c' ]

// slice는 복사본을 반환한다. 원본은 변경되지 않는다.
console.log(items); // [ 'a', 'b', 'c' ]

5.10 Array.prototype.splice(start, deleteCount, item…)

  • 기존의 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가한다. 배열 중간에 새로운 요소를 추가할 때도 사용된다.
    • start : 배열에서의 시작 위치이다
    • deleteCount : 시작 위치(start)부터 제거할 요소의 수이다.
    • item : 삭제한 위치에 추가될 요소들이다. (옵션)
var items = ['one', 'two', 'three', 'four'];

// items[1]부터 2개의 요소를 제거하고 제거된 요소를 배열로 반환
var res = items.splice(1, 2);

// 원본 배열이 변경된다.
console.log(items); // [ 'one', 'four' ]
// 제거한 요소가 배열로 반환된다.
console.log(res);   // [ 'two', 'three' ]

var items = ['one', 'two', 'three', 'four'];

// items[1]부터 2개의 요소를 제거하고 그자리에 새로운 요소를 추가한다. 제거된 요소가 반환된다.
var res = items.splice(1, 2, 'x', 'y');

// 원본 배열이 변경된다.
console.log(items); // [ 'one', 'x', 'y', 'four' ]
// 제거한 요소가 배열로 반환된다.
console.log(res);   // [ 'two', 'three' ]

var items = ['one', 'two', 'three', 'four'];

// items[1]부터 0개의 요소를 제거하고 그자리(items[1])에 새로운 요소를 추가한다. 제거된 요소가 반환된다.
var res = items.splice(1, 0, 'x');

// 원본 배열이 변경된다.
console.log(items); // [ 'one', 'x', 'two', 'three', 'four' ]
// 제거한 요소가 배열로 반환된다.
console.log(res);   // [ ]

var items = ['one', 'four'];

// items[1]부터 0개의 요소를 제거하고 그자리(items[1])에 새로운 배열를 추가한다. 제거된 요소가 반환된다.
// var res = items.splice(1, 0, ['two', 'three']); // [ 'one', [ 'two', 'three' ], 'four' ]
var res = Array.prototype.splice.apply(items, [1, 0].concat(['two', 'three']));
// ES6
// var res = items.splice(1, 0, ...['two', 'three']);

console.log(items); // [ 'one', 'two', 'three', 'four' ]
console.log(res);   // [ ]

['two','three']가 배열로 되어있어서 apply를 사용하여서 배열을 풀어서 넣는다 ES6에서는 ...을 사용하여서 해결한다.

5.11 Array.prototype.sort(comparefunc)

  • 배열의 내용을 적절하게 정렬한다.
    • 수를 정렬할때 인자로 callback함수를 주어야한다.
var fruits = ['Banana', 'Orange', 'Apple', 'Mango'];

// ascending(오름차순)
fruits.sort();
console.log(fruits); // [ 'Apple', 'Banana', 'Mango', 'Orange' ]

// descending(내림차순)
fruits.reverse();
console.log(fruits); // [ 'Orange', 'Mango', 'Banana', 'Apple' ]

var points = [40, 100, 1, 5, 25, 10];

points.sort();
console.log(points); // [ 1, 10, 100, 25, 40, 5 ]

// Syntax : array.sort(compareFunction)

// 숫자 배열 오름차순 정렬
// compareFunction의 반환값이 0보다 작은 경우, a를 우선한다.
points.sort(function (a, b) { return a - b; });
console.log(points); // [ 1, 5, 10, 25, 40, 100 ]

// 숫자 배열에서 최소값 취득
console.log(points[0]); // 1

// 숫자 배열 내림차순 정렬
// compareFunction의 반환값이 0보다 큰 경우, b를 우선한다.
points.sort(function (a, b) { return b - a; });
console.log(points); // [ 100, 40, 25, 10, 5, 1 ]

// 숫자 배열에서 최대값 취득
console.log(points[0]); // 100

5.12 Array.prototype.map()

  • 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행하고 그 결과가 반영된 새로운 배열을 반환한다.
  • 1번째 인자로 콜백함수의 인자로 요소값, 요소 인덱스, 순회할 배열을 전달할 수 있다.
var numbers = [1, 4, 9];
// 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행
var roots = numbers.map(Math.sqrt);
console.log(roots); // [ 1, 2, 3 ]
  • 2번째 인자로 this를 전달할 수 있다.
function Prefixer(prefix) {
  this.prefix = prefix;
}

Prefixer.prototype.prefixArray = function (arr) {
  // 콜백함수의 인자로 요소값, 요소 인덱스, 순회할 배열을 전달할 수 있다.
  return arr.map(function (x) {
    // x는 요소값이다.
    return this.prefix + x; // 2번째 인자 this를 전달하지 않으면 this === window
  }, this);
};

var pre = new Prefixer('-webkit-');
var preArr = pre.prefixArray(['linear-gradient', 'border-radius']);
console.log(preArr);
// [ '-webkit-linear-gradient', '-webkit-border-radius' ]
  • x는 map함수가 기본적으로 세팅하는 값은 순서대로 요소값을 나타내며 그 뒤에 값을 더 넣어주는 순서대로, 요소 인덱스, 순회할 배열을 전달할 수 있다.
  • Es6의 Arrow function를 사용하면 this를 생략하여도 동일한 동작을 한다.

순회하는 함수들은 2번째 인자로 this를 넣어줄수 있다 그래서 this가 전역이 되는 것을 막아준다. 만약 2번째 인자로 사용하지 않는다면 that을 생성하여서 that을 넣어주면 된다.

5.13 Array.prototype.forEach()

  • 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행한다.
  • 콜백함수의 인자로 요소값, 요소 인덱스, 순회할 배열을 전달할 수 있다. 일반 for 구문에 비해 성능이 좋지는 않다.
var total = 0;

[1, 3, 5, 7, 9].forEach(function (element, index, array) {
  console.log('[' + index + '] = ' + element);
  total += element;
});

console.log(total);
  • 2번째 인자로 this를 전달할 수 있다.
function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function (array) {
  // entry는 array의 요소값
  array.forEach(function (entry) {
    this.sum += entry; // 2번째 인자 this를 전달하지 않으면 this === window
    this.count++;
  }, this);
};

var obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum);   // 16
  • Es6의 Arrow function를 사용하면 this를 생략하여도 동일한 동작을 한다.

5.14 Array.prototype.filter()

  • 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수의 실행 결과가 true인 요소값만을 모은 새로운 배열을 반환한다.
  • 배열에서 특정 케이스만 필터링 조건으로 추출하여 새로운 배열을 만들고 싶을 때 사용한다.
  • 콜백함수의 인자로 요소값, 요소 인덱스, 순회할 배열을 전달할 수 있다.
var result = [1, 2, 3, 4, 5].filter(function (element, index, array) {
  console.log('[' + index + '] = ' + element);
  return element % 2; // 홀수만을 필터링한다 (1은 true로 평가된다)
});

console.log(result);

5.15 Array.prototype.reduce()

  • 배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과를 반환한다.
  • previousValue: 이전 콜백의 반환값, currentValue : 요소값, currentIndex : 인덱스, array : 순회할 배열를 인자로 가진다.
/*
previousValue: 이전 콜백의 반환값
currentValue : 요소값
currentIndex : 인덱스
array        : 순회할 배열
*/
var result = [1, 2, 3, 4, 5].reduce(function (previousValue, currentValue, currentIndex, array) {
  console.log(previousValue + '+' + currentValue + '=' + (previousValue + currentValue));
  return previousValue + currentValue; // 결과는 다음 콜백의 첫번째 인자로 전달된다
});

console.log(result); // 15: 1~5까지의 합
/*
1: 1+2=3
2: 3+3=6
3: 6+4=10
4: 10+5=15
15
*/
  • 1번 시작시 (1,2) / 2번 시작시 (1+2,3) / 3번 시작시 (1+2+3,4) / 4번 시작시 (1+2+3+4, 5)
  • Array.prototype.reduce() Array.prototype.reduce()

5.16 Array.prototype.find()

  • ES6에서 새롭게 도입된 메소드로 Internet Explorer에서는 지원하지 않는다.

  • 배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환한다. 콜백함수의 인자로 요소값, 요소 인덱스, 순회할 배열을 전달할 수 있다.

var array = [
  { id: 1, name: 'Lee' },
  { id: 2, name: 'Kim' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Park' }
];

var result = array.find(function (element) {
  return element.id === 2; // 조건
});

// ES6
// const result = array.find(element => element.id === 2;);

console.log(result); // { id: 2, name: 'Kim' }