연산자란 ?

연산자는 변수나 상수에 미리 약속된 연산을 행하기 위해 사용되며, 연산되는 항의 개수 따라 이항 연산자(binary operator), 단항 연산자(unary operator)등으로 나누어진다.

 

연산자

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b, c;

// +, -, *, /, %, ++, --

c = 10 / 0; 
console.log(c); // Infinity : 무한대를 나타내는 숫자
if(c === Infinity) {
	console.log('0으로 나누었습니다.');
}


a = 2;
b = 10;
c = a ** b; // 거듭 제곱
console.log(c); // 1024

c = 2 ** 3 ** 2; // 2 ** (3 ** 2)과 동일. 우결합성
console.log(c); // 512

// c = -2 ** 2; // 에러. 모호한 표현은 허용하지 않음

// 문자열 결합
a = "seoul";
b = "korea";
c = a + b ;
console.log(c);

a = 10;
b = "5";
c = a + b ; // 숫자 + 문자 => 문자 + 문자 => 문자
console.log(c); // 105
</script>
</head>
<body>

<h3>연산자</h3>

</body>
</html>

 

연산자 - 비교 연산자

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = '123';
b = 123;

console.log(a == b); // true
console.log(a === b); // false(동치). 두 값을 비교할 때는되도록이면 ===을 사용할 것을 권장

console.log(a != b); // false
console.log(a !== b); // true(동치가 아닐 경우 참)

</script>
</head>
<body>

<h3>연산자 - 비교 연산자</h3>

</body>
</html>

 

연산자 - 논리

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = "";

// 값이 "", 0, null, undefined, NaN 등은 거짓이다.
if(a) {
	console.log("참...")
} else {
	console.log("거짓...")
}

a = 0;
if(a) {
	console.log("true...")
} else {
	console.log("false...")
}
// 값이 있으면 true 로 생각함.
a = "html" && "css";
console.log(a); // css

a = "html" && true;
console.log(a); // true

a = false && "css";
console.log(a); // false

a = "html" || "css";
console.log(a); // html

a = "html" || true;
console.log(a); // html

a = false || "css";
console.log(a); // css

a = 0 || "css";
console.log(a); // css

a = 10 || "css";
console.log(a); // 10

</script>
</head>
<body>

<h3>연산자 - 논리</h3>

</body>
</html>

논리연산은 단축연산을 기억할 것

 

리터널은 데이터 그 자체를 의미하며, 변수에 넣는 변하지 않는 데이터이다.

스크립트에 부여한 고정 값으로, 변수가 아니다.

 

리터널

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a;

a = 13; // 10진수
console.log(a);

a = 013; // 8진수
console.log(a); // 11

a = 0x13; // 16진수
console.log(a); // 19

a = 0b1001; // 2진수
console.log(a); // 9

a = 3.141592;
console.log(a); // 부동 소수점

a = 3.1E+12;
console.log(a); // 부동 소수점

a = 'seoul'; // 문자열 리터널
console.log(a);

a = "seoul"; // 문자열 리터널
console.log(a);

a = "c:\\temp"; // 문자 이스케이프
console.log(a);

a = "subject : \"java\", price:1000";
console.log(a); // 문자 이스케이프

a = 'subject : "java", price:1000';
console.log(a); 

a = /ab+c/; // 정규식 리터널
console.log(a);

a = ["html", "css", "javascript"]; // 배열 리터널
console.log(a); 

a = {name:"홍길동", age:20}; // 객체 리ㅓ널
console.log(a);

var x = "홍";
var y = "길동";
var msg;

msg = `안녕하세요 ${x} ${y}님`; // 템플릿 리터널(${}표현식으로 처리된 값을 문자열로 반환)
		// 템플릿 리터널은 반드시 백틱(`)을 사용하며 ' 또는 "를 사용하지 않는다.
console.log(msg);


</script>



</head>
<body>

<h3>리터널(liternal)</h3>

</body>
</html>

 

상수란 ?

- const 키워드로 읽기 전용 상수를 만들 수 있다.

- 상수 식별자의 구문은 변수 식별자와 같다.

 

특징

- 상수는 스크립트가 실행 중에는 대입을 통해 값을 바꾸거나 재 선언될 수 없으며, 선언 시 값으로 초기화해야 한다.

- 상수에 대한 범위 규칙은 let 블록 범위 변수와 동일하다.

- const 키워드가 생략된 경우에는, 식별자는 변수를 나타내는 것으로 간주한다.

- 상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없다.

- 상수에 할당된 객체의 속성 및 배열의 내용은 보호되지 않는다.

 

상수

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
const PI = 3.141592;
// const sub = 10; // 에러:const 이름과 함수명은 동일 할 수 없다.

function sub() {
	console.log(PI);
	
	// PI = 3.14; // 에러:TypeError-값 변경 불가
	
	const x = 10;
	// var x = 5; // 에러:SyntaxError 상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언 불가

	// const a; // 에러:SyntaxError 상수는 선언과 동시에 초기화 해야 함.
	
	if(true) {
		const a=10; // const는 let 블록 범위 변수와 동일하므로 if()에서만 유효
	}
	
	var a=100;
	console.log(a);
	
	// 상수로 선언된 객체의 속성 및 배열의 내용은 보호 하지 않는다. (변경이 가능하다.)
	const arr = ['HTML', 'CSS']; // 배열
	arr.push('JavaScript'); // 배열 뒤에 요소 추가
	console.log(arr); // (3) ['HTML', 'CSS', 'JavaScript']
	
	const obj = {'subject':'java'}; // 객체 {속성:값}
	console.log(obj.subject); // java
	obj.subject = 'HTML'; // 가능
	console.log(obj.subject); // HTML
	
}


sub();
</script>

</head>
<body>

<h3>상수-const</h3>

</body>
</html>

 

데이터 형

- 최선 ECMAScript 준은 7가지 데이터 형을 정의한다.

(1) 6가지 원시 데이터 형

 · Boolean : true와 false

 · null : null 값을 나타내는 특별한 키워드

 · undefined : 값이 저장되어 있지 않은 최상위 속성

 · Number : 정수 또는 실수형 숫자

 · String : 문자열 

 · Symbol : (ECMAScript 6에 도입) 인스턴스가 고유하고 불변인 데이터 형

(2) Object : 객체

- 객체와 함수는 언어의 다른 기본 요소이다. 객체는 값을 위한 컨테이너, 함수는 어플리케이션이 수행할 수 있는 절차로 생각할 수 있다.

 

데이터 타입

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a, b;

b = '자바'; // string - 문자열
a = typeof(b);
console.log(a);

b = 50; // number - 숫자
a = typeof(b);
console.log(a);

b = true; // boolean - 논리형
a = typeof(b);
console.log(a);

b = function() { }; // function - 함수도 스크립트에서는 객체
a = typeof(b);
console.log(a);

b = { }; // object - 객체
a = typeof(b);
console.log(a);

b = null; // object - null은 반객체를 참조하는 특별한 값
a = typeof(b);
console.log(a);

var x;
a = typeof(x); // undefined - 값이 초기화되지 않는 변수는 underfined 타입이다.
console.log(a);
console.log(x); // 값이 초기화되지 않는 변수의 값은 undefined 이다.
				// undefined는 타입이자 값이다.
				
a = typeof(y); // undefined - 정의하지 않은 변수는 undefined 타입이다.
console.log(a);

</script>
</head>
<body>

<h3>데이터 타입</h3>

</body>
</html>

 

데이터 타입 - null

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = null;
var b;

b = typeof a;
console.log(b); // null의 타입은 object

// 변수가 null인지 확인 하는 방법
b = a === null; // === : 일치 연산자
console.log(b); // true

</script>
</head>
<body>

<h3>데이터 타입 - null</h3>

</body>
</html>

 

자료형 변환

- Javascript는 동적 형 지정 언어로 변수를 선언할 때 데이터 형을 지정할 필요가 없다.

- 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환된다.

 

자료형 변환

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a;

a = 10 + '20'; // 숫자 + 문자 => 문자 + 문자 => 문자열로 형변환 됨(+는 문자 우선)
				// 문자 + 숫자 => 문자 + 문자
console.log(a); // 1020

a = 20 - '15'; // "숫자 연산자 문자" 에서 "+" 이외는 문자는 숫자로 형변환 됨
console.log(a) // 5

a = 20 * '10'; // 문자가 숫자로 형변환 되어 연산 됨
console.log(a) // 200

</script>
</head>
<body>

<h3>형변환</h3>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a, b;

a = "123";
console.log(typeof(a));

b = a + 10;
console.log(b); // 12310

a = Number(a); // Number() 함수를 이용한 문자열을 숫자로 변환
console.log(typeof(a)); // Number
b = a + 10;
console.log(b); // 133

a = String(a); // String() 함수를 이용하여 숫자를 문자열로 변환
console.log(typeof(a));

a = "true";
console.log(typeof(a)); // String

a = Boolean(a); // Boolean() 함수를 이용하여 문자열을 boolean으로 변환
console.log(typeof(a)); // boolean

</script>

</head>
<body>

<h3>형변환</h3>

</body>
</html>

 

 

변수 (Variable)

- 어플리케이션에서 값에 상징적인 이름으로 변수를 사용한다.

 

전역 변수 : 함수의 바깥에서 선언한 수로, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있다.

지역 변수 : 함수 내부에서 선언한 변수로, 변수를 선언한 함수 내에서만 사용할 수 있다.

 

변수 선언

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = 10, b = 20, c;

console.log(c); // undefined - 초기값을 부여하지 않는 경우

// c = a + x; // ReferenceError 예외 발생
c = a + b;
console.log(c);
</script>

</head>
<body>

<h3>자바스크립트-변수 선언</h3>

</body>
</html>

 

변수 범위

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a=10; // 전역 변수

function fun() { // 함수 선언
	console.log(a); // 10
	
	if(true) {
		var x=5; // var로 선언한 변수의 범위는 if() 블록이 아니라 x가 선언된 함수이다.
	}
	console.log(x); // 5. 
	
	if(true) {
		let y=10; // let로 선언한 변수의 범위는 if() 블록이다.
	}
	// console.log(y) //ReferenceError
}

// 함수 호출
fun();
</script>
</head>
<body>

<h3>자바스크립트-변수 범위</h3>

</body>
</html>

 

변수 호이스팅(hoisting)

- 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미한다. 

- 변수가 함수 내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다.

 

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function sub() {
	// console.log(a); // 에러 : ReferenceError
	console.log(x); // undefined. 자바스크립트는 나중에 선언한 변수를 참조 할 수 있다.
	var x = 3;
	console.log(x); // 3
	
/*
	// 위는 아래와 동일
	var x;
	console.log(x);
	x = 3;
	console.log(x);
*/
}

sub();

</script>
</head>
<body>

<h3>변수-호이스팅(hoisting)</h3>
<p>
 호이스트는 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미
</p>

</body>
</html>

 

+ Recent posts