8월 첫째 주 TWIL

sgyoon·2019년 8월 23일
0

TWIL

목록 보기
2/30
post-thumbnail

JavaScript

1. Object

Object.assign()

열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.
[ Object.assign() | MDN ]

2. Array

Array 메서드의 Mutating

기존 배열을 변경하는 대표적인 Array 메서드들

메서드명 반환내용
Array.push() push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
Array.ushift() unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.
Array.pop() pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
Array.shift() shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
Array.splice() splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가합니다.제거한 요소를 담은 배열을 반환합니다.

Array.reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.
[ Array.prototype.reduce() | MDN ]

Array.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
[ Array.prototype.filter() | MDN ]

Array.map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
[ Array.prototype.map() | MDN ]

Array.slice()

어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
[ Array.prototype.slice() | MDN ]

Array.push()

배열의 끝에 하나 이상의 요소를 추가합니다.
값 한 개 뿐 만 아니라 배열 혹은 여러개의 값을 만들거나 넣을 수 있습니다.
[ Array.prototype.push() | MDN ]

Array.indexOf()

배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환합니다. 존재하지 않으면 -1을 반환합니다.
[ Array.prototype.indexOf() | MDN ]

Array.isArray()

인자가 Array인지 판별합니다. 객체가 Array라면 true, 아니라면 false를 반환합니다.
[ Array.isArray() | MDN ]

3. String

String.concat()

호출 문자열에 매개변수 문자열을 이어 붙인 결과를 반환합니다. 원본 문자열과 결과 문자열의 변형은 서로에게 영향을 미치지 않습니다. 매개변수의 값이 문자열이 아니면 계산 전에 문자열로 변환합니다.
[ String.prototype.concat() | MDN ]

String.toUpperCase(), String.toLowerCase()

4. 문자열이 아닌 값을 문자열로 변환하는 메서드

String()

일반적으로 toString() 함수를 많이 사용하고 있지만, toString()의 "안전한" 대안으로 String을 사용할 수 있습니다. String은 [null]과 [undefined]에 대해서도 잘 동작합니다.
[ 문자열 변환 | MDN ]

Number.toString()

toString() 메소드는 메소드의 첫 번째 아규먼트를 파싱하여, 메소드는 특정 기수(radix)를 기준으로 한 진수 값의 문자열을 환원하기 위한 시도를 합니다. 진수를 나타내는 기수 값(radix) 이 10 이상의 값일 때는, 알파벳의 글자는 9보다 큰 수를 나타냅니다. 예를 들면, 16진수(base 16)는, 알파벳 f 까지 사용하여 표현됩니다.
만약에 radix값 이 지정되지 않으면, 임의로 10진수로 가정하게 됩니다.
[ Number.prototype.toString() | MDN ]

Object.toString()

모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있습니다. 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속됩니다.
[ Object.prototype.toString() | MDN ]

이 메서드가 사용자 지정 개체에서 재정의되지 않으면 toString()은 "[object type]"을 반환합니다. 여기서 type은 object type입니다.

5. Math 메서드 + 숫자열을 반환하는 함수

Math.abs()

주어진 숫자의 절대값을 반환합니다.
[ Math.abs() | MDN ]

Math.sqrt()

숫자의 제곱근을 반환합니다.
[ Math.sqrt() | MDN ]

parseInt()

문자열 인자의 구문을 분석해 특정 진수(수의 진법 체계에 기준이 되는 값)의 정수를 반환합니다.
[ parseInt() | MDN ]

만약 radix 가 undefined 이거나 0이라면, (또는 없다면), JavaScript 는 아래와 같이 임의 처리합니다.

  • 인풋 값 string 이 "0x" 나 "0X"로 시작한다면, radix 는 16(16진)이며, 나머지 문자열은 파싱됩니다.
  • 인풋 값 string 이 "0"으로 시작한다면, radix 는 8(8진)이거나, 10(십진)입니다. 정확히 이 선택된 radix 는 구현 의존적적입니다. ECMAScript 5 는 10(십진)이 사용되는 것을 명시하지만, 모든 브라우저가 아직 이렇게 되지 않습니다. 이러한 이유로 항상 parseInt를 사용할 때는 radix 값을 명시해야 합니다.
  • 인풋 값 string 이 다른 값으로 시작 된다면, radix 는 10(십진)입니다.
  • 만약 매개변수 string이 문자열이 아니면 문자열로 변환(ToString 추상 연산을 사용)합니다.

parseFloat()

[ parseFloat() | MDN ]

6. 양수를 음수로, 음수를 양수로 만드는 방법

7. 의문점 해결 : 객체와 let의 특징

Q. 사원들의 정보를 다른 형태로 변형 할 수 있는 함수 "transformEmployeeData" 함수를 작성하세요.
A1.

이 문제를 페어 프로그래밍으로 풀다가 의문이 생겼다. 객체 obj를 첫번째 for문 안쪽이 아닌 바깥쪽에 선언해주면 어떤 방식으로 에러가 나는지를 살펴보았더니, 마지막에 대입되는 객체만 result에 두 번 push되어 있었다. 그런데 그 이유를 잘 이해할 수 없었다.

A2.

그래서 개발자 도구로 중단점을 이용해 A2를 살펴보니 다음과 같았다.

  1. 첫번째 for문에서 i = 0일 때, { firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' } 가 obj에 대입되고 result에 push된다.
  2. 첫번째 for문에서 i = 1일 때, for문이 실행되면서 동시에 obj가 두 번째 배열을 읽은 값인 Mary로 바뀐다.
  3. 동시에 result안에 push된 obj안에도 반영되어, 결국 result의 0번째 인덱스값인 객체 obj의 내용이 Mary로 바뀐다.
  4. 그 후 Mary의 키와 값이 대입된 객체 obj가 result에 push되어 result의 1번 인덱스에 들어간다.
  5. 결과적으로 result 의 0번과 1번 인덱스 모두 Mary가 된다.

정리하면 :

  • A2의 경우, result 안에 push된 obj가 맨 처음에 선언한 obj와 같기 때문에, 처음에 선언한 obj가 변하면 result안의 obj도 변한다.
  • A1의 경우, 첫 for문 안쪽에 obj를 새로 선언하면, for문이 반복될 때마다 for문 안쪽은 새로운 블록이 되기 때문에, i = 0일 때 선언된 obj와 i = 1일 때 선언된 obj는 서로 다른 변수이므로 서로 영향을 미치지 않는다.

2019.08.02 티스토리 블로그에 작성한 글을 velog로 옮김

profile
프런트엔드 개발자를 목표로 공부중입니다.

0개의 댓글