<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<script type="text/javascript">
let ingoo; /* let 변수명 */ /* ingoo를 변수로 선언해주었다 */
/*
= (대입연산자)
*/
ingoo = 427;
console.log(ingoo); // 출력문
let number;
number=10;
console.log(number);
let bool;
bool = true;
console.log(bool);
bool = false;
console.log(bool);
let str;
str = "안녕하세요";
console.log(str);
str = '안녕하세요2';
console.log(str);
str=`안녕하세요3`;
console.log(str);
let arr;
arr = [1, 2, 3];
console.log(arr);
console.log(arr[1]);
arr = ["짱구", "철수", "훈이"];
console.log(arr[0]);
let obj;
obj = {
name:"짱구",
age:7,
height:137
};
console.log(obj);
console.log(obj.name);
console.log(obj.height);
// 연결연산자
console.log("hello"+"world");
console.log('안녕'+1);
console.log(typeof(1+'안녕'));
// 비교연산자
// 비교연산자 결과물이 boolean 타입으로 반환
// > , < , >= , <=
console.log(1==1);
console.log(1>2);
// 논리연산자
// &&(ANd) -> 값(boolean) && 값(boolean)
// ||(OR) -> 값 || 값
// ! (NOT) -> !값
// 비교 연산자가 두 수 를 비교하여 boolean 타입으로 반환
// 논리연산자는 두개의 boolean을 확인해서 반환해주는 연산자.
// if문 (조건문)
/*
내가 만든 데이터가 true일 경우에 처리하는 방식과
내가 만든 데이터가 false일 경우 처리하는 방식을
다르게 하고 싶을 경우
*/
let num1 = 1;
let num2 = 2;
if(num2>num1){
console.log('안녕하세요')
} else {
console.log('내일봐여~')
}
for(let i=0; i<10; i++){
console.log(i)
}
for(let i=0; i<11;){
console.log(i)
i++
}
</script>
</head>
<body>
</body>
</html>브라우저에서 작동하는 자바스크립트의 경우 html을 이용해 작성이 가능하다.
html에서 JavaScript를 작성하기 위해서는 <head>부분에서 <script></script>를 이용해서 JavaScript를 작성한다.
프로그래밍 공부를 하기 위해서는 예약어라는 개념을 알아야 한다. 예약어란 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들이다. 쉽게 풀어서 얘기하자면 프로그래밍 언어에서는 내 마음대로 작성해도 되는 부분과 정해진 대로 작성해야 되는 부분이 존재한다. 여기서 정해진 대로 써야되는 부분이 바로 예약어이다.
처음으로 알아볼 예약어는 JavaScript에서 변수를 선언할 때 사용하는 예약어로 JavaScript ES6에서 변수를 선언할 때는 let 과 const를 사용한다. let과 const를 사용해 변수를 선언하고 대입연산자 '='을 이용해 변수값을 대입하게 된다. 사용방법은 다음과 같다.
- let 변수명 = 변수값
- const 변수명 = 변수값
let val = 'value' 라고 선언했을 때 let은 예약어, val은 변수명, 'value'는 변수값이 된다. 이로써 let이라는 예약어를 사용해 변수를 선언하게 된 것이다. 주의할 점은 변수명을 선언할 때는 시작을 숫자로 할 수 없다는 사실이다. let과 const는 둘 다 변수를 선언하는 선언문이며 둘 다 호이스팅(Hoisting)이 적용된다. 둘의 차이는 다음과 같다.
- let : 변수 중복 선언 불가. 재할당 가능.
- const : 변수 중복 선언 불가. 재할당 불가. (객체는 재할당 가능)
let과 const의 두드러진 차이점은 재할당 여부에 있다고 볼 수 있다. const의 경우 재할당이 불가능한데 그렇다고 이것이 '불변'을 의미하는 것은 아니다. const의 경우 원시 값은 재할당이 불가능하지만, 객체에서는 재할당이 가능하다.
// 원시값의 재할당
const name = 'ingoo'
name = 'jjw' // output: Uncaught TypeError: Assignment to constant variable.
// 객체의 재할당
const name = {
eng: 'ingoo'
}
name.eng = 'jjw'
console.log(name) // output: { eng: "howdy" }let과 const를 사용해 변수를 선언한 후 변수에 값을 넣으려고 할 때 집고 넘어가야 하는 부분이 있다. 바로 데이터 타입이다. 변수에 값을 할당할 때 할당된 값들에는 데이터 타입이라는 개념이 존재하게 된다. 데이터 타입은 크게 2종류로 구분되는데 변수 하나에 하나의 데이터를 저장하는 타입과 변수 하나에 여러개의 데이터를 저장하는 타입으로 구분된다.
< 하나의 데이터를 저장하는 데이터 타입 >
- 숫자
- boolean(불리언) : 참, 거짓만 저장할 수 있는 데이터 타입 / true false
- 문자 : 3가지 방식이 존재 ' ' , " " , ` ` 3가지 형태를 사용해서 글자라고 선언해줘야 한다.
< 여러개의 데이터를 저장하는 데이터 타입 >
- 배열
- 객체
배열은 대괄호 [ ]을 사용해서 배열 데이터를 입력한다. 배열에서는 인덱스 개념이 존재하는데 인덱스의 순서는 0부터 시작한다. 다음 예를 살펴보자.
let arr;
arr = [1, 2, 3]
arr[1] = 2let을 통해 선언한 arr 배열에서 두번째 데이터를 가져오고 싶으면 인덱스를 이용해 arr[1]로 입력하면 된다. 인덱스를 사용할 때는 변수명[인덱스]의 형태로 사용한다.
배열이 데이터를 순차적으로 저장하는 형태를 띠었다면 여러개의 데이터를 넣어서 저장할 때 구분값을 넣어주는 개념이 바로 객체이다. 배열에는 순서와 값만 저장했다고 하면 객체는 값 하나하나마다 이름을 지정해 주는 개념이라고 생각하자. 객체를 선언할 때는 중괄호 { }를 사용한다. 그리고 key : value 형태로 데이터를 입력한다. 파이썬의 딕셔너리와 비슷한 형태를 띠고 있다.
배열에서와 마찬가지로 객체에서도 하나의 변수만 지정하고 싶은 경우가 존재할 수 있다. 배열에서는 인덱싱을 사용했다면 객체는 key를 사용해서 특정 변수를 지정한다. 객체의 key : value 형태에서 key가 변수를 가리키는 역할을 수행한다. 데이터를 불러낼 때는 변수명.key의 형태로 불러낸다. 예제 코드를 살펴보자.
let obj;
obj = {
name: '짱구',
age: 7,
height: 137
}
console.log(obj.name); // output은 '짱구'obj.name → obj라는 변수 안에 있는 name이라는 key의 value를 출력해 달라는 뜻.
JavaScript에서 작성한 코드의 결과물을 출력해서 보고 싶을 때 사용하는 명령어가 있는데 이는 바로 console.log( )이다. 파이썬에서의 print( )와 동일한 기능을 한다고 생각하면 된다. console.log( ) 의 괄호 안에 출력하고 싶은 변수를 넣어주면 연결된 브라우저의 console창에 결과물이 출력되는 것을 확인할 수 있다. console.log( )는 브라우저에서 실행할 수 있게 해주는 일종의 모듈같은 개념이라고 생각하자.
< 정리 >
- 변수선언 : let , const
- 대입연산자 =
- 출력문 : console.log( )
- 변수 선언의 형태 : let 변수명 = 변수값 (데이터 타입)
데이터 타입을 크게 2가지로 나눌 수 있다.
변수 하나에 하나의 데이터
- 숫자형태 (number)
- 불리언 (boolean)
- 문자형 (string)
변수 하나에 여러개의 데이터 (군집형)
- 배열 (array) : 인덱스 개념.
- 객체 (object) : key:value 개념.
etc) 변수는 메모리에 저장된다.
< 연산자 >
JavaScript에서 변수들 간의 연산에 사용되는 연산자에 대해 알아보자.
- 산술연산자 ( + , - , * , / , % , ... )
- 연결연산자 + : 앞에 있는 데이터 타입에 따라서 연산자의 역할이 달라진다는 것에 주의하자. 문자열 + 문자열의 경우 문자를 연결해주는 연결연산자 +가 사용된 것이다.
- 비교연산자 ( < , > , <= , >= ) : if문과 for문에서 주로 사용.
- 논리연산자 ( && , || , ! )
- 비교연산자의 결과물은 boolean 타입으로 반환된다. 비교연산자가 두 수를 비교해서 boolean 타입으로 반환.
- 논리연산자는 boolean 타입에서 사용한다. 논리연산자는 두개의 boolean을 확인해서 결과값을 반환해 준다.
- console.log(1<2 && 3>2) 는 console.log(true && true)이므로 true값 반환.
'JavaScript' 카테고리의 다른 글
| JavaScript - 콜백(callback) (0) | 2022.01.10 |
|---|---|
| JavaScript - 얕은복사 , 깊은복사 (0) | 2022.01.07 |
| JavaScript기초 - 정리(4) 배열(array) , 객체(object) (0) | 2022.01.04 |
| JavaScript기초 - 정리(3) 변수 선언 , 이스케이프 문자 , else if문 , 함수 (0) | 2022.01.04 |
| JavaScript기초 - 정리(2) if문 , for문 , 함수 (0) | 2022.01.04 |