js 연산자
*함수레벨 스코프 : 변수가 만들어진 함수 영역 전체에서 유효함
블록레벨 스코프 : 변수가 만들어진 {} 영역에서만 유효함
1. 자바스크립트 엔진(js 실행 프로그램)
*node js 에서도 사용
V8 -> 크롬, Opera에서 사용
SpiderMonkey -> Firefox에서 사용
1) 엔진의 동작과정
(1) 엔진이 스크립트를 읽는다(파싱)
(2) 읽어들인 스크립트를 기계어로 전환합니다(컴파일)
(3) 기계어로 전환된 코드가 실행됨. 기계어로 전환되었기 때문에 실행속도가 빠르다
2) ECMA-262 명세서
자바스크립트에 관한 정보를 얻을 수 있는 가장 신뢰할 수 있는 자료지만 일상적인 참고자료로는 적합하지 않음
https://ecma-international.org/publications-and-standards/standards/ecma-262/
3) 매뉴얼
Mozilla 재단이 운영하는 MDN javascript Refernece 정보
구글 검색 => MDN 용어로 검색
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
2. 개발자 도구(콘솔)
중단점(breakpoint) : 자바스크립트의 실행이 중단되는 코드 내 지점을 의미
중단점을 이용 시 실행이 중지된 시점에 변수가 어떤 값을 담고 있는지 파악할 수 있다
디버깅이 가능하다
Scope - 현재 정의된 모든 변수를 출력하는 부분
local : 함수의 지역변수
global : 함수 바깥에 정의된 전역변수
디버깅 영역 상단 버튼
Resume : 스크립트 실행을 다시 시작함
Step : 다음 명령어를 실행함
Step Over : 다음 명령어를 실행하되 함수안으로는 들어가지 않음
Step into : Step 유사하지만 비동기 함수 호출에서 Step 다르게 동작
Step Out : 실행중인 함수의 실행이 끝날때까지 계속 실행함
모든 중단점을 비활성화/활성화(실행에 영향을 끼치지 않음)
3. 자바스크립트
웹페이지에 자바 스크립트 코드를 추가하기 위해 <script></script> 태그를 사용한다
외부 js파일이 있는 경우 <script src="경로"></script>를 설정해야한다
1) 문(statement)
어떤 작업을 수행하는 문법구조와 명령어를 의미한다
alert("javascript1");
alert("javascript2");
2) 세미콜론
줄바꿈이 없을 때는 세미콜론을 반드시 작성해야한다
alert("javascript1"); alert("javascript2");
줄바꿈이 있을 때는 세미콜론 생략가능(오류발생하지 않음)
세미콜론이 자동삽입
alert("javascript1")
alert("javascript2")
줄바꿈이 세미콜론을 의미하지 않는 경우도 있다
alert(10 +
20 +
30);
3) 주석(comment)
// : 한줄 주석을 의미함
코드품질
- 설명이 담긴 주석을 많이 작성하지 않는다
- 주석없이 코드 자체만으로 코드가 어떤코드인지, 어떤 일을 하는지 쉽게 이해할 수는 코드로 작성한다
좋은 주석은 api주석을 생각한다
- 아키텍처를 설명 주석(제어흐름, 상호작용에 대한 설명)
- 함수 예시, 매개변수 정보를 담고 있는 주석
주석에 들어가면 좋지 않은 내용
- 코드가 어떻게 동작하는지, 코드가 무엇을 하는지에 대한 설명
4) alert(), confirm()
웹페이지에서 사용자와 상호작용하기 위해 사용되는 간단한 대화상자를 만드는데 사용된다
alert() : 단순한 정보를 사용자에게 표시하기 위해 사용된다
사용자가 확인 버튼을 클릭하기 전까지는 아무 작업도 할 수 없다
confirm() : 사용자에게 "예"or"아니오" 선택지를 제공하는 대화상자
사용자가 선택을 하고 나면 해당 선택에 따라 다른 작업을 수행할 수 있다
5) 변수와 상수
변수(Variable) : 데이터를 저장할 때 사용되는 저장공간
let, var 키워드를 사용
let 변수명 = 값;
변수명 작성 규칙
-> 문자, 숫자, $, _
-> 첫글자는 숫자가 올 수 없다
-> 카멜표기법 : 소문자로 시작, 단어가 바뀔 때 대문자로 작성
-> 대소문자를 구분한다
상수 : 변하지 않는 값을 사용할 때 작성한다
const 키워드를 사용
대문자로 작성한다
6) 기본자료형(데이터 타입)
- 숫자타입(number) : 45, -14, 3.25, -15.3, ..
- 논리타입(bool) : true, false
- 문자열 타입(string) : "안녕", '안녕', `안녕`
백틱(`) : 변수나 표현식을 ${} 원하는 변수나 표현식을 문자열 중간에 삽입가능하다
ex) alert(`결과값은 ${10 + 20}`); //결과값은 30
- null : 값이 정해지지 않은 것을 의미함
let age = null;
// 존재하지 않는값, 비어있는 값, 알수없는 값을 나타낼 때 사용한다,값은 할당되어 있는 상태
- undefined : 타입이 정해지지 않은 것을 의미함(값이 할당되지 않은 상태를 나타낼 때 사용함)
let age;
alert(age); //undefined 변수만 선언하고 값을 할당하지 않았을 때
- 객체 레퍼런스 타입(Object) : Object, Array, Math(내장객체), Date, ..(객체 생성시 변수에 할당되는 주소 즉 변수는 해당 객체를 참조한다.)
- 심볼(symbol) : 객체의 고유한 식별자를 만들 때 사용
- typeof 연산자 : 인수의 자료형을 반환한다
연산자 : typeof x
함수 : typeof(x)
typeof null => object
7) 형변환
함수와 연산자에 전달되는 값은 자동 형변환
alert() 전달받은 값의 자료형과 관계없이 문자열 자동변환
수학관련 연산자가 전달받은 값을 숫자로 자동변환
- 문자형 변환
alert(value) //value는 문자형이어야한다
//숫자타입 등 다른 자료형의 값을 전달받으면 문자형으로 자동 변환
String(value) //String() 함수를 호출해 전달된 값을 문자열로 변환 가능
- 숫자형 변환
alert("6" / "2") //3 문자열이 숫자형으로 자동 변환된 후 연산이 수행된다
Number(value) //Number() 함수를 호출해 전달받은 값을 숫자형으로 명시하여 변환 가능
- 불린형 변환
Boolean(value)
숫자 0, 빈문자열, null, undefined, NaN => 비어있는 값 false
위에를 제외한 모든 값 => true
"0" " " => true
4. 연산자(Operator)
최단산쉬관리삼대
1) 최우선 연산자 //결합성
10 * 2 + 2 => 22
10 * (2 + 2) => 40
2) 단항 연산자
연산자를 기준으로 피연산자(항1개)가 1개 인 것을 의미
++ 값이 1씩 증가
-- 값이 1씩 감소
단 + 양수(영향이 없다), -는 음수가 된다
- 전위 연산자
전위형 ++num
후위형 num++
- 낫 연산자
!true
3) 이항 연산자
연산자를 기준으로 피연산자(항2개)가 2개인 것을 의미
- 산술연산자( +, -, *, /, %)
%는 나머지 연산자
+ 문자와 문자는 연결, 문자와 숫자는 연결, 숫자와 숫자는 연산된다
- 할당연산자
+= 값의 누적
-= 값이 빠지면서 누적
*= 값이 곱해지면서 누적
4) 쉬프트 연산자
a << b
- [피연산자] << 비트수
- 피 연산자를 명시한 비트수만큼 이동시킨다
- "~" 쉬프트 부정연산자
5) 관계 연산자(조건식은 딱하나만 쓸 수 있다)
- "==" 동등 비교, 값만 같은지
- "===" 일치 비교, 값과 자료형이 같은지
* 즉 일치 비교가 많을 수록 확실한 비교다
- "!=" 부등비교, 값만 다른지
- "!==" 불일치 비교, 값과 타입이 다른지
6) 논리연산자
- "||" 논리합(or) : 둘 중에 하나라도 True면 True다
조건식 || 값 사용되었을 경우, 값이 false 일때 || 초기값
- "&&" 논리곱(and) : 둘 다 True여야만 True
자바스크립트에서는 선행 조건식이 false일 때 뒤에 값을 실행하지 않는다(성능때문에)
선행조건식이 true면 뒤에 값을 실행한다
성능을 위해서 앞에 있는 false라면 뒤에 있는 문장을 실행하지 않는다
- 부정 (not) : !true -> false
- ?? 병합 연산자 : null 또는 undefined인 경우에만 오른쪽 값을 반환한다
"?." : 옵셔널 체이닝(Optional chaining)
객체에서 undefined 나 null에 접근할 경우 에러가 발생한다
안전하게 객체의 프로퍼티에 접근하기 위해서 사용한다
남발하면 안된다. 에러도 핸들링 해야하고 오히려 에러가 나지 않는것이
문제 해결에 더 어려움을 줄 수 있다
- false가 아닌데 false로 취급되는 값
NULL, Undefined, 0, "", NaN, false
7) 삼항연산자
javascript에서 세개의 피연산자를 받는 유일한 연산자
조건식 ? true : false
8) 대입연산자
a = b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>alter 창 띄우기</title>
</head>
<body>
<script src="alter.js"></script>
</body>
</html>alert("javascript")
-alert 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>결제 확인창</title>
</head>
<body>
<script>
var msg = "";
if(confirm("결제하시겠습니까?")){
msg ="결제완료";
}
else{
msg = "결제취소";
}
alert(msg);
document.write("<h1>"+ msg + "</h1>");
</script>
</body>
</html>
confirm -> 확인, 취소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디버깅</title>
</head>
<body>
<script src="hello.js"></script>
<p>디버깅 확인</p>
<script>hello("강민정")</script>
</body>
</html>function hello(name){
let data = `hello , ${name}`;
first(data);
}
function first(data){
alert(`${data}`);
}