JavaScript

최지홍·2022년 3월 7일
Daily studyJavaScript
0

매일 공부

목록 보기
23/40

JavaScript

  • HTML: 화면에 표시되는 정보를 약속
  • CSS: 스타일 규격
  • JavaScript: 웹 페이지를 동적으로 만들어주는 언어. 객체 기반 스크립트 언어
  • HTML 문서 내에 기술하거나 별도의 파일로 분리하여 작성
<html>
	<head>
		<script type="text/javascript">
			console.log("Hello, World!");
		</script>
	</head>
	<body></body>
</html>
<html>
	<head>
		<script type="text/javascript" src="js/.js"></script>
	</head>
	<body></body>
</html>
  • 스크립트 언어이자 인터프리터 방식
  • <head>나 <body> 안 어느 곳에서나 선언 가능
  • 하지만 <body>의 끝부분에 <sccript> 태그를 둘 것을 권장한다. 이는, HTML이 다 해석된 다음 마지막에 스크립트가 실행되어 빠르게 처리되는 느낌을 줄 수 있다.
  • 동적 타입 언어로 타입을 지정해주지 않음 → 인터프리터가 알아서 변수의 타입을 파악하고 저장

자료형

  • Primitive(기본형), Object(Reference, 객체) 타입 존재
  • Primitive
    • Boolean: true / false
      • “”, null, undefined, 0은 false로 간주
    • null: 값이 없거나 빈 값
    • undefined: 초기화되지 않은 값(정의되지 않은 값)
    • Number: 정수, 부동 소수점, Infinity, NaN 포함
      • Infinity: 무한대. 어떤 수를 0으로 나누거나 Infinity를 사용한 연산의 결과
      • NaN(Not a Number): 계산식의 결과가 숫자가 아님을 나타내는 상수
    • String: 문자열
      • 16비트 유니코드
      • 작은 따옴표와 큰 따옴표 둘 다 사용 가능하나 혼용은 불가
      • 이스케이프 시퀀스 가능
  • Object
    • Object 클래스
    • 배열
    • 함수
    • 사용자 정의 클래스
  • 모든 숫자를 8 byte 실수 형태로 처리
  • 편의성을 위해 정수 리터럴과 실수 리터럴 제공

변수 호이스팅(Variable Hoisting)

  • var 키워드를 사용한 변수는 중복 선언 가능
  • 호이스팅: var, function 등 모든 선언문이 해당 scope의 처음으로 옮겨진 것처럼 동작
  • 밑에서 선언한 변수를 위에서 호출해도 문제없이 진행된다. 이때, 해당 변수는 undefined로 초기화된다.
  • var는 전역 변수 타입으로, 내부 scope에서 var 키워드로 같은 변수를 선언하여도 전체 값이 변화됨. → const, let 사용으로 해결
  • 상수는 const 키워드로 표현
  • let 키워드를 사용하면 지역 변수처럼 동작하며 변수의 재선언이 불가하다.(var는 재선언 가능)
  • ===: 값이 일치하는지 확인(타입 포함)
  • ==: 값만 비교
  • +: 문자열이 하나라도 존재할 경우 문자열 결합 연산자로 동작
  • typeof: 해당 변수의 타입 반환(null은 object가 나옴)

객체

  • 이름과 값으로 구성된 프로퍼티의 집합 → 파이썬의 딕셔너리와 유사
  • 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체
  • 전역 객체를 제외한 JS 객체는 프로퍼티를 동적으로 추가 / 삭제 가능
  • JS의 함수는 일급 객체
  • 객체 리터럴을 사용하거나 Object 생성자 함수를 사용하여 작성
// 객체 리터럴 -> 하나 이상의 프로퍼티 작성
var student = {
	name: '홍길동',
	age: 26
}
// 생성자 함수
function Student(name, area) {
	this.name = name;
	this.area = area;
}

var student1 = new Student('홍길동', 26);
  • 객체는 .연산자나 대괄호를 사용해서 속성에 접근한다.
  • 없는 속성이면 undefined를 반환
  • || 연산자를 함께 사용하여 값이 undefined일 경우 대체값을 지정할 수 있음
  • 객체는 복사되지 않고 참조됨(주소값이 전달, 주소값 복사)
  • typeof 연산자를 통해 타입을 확인할 수 있다. null은 원시타입이지만 object가 반환된다.

배열

  • 타입이 정해지지 않음
  • [] 또는 new Array() 로 생성
  • 서로 다른 타입의 변수가 들어갈 수 있음
var arr1 = [];
var oddNums = [1, 3, 5, 7, 9];
var evenNums = new Array(0, 2, 4, 6, 8);
var arr2 = ['a', 1, 'b', 3];
  • 배열이름.length로 길이 정보 얻음
  • 배열이름.pop으로 맨 뒤의 항목 제거
  • 배열이름.push로 맨 뒤에 항목 추가
  • 배열이름.unshift로 맨 앞에 항목 추가
  • 배열이름.shift로 맨 앞의 항목 제거
  • 배열이름.indexOf(찾고자 하는 값)으로 인덱스 번호 찾기
  • 배열이름.splice(시작 인덱스, 개수)를 통해 부분 개수 제거
  • 딕셔너리: Key-Value 형태의 쌍을 저장
    • 중괄호를 이용해 생성하며, :과 ,를 이용해 키-값 쌍 생성
  • 제어문, 반복문은 Java와 동일

    • 단, 추가된게 for in 문

    • 내부 값을 간단한 방법으로 순회

      for (var i in nums)
	document.write(i + ": " + nums[i] + "<br>"); // i가 인덱스 번호가 됨
// 딕셔너리에서 사용할 경우 i가 각 key가 된다.

함수

  • 리턴 타입을 명시하지 않음
  • function 키워드로 함수 선언
  • scope에 주의
  • JS에서 함수는 일급 객체(First-class)
  • 함수를 변수, 객체, 배열 등에 저장할 수 있고, 다른 함수에 전달하는 파라미터 또는 리턴 값으로 사용 가능하다.
  • 프로그램 실행 중 동적으로 생성이 가능하다.
  • 함수 선언문, 함수 표현식, Function 생성자 함수 세 가지 방식이 제공된다.
  • 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능(함수 호이스팅) → 변수 호이스팅과 구분 필요. 변수 호이스팅은 할당되기 전까진 undefined 상태
  • 함수 선언문으로 정의된 함수는 스크립트가 로딩되는 시점에 변수 객체에 저장
  • 정의된 파라미터와 전달되는 아규먼트의 개수가 일치하지 않더라도 호출이 가능하다.
  • JS에서는 함수를 변수에 담을 수 있음
var plus = function(a, b) {
	return a + b;
};
  • 함수에서 함수 자체를 반환하는 것도 가능
function funcA(x) {
	var b = funcB(y) {
		return x + y;
	}
	return b;
}
  • 딕셔너리에서 값의 자리에 넣을 수도 있음
  • 즉시 실행 함수
(function() {
	var a = 10;
	var b = 20;
	console.log(a + b);
})(); // 함수 즉시 실행
  • 콜백 함수(Callback function): 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생됐을 때 시스템에 의해 호출되는 함수
  • 매개변수를 통해 전달되고 전달받은 함수의 내부에서 특정 시점에 실행
  • 주로 비동기식 처리 모델에서 사용 → 처리가 종료되면 호출될 함수(콜백 함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백함수 호출

DOM

  • Document Object Model
  • 객체 지향 모델로 구조화된 문서를 표현

QuerySelector

  • getElementById: id 속성으로 검색
  • getElementByClassName: class 속성으로 검색
  • getElementByTagName: 태그 이름으로 검색

innerHTML

  • 내부 HTML 코드를 JS 코드에서 변경할 수 있음

outterHTML

  • innerText, outerText
  • 코드가 아니라 문자열 그 자체로 인식
profile
최지홍
백엔드 개발자가 되자!
이전 포스트

HTML, CSS

다음 포스트

JavaScript(2)

0개의 댓글