[JS] JavsScript 기초
Updated:
개요
JavsScript에 대한 기본적인 내용과 사용 방법들을 정리한다.
JavsScript 기초
- css와 동일하게 내부 스크립트 방법과 외부 스크립트 파일 방법으로 구분되어진다.
내부 스크립트 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
<body>
<script>
console.log("Hello, World!");
</script>
</body>
</head>
</html>
외부 스크립트 방법
- 확장자가 js인 파일을 따로 작성해서 연결 시켜준다.
- 다음은 js파일과 html파일의 예시이다.
console.log("Hello, World Out!");
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
<body>
<script src="main.js"></script>
</body>
</head>
</html>
- 스크립트 태그는 바디 태그가 끝나기 전에 사용하는 것이 좋다.
변수
암시적 선언
- 암시적 선언이란 자바스크립트에서 제공하고 있는 변수 선언 키워드인 var, let, const 키워드를 사용하지 않고 변수를 선언하는 것이다.
명시적 선언
var num = 3;
console.log(num);
let str = "a";
console.log(str);
const constant = 10;
console.log(constant);
var
- 변수의 중복 선언이 가능하다.
var num = 10;
console.log(num);
var num = 20;
console.log(num);
let
- var와는 다르게 let은 중복 선언이 불가능하다.
var의 예시처럼 하면 에러메세지가 뜬다!
const
-
const 또한 let처럼 중복 선언이 안된다.
-
변수에 할당된 데이터가 변경되지 않는다.
따라서 var, let 키워드는 변수, const 키워드는 상수선언이다.
자료형 (Datatype)
-
자료형이란 값이 가질 수 있는 여러가지 유형을 구분한 개념이다.
-
원시 타입과 참조 타입으로 나누어진다.
| 원시 타입 (primitive type) | 참조 타입 (reference type) |
|---|---|
| 숫자형(number) 문자열형(string) 논리형(boolean) null undefined Symbol |
배열(array) 객체(object) 함수(function) |
원시 타입
let number = 1;
let str = "abc";
let bool = true;
let undi = undefined;
let nul = null;
let symbol = Symbol();
참조 타입
let array = [];
let obj = {};
let func = function(){};
숫자형
- 자바스크립트는 모든 형태의 숫자형을 허용한다.
let integer = 10;
let hex = 0xa;
let binary = 0b1010;
let octal = 0o12;
console.log(integer, hex, binary, octal);
let negative = -10;
let indices = 1.0e1;
let double = 10.12;
console.log(negative, indices, double)
- 무한일 경우 infinity, 숫자가아닌 경우 NaN도 할당될 수 있다.
let sum = 0.1 + 0.2;
condole.log(sum);
위 코드를 실행하면 결과는 다음과 같다.
0.30000000000000004
소수점 연산을 할 때 종종 근사치가 나오는 경우가 나올 수 있다.
문자열형
- 문자열은 큰따옴표 혹은 작은따옴표로 표현된 값이다.
let str = "abc";
let str2 = 'def';
concole.log(str, str2);
undefined, null
- 자바스크립트는 변수를 선언하고 할당하지 않을 때 undefined라는 변수를 자동적으로 할당한다.
let num;
console.log(num);
- null은 명시적으로 변수 공간이 비어있음을 나타낼 때 사용자가 할당한다.
let num = null;
console.log(num)
논리형 (boolean)
- true 혹은 false 두가지 값을 갖는다.
let bool1 = true;
console.log(bool1)
let bool2 = 5 < 7;
console.log(bool2);
- 논리적인 표현식으로도 표현이 가능하다.
배열 (array type)
- 하나의 변수에 여러개의 데이터를 할당할 때 사용한다.
let arr1 = [10];
console.log(arr1);
let arr2 = [10, 20];
console.log(arr2[1]);
let arr3 = [10, "abc", true, null, undefined, function(){}, {}];
console.log(arr3);
객체 (object)
- 아래 코드는 배열을 통해 점수를 표현한 코드이다.
//국어, 영어, 수학, 과학 점수
let student1 = [90, 70, 80, 60];
console.log(student1[0]);
console.log(student1[1]);
console.log(student1[2]);
console.log(student1[3]);
- 객체는 키와 값으로 이루어져서 위와는 다르게 과목별로 점수를 저장할 수 있다.
let student1 = {
koreanScore:90,
englishScore:70,
mathScore:80,
scienceScore:60
};
console.log(stuent1["koreanScore"]);
console.log(student1.englihshScore);
함수 (function)
함수란 인련된 공통의 작업을 처리하기 위해서 연관된 코드들을 모아 놓은 자료형을 뜻한다.
함수 선언식 방법과 함수 표현식 방법으로 나누어진다.
함수 선언식
function gugudan(){
console.log("3 * 1 = 3")
console.log("3 * 2 = 6")
}
gugudan();
함수 표현식
const [변수명] = function printHello(){
}
const gugudan = function gugudan(){
console.log("3 * 1 = 3")
console.log("3 * 2 = 6")
};
gugudan();
함수에 이름이 없을 수도 있는데 이때에는 익명함수라고 부른다.
인수와 매개변수
function printBanana(){
console.log("banana")
}
printBanana();
function printApple(){
console.log("apple")
}
printApple();
위의 코드를 간단하게 하려면 인수를 사용하는 것이다. 위를 간단히 수정하면 다음과 같다.
function printFruit(name){
console.log(name);
}
printFruit('banana')
return
return은 함수를 호출한 부분으로 데이터를 전달하기 위해서 사용된다.
function sum(number1, number2){
return number1 + number2;
}
const sum_result_1 = sum(10, 20);
Leave a comment