ZeroCho Blog

안녕하세요. 이번 시간에는 새로 생긴 메소드를 알아보겠습니다. 많은 메소드들이 편의를 위해 추가되었습니다. 공부할 게 더 늘었네요... ㅠ 크롬이나 파이어폭스 최신 버전을 사용하면 아래 메소드를 콘솔 창에서 테스트해볼 수 있습니다.

Array

Array.from()

배열이 아닌 것(문자열, 유사 배열(arguments 등등), 반복 가능 객체)을 배열로 만들어줍니다. 유사 배열을 배열로 만들어준다는 점에 주목하시면 됩니다. document.querySelectorAll()같은 값에도 배열 메소드를 쉽게 적용할 수 있게 됩니다.

Array.from('Zero'); // ['Z', 'e', 'r', 'o']

Array.of(인자)

인자를 요소로 갖는 배열을 만듭니다.

Array.of('Zero', 'Nero', 'Hero'); // ["Zero", "Nero", "Hero"]

배열.fill(값, 시작위치, 끝위치)

배열을 요소를 인자로 제공한 값으로 대체합니다. 시작값과 끝값은 위치를 특정할 때 사용합니다. 인덱스값이기 때문에 0부터 시작합니다.

[1, 3, 5, 7, 9].fill(4); // [4, 4, 4, 4, 4]
[1, 3, 5, 7, 9].fill(4, 1, 3); // [1, 4, 4, 7, 9]

배열.find(함수)

배열 안의 요소를 찾습니다. 조건을 만족하는 첫 번째 요소만 반환합니다.

[1, 2, 3, 4, 5].find(function(number) {
  return number % 2 === 0;
}); // 2
[{ name: 'Zero' }, { name: 'Nero' }, { name: 'Hero' }].find(function(person) {
  return person.name === 'Zero';
}); // { name: 'Zero' }

배열.findIndex

find 메소드와 비슷하지만 해당 요소 대신에 그 요소의 위치를 반환합니다.

[1, 2, 3, 4, 5].findIndex(function(number) {
  return number % 2 === 0;
}); // 1
[{ name: 'Zero' }, { name: 'Nero' }, { name: 'Hero' }].findIndex(function(person) {
  return person.name === 'Zero';
}); // 0 

배열.copyWithin(목표, 시작점, 끝점)

좀 헷갈리는 메소드입니다. 목표의 위치에 시작점부터 끝점까지의 배열을 덮어씌웁니다.

[1, 2, 3, 4, 5].copyWithin(1, 2); // [1, 3, 4, 5, 5]
[1, 2, 3, 4, 5].copyWithin(1, 2, 3); // [1, 3, 3, 4, 5]

String

String.fromCodePoint(코드숫자)

fromCharCode의 업그레이드 버전입니다. length가 2인 문자들까지 지원합니다.

문자열.codePointAt

charCodeAt의 업그레이드 버전입니다. length가 2인 문자들까지 지원합니다.

문자열.startsWith(문자열, 시작위치)

문자열이 주어진 인자로 시작하는지 체크합니다.

'Zero is Great'.startsWith('Zero'); // true
'Zero is Great'.startsWith('is', 5); // true

문자열.endsWith(문자열, 길이)

문자열이 주어진 인자로 끝나는지 체크합니다. 길이가 주어지면, 해당 문자열의 길이가 그것이라고 가정한 상태에서 체크합니다.

'Zero is Great'.endsWith('eat'); // true
'Zero is Great'.endsWith('is', 7); // true 

문자열.repeat(숫자)

문자열을 반복하는 메소드입니다.

'Zero'.repeat(3); // 'ZeroZeroZero'

문자열.includes(문자열)

문자열에 찾는 문자열이 있는지 확인하고 있으면 true 없으면 false를 반환합니다.

'Zero is great'.includes('gr'); // true

Object

Object.assign(목표, 소스1, 소스2, ...)

객체를 얕은 복사하는 메소드입니다. 유용해서 자주 사용하게 될 겁니다. 깊은 복사는 할 수 없습니다. 소스들을 목표에 모두 복사해서 합칩니다.

Object.assign({ }, { a: 1 }); // { a: 1 }
Object.assign({ a: 1, b: 1 }, { a: 2 }, { a: 3 }); // { a: 3, b: 1 } 

Object.is(값1, 값2)

두 값이 같은 지 비교합니다. 몇 가지 예외는 있지만 대다수의 경우 일치합니다.

Object.is(window, window); // true
Object.is(0, -0); // false
Object.is(null, null); // true

Math

Math.sign

숫자의 부호를 알려줍니다. 1, -1, 0, -0, NaN 다섯 가지로 반환합니다. 각각 양수, 음수, 양의 0, 음의 0, 숫자 아님을 뜻합니다.

Math.sign(-3); // -1
Math.sign(-0); // -0

Math.trunc

소수점을 버립니다. 양수에서는 Math.floor과 같고, 음수에서는 Math.ceil과 같습니다.

Math.trunc(1.5); // 1
Math.trunc(-1.5); // -1

Number

Number.isInteger

숫자가 정수인지 아닌지 알려줍니다.

Number.isInteger(1); // true
Number.isInteger(0.1); // false

Number.isFinite, Number.isNaN

기존에 window 객체의 메소드였는데요. ES2015에서는 Number 객체의 메소드가 되었습니다. 그러면서 문제점을 수정했습니다. 기존의 메소드는 숫자가 아닌 자료형을 강제로 숫자로 변환한 후 체크했지만, 이 메소드들은 더 이상 숫자로 강제 변환하지 않습니다. 이제 NaN도 안전하게 체크할 수 있습니다.

Number.parseInt, Number.parseFloat

기존의 글로벌 함수와 동일합니다. 하지만 ES2015에서 모듈을 장려함에 따라, window 객체에 있던 메소드들이 Number로 이동하였습니다.

다음 시간에는 프록시(Proxy) 객체에 대해 알아보겠습니다!