웹 표준 HTML, CSS, JS [09] 자바스크립트 기본 문법

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

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

◈ 자바스크립트 기본 용어

- html 문서 내 <script> 태그 내에 작성 가능

- 이때, 스크립트는 위에서 아래방향으로 읽어나가므로, <script> 태그보다 아래에 있는 내용은 적용이 안됨을 주의!

- 표현식: 값을 만들어내는 코드

- 문장: 프로그래밍에서 코드의 최소 단위(라인) / 문장 마지막에 세미콜론(;) 작성

- 키워드: JS에서 이미 지정되어 있는 단어

- 식별자: 변수/함수 등의 이름 / 첫글자는 알파벳, 언더바(_), 달러($) 표시만 가능 / 키워드, 숫자 시작, 공백은 사용 x

  - 표기법의 종류

   - snake case: 언더바(_)를 이용하여 식별자를 정하는 표기법 / ex) Hello_World

   - cammel case: 첫글자는 소문자, 두번째 단어부터는 대문자 / ex) helloWorld

   - pascal case: 첫글자도 대문자 / 주로 클래스명으로 사용하는 방식 / ex) HelloWorld

- 식별자의 종류

구분	단독 사용	다른 식별자와 사용
식별자 뒤에 괄호 O	함수	메서드
식별자 뒤에 괄호 X	변수	속성

- 주석: 한줄 주석 처리 ( // ) / 여러줄 주석 처리 ( /* */ ) / 단축키: Ctrl+ / 

◈ 자바스크립트 출력 

- alert( "msg" ) : 웹브라우저에 msg를 띄우는 함수 / 사용자가 확인 누르기 전까지 실행 중지

- console.log( "msg" ): 콘솔창에 출력 / 사용자는 볼 수 없는 출력

◈ 자바스크립트 입력

- x = prompt( 'msg' ) : 웹브라우저에 'msg'를 띄워 사용자의 입력을 x에 저장 / 문자열로 저장되니 조심

const x = prompt("x를 입력하세요"); // ex) x = 10
const y = prompt("y를 입력하세요"); // ex) y = 20
console.log(x+y); // 산술 연산 x+y(30)이 아닌 문자열 xy(1020)이 출력됨

 

(2) 자료형과 변수

◈ 자료형

- 숫자형: 정수, 실수 / 사칙 연산( +, -, *, /), 나머지(%) 연산 가능

  - 정수 / 정수 의 결과가 실수로 나옴 / ex) 4 / 3 

  - 정수 / 0 의 결과가 에러가 아닌 Infinity 로 나옴 

- 문자형: 작은/큰 따옴표(' ' / " ")로 나타냄

  - 이스케이프 문자: 탭( \t) / 엔터(\n) / 역슬래시(\\) / 작은따옴표(\') / 큰따옴표(\")

  - + : 문자열 결합 / 문자 + 숫자 => 문자열 + '숫자' 로 처리 됨 (숫자형 -> 문자형)

    ※ 문자형과 다른 자료형과의 연산시 +를 제외한  나머지 연산( - , /, %) 은 문자가 아닌 다른 자료형으로 형변환 됨

     ex) 문자열 - 숫자 => 숫자 - 숫자 로 처리됨

- 불(Boolean): 참(true), 거짓(false) / >, >=, <, <=, ==, != / !, &&, ||

  - 문자열과 숫자의 크기 비교 => 문자열을 숫자로 형변환하여 크기비교 / ex) '10' > 5 , '10' == 10는 true

  - 문자열과 숫자를 다르게 보고싶다면 =>  ===  ( !==) 이용  / ex) '10' === 10 은 false

◈ 변수

- 변수: 값 저장 위한 식별자

- 변수 선언 방식

  - let : 변수 선언 / 재선언 불가 / 선언된 위치 이후에서부터 사용 가능

let pi; // 변수 선언
pi = 3.14 // 값 할당
let pi = 3.14 // 변수 선언 및 초기화

  - const: 상수 선언 / 선언 및 초기화 한번씩만 가능 / 관례적으로 상수는 대문자

  - var: 현재는 권장되지 않는 방식

 

(3) 조건문과 반복문

◈ 조건문

 - if:

  if ( 조건 1 ) {  }
  else if ( 조건 2 ) {  }
  else {  }

- switch:

switch( 변수 ) {
	case 값1: // 변수 === 값1 이면 실행 
    	break;
    case 값2: // 변수 === 값2 이면 실행
    	break;
    default: // 어디에도 해당하지 않는 경우 실행
    	break;

- 삼항 연산자:  조건식 ? 참인 경우 실행 : 거짓인 경우 실행 => 문장 수를 줄일 수 있음.

let x = 1;
x === '1' ? console.log('같습니다') : console.log('다릅니다'); // 같습니다

 

cf) 현재 시간 구하는 클래스 Date

// Date 객체
let date = new Date();

// Date 클래스의 메서드
let year = date.getFullYear(); // 년
let month = date.getMonth() + 1; // getMonth()는 0부터 시작하므로 +1 해주어야
let day = date.getDay(); // 일
let hours = date.getHours(); // 시간
let minutes = date.getMinutes(); // 분
let seconds = date.getSeconds(); // 초

◈ 반복문

- for 문 : for ( 초기값 ; 조건문 검사 ; 증감 ) {  } : undefined 요소 모두 접근

  - for ( in ) : for ( let i in 객체(배열) ) {  } 

    : i에 객체의 필드명(배열의 인덱스) 차례로 할당 / 객체(배열) 내의 undefined 요소는 접근하지 x

  - for ( of ) : for ( let i of 객체(배열) ) {  } : i에 객체(배열)의 값 차례로 할당

- while 문: while( 조건 ) {  }  / while 문내에 탈출 조건 명시해야 무한 루프에 빠지지 않음

- do .. while문: do{   }while(조건) / 코드 최소 한번 실행 

- 반복문 제어: break (멈추고 빠져나옴) / continue(멈추고 다음 반복 진행)

 

(4) 함수

◈ 함수 선언

- 함수 선언 방식

함수 선언문	function 함수명 ( 매개변수 ) {  } - 어디서든 호출 가능 (호이스팅)	function hello(){     console.log('hello'); }
함수 표현식	let 함수명 = function( 매개변수 ) {  } - 표현식 이후에만 호출 가능	let hello = function(){     console.log('hello'); }
화살표 함수	let 함수명 = ( 매개변수 ) => { } - this 사용 x - 인수 1개면 괄호 생략 o - 함수 1줄이면 중괄호({}) return 생략 가능	let hello = () => {      console.log('hello'); }

 

- 실행 우선순위: 화살표 함수 > 함수 표현식 > 함수 선언문 / 같은 우선순위 내에서는 가장 마지막 함수를 우선

◈ 매개변수와 변환 값

- 매개변수 개수가 다르더라도 에러 없이 실행 

- 매개변수가 부족한 경우: undefined 값으로 대체 하여 실행

- 매개변수가 남는 경우: 앞에서부터 처리 (남는 변수는 무시)

- 매개변수로 함수를 전달 가능: 콜백(callback) 함수

function callTenTimes(callback) {
  for (let i = 0; i < 10; i++) callback();
}

let fun = function () {
  console.log('함수 호출');
};

callTenTimes(fun); // '함수 호출' 10번 출력됨

 

(5) 배열과 객체

◈ 배열

- 배열: 배열 크기 미리 선언할 필요 x / 자료형 다른 여러 요소들 배열에 넣을 수 있음 /

  - .length : 배열 길이 반환 / 대입 연산도 가능 ex) arr.length = 10; 

  - .push() : 배열 마지막에 요소 추가 

  - .pop() : 배열 마지막의 요소 제거, 제거 요소 리턴

  - .unshift() : 배열 가장 앞에 요소 주가

  - .shift() : 배열 가장 앞 요소 제거, 제거 요소 리턴

  - .join("") : 배열 괄호 내 기준으로 문자로 변합하여 반환

  - .reverse() : 배열 순서 거꾸로 반환

 

cf) 문자열 메서드

  - .split("") : 문자열 괄호 내 기준으로 잘라 배열로 반환

◈ 객체 (Object)

- 요소에 키(속성명, 필드명) 이용하여 접근

- 객체 접근/추가 방법: 객체['키'] / 객체.키 로 접근/추가

- 속성(property, attribute, 필드) 삭제: delete 객체.키

- 속성 존재 여부 확인: '키' in 객체 

- 메서드(method): 객체 내 속성이 함수인 속성

◈ 속성과 메서드

- this: 현재 인스턴스 참조

- e.target: document에서 발생한 이벤트 확인 가능

const list = document.querySelector(".list");
list.addEventListener("click", (e)=>{console.log(e.target);});

◈  구조 분해 할당 (비구조화 할당)

- 객체 / 배열 값 각각 분해해서 변수에 넣는 방식

ex)

// 구조 분해 할당 예제
const user = {
  id: 1,
  name: 'bia',
  email: 'bia@gmail.com',
};

// 구조 분해 할당으로 손쉽게 값 분해 가능
const { id, name, email } = user; // id=1, name='bia', email='bia@gmail.com' 할당

// 배열 또한 값 분해 가능
const fruits = ['수박', '딸기', '바나나'];
const [a, b, c] = fruits;  // a='수박', b='딸기', c='바나나' 할당

◈  전개 연산자 (나머지 연산자)

- ...배열(객체) 로 사용 

- ...배열 : 배열의 요소 모두 한번에 전개 시켜줌

// 전개 연산자 예제
const fruits = ['수박', '딸기', '바나나'];
console.log(...fruits); // 수박 딸기 바나나

- 매개변수에 많은 값 들어올 때 나머지 연산자 이용하여 처리 가능

const fruits = ['사과', '바나나', '수박', '망고', '딸기'];

function conLog(a, b, ...c){
	console.log(a, b, c)
}

conLog(...fruits); // 사과 바나나 ['수박', '망고', '딸기']이 출력됨

- 문자열을 배열로 변환 가능

const str = 'apple';
const strArr = str.split(''); // split 이용 가능
const strArr2 = [...str]; // 나머지 연산자 이용 가능

- 배열 하드카피 가능

const arr = [1, 2, 3, 4, 5];
const copyArr = arr; // 메모리 복사
const hardCopyArr = [...arr]; // 하드 카피

 

- 객체 간 병합에 사용 가능

const person = {
  name: 'bia',
  age: 1,
};

const schoolInfo = {
  title: 'student',
  school: 'sogang',
};

// 두 객체 병합 및 새로운 속성 추가 가능
const profile = {
  ...person,
  ...schoolInfo,
  location: 'seoul',
};