JavaScript_JavaScript, 타입, 연산자

JavaScript

 

• 브라우저 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍 언어
• java와 문법적 유사성이 많아서 쉽게 배울 수 있다 
• 인터프리터(Interpret) 프로그래밍 언어(컴파일 과정없이 소스가 실행파일로 사용)

 

JavaScript로 할 수 있는 일

• HTML 컨텐츠를 변경할 수 있다
  • 브라우저를 통해서 현재 보고 있는 웹 페이지를 변경할 수 있다
• HTML 태그의 속성 변경 가능
• HTML 컨텐츠의 스타일을 변경할 수 있다
  • CSS 변경 할 수 있다
• 사용자 상호작용하는 프로그램을 작성할 수 있다
  • 이벤트 모델 활용
• 브라우저의 도움없이 서버와 데이터통신을 할 수 있다
  • AJAX기술을 활용해야 한다

 

JavaScript의 특징

• 스크립트언어(인터프리터 언어)
• 객체지향 프로그래밍 언어
• 동적데이터타입을 지원 (데이터타입이 없음)
• 자바스크립트의 함수(메소드)는 1급시민 (메소드를 변수에 담을 수 있고, 전달이 가능하며 반환도 될 수 있다
  • 자바에선 객체가 1급시민

 

 

JavaScript 프로그램 작성하는 예시

 

• 스크립트 태그내에서 작성하기

  <script>
    console.log('hello, javscript');
  </script>

 

• 별도의 자바스크립트 파일을 사용 ( app.js와 같은 자바스크립트 파일 작성)

  // app.js
  console.log("hello, javscript");

 

• script 태그로 웹 문서에 포함시킨다

  <script type="text/javascript" src="app.js"></script>

 

 

 

JavaScript의 기본 문법

 

수행문 작성하기

  console.log('hello, javascript');

 

 

 

JavaScript의 리터럴

• 숫자

  var x = 123;
  var y = 3.15;
  
  let x = 123;
  let y = 3.15;

 

 

• 문자열

  var x = "안녕하세요"
  var y = '안녕하세요'
  
  let x = "안녕하세요"
  let y = '안녕하세요'
  
  let a = `
	안녕하세요.
    	반갑습니다
    	여러 줄 적을 수 있어요
`

// ' ` '  백틱이라고 부르고 대부분 키보드에서 물결과 같이 있는 키다
// 백틱을 사용하면 여러줄을 입력할 수 있다

 

 

백틱을 사용하면 문자열안에서 함수 사용이 가능하고, 계산 또한 가능하다

 

 

• 배열

  var x = [1, 2, 3]
  var y = ['홍길동', "김유신", '강감찬']
  
  let x = [1, 2, 3]
  let y = ['홍길동', "김유신", '강감찬']
  
  let x = [1, "홍길동", 3.15, true]
  
  var date = [
  
    ['년도', '매출액'],
    [2020, 10000000],
    [2021, 20000000],
    [2022, 30000000],
    [2023, 10000000],
    [2024, 40000000],
    
  ];

 

 

• Boolean

  var x = true
  var y = false
  
  let x = true
  let y = false

 

 

• 객체

  var x = {};
  var y = {
    firstName:"홍", 
    lastName:"길동", 
    age:40, 
    married:true
  };
  
  let x = {
  name : '홍길동',
  kor : 100,
  eng : 100,
  math : 70,
  getTotal : function() {
  	return this.kor + this.eng + this.math;
    };
    getAverage : funtion() {
    return this.getTotal()/3
    };
}

 

 

• 함수

function fn(x, y) {
    수행문;
    수행문;
    수행문;
}

 

let fn = function(x, y) {
    수행문;
    수행문;
    수행문;
}

// 이런식으로도 가능하다

let fn = (x, y) => {
    수행문;
    수행문;
    수행문;
}

 

 

 

JavaScript의 데이터 타입

데이터 타입	설명
number	기본적으로 java의 double 타입과 유사 정수, 실수를 담을 수 있다
boolean	true, false
string	single or double quotos로 표현 예시) '홍길동', "고길동"
array	순서 있는 value의 집합  (자바에 배열은 같은 값만 넣을 수 있지만 자바스크립트는 다른 타입의 값들도 가능하다) [값, 값, 값, 값]
object	순서없는 key : value의 집합 저장방식이 자바의 Map 방식과 같다 (자바에 Map에서 value에는 객체만 들어갈 수 있는데 자바스크립트는 함수도 들어갈 수 있다) {이름 : 값, 이름 : 값, 이름 : 값}   값은 number, boolean, string, array, object, undefined, null, function이 가능
undefined	변수를 선언하고, 값을 할당하지 않으면 그 변수의 값은 undefined이고,  그 변수의 타입도 undefined
null	객체가 할당되지 않았다 null을 값으로 가지는 변수는 "아무것도 가지고 있지 않다" 라는 것을 의미 null이 저장된 변수의 타입이 object 타입

 

 

 

변수의 선언과 초기화

• 변수의 선언

  // 변수의 선언
  // var를 사용해서도 선언이 가능하다
  let x;
  let x, y, z;
  // x와 y와 z는 undefined값을 가지고 있고 타입은 undefined다.

 

 

• 변수의 초기화

  // 변수 선언
  let x;
  // 변수의 초기화
  x = 10;
  // 변수의 선언 및 초기화
  let x = 10;
  // 한번에 여러 개의 변수를 선언하고 초기화하기
  let x = 10, y = "홍길동", z = [1, 2, 3];

 

 

 

JavaScript의 연산자

• 산술연산자

  + - * / % 

// 정수/실수 -> 실수가능
5/2 = 2.5

// 숫자로 변환가능한 문자열은 자동으로 숫자로 변환된 후 연산이 수행된다
'10' / 2  = 5
'10.2' / 2 = 5.1

// NaN은 숫자가 아니거나 숫자로 변환할 수 없는 값이 참여한 연산의 결과다
'가나다'/2 = NaN

// NaN과 연산결과는 항상 NaN
NaN + 1 = NaN
NaN * 0 = NaN

'20' - 2 = 18
'20' * '2' = 40
'20' / 2 = 10
'20' % 2 = 0

'20' + '2' = '202'
'20' + 2 = '202'
2 + '20' = '202'

// 문자열과 숫자끼리의 덧셈을 할때는 내장함수인 parseInt나 parseFloat을 사용해야 한다
parseInt('1234') -> 1234
parseInt('12.14') -> 12
parseFloat('1234.23') -> 1234.23

 

• 대입연산자

  = += -= *= /= %=

 

• 증감연산자

++ --

 

• 관계연산자

  > >= < <= == === != !==
  * ==    : 값이 일치하거나, 변환된 값이 일치하면 true 
  * ===   : 값이 일치하고, 타입도 일치하면 true
  * !=    : 값이 일치하지 않거나, 변환된 값이 일치하지 않으면 true
  * !==   : 값이 일치하지 않거나, 타입이 다르면 true

 

  5 == 5    // true
  5 == '5'  // true
  5 === 5   // true
  5 === '5' // false
  5 != 8    // true
  5 != '8'  // true
  5 !== 5   // false(다른게 하나도 없어서 false)
  5 !== '5' // true

 

== 와 === 의 결과값 예시

 

!= 와 !== 의 결과값 예시

 

x != y  // false      두 값이 같은 값이라고 판단

x !== y // true       두 값이 서로 다른값이라고 판단, !== 은 타입이 다르거나, 값이 다르면 true

 

 

 

• 논리연산자

 

논리연산식에서 좌항/우항의 값이 boolean 타입의 값이 아니어도 상관없다

논리연산식에서 좌항/우항의 값이 모두 boolean 타입의 값인 경우 최종결과는 true 혹은 false다

논리연산식에서 좌항/우항의 값이 boolean타입의 값이 아닌 경우 최종결과도 true 혹은 false 값이 아닐 수 있다

 

true && true	// true
true && false	// false

kor >= 60 && eng >= 60 && math >= 60	// true 혹은 false

&&연산자는 좌항이 false로 판정되면 최종결과가 좌항의 값이다
100 && 10	// 최종결과가 10이다. 10은 true로 판정될 예정
0 && 10		// 최종결과가 0. 0은 false로 판정될 예정

||연산자는 좌항이 true로 판정되면 최종결과가 좌항의 값이다
100 || 10	// 100
0 || 10		// 10

 

&&	AND
||	OR
!	NOT

 

 

자바 스크립트에서 false로 판단하는 값

!!0		// false
!!' '		// false
!!undefined	// false
!!null		// false
!!NaN		// false

당연한 얘기이겠지만 false도 false로 판단한다

자바스크립트가 true로 여기는 값 = 위의 값을 제외한 모든 값들은 true이다

 

• 위의 값들이 논리연산자의 값으로 사용되거나 제어문, 반복문에서 사용될 때 거짓으로 판정

이런식으로도 사용이 가능하다

let id = "";
if(id) {
	// 폼입력값을 제출시킨다
} else {
	alert("아이디를 입력하세요")
}

if문의 조건식부분은 true/false를 기대하는 곳이다
id변수의 값이 " "이기 때문에 false로 판정이나서 생략해서 작성할 수 있다

 

 

function annualSalary(salary, commissionPct) {
	commissionPct = commissionPct || 0;
    return salary * 12 + salary*commissionPct*12;
}

annualSalary(200000, 0.5);
annualSalary(200000, null);
annualSalary(200000)


 || 논리연산자는 좌항의 값이 true로 판정되면 좌항의 값이 연산 최종결과가 된다
 || 논리연산자는 좌항의 값이 false로 판정되면 후항의 값이 연산 최종결과가 된다
즉 아래의 연산식은 commissionPct가 null이거나 undefined면 좌항의 값이 false로 판정되기 때문에
우항의 값 0이 이 연산의 최종결과가 된다
따라서 commissionPct 변수로 값을 전달받았을 때는 그 값이 commissionPct의 최종값이 되고,
commissionPct 변수로 값을 전달받지 못했거나 null을 전달받았으면 0이 최종값이 된다

 

논리연산자 && 와 의 결과예시

 

 

위 코드블록에 대한 브라우저 결과출력

 

 

• 삼항연산자

조건식 ? 표현식 : 표현식