Overview
몇 번의 코딩테스트를 보고, 퍼블리셔도 JS에 대해 어느정도(?) 알고 있는 것이 아니라, FE의 80%이상 상위하는 Javascript 스킬을 가지고 있어야 되겠다라는 생각이 굳혀지면서, 오늘부터 독학을 다시 시작하려고 한다. 원래 알고 있던 것들에 대한 내용을 상기 시키며, 모르고 있는 것에 대한 지식을 습득하기 위해서 나는 '혼공' 시리즈를 완독해보기로 하였다.
앞으로의 글들은 습작위로 되어지기 때문에 원치않는 정보가 많이 반영되어 있고, 올바르지 않은 지식에 대해 댓글로 태클을 걸어주시면 너무나 감사하겠다.
02-1 기본 자료형
알고 있는 내용
JS의 다양한 자료형
가장 기본적으로 많이 사용되고 있는 자료형은 숫자, 문자열, 불 이 있다.
문자열 자료형
문자열 만들기
큰따옴표와 작은따옴표로 문자열 자료형을 만들수 있다. 통일을 위해서 작은따옴표를 이용을 권장한다.
문자열의 연산
문자열 연결 연산자
//입력
'가나다' + '라마' + '바사아' + '자차카타' + '파하'
//출력
'가나다라마사아자차카타파하'문자 선택 연산자
//입력
'안녕하세요'[0]
//출력
"안"
//입력
'안녕하세요'[1]
//출력
"녕"문자열 뒤에 대괄호 [...]를 입력하고, 콸호 안에 선택할 문자의 위치를 숫자로 지정합니다. 이때 위치를 나타내는 숫자를 인덱스 라고 부릅니다.
문자의 길이 구하기
문자열의 길이를 구하는 방법은 length 속성을 사용한다.
//입력
'안녕하세요'.length
//출력
5숫자 자료형
자바스크립트는 소수점이 있는 수자와 없는 숫자를 모두 같은 자료형으로 인식.
숫자 연산자
- : 더하기 연산자
- : 곱하기 연산자
- : 빼기 연산자
/ : 나누기 연산자
% : 나머지 연산자
불 자료형
true, false 2가지 입니다.
비교 연산자
===: 양쪽이 같다
!==: 양쪽이 다르다
>: 왼쪽이 더 크다
<: 오른쪽이 더 크다
>=: 왼쪽이 더 크거나 같다.
<=: 오른쪽이 더 크거나 같다.
불 부정 연산자
논리 부정 연산자는 !기호를 사용하여 참을 거짓으로, 거짓을 참으로 바꿉니다.
// 입력
!true
// 출력
false
// 입력
!false
// 출력
true불 논리합/논리곱 연산자
&& 연산자는 양쪽의 변의 값이 모두 true일 때 true를 결과로 냅니다. 이외에는 모두 false입니다.
||연산자는 양쪽 변의 값 중 하나만 true여도 true를 결과로 냅니다.
자료형의 검사
자바스크립트는 숫자, 문자열, 불 같은 자료형을 확인할 때는 typeof()를 사용한다.
// 입력
typeof('문자열')
// 출력
"string"
// 입력
typeof(1234)
// 출력
"number"
// 입력
typeof(true)
// 출력
"boolean"새롭게 알게된 내용
함수와 메소드
- 함수와 메소드는 모두 '특정 기능을 동작시키도록 작성'된 '코드의 집합'입니다.
함수 : 메소드를 포괄하는 의미
메소드 : 클래스가 가지고 있는 함수를 말한다.
따옴표를 문자그대로 사용하고 싶다면, 따옴표 앞에 이스케이프 문자() 사용
이스케이프 문자의 특수 기능들
\n : 줄바꿈을 의미한다.
\t : 탭을 의미한다.
\ : 역슬래시() 그자체를 의미한다.
(구문오류) Uncaught SyntaxError: Unexpected identifier
- 상황 : 식별자가 예상하지 못한 위치에서 등장했다는 오류.
- 예시 : 이스케이프 문자를 사용하지 않고 한 종류의 따옴표만 사용하면 다음과 같이 오류가 발생한다.
> 'This is 'string''
> Uncaught SyntaxError: Unexpected identifier- 해결방안 : 식별자 주변에 잘못된 코드가 이있다는 의미로 이를 수정
> 'This is' + 'string'es6에서의 템플릿 문자열
템플릿 문자열은 백틱 기호로 감싸 만듭니다. 문자열 내부에 ${...}기호를 사용하여 표현식을 넣으면 표현식이 문자열 안에서 계산됩니다.
// 입력
console.log(표현식 273 + 52의 값은 `${273 + 52}` 입니다.
// 출력
표현식 273 + 52의 값은 325입니다.02-2 상수와 변수
알고 있는 내용
상수
어떤 자료에 이름을 붙여서 사용하는 방법은 수학뿐만 아니라 프로그래밍에서도 많이 사용되며, 이것을 상수라고 합니다.
const
- 재선언이 불가능하다
- 재할당이 불가능하다
상수의 선언
const pi = 3.141592
> undefined
pi
> 3.141592변수
변수를 만들 때는 let 키워드를 사용합니다.
let의 특징
- 재선언이 불가능하다.
- 재할당은 가능하다
증감 연산자
증감 연산자는 복합 대입연산자를 약간 간략하게 사용한 형태입니다.
undefined 자료형
상수와 변수를 사용하면 undefined 자료형을 확인할 수 있다. 어떠한 경우에 undefined 자료형이 나오는지 알아보자
상수와 변수로 선언하지 않은 식별자
상수와 변수로 선언하지 않은 식별자인 경우 = undefined
값이 없는 변수
변수를 선언하면서 값을 지정하지 않은 경우 = undefined
새롭게 알게된 내용
(구문오류) Idenrifier has already declared (재할당 불가)
상황 : 특정한 이름의 상수는 한 파일에서 한 번만 선언할 수 있습니다. 만약 같은 이름으로 상수를 한 번 더 선언하면 다음과 같은 오류가 발생
해결 : 다른 이름의 식별자를 사용하여 상수를 선언
(구문오류) Missing initializer in const declaration
상황 : 상수는 한 번만 선언할 수 있으므로 선언할 때 반드시 값을 함께 지정해줘야 합니다. 만약 상수를 선언할 때 값을 지정해주지 않는다면 다음과 같은 오류 발생
해결 : 상수는 선언할 때 반드시 값을 지정해야 합니다.
(구문오류) Assignment to constant variable (재선언 불가)
상황 : 한 번 선언된 상수의 자료는 변경할 수 없습니다. 만약 값을 변경하면 다음과 같은 오류가 발생
해결 : 이 경우에는 상수가 아니라 변수를 사용해야 한다.
변수
복합 대입 연산자
복합 대입 연산자는 대입 연산자와 다른 연ㄷ산자를 함께 사용하는 연산자입니다. 일반적으로는 사용하는 복합 대입 연산자는 다음과 같습니다.
> let value = 10
> undifined
> value += 10
> 20
> value
> 20
02-3 자료형 변환
자바스크립트는 "10" * 10을 하면 100을 출력을 한다. 이는 자바스크립트가 내부적으로 자료형을 변환하기 때문이다.
알고 있는 내용
문자열 입력
문자열 자료형을 입력할때 사용하는 함수 prompt()
숫자 자료형으로 변환하기
다른 자료형을 숫자 자료형으로 변환할 때는 Number()함수를 사용합니다.
> Number("273")
> 273
> typeof(Number("273"))
> number문자열 자료형으로 변환하기
다른 자료형을 문자열 자료형으로 변환할 때는 String()함수를 사용합니다.
문자열 연산자를 사용해 자료형 변환하기
문자열 연결 연산자 (+)를 사용하여 자료형 변환하기
> 273 + ""
> "273"
> true + ""
"true"불 자료형으로 변환하기
다른 자료형을 불 자료형으로 변환할 때는 Boolean()함수를 사용합니다.
대부분의 자료는 불로 변환했을 때 true로 변환됩니다.
다만, 0, NaN, '...' 혹은 "..."(빈 문자열), null, undefined라는 5개의 자료형은 false로 변환됩니다.
false로 변환되는 것들
> Boolean(0)
> false
> Boolean(NaN)
> false
> Boolean("")
> false
> Boolean(null)
> false
> let 변수
> undefined
> Boolean(변수)
> false새롭게 알게된 내용
문자열 입력
입력 양식에 맞춰 내용을 입력하고 확인 버튼을 누르게 되면, 입력한 글자가 경고창에 출력.
확인 버튼을 누르는 것은 input에 저장합니다.
<script>
// 상수를 선언한다.
const input = '안녕하세요' // prompt()에 내용을 입력했을 경우의 반환
// 출력합니다.
alert(input)
</script>따라서, input에 저장된 문자열 '안녕하세요'를 출력하는 것입니다.
이와 같이 함수를 실행 후 값을 남기는 것을 리턴이라고 표현합니다.
불 입력
불 입력을 하는 함수 confirm()
확인 : true
취소 : false
리턴을 한다.
숫자 자료형으로 변환하기
숫자 연산자를 사용해 자료형 변환하기
Number() 함수를 사용하지 않고도 다른 자료형을 숫자 자료형으로 변환할 수 있습니다.
바로 숫자 연산자 -,*,/를 사용하는 것입니다. 숫자가 아닌 다른 자료에서 0을 빼거나, 1을 곱하거나, 1로 나누면 숫자 자료형으로 변환합니다.
