자바스크립트 기본

자바스크립트의 역할

• HTML : 웹의 구조
• CSS : 꾸며주는 역할
• JS : 동적 요소

변수

• 자바와 같이 변수를 변경 할 수 있다
• 변수의 이름은 숫자로 시작할 수 없음
• 자바스크립트의 변수는 타입을 지정할 필요 없으며 타입을 인식함

var 변수이름; -> 변수 선언

변수이름 = ""; 변수 초기화 ""의 경우 String

var 변수이름 = 초기화 값

console.log(변수); -> 변수 출력

자바스크립트 적용

<script src="index.js"></script>로 스크립트 코드를 연동 시킴

변수의 타입

• JS에서 타입의 특징정적 타입(static/strong type)의 언어이를 명시적 타입 선언(explicit type declaration)이라 한다
  • 컴파일 시간에 변수의 타입이 결정되는 언어
  • 대표적으로 C,JAVA가 있다
  • 정적 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해야 한다
  • 컴파일 시에 자료형에 맞지 않는 값이 들어있을 경우 컴파일 에러가 발생
  • 타입 안정성이 올라간다
  동적 타입(dynamic/weak type)의 언어
  • 런타임 시에 변수의 데이터 타입이 결정되는 언어
  • javascript가 대표적이다
  • 타입에 대해 유연하고 편하다
  • 실행 도중 예상치 못한 타입이 들어와 사용자가 직접 에러를 확인하는 큰 문제가 발생
  **유연성 (flexibility)은 높지만 신뢰성(reliability) 낮다1) 변수를 억제하는 것이 좋다
  • 재할당 문제로 타입을 잘못 예측하여 오류를 불러올 수 있다. 변수가 많다면 오류 발생 확률이 올라간다
  2) 재할당을 하지 않는 것이 좋다
  • 계속적으로 바뀌게 되면 추적이 어렵고 타입으로 인한 오류가 일어날 수 있다..
  3) 상수를 쓰는 것이 좋다 (const)
  • 재할당, 초기화를 막기 위해 상수를 적극 활용한다.
  4) 전역 변수를 최대한 사용하지 않는다.
  • 어디서든 참조하고 변경 가능한 변수**(static 변수)**는 값이 변경될 경우 여러 코드가 참조하고 있는 변수임으로 영향을 줄 가능성이 높다
• 동적 타입의 유의사항
• 동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다.
• 변수를 선언할 때 변수에 할당할 수 있는 값의 종류(데이터 타입)을 사전에 선언해야 한다
• 자바스크립트는 동적 타입 언어이다.

문자열

• "", ''로 감싸주면 문자열로 인식 (혼용 불가)
• 특정 예약 문자의 경우 \를 통해 문자로 인식 시켜줘야 함

숫자

• 정수 , 음수 , 실수로 인식함

함수(메서드)

• 함수 값dd을 바로 사용 할 수도 있다 (자바와 동일)
• 변수 및 메서드 활용은 자바와 유사하다

/* 
	1번째 방법
*/
var func1 = function(){
	console.log("Func1");
} // 함수 정의
func1();
// 함수 호출

/* 
	2번째 방법
*/
function func1() {
	console.log("Func1");
} //함수 정의

func1(); //함수 호출

/* 
	1번째 방법
*/
var area = function(width, height) {
	return width * height;
}
area(10, 20);

// 사용 예)

var area = function(width, height) {
	return width * height;
}

//새 변수를 생성한 후, 그 변수를 console.log()로 감싸기
var result = area(10, 20);
console.log(result);
//함수 자체의 리턴 값을 console.log()로 찍기
console.log(area(10, 20));

배열

• 배열 프로퍼티 와 메서드Java의 경우 배열의 요소가 하나의 타입으로 통일 되며 서로 연속으로 인접해 있는 배열을 밀집 배열(dense array) 이라 하며
  • 자바스크립트의 배열은 배열의 객체가 아닌 배열의 기능을 할 수 있는 특수 객체이다 (인덱스를 갖는 것이 아닌 문자열(’’)의 프로퍼티 키를 갖는 형식)
  • 특정 인덱스에 빠르게 접근하는 Java와 같은 성질이 아니며 해시 테이블로 구현된 객체이다 따라서 인덱스로 접근하는 방식이 비교적 느리다, 하지만 값에 접근하는 탐색에는 Javascript의 배열이 유리하다.
  • 특정 인덱스에 데이터를 삽입, 삭제하는 작업의 경우 일반적인 배열보다 성능이 좋다.
• Javascript의 배열은 배열의 메모리 공간이 동일한 크기를 갖지 않아도 되며 연속적이지 않을 수 있는 배열 희소 배열 (sparse array) 이라 한다.
• C와 Java의 배열은 크기를 지정해야 하는 고정 길이 이지만 Javascript의 배열은 크기가 가변적이고 담을 수 있는 데이터 타입도 자유롭다.
• 배열의 경우 자바와는 다르게 배열의 크기를 선언할 필요가 없다
• 자바스크립트의 특성 상 데이터 타입도 지정 할 필요 없다.

var fruit = [“사과”, “배”, “수박”];
console.log(fruit); //데이터 확인

자바스크립트 객체

• 데이터의 경우 프로퍼티라 부르며
• 함수의 경우 메서드라 부른다

var student = {
	name : “kim”,
	age : 20,
	skills : [“자바스크립트”, “HTML”, “CSS”],
	sum : function (num1, num2) { return num1 + num2;}
}
console.log([student.name](<http://student.name/>)); [//객체명.프로퍼티명](<https://xn--i49a66y8vn.xn--2o2bo3b123b8pag5d/>)
console.log(student[‘name’]); //객체명[“프로퍼티명”]
// 위 둘은 같은 의미

undefined와 null

var unde;
var empty = null;
/*
undefined: 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)
null: 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것)
*/

boolean

var t = true;
var f = false;

데이터의 프로퍼티와 메서드

String 프로퍼티와 메서드

Java와 유사한 메서드와 인스턴스를 가지고 있음

var str1 = “Hello World”;
str1.length; // 문자열 길이 11
str1.charAt(0); // 문자 H 추출
str1.split(“ ”); // 공백 기준으로 문자 나눈 후 배열 [Hello, World]의 배열로 나뉘어짐

console.log(Object.getOwnPropertyDescriptors([1, 2, 3]));
/*
{
'0': { value: 1, writable: true, enumerable: true, configurable: true },
'1': { value: 2, writable: true, enumerable: true, configurable: true },
'2': { value: 3, writable: true, enumerable: true, configurable: true },
length: { value: 3, writable: true, enumerable: false, configurable: false }
}
'0','1','2' 가 프로퍼티 키
프로퍼티키에 value로 1,2,3를 가지고 있음
*/

var fruit = [“사과”, “배”, “포도”];
fruit.length; // 데이터 개수
fruit.push(“딸기”); // 배열 뒤에 데이터 삽입
fruit.unshift(“레몬”); // 배열 앞에 데이터 삽입
fruit.pop(); // 배열 뒤의 데이터 제거
fruit.shift(); // 배열 앞의 데이터 제거

Math 연산과 메서드

Java Math클래스와 유사함

Math.abs(-3); // 절대값
Math.ceil(0.3); // 올림
Math.floor(10.9); // 내림
Math.random(); // 임의의 숫자 출력

문자를 숫자로 파싱하는 메서드

parseInt(“20.6”); // 정수 형태의 20 변환
parseFloat(“20.6”); // 실수 형태의 20.6 변환