js 기초편 (10/30 수업 총 정리)
camelCase
낙타모양 같다고 해서 camel이라고 이름을 붙임(ex. theQuickBrown)
PascalCase
PascalCase는 생성자 함수 이름을 만들어 줄 때 사용함 (ex. Date() )
| 표현식 | 값을 만들어내는 코드다. |
| 문장 | 하나 이상의 표현식이 모이게 되는 것을 문장이라 한다. |
| 프로그램 | 문장이 모여서 프로그램이 만들어진다. |
| 키워드 | js에서 자주 사용되는 단어가 키워드, 정해놓은 것, 특별한 의미가 있다. 우리가 사용한 변수나 상수의 이름으로 사용할 수 없고, 함수의 이름으로도 사용할 수 없다. (대표적인 키워드 alert도 있고, documentm(다큐먼트), this, if, for) 키워드는 계속 증가 하고 있기에 굳이 외워도 되지 않아도 된다. |
| 식별자(identifier) | 이름을 붙힐 때 사용하는 단어. (변수명, 함수명, 속성명, 메소드명 > 이모든 속성은 이름을 부여할 땐 항상 소문자로 시작한다. ) |
-- 표현식 --
ex) 10 + 20 + 30
-- 문장 --
이 표현식이 묶여 있는 것을 문장이라고 한다.
alert("안녕하세요"); < 이런 게 하나의 문장으로 보면 된다.
문장의 끝을 알려주는 것을 세미콜론으로도 구분하기도 하고, 줄 바꿈으로도 구분을 한다.
우리는 문장을 끝낼 때는 세미콜론으로 끝내자는 규칙을 사용하자.
-- 식별자 --
참고 출처
https://velog.io/@exploit017/JSBasic-%EC%8B%9D%EB%B3%84%EC%9E%90-Identifier
[JS/Basic] 식별자(Identifier)
식별자 : 자바스크립트에서 이름을 붙일 때 사용하는 단어식별자의 종류변수명함수명속성명메소드명식별자 금지 규칙식별자는 자바스크립트에서 이름을 붙일 때 사용하는 단어이다. 식별자의
velog.io
1. 생성자 함수의 이름은 항상 대문자로 시작한다.
2. 변수와 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작한다.
3. 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 한다.
4. 공백문자 없이 camelCase를 사용 및 언더바( _ )를 활용한다.
5. 클래스명을 입력할 때는 항상 첫 글자는 대문자로 시작한다. (ex. class Student() { })
6. 변수명, 함수명, 속성명, 메소드명 > 이모든 속성은 이름을 부여할 땐 항상 소문자로 시작한다.
ex)
is true --> isTrue
will return --> willReturn
new array --> newArray
- 식별자의 종류
자바스크립트의 식별자는 크게 네 종류로 나눌 수 있다. (더 많은 종류로 나누기도 한다. 이 부분은 다른 자료를 참고)
구분단독으로 사용 다른 식별자와 사용
| 구분 | 단독으로 사용 | 다른 식별자와 사용 |
| 식별자 뒤에 괄호 X | 변수 | 속성 |
| 식별자 뒤에 괄호 O | 함수 | 메소드 |
아래 표는 네 종류의 식별자 예시이다.
예시식별자 종류
| 예시 | 식별자 종류 |
| alert('Hello World') | 함수 |
| Array.length | 속성 |
| input | 변수 |
| prompt('Message', 'Defstr') | 함수 |
| Math.PI | 속성 |
| Math.abs(-117) | 메소드 |
참고로 위의 '속성'의 경우, 객체를 알고 있다면 객체 안의 요소가 '속성'이라는 것을 알고 있을 텐데 이 두 '속성'은 같은 것이다.
자바스크립트는 런타임이다.
제가 작성한 구무을 즉시즉시 컴파일 없이 바로 확인이 가능하다.
무겁지 않게 빨리 빨리 웹과 연동해서 할 수 있게끔 동적인 것, 그 시대에 요구된 사항들을 빨리 변환시켜서 개발할 수 있게 만들어진 언어라고 생각하면 된다.
주석
// 한줄로 설명
/* 여러줄 설명 */
결과를 바로 확인 할 수 있는 꿀팁
about:blank
> console
바로 실행할 수 있는 부분이다.
about:blank 쳐서 개발자 > 콘솔에서 확인 가능!!
if (10>20) {
console.log("맞다")
}else {
console.log("아니다")}
이런식으로 빠르게 확인이 가능하다!
document.write
(홈페이지에 나온다)
if (10>20) {
document.write("맞다")
}else {
document.write("아니다")}
const fruits = ['apple', 'banana', 'cherry'];
"this is \"string\""
> 'this is "string"'
\" , \" 문자열을 입력하는데 인용구 이런 거 입력할 때 사용 (이스케이프 문자를 넣어주면 된다. )
console.log("aaa\nbbb")
> aaa
bbb
줄바꿈을 사용
"aaa"+"ccc"+"sssss"
> 'aaacccsssss'
붙어서 사용
문자 선택 연산자 (문자열에 대한 문자열에 있는 몇 번째를 쓰고 싶다고 할 때)
"안녕하세요"[2]
> '하'
.length 문자열의 길이를 출력한다.
(속성의 형태로 출력됐다)
(문자열에 " . " length 속성을 출력)
"안녕하세요.".length
> 6
let myName = "gildon"
console.log("안녕하세요 " + myName)
> 안녕하세요 gildon
console.log("안녕하세요. 제이름은 " + myName);
> 안녕하세요. 제이름은 gildon
console.log가 출력하는 역할
console.log(`안녕하세요 ${myName}`); > 백틱 ` 을 사용
>안녕하세요 gildon
${myName}으로 변수를 사용하는 공식을 활용한다.
`10+20의 결과값은 ${10 + 20 } 입니다!`
'10+20의 결과값은 30 입니다!'
"10+20의 결과값은" + 10 + 20 + "입니다!"
'10+20의 결과값은1020입니다!'
이러한 차이점이 난다.
문자열 " " , " " , " "
숫자 : 정수, 부동소수점을 가진 숫자
+, -, *, / > 연산자 우선순위
% > 3의 배수
boolean > 참과 거짓을 구분할 때 쓰는 표현 (true, false)
> , < , >= , <=
===, !==
가 , 나 , 다 , 라 , 마 ... 이렇게 있는 순서도에 따라 크다 작다가 처리됨
if(불표현식){
불표현식이 참일 때 처리할 내용 }
else { 불표현식이 거짓일 때 처리할 내용}
&& 논리곱: and와 같다 양쪽에 비교했던 값이 모두 true일 때만 true를 반환한다.
if(불표현식1 && 표현식2) { }
|| 논리합(or)
typeof(자료 dlrjfmf
const 이름 = 값
프로그램 끝까지 쓰고 싶을 경우 const 상수를 사용하면 된다.
let 는 재선언 안되지만, 재할당은 됨
var 은 재선언과 재할당 둘다 됨
변수에 적용할 수 있는 연산자
a = a + 1 --> a += 1
a = a - 1 --> a -= 1
a = a * 1 --> a *= 1
a = a / 1 --> a /= 1
a = a % 1 --> a %= 1
왼쪽을 오른쪽 처럼 간단하게 식을 줄여서 할 수 있다.
이런 것들을 대입 연산자라고 표현을 한다. (반복을 할 때 주로 많이 쓴다.)
대입연산자를 이용해서 활용하기
증감 연산자
변수 ++ : 변수의 값에 1을 더한다. (후위)
++변수: 변수의 값에 1을 더한다. (전위)
변수--: 변수의 값에 1을 뺀다. (후위)
--변수: 변수의 값에 1을 뺀다 . (전위)
전위와 후위의 차이점
10, 11, 12 순서로 나옴
11, 12, 13 순서로 나옴
자료형 변환
prompt 활용
이런식으로 활용이 가능하다 신기해!!!!!!!!!!!
confirm 활용
Number(자료)함수 숫자 자료로 변환함수
Number("$270")m Number("270")
프로그램에서 사용하고 싶을 때 이렇게 입력 받은 데이터를 어떻게 변환을 시킬 거냐 . prompt를 통해서 여기다가 문자열이라는 것을 이름이라는 걸로 했지만 만약에 수량을 입력하세요라거나 하면 숫자가 들어오게 되면 문자열이 됨.
위에는 String이 나오고.
이건 number가 나온다.
not a number 이거는 숫자가 아니라는 뜻
typeof(Number("$274"))
'number'
Number(true)
1
Number(false)
0
Number가 이렇게 숫자로 변환시켜주기도 한다.
typeof("52"-2)
'number'
"52"-2
50
저기에 변환을 주지 않음
typeof(true *2)
'number'
자기 자신 값은 변하지 않으니까 number라는 데이터 타입을 가진다.
이런식으로
1 + true
2
1에다가 true를 더하면 2가 된다.
이렇게 차이점을 느껴본다.
문자열 변환 : String (자료) 함수
String(10)
> '10'
String(true)
> 'true'
String(false)
> 'false'
typeof(String(true))
> 'string'
불형으로 변환 : Boolean(자료) 함수
Boolean(NaN)
>false
Boolean(1)
>true
Boolean("1")
>true
Boolean(null)
>false
let no = 1;
>undefined
Boolean(no)
>true
Boolean("false")
>true (이거는 문자열로 생각하기 때문에 true가 나옴)
!! : 논리 부정 (Boolean 연산자를 부정하는 것 Boolean 대신에 쓰는 것 같음?)
인치 단위를 cm로 바꾸기
prompt로 입력받아서 n인치는 n CM 입니다. 라고 alert로 뜨게하기