기본 문법

기본 용어

• 표현식과 문장
  • 표현식 - 값을 만들어 내는 간단한 코드
    • 273 10 + 20 + 30 * 2 ‘RintIanTta’
  • 문장
    • 표현식이 모이면 문장이 됨
    • 문장의 끝에는 세미콜론을 써서 문장의 끝을 알림
    • 또는 줄 바꿈[Enter]을 넣어서 문장의 끝을 푷ㄴ
      • 273; 10 + 20 + 30 * 2; var rintiantta = ‘Rint’+’Ian’ + ‘Tta’; alert(‘Hello JavaScript!’);
  • 참고
    • 자바스크립트는 문장 끝에 세미콜론을 붙이지 않아도 프로그램을 실행하는데 문제가 없음.
    • 그러나 프로그래밍 언어의 상당 수가 문장 끝에 세미콜론을 입력함으로 자바스크립트에서도 습관적으로 입력하는 것임.

식별자

• 자바스크립트에서 이름을 붙일 때 사용하는 단어
  • 예로 변수명과 함수명이 있음.
• 식별자(예, 변수명, 함수명)를 만들 때 규칙
  • 키워드를 사용하면 안됨
  • 숫자로 시작하면 안됨
  • 특수 문자는 _와 $만 허용
  • 공백 문자를 포함할 수 없음
  • 식별자로 사용 가능한 예 » alpha, alpha10, _alpha, $alpha, Alpha, ALPHA
• 식별자로 사용할 수 없는 예
  • break, 273alpha, has space
• 참고 – 식별자로 한글이나 한자, 일본어 같은 언어를 사용할 수 있으나 식별자로 알파벳을 사용하는 것이 관례

• 주석
  • HTML 문서에서의 주석
    • <!-- 와 -->로 감싸진 문자열을 주석으로 처리
  • JavaScript에서의 주석 처리(두 가지 방법)
    • //로 한 문장을 주석 처리
    • /*와 */사이에 있는 모든 문장을 주석 처리

 

문자열 자료형

• 문자열(String)
  • 작은 따옴표(‘ ‘) 또는 큰 따옴표(“ “)로 문자열을 표시(Python과 동일)
• 문자열 내부에 작은 따옴표를 표시하고 싶을 때
  • alert(“Hello World!”) → alert(“Hello ‘World!’”);
• 문자열 내부에 큰 따옴표를 표시하고 싶을 때
  • alert(‘Hello World!’) → alert(‘Hello “World!”’);
• 이스케이프 문자
  • \n → 줄바꿈
  • \t → 탭
  • \\ → 백슬래시(\)
• 문자열(String) 연산자
  • 문자열 + 문자열 → 문자열
  • 문자열[숫자]
    • 문자 선택 연산자, []를 사용한 인덱싱
    • Length 속성 » ‘안동대학교’.length

 

bool 자료형 - 불 연산자

• 불 부정 연산자 : !
  • !true → false
  • !false → true
• 불 논리합/논리곱 연산자
  • 논리곱 연산자 : &&
  • 논리합 연산자 : ||
   

 

자료형 검사

• 자바스크립트는 숫자, 문자열, 불 같은 자료형을 확인할 때 typeof 연산자를 사용
  • typeof(‘문자열’)
  • typeof(123)>
  • typeof(true)
    • typeof 연산자 뒤에 소괄호 생략 가능
    • typeof(10) === ‘number’typeof 10 === ‘number’

 

템플릿 문자열

• console.log(’123+52의 값은 ‘+(123+52) + ‘입니다!’)

• 표현식을 여러 개 결합하면 코드가 복잡해지는 경향이 있음.
• 템플릿 문자열은 문자열을 백틱 으로 감싸서 만듬, 문자열 내부에 ``${} `기호를 사용하여 중괄호({}) 사이에 표현식을 넣음.
• console.log(123+52의 값은 ${123+52}입니다!)

 

상수

• 한번 선언하면 변경 불가
  • const 이름 = 값

 

 

변수

• let = 변수 값을 자주 바꿀 것 같을때
• const = 한번 할당 해놓으면 안바꿈
• 변수는 값을 저장할 때 사용하는 식별자
  • 변수에는 숫자 뿐만 아니라 모든 자료형을 저장할 수 있음

변수의 생성과 사용

• 변수를 만드는 것을 “ 변수를 선언한다”라고 말함
• 변수 선언 형태
  • let 키워드 뒤에 식별자를 쓰면 해당 식별자는 변수 이름(명)이 됨

  let nameOfVariable;

  • 변수에 값을 저장하는 것을 “변수에 값을 할당한다”라고 말함

  let nameOfVariable = 3.3;

  • 변수를 선언한 후 처음 값을 할당하는 것을 “변수를 초기화 한다”라고 말함.

  let nameOfVariable;
  nameOfVariable = 3.141592;

• var 이름 = 값
  • var로 선언하면 해당 변수는 함수 전체에서 인식됨
  • 다시 선언 가능
    
    

<script>
function ftn() {
	var x = 1
	if (true) {
		var x = 10
		console.log(`x in if block : ${x}`)
		}
	console.log(`x in if ftn : ${x}`)
}
ftn()
</script>

• let 이름 = 값
  • let으로 선언하면 선언한 블록 내에서만 인식됨
  • 동일 블록 내에서 다시 선언 할 수 없음.

  <script>
  function ftn() {
  let x = 1
  if (true) {
  let x = 10
  console.log(`x in if block : ${x}`)
  }
  console.log(`x in if ftn : ${x}`)
  }
  ftn()
  </script>

• 2변수

<script>
let r, pi;
r = 10;
pi = 3.141592;
alert(2*pi*r);
</script>

•  실습
  • 복합 대입 연산자는 타 언어와 동일(예, +=, -=, *=, /=, %=)

<script>
	let list =''
	list += '<h3>Welcome</h3>'
	list += '<ul>'
	list += ' <li>Hello</li>'
	list += ' <li>JavaScript!</li>'
	list += '</ul>'
	document.write(list)
</script>

<script>
	const list ='<h3>Welcome</h3><ul><li>Hello</li><li>JavaScript!</li></ul>'
	document.write(list)
</script>

• 변수에는 모든 자료형이 할당됨
  • 자바스크립트에는 6가지의 자료형이 있음

<script>
	let stringVar = ‘String’; // 1. 문자열
	let numberVar = 123; // 2. 숫자
	let booleanVar = true; // 3. 불리언
	let functionVar = function( ) { }; // 4. 함수
	let objectVar = { }; // 5. 객체
</script>

• Undefined 자료형

<script>
	let value
	alert( typeof (value) )
</script>

 

변수의 특성

• 변수 재 선언
  • var로 변수를 선언하면 변수 재선언이 가능

<script>
	var food = ‘초밥’;
	var food = ‘회’;
	var food = ‘꽁치 구이’;
	alert(food);
</script>

<script>
	var alert = ‘Alert!’;
	alert(alert);
</script>

 

• ⇒ 변수 선언할 때 ‘let 키워드를 사용할 것’

• 변수의 자료형 검사
  • 브라우저에서 확인 : alt + b
    • string
    • number

 

입력

• 문자열 자료형을 입력할 때 사용하는 함수는 prompt( )
  • String prompt([String message], [String default]);
  • 첫번째 파라메타 : 출력할 문자열
  • 두번째 파라메타 : 입력 창에 표시할 default 문자열
  • 리턴(return)되는 값은 String 형 변수

<script>
	prompt('Your ID?', 'ex) jay')
</script>

 

<script>
        prompt('Your ID?', 'ex) jay')
        alert(`Your ID is ${userId}`)
</script>

불 자료형을 입력할 때 사용하는 함수는 confirm( )

• Boolean confirm( [String message] );
  • 첫번째 파라메타 : 출력할 문자열
  • 리턴(return)되는 값은 Boolean 형 변수

  <script>
  	let yourChoice = confirm('수락하시겠습니까?')
  	alert(yourChoice)
  </script>
  

confirm( ) 함수의 리턴 값

• 확인을 클릭하면 true를 리턴, 최소를 클릭하면 false를 리턴

 

숫자와 문자열 자료형 변환

• 자바스크립트는 자동으로 자료형을 변환하는 경우가 많음

<script>
	alert( '52 + 100' ) // 1, '52 + 100'
	alert( 52 + 100 ) // 2, 152
	alert( '52' + 100 ) // 3, '52100'
	alert( 52 + '100') // 4, '52100'
	alert( '52' + '100') // 5, '52100'
</script>

• // 1 → ‘52 + 100’을 문자열(String)로 인식하므로 52 + 100 그대로 출력
• // 2 → 52+ 100를 숫자 52와 숫자 100의 합으로 인식하고 152를 출력
• // 3, 4, 5 → 문자열 자료형과 숫자 자료형을 + 연산을 할 때는 모두 문자열 자료형으로 인식하여 문자열 ‘52100’을 출력
  • 문자열 자료형 + 문자열 자료형 형태의 연산은 문자열 두 개를 붙임
  • // 5의 경우 문자열 ‘52100’을 출력함

• 숫자 자료형 + 문자 자료형 → 숫자 자료형을 문자 자료형으로 변환하여 두 문자 자료형을 붙임
• 더하기 연산(+)을 제외한 사칙 연산자는 문자열 자료형을 숫자형 자료형으로 자동 변환함

<script>
	alert( '52 - 100' ) // 1, '52 - 100'
	alert( 52 - 100 ) // 2, -48
	alert( '52' - 100 ) // 3, -48
	alert( 52 - '100') // 4, -48
	alert('52' - '100') // 5, -48
</script>

<script>
	alert( '52 * 100' ) // 1, '52 * 100'
	alert( 52 * 100 ) // 2, 5200
	alert( '52' * 100 ) // 3, 5200
	alert( 52 * '100') // 4, 5200
	alert( '52' * '100') // 5, 5200
</script>

<script>
	alert( '52 / 100' ) // 1, '52 / 100'
	alert( 52 / 100 ) // 2, 0.52
	alert( '52' / 100 ) // 3, 0.52
	alert( 52 / '100') // 4, 0.52
	alert( '52' / '100') // 5, 0.52
</script>

숫자와 문자열 자료형 변환(문자열 → 숫자)

<script>
	let input = prompt('숫자를 입력해주세요', '숫자')
	alert( typeof(input) )
</script>

• 출력은 ‘string’
  • prompt( ) 함수는 입력 받은 값을 String으로 반환

String 자료형을 숫자 자료형으로 변경하기 위해 Number( )함수 사용

<script>
	let input = prompt('숫자를 입력해주세요', '숫자')
	let numberInput = Number(input)
	alert( typeof(numberInput)+':'+numberInput ) 
</script>

• 숫자로 표현될 수 없는 문자열을 Number( ) 함수의 파라미터로 넘겼을 때 NaN(Not a number)를 리턴.
  • 참고 – 자바스크립트는 복소수 예를 들어 sqrt(−𝟏)은 NaN(Not a number)으로 표시함

다른 자료형을 문자열 자료형 변환

• String(1.23)
• String(true)

• typeof(123+’’)
  • 문자열이 아닌 데이터에 빈 문자열을 연결하면 → 문자열 자료형으로 변경됨.
  • typeof(true + ‘’)

• 부울 자료형 변환
  • 숫자 자료형과 문자열 자료형이 변환되는 것과 마찬가지로 다른 자료형을 부울 자료형으로 변환할 수 있음
  • 문자열 자료형을 숫자 자료형으로 바꿔 주는 Number( ) 함수와 같이 불 자료형으로 바꿀 때는 Boolean( )함수를 사용

<script>
	alert( Boolean(0) ); // false
	alert( Boolean(NaN) ); // false
	alert( Boolean(‘’) ); // false
	alert( Boolean(‘ ‘) ); // space → ture
	alert( Boolean(null) ); // false
	alert( Boolean(undefined) ); // false
</script>

<script>
	alert( Boolean(‘0’) ); // true
	alert( Boolean(‘false’) ); // true
</script>

• ‘0’과 ‘false’과 같은 문자열 자료형은 부울 자료형으로 변경하면 true
  • alert( Boolean(‘ ‘) );
  • Space(‘ ‘)는 문자열 자료형 따라서 부울 자료형으로 변경하면 true

  <script>
  	alert( !!0 ); // false
  	alert( !!NaN ); // false
  	alert( !!‘’ ); // false
  	alert( !!‘ ‘ ); // space → ture
  	alert( !!null ); // false
  	alert( !!undefined ); // false
  </script>
  

  <script>
  	alert( Boolean(0) ); // false
  	alert( Boolean(NaN) ); // false
  	alert( Boolean(‘’) ); // false
  	alert( Boolean(‘ ‘) ); // space → ture
  	alert( Boolean(null) ); // false
  	alert( Boolean(undefined) ); // false
  </script>
  

일치 연산자

• 비교 연산자를 사용할 때 자동으로 자료형이 변환되어 의도하지 않은 경우가 발생할 수 있음

<script>
	alert( ‘’ == false ); // true
	alert( ‘’ == 0 ); // true
	alert( 0 == false ); // true
	alert( ‘237’ == 237 ); // true
</script>

• 자동으로 자료형이 변환되는 것을 막고 원하는 자료형을 확실하게 구분 짓고 싶다면 ‘일치 연산자’를 사용
  • === → 연산자 양쪽의 자료형과 값이 일치하는가?
  • !== → 연산자 양쪽의 자료형과 값이 다른가?

  <script>
  	alert( ‘’ === false ); // false
  	alert( ‘’ === 0 ); // false
  	alert( 0 === false ); // false
  	alert( ‘237’ === 237 ); // false
  </script>