[혼자 공부하는 자바스크립트] 내용 정리 1

13 minute read

자바스크립트를 이용해 웹 클라이언트뿐만 아니라, 웹 서버도 개발 가능하다. (Node.js) → 꼭 필요한 간단한 모듈만 제공하기 때문에 데이터 처리나 예외 처리가 조금 복잡하다는 단점이 있다. 하지만 빠르다.
자바스크립트로 ‘네이티브 어플리케이션’을 개발할 수 있도록 탄생한 것이 ‘리액트 네이티브’이다. 페이스북, 인스타그램, 핀터레스트 등이 모두 자바스크립트로 만든 네이티브 어플리케이션이다.

네이티브 앱: 제조사가 추천하는 프로그래밍 언어를 사용해 만들어진 앱.
하이브리드 앱: 중간에 스마트폰의 기능과 웹을 연결할 수 있는 층을 설치해, 웹사이트가 스마트폰의 기능을 활용할 수 있도록 하여 만든 앱. 모바일 사이트에서도 똑같이 보이면서, 스마트폰 고유의 모습을 가짐. ex: 쿠팡, 위메프
하이브리드 앱을 네이티브 앱처럼 만들어 주는 프레임워크 중 하나가 리액트 네이티브.

HTML 파일에서 자바스크립트를 사용하려면 <head> 태그 사이에 <script> 태그를 삽입한다. 그 사이에 자바스크립트 코드를 입력한다.
폴더 안의 HTML 파일을 크롬 주소창에 드래그하여 드롭하면 그 결과가 출력된다.
코딩 스타일, 코딩 컨벤션: 코드 작성 방식 ex: 들여쓰기는 몇 칸으로 할 것인지, 중괄호 입력 시 줄바꿈을 할 것인지, 키워드 뒤 공백을 줄 것인지 → 자바스크립트 표준 스타일에 대한 한국어 문서 존재하니 읽어 보면 좋을 것.

자바스크립트는 세미콜론과 줄바꿈으로 문장의 종결을 선언할 수 있다.
식별자 선언에 있어, 클래스의 이름은 항상 대문자로 시작한다. 변수와 인스턴스, 함수, 메소드의 이름은 항상 소문자로 시작한다.

구분	단독으로 사용	다른 식별자와 사용
식별자 뒤에 괄호 없음	변수 input	속성 Math.PI, Array.length
식별자 뒤에 괄호 있음	함수 alert(”hello world”);	메소드 Math.abs(-273)

함수의 괄호 안에 들어가는 것을 매개변수라고 부른다.

자바스크립트에서 제공하는 자료형 중 가장 기본적인 것: 숫자, 문자열, 불
문자열에서 따옴표를 문자 그대로 사용하고 싶다면 이스케이프 문자()를 이용한다. 또한 \n은 줄바꿈을, \t는 탭을, \은 역슬래시 그 자체를 의미한다.
자바스크립트에서는 문자열도 기호를 사용해 연산 처리할 수 있다. +를 이용해 문자열을 연결하는 일이 가능하다. []를 이용해 문자열 내의 인덱스를 지정하는 것도 가능하다. “자바스크립트”.length와 같은 형태로 문자열의 길이를 재는 일도 가능하다. → 자바스크립트에서는 연산자를 이용해 문자열을 여러 번 나타내는 것이 불가능하다. 문자열 “아아”를 5번 나타내고 싶다면 “아아” * 5가 아니라, for문을 따로 이용해야 한다.
자바스크립트의 불(true, false)의 비교 연산자로는 ===, !== 를 이용한다. 문자열 자료형도 >, < 등을 이용해 비교 가능하다. 논리합/논리곱 연산자는 &&, ||를 이용한다.
자료형을 확인할 때는 typeof() 연산자를 이용하는데, 이 역시 피연산자를 하나만 갖는 단항 연산자이다. 뒤에 괄호를 붙이지 않아도 상관없지만, 편의를 위해 주로 괄호를 붙여 사용한다.
문자열 연결 연산자 +를 이용하지 않고, 더 편리하게 문자열 내부의 표현식을 삽입하기 위해 템플릿 문자열을 사용한다. console.log(”표현식 1 + 2의 값은 ${1 + 2}입니다.”)
===, !== 은 ‘값과 자료형이 모두 같은지/다른지’를 비교하는 연산자이다. 그러나 자바스크립트의 연산자들은 어떻게 해서라도 값을 최대한 같게 만들어 비교해 주기 때문에, 코드의 독해에 있어서는 큰 차이가 없다. 1 == "1" -> true

상수는 값에 이름을 한 번 붙이면 그 값을 수정할 수 없다. 반면 변수는 수정이 가능하다. 변수가 더 많이 사용될 것 같지만 실제로는 상수가 훨씬 많이 사용되는데, 상수의 저장 효율이 더 좋기 때문이다.
상수는 const 이름 = 값의 형태로 선언한다. 상수는 한 번만 선언할 수 있으므로 선언 시 반드시 값을 함께 지정해 주어야 하며, 지정하지 않는다면 오류가 발생한다.
변수는 let 이름 = 값의 형태로 선언한다. 값의 변경이 가능하다. var 이름 = 값 으로 선언도 가능하나, 변수를 중복 선언할 수 있고 범위가 애매하다는 이유로 let의 등장 후 대체되었다.
상수 또는 변수로 선언하지 않은 식별자, 변수로 선언하면서 값을 지정하지 않은 식별자는 undefined 자료형이 된다. 실무에서 많이 사용된다.
전위 prefix, 후위 postfix

사용자에게 문자열 자료형을 입력받기 위해서는 prompt() 함수를 이용한다.
사용자에게 불 자료형을 입력받기 위해서는 confirm() 함수를 이용한다. 확인/취소 버튼을 클릭해 불 값을 입력하는 형식이다.
숫자가 아닌 자료형을 숫자 자료형으로 변환할 때는 Number() 함수를 이용한다. 단, 숫자 연산자 -, *, /를 이용하여 숫자가 아닌 다른 자료형에서 숫자 자료형을 빼거나, 곱하거나, 나누면 숫자 자료형으로 자동 변환된다. true는 1로, false는 0으로 변환된다.
문자열이 아닌 자료형을 문자열로 변환할 때는 String() 함수를 이용한다. 이 역시 문자열 연산자 +를 이용하면 자동 변환된다.
불이 아닌 자료형을 불로 변환할 때는 Boolean() 함수를 이용한다. 함수를 이용하지 않고도, 다른 자료형에 논리 부정 연산자 !를 두 번 사용하여 변환할 수 있다. 이때 대부분의 자료는 true로 변환되나, (), NaN, 빈 문자열, null, undefined는 false로 변환된다.

getHours(), getMinutes(), getSeconds(), getDate(), getFullYear() → 현재 시간을 구하는 메소드들

switch 조건문(default 키워드는 생략 가능)

  switch (자료) {
  	case 조건 1:
  		break
  	case 조건 2:
  		break
  	default:
  		break
  }

조건부 연산자 = 삼항 연산자: 불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과
논리합 연산자를 사용한 짧은 조건문
1. 불 표현식 || 불 표현식이 거짓일 때 실행할 문장
2. 결과가 거짓인 불 표현식 && 불 표현이 참일 때 실행할 문장 ex: if (끝자리 === “0” || 끝자리 === “2” || 끝자리 === “4” || … )

컴퓨터는 문자열 연산보다 숫자 연산을 훨씬 빠르게 처리한다.
짝수, 홀수를 구분할 때 나눗셈과 나머지를 쉽게 떠올릴 수 있는 것처럼, 알고리즘과 자료구조를 공부하면 쉽게 문제를 해결할 수 있다. 따라서 대회에 나온 문제를 풀어 보고, 타인의 코드를 보며 이해하는 과정이 필요하다.

if 조건문은 위에서 아래로 흐르고, else 구문은 이전의 조건이 맞지 않을 때 넘어오는 부분이다. 따라서 윗줄의 코드에서 검사한 부분을 아랫줄의 코드에서 다시 검사할 필요는 없다.

  // 이미 제외된 조건을 다시 검사하고 있음.
  if (score <= 4.2) {
      ...
  } else (3.5 <= score <= 4.2) {
      ...
  } 

  // 검사 과정은 같으나, 간결함.
  if (score <= 4.2) {
      ...
  } else (3.5 <= score) {
      ...
  } 

‘문자열 1’.split(’문자열 2’): 문자열 1을 문자열 2로 잘라서 배열을 만들어 내는 메소드

배열 뒷부분에 요소를 추가할 때는 배열.push(요소) 메소드를 이용한다.
배열[인덱스] = 값의 방식을 이용해, 원하는 인덱스에 강제로 값을 추가하는 것도 가능하다. 기존 길이가 2인 배열의 10번 인덱스에 값을 강제로 추가하면, 배열의 길이는 11이 되고 3번~9번의 인덱스의 값은 empty가 된다.
인덱스를 기반으로 배열 요소 제거: 배열.splice(인덱스, 제거할 요소의 개수) 를 이용한다. splice() 메소드는 배열을 접합한다는 의미로, 제거뿐 아니라 중간에 다른 요소를 넣고 붙이는 것 역시 접합에 해당한다.
값을 기반으로 배열 요소 제거: indexOf() 메소드를 이용해 배열 내의 값의 위치를 추출한 뒤, splice() 메소드를 이용해 제거한다. 배열 내부에 요소가 없는 경우에는 -1을 리턴하게 된다. 단 indexOf()와 splice() 메소드는 배열 내부 요소 중 딱 하나만 제거할 수 있다. 배열 내부에서 특정 값을 가진 요소를 모두 제거하고 싶다면 1. 반복문을 이용하거나 2. filter() 메소드를 이용해야 한다. 일반적으로는 2의 방법을 이용한다.
배열의 특정 위치에 요소 추가: splice()의 2번째 매개변수에 0을 입력하면 아무것도 제거하지 않는다. 3번째 매개변수에 추가하고 싶은 요소를 입력하여 요소를 추가한다. 즉 배열.splice(인덱스, 0, 요소)와 같은 방식이 된다.
자바스크립트의 자료 처리 연산자, 함수, 메소드는 비파괴적 처리와 파괴적 처리로 구분할 수 있다. 처리 후 원본의 내용이 변경되지 않으면 비파괴적 처리, 변경되면 파괴적 처리이다. push(), splice() 등의 메소드는 파괴적 처리에 해당한다. 파괴적 처리는 메모리를 절약할 수 있지만 원본이 사라진다는 위험성이 있다. 따라서 현대에는 자료 보호를 위해 대부분 비파괴적 처리를 한다. → 프로그램을 만들 때마다 어떤 것이 비파괴적 처리이고 어떤 것이 파괴적 처리인지 생각해 보고 넘어갈 필요가 있다. 결국 원본이 변하는지, 변하지 않는지를 결과를 보며 확인해 보면 될 뿐이다.

for in 반복문

  // 코드 블럭 기능: forin코드 블럭을 이용해 사용할 것 
  // -> 문법 오류가 발생할 위험성이 높기 때문에 for of 또는 for 반복문 사용을 추천
    
  for (const 반복 변수(= 요소의 인덱스) in 배열 또는 객체) {
  	문장
  }

for of 반복문: 요소의 값을 반복할 때 안정적으로 사용할 수 있음

  for (const 반복 변수(= 요소의 값 자체) of 배열 또는 객체) {
  	문장
  }

for 반복문

  // 역시 코드 블럭 존재함
  for (let i = 0; i < 반복 횟수; i++) {
  	문장
  }
    
  // 반대로 출력하기
  for (let i = array.length - 1; i >= 0; i--) {
  	문장
  }

while 반복문: 조건에 큰 비중이 있을 때 사용하는 것이 좋다. ex) 특정 시간 동안 어떤 데이터를 받을 때까지, 배열에서 어떠한 요소가 완전히 제거될 때까지
continue/break 키워드는 반복문의 조건식을 적절하게 만들면 사용을 줄일 수 있다. 최대한 자제할 수 있도록 하는 것이 깔끔한 코드를 작성하는 것을 돕는다.
n차원 배열의 처리 또는 출력을 n차원으로 해야 하는 경우, 반복문을 n번 중첩하여 사용한다.

익명 함수: function () { } 과 같은 형태로 사용하며, 이름이 붙어 있지 않은 형태의 함수를 가리킨다.
함수의 자료형은 function이다.
선언적 함수: function 함수 이름 () { }과 같은 형태이다. 이는 let 함수 이름 = function () { };과 동일한 기능을 수행한다.

함수에 매개변수와 리턴 값이 존재할 경우, 아래와 같이 작성한다.

  function 함수 (매개변수, 매개변수, 매개변수) {
  	문장
  	return 리턴 값
  }

호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부른다. 이러한 함수를 구현할 때는 나머지 매개변수라는 형태의 문법을 사용하며, function 함수 이름 (… 나머지 매개변수) { }와 같이 작성한다. 이때 마침표 3개의 입력에 의해 매개변수들이 배열로 들어오게 된다. function 함수 이름 (매개변수, 매개변수, … 나머지 매개변수) { } 와 같이 일반적인 매개변수와 조합하는 것도 가능하다. 이 경우에도 마찬가지로 나머지 매개변수만 배열로 들어오게 된다.
배열에 typeOf() 메소드를 사용하여 자료형을 확인하면 object(객체)라는 결과가 도출된다. 정확하게 배열인지 확인하기 위해서는 ArrayjsArray() 메소드를 활용해야 한다.
전개 연산자: 배열을 전개하여 함수의 매개변수로 전달할 수 있도록 도와주는 연산자. 배열 앞에 마침표 3개를 붙여 함수 이름 (… 배열)의 형태로 활용한다.
기본 매개변수: 매개변수에 기본값을 지정하는 것. 함수 이름 (매개변수, 매개변수 = 기본값, 매개변수 = 기본값) { } 와 같이 사용한다. 기본 매개변수는 오른쪽 매개변수에만 사용한다.
전개 연산자가 없던 구 버전 자바스크립트에서는 apply() 함수를 사용했다. 참고로만 알아 둘 것.

자바스크립트는 함수도 하나의 자료라는 개념을 가지고 있기 때문에, 함수를 지정된 위치가 아닌 곳에도 만들 수 있다. 이 개념은 비동기 프로그래밍을 이끌었고, 다른 언어로 전파되어 람다 또는 익명 함수라는 이름으로 기본 문법에 포함되었다.
콜백 함수: 매개변수로써 전달되는 함수. 다른 언어에서는 잘 사용되지 않는 개념. 함수이므로, 매개변수로 호출한 함수의 안에서도 호출될 수 있다. 이름이 callback이어야만 콜백 함수인 것이 아니라, 매개변수로서 호출되는 함수라면 모두 콜백 함수라고 부른다. 익명 함수도 콜백 함수이다. → 221p 예시 문제 분석하기
매개변수로써 익명 함수를 호출하는 것도 가능하다. 아래의 형태와 같이 호출된다.
```
  callThreeTimes(function (i) {
  	console.log('${i} 번째 함수 호출')
  })
```

forEach(): 콜백 함수를 활용하는 가장 기본적인 메소드. 배열이 가지고 있는 함수로써, 단순하게 배열 내부의 요소를 사용해 콜백 함수를 호출해 준다. 아래와 같은 형태로 사용한다.
```
  const numbers = [273, 52, 183, 32, 57]
    
  numbers.forEach(function (value, index, array) {
  	console.log('${index} 번째 요소: ${value}')
  })
```

map(): 마찬가지로 배열이 가지고 있는 함수. 콜백 함수에서 리턴한 값들을 기반으로, 새로운 배열을 만드는 함수. 아래와 같은 형태로 사용한다.
```
  let numbers = [273, 52, 183, 32, 57]
    
  numbers =  numbers * **map(function (value, index, array)) {
  	return value * value
  }
```
일반적으로 forEach(), map() 모두 value만 사용하거나, value, index 두 가지만 사용하는 경우가 많다. 콜백 함수의 매개변수는 모두 입력할 필요는 없고, 사용하고자 하는 위치의 것만 순서에 맞추어 입력해 사용하면 된다.

filter(): 콜백 함수에서 리턴하는 값이 true인 것만 모아 새로운 배열을 만드는 함수. 아래와 같이 작성한다.

  // 배열 numbers 안에서 2로 나눈 나머지가 0인 값들만 리턴
  const evenNumbers = numbers.filter(function (value)) {
  	return value % 2 === 0
  }

화살표 함수: 단순한 형태의 콜백 함수를 쉽게 입력하기 위함. function 키워드 대신 ⇒ 를 사용하며 아래와 같은 형태로 생성한다.

  (매개변수) => {
      문장
  }

  // 또는
  (매개변수) => 리턴 값
    
  // 내부에서 this 키워드가 지칭하는 대상이 다르다는 미세한 차이는 존재.

메소드 체이닝: 함수가 리턴하는 값을 기반으로 하여 함수를 줄줄이 사용하는 것.

  // filter로 2로 나눈 나머지가 0인 값만을 모아 새로운 배열을 생성하고,
  // map에서 그 배열을 받아 각 값을 제곱해 다시 새로운 배열을 생성함
  // forEach는 그 배열을 받아 콘솔에 찍어 보여 줌
  numbers
  	.filter((value) => value % 2 === 0)
  	.map((value) => value * value)
  	.forEach((value) => {
  		console.log(value)
  	})

타이머 함수: 특정 시간마다, 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수. 시간과 관련한 처리가 가능함.
setTimeout(함수, 시간): 특정 시간 후에 함수를 한 번 호출함.
setInterval(함수, 시간): 특정 시간마다 함수를 호출함.

clearTimeout(타이머 id), clearInterval(타이머 id): 타이머를 종료하는 함수. 타이머 id란 setTimeout(), setInterval() 함수를 호출할 때 리턴 값으로 나오는 숫자.

  let id
  let count = 0
    
  id = setInterval(() => {
  	console.log('1초마다 실행됩니다 ${count} 번째')
  }, 1 * 1000)
  // 1초 간격으로 콘솔에 문장을 출력함
    
  setTimeout(() => {
  	console.log('1초 후에 실행됩니다.')
  	clearInterval(id)
  }, 5 * 1000)
  // 5초 후 콘솔에 문장을 출력한 뒤, id(= 셋 인터벌) 함수를 종료시킴.
  // 시간을 밀리 초 단위로 입력하기 때문에, 1 * 1000 = 1초를 의미함.

즉시 호출 함수: (function () { }) () 형식으로 즉시 호출 가능. 일반적으로 자바스크립트는 스크립트 태그를 여러 개 사용하고 코드를 입력하게 됨. 이 경우, 변수 이름이 충돌할 가능성이 높음. 식별자가 이미 사용되고 있다는 오류가 발생하면 아랫줄의 코드는 실행되지 않음. 변수가 존재하는 범위(= 스코프)가 같은 단계일 경우 무조건 충돌이 발생하게 됨. 이러한 스코프 단계를 변경하는 방법은 1. 중괄호를 사용해 블럭을 만들거나 2. 함수를 생성해 블록을 만드는 것
블록이 다른 경우 내부 변수가 외부 변수를 가리는 현상을 섀도잉이라고 부름.
구 버전의 자바스크립트에서 변수 선언 시 사용하던 var 키워드는 함수 블록을 사용하는 경우에만 변수 충돌을 막을 수 있음. 단순 중괄호 사용만으로는 충돌을 막을 수 없다는 것. 현재도 구 버전 자바스크립트를 지원하는 인터넷 익스플로러의 경우, Babel 등 최신 버전의 자바스크립트 코드를 구 버전의 코드로 변경해 주는 트랜스파일러 등을 사용하고는 하지만 이 역시 함수 충돌을 막는 코드로는 제대로 변환해 주지 못함. 따라서 많은 개발자들이 즉시 호출 함수의 형태로 변수 충돌을 방지함.
```
  <script>
  	(function () {
  		let pi = 3.141592
  		console.log('파이 값은 ${pi}입니다.')
  	}) ()
  </script>
```

엄격 모드 strict mode: 일반적으로는 사용하는 것이 좋음. → 모질라 엄격 모드 문서 참고할 것.

  // 일반적으로 즉시 호출 함수를 만들고, 해당 블록의 가장 위쪽에서 엄격 모드를 적용하는 경우가 많음.
    
  <script>
  	(function () {
  		'use strict'
  		...
  	}) ()
  </script>

익명 함수/선언적 함수의 선택은 개발자에 의해 자유롭게 결정되지만, 최근에는 안전 상의 이유로 익명 함수가 선호됨. 선언적 함수는 코드의 위치에 상관없이 순차적인 코드 실행이 일어나기 전에 생성됨. 따라서 같은 블록이라면 어디에서 함수를 호출해도 상관없음. 반면 익명 함수는 순차적 코드 실행의 순서에 따라 실행됨. 따라서 같은 이름으로 익명 함수와 선언적 함수를 모두 생성하면, 선언적 함수가 먼저 생성된 뒤 익명 함수로 덮어씌워짐. 같은 이름으로 함수를 두 개 만드는 것은 위험하기 때문에 익명 함수가 선호되는 것.
위와 같은 맥락에서 let/const가 var보다 선호됨.

객체 object: 이름과 값으로 구성된 속성을 가지는 실제 존재하는 사물. 자바스크립트의 기본 데이터 타입. 배열 역시 객체에 해당한다.

배열에는 인덱스와 요소가 존재한다. 배열은 객체 기반이기 때문에 객체와 상당히 비슷하다. 다른 점이 있다면 배열은 요소에 접근 시 인덱스를 이용하지만, 객체는 키 key를 이용한다. 배열 내부에 있는 값을 요소라고 하듯, 객체 내부에 있는 값은 속성 property라고 한다.

  const product = {
  	제품명: '건조 망고',
  	유형: '당절임',
  	성분: '망고, 설탕, 메타중아황산나트륨',
  	원산지: '필리핀'
  }
  // **product['제품명']** 또는 **product.제품명**의 형태로 접근함.
  // 온점을 사용하면 자동 완성 보조 기능을 사용할 수 있어 주로 사용됨.

객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다. 즉 속성 중 입력 값을 받아 무언가 한 다음 결과를 도출해 내는 속성이 메소드이다.

객체의 메소드 내에서, 객체가 가진 속성을 출력하고 싶을 때는 아래와 같이 this 키워드를 사용함.

  const pet = {
  	name: '꿍이',
  	eat: function (food) {
  		alert(**this.name** + '은/는' + food + '을/를 먹습니다.')
  	}
  }
    
  pet.eat('사료')

최초로 객체를 생성한 후에 속성을 추가하거나 제거하는 것을 ‘동적으로 속성을 추가/제거한다’고 표현한다. 속성 추가의 경우 아래와 같이 객체를 하나 생성한 뒤, 속성을 지정하고 값을 입력한다. 속성 제거의 경우 delete 객체.속성의 형태로 제거한다.
```
  const student = {}
  student.이름 = 'doi'
  student.취미 = '음악 감상'
    
  console.log(JSON.stringfy(student, null, 2))
  // JSON.stringfy() 메소드는 객체를 콘솔 출력에서 쉽게 볼 수 있는 방법 중 하나.
```

function () { } 형태의 익명 함수, () ⇒ { } 형태의 화살표 함수는 객체의 메소드로 사용될 때 this 키워드를 다루는 방식에 차이가 있다.

  const test = {
  	a: function () {
  		console.log(this)
  	}, // 익명 함수
  	b: () => {
  		console.log(this)
  	} // 화살표 함수
  }
    
  // test.a()를 호출 -> 결과: {a: f, b: f}
  // test.b()를 호출 -> 결과: Window {postMessage: f, blur: f, ...}

화살표 함수로 선언한 메소드를 호출하면 자기 자신이 아닌 window 객체를 this의 값으로 끌고 오게 된다. 따라서 화살표 함수는 객체의 메소드로 사용하지 않는 편이다.

자바스크립트의 자료형은 크게 기본 자료형/객체 자료형으로 나뉜다. 기본 자료형에는 숫자, 문자열, 불이 있고, 객체 자료형은 그 외 나머지의 자료형이다. 자바스크립트에서는 경우에 따라 기본 자료형이 객체 자료형이 될 수 있다.
속성과 메소드를 가질 수 있는 것은 모두 객체이다. 함수, 배열 모두 객체이다. 반면 숫자, 문자열, 불은 속성과 메소드를 가질 수 없다.
숫자, 문자열, 불이라는 기본 자료형을 객체 자료형으로 선언할 수 있다. 각각 Number, String, Boolean이라는 자료형 변환 함수를 이용한다. const 객체 = new 객체 자료형 이름() 형태로 이용한다. 기본 자료형과 다르게 속성을 가질 수 있다. new Number(10)과 같은 형태로 숫자를 생성하면 숫자와 관련된 연산자를 모두 활용할 수 있으면서, 동시에 속성과 메소드를 활용하는 것도 가능하다.

new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동하므로 주의가 필요하다.

  const f = new Number(273)
  typeOf(f) -> "object"
  f.sample = 10
  f.valueOf() -> 273
  콘솔에서 f 출력 시 결과 -> Number {273, sample: 10}

기본 자료형인 문자열에 length와 같은 속성을 사용할 수 있는 것은, 자바스크립트가 사용의 편리성을 위해 사용자가 기본 자료형의 속성과 메소드를 호출하면 일시적으로 기본 자료형을 객체로 승급시키기 때문이다. 이러한 승급은 일시적이기 때문에, 그 상태에서 속성을 추가하는 등의 작업은 불가능하다.

Share on

Twitter Facebook LinkedIn

doi

[혼자 공부하는 자바스크립트] 내용 정리 1

Share on

You may also enjoy

[데이터베이스설계론] 8주차 수업 내용 정리

[데이터베이스설계론] 7주차 수업 내용 정리

[함수형언어] 5주차 수업 내용 정리

[함수형언어] 4주차 수업 내용 정리