내용이 안 보인다면 쿠키/캐시를 지우고 새로고침 하세요!
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌14 - ECMAScript - 2년 전 등록 / 일 년 전 수정

Array, String, Object, Math, Number 메소드

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

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) 객체에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

1개의 댓글이 있습니다.
일 년 전
copywithin은 확실히 이해가 어렵네요
일 년 전
네네 저도 한 번도 안 써본 메소드에요 ㅎㅎ