[TIL 5] 자바스크립트 기본 문법

자바스크립트 기본 문법

자바스크립트 기본 용어와 출력 방법

• 웹 브라우저에서

• <script> </script> 태그로 영역 잡기

  • html 문서 어디에든 올 수 있음
  • 어디에 위치하느냐에 따라 dorm 처리에 영향을 받게 됨
  • 문서 마지막에 배치를 하거나, head 안에 배치를 하지만 event를 쓰기를 권장

• 자바스크립트 기본 용어

  • 표현식: 값을 만들어 내는 간단한 코드
  • 문장: 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위
  • 문장 마지막에 세미콜론(;) 또는 줄 바꿈을 넣어 종결을 나타냄
    • 세미콜론 필수는 아님 생략 가능
  • 키워드: 특별한 의미가 부여된 단어
  • 식별자: 변수나 함수 등에 이름을 붙일 때 사용하는 단어
    • 한글 비권장
    • 첫글자: 알파벳, _, $ 가능
    • 키워드, 숫자로 시작, 스페이스 불가능
    • snake case: 단어가 이어질 때 _ 사용, python에서 주로 사용(Hello_World)
    • camnel case: 첫단어의 첫글자는 소문자, 두 번째부터는 대문자, 자바언어에서 주로 사용(helloWorld)
    • pascal case: 첫글자부터 대문자, class명을 정할 때 사용(HelloWorld)
    • 케밥 case: hello-world, HTML태그명(태그 언어에서 주로 사용), 프로그래밍 언어에서는 사용X
  • 식별자 종류
    • 식별자 뒤에 괄호 없음
      • 단독으로 사용 - 변수
      • 다른 식별자와 함께 사용 - 속성
    • 식별자 뒤에 괄호 있음
      • 단독으로 사용 - 함수
      • 다른 식별자와 함께 사용 - 메서드
  • 주석
    • 한 행 주석 처리 // 주석문
    • 여러 행 주석 처리 /* 주석문 */

• 자바스크립트 출력

  • 웹 브라우저에 경고 창 띄우기 alert("메시지")
  • 개발자 도구의 console에 출력하기 console.log("메서드")

---

자료형과 변수

• 자료형
  • 숫자 - 정수, 실수
    • 나눗셈(/)
      • 실수/실수 → 실수
      • 정수/실수 → 실수
      • 정수/정수 → 정수, 스크립트 언어 → 실수
      • 숫자를 0으로 나누었을 때 무한을 나타내는 값이 됨
    • 문자열로도 사칙연산 가능
  • 사칙 연산자
  • 나머지 연산자(%)
  • 문자열
    • 문자 집합
      • 스크립트언어에서는 모두 문자열로 취급
      • 작은따옴표, 큰따옴표 사용
    • 이스케이프 문자
      • \t 수평 탭
      • \n 행 바꿈(줄바꿈 엔터)
      • \ 역 슬래시
      • \’ 작은 따옴표
      • \” 큰 따옴표
    • 문자열 연결 연산자
      • +문자열 연결
      • 문자열+숫자→ 문자열+’숫자’→문자열숫자
      • 문자열-숫자→숫자-숫자→숫자
  • 자료형
    • 불(Boolean)
      • true/false 값 중 하나
      • 비교 연산자
      • 논리 연산자
  • 변수
    • 값을 저장할 때 사용하는 식별자
      • 변수 선언, 변수에 값 할당, 변수 초기화
      • let, const, var(x)
      • REPL : Read Evaluate Print Loop
    • Chrome > 개발자 도구 > console에서 실습
    • let 변수, const 상수
    • 한 번만 대입 가능, 두 번째부터 에러

---

조건문과 반복문

• 조건문

  • if 조건문
    • new 키워드: 객체를 사용하겠다
  • if else 조건문
  • 중첩 조건문과 if else if 조건문
  • if else if 조건문(다중 if문): 중복되지 않는 조건 세 가지 이상을 구분할 때 사용
  • switch case default

• 반복문

  • 일반화 작업

  • 배열: 변수 여러 개를 한꺼번에 다룰 수 있는 자료형

    • 배열의 크기를 동적으로 늘리고 줄이고 할 수 있음
    • 위치 기반, 인덱스 정보로 접근

  • while 반복문

    // 무한 루프 - 조건을 거짓으로 만드는 문장이 없으면 무한 반복
    while (true) {
    	alert('무한 반복');
    }
    	
    

  • for( in ) / for( of )

    • for(let i in arr) undefined 건너띔
    • for(let i of arr)

    let array = [1, 10, 20, , 30, , 60];
    
    for (let i = 0; i < array.length; i++) {
      console.log(array[i]);
    }
    for (let i in array) {
      console.log(i, array[i]);
    } // 인덱스 정보까지
    for (let i of array) {
      console.log(i)
    } // 인덱스 정보는 접근 X

---

함수

• 선언과 호출, 실행 우선순위

  • 선언과 호출
    • 함수 생성 방법(함수 - 재사용 가능한 코드 블럭 → 코드 중복 제거)
      • 익명 함수 function( ) { } ⇒ 변수에 할당해서 사용
        • typeof(함수)의 타입은 문자열
        • let 동일 이름으로 X, var 재선언 가능
      • 선언적 함수 function 함수( ) { }

• 매개변수와 반환 값

  • 매개변수: 함수의 괄호 안에 집어넣어 함수 쪽에 추가적인 정보 전달
    • 매개변수 호출 할 때 개수가 안 맞을 때 undefined가 넘어감, 초과하면 그냥 삭제됨
      • f(), f(3), f(3,4,5) → 하나를 요구하는데 안 맞게 넘김
  • 리턴 값: 함수를 실행한 결과
  • 콜백 함수 (callback)

    • 매개변수로 전달되는 함수

    • 내가 직접 호출하는 게 아니라 뒤에서 상황에 맞게 호출해 주는 것

    • 마지막 매개 변수에 지정

      <script>
      	// 함수 선언
      	function callTenTimes(callback) {
      		// 10회 반복
      		for (let i = 0; i < 10; i++) {
      			callback(); // 매개변수로 전달된 함수를 호출
      		}
      	}
      	1.
      	// 변수 선언
      	let fun = function () {
      		alert('함수 호출');
      	};
      	// 함수 호출
      	callTenTimes(fun);
      	
      	2.
      	=> 값을 넘기는 곳에 직접 호출(closure 연결 가능)
      	callTenTimes(function() {
      		alert('함수 호출');
      	});
      </script>

---

객체

• 객체 개요
  • 배열 선언과 요소 접근 예 - 인덱스 사용(key)
  • 객체는 요소에 접근할 때 키(속성명) 사용
    • 정보에 접근할 수 있는 키가 명칭이 됨
    • 키:값;
      • 값 제한X
      • 키 제한O(문자열 or symbol)
  • 객체 뒤에 대괄호를 사용해 키를 입력하면 객체 속성에 접근
    • 문자열 ‘’ 표기 꼭 해주기
  • 객체 뒤에 .을 입력해 객체 속성에 접근
  • for in 반복문을 작성해 객체를 순환

    for (let 키 in 객체) {
    	문장 
    }

• 속성과 메서드
  • 요소: 배열에 있는 값 하나하나
  • 속성: 객체에 있는 값 하나하나
    • 속성으로 배정된 함수 - 메서드
  • 메서드: 객체 속성 중 자료형이 함수인 속성
  • 객체에 있는 속성을 메서드에서 사용하고 싶을 때는 자신(this)이 가진 속성임을 분명하게 표시해야 함
    • this: 현재 인스턴스에 대한 참조

	<script>
  	  // 객체 선언
      let person = {
        name: 'OOO',
        eat: function (food) {
          alert(this.name + '이 ' + food + '을/를 먹습니다.');
        },
      };
      // 메서드 호출
      person.eat('밥');
    </script>

---

• document.write( ); : body에 출력됨(화면에 바로)

---

실습

<script>
  alert('Hello JavaScript...!');
  console.log('Hello World…!');
</script>

• 알림창, 콘솔

<script>
  // Date 객체 선언
  let date = new Date();
  let month = date.getMonth() + 1;

  if (3 <= month && month <= 5) {
      alert('봄입니다.');
  } else if (6 <= month && month <= 8) {
      alert('여름입니다.');
  } else if (9 <= month && month <= 11) {
      alert('가을입니다.');
  } else {
      alert('겨울입니다.');
  }
</script>

• getMonth() 현재 달 측정 , getHours() 현재 시간 측정

<script>
  function f(x) {
    return x * x;
  }
  alert(f(4));
</script>

• 매개변수와 반환 값이 있는 함수