빅데이터 분석가 양성과정/JavaScript

기본 문법

황규진 2024. 7. 10. 12:20

기본 용어

  • 표현식과 문장
    • 표현식 - 값을 만들어 내는 간단한 코드
      • 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>