nomad coder의
바닐라 JS로 크롬 앱 만들기강의를 들으며 정리한 내용입니다. javascript의 기초 내용을 정리했습니다.
바닐라 JS로 크롬 앱 만들기
Data type
1
2
3
"hello"; // string
32; // integer
3.2; // float
숫자와 문자에 대한 data type은 기본적으로 integer, string이 있다. string은 문자열이며 +연산자로 문자들을 연결할 수 있다. 숫자 형태는 정수인 integer와 float이 있다. 숫자 형태는 사칙 연산 기호로 모두 연산이 가능하다.
Variable
1
2
3
4
5
const a = 3;
const name = "lee";
let letA = 5;
letA = 7; // 변수 업데이트
javascript는 const와 let으로 변수를 선언할 수 있다. const는 constant(불변) 변수이고, 변수를 업데이트 하고 싶은 경우에는 let을 사용하면 된다.
let은 최초 변수 선언 시에만 사용하며, 변수 값을 다시 업데이트 할 때는 let을 사용하지 않는다.
Boolean
1
2
3
4
5
6
7
8
9
10
11
// boolean
// user log in?? - true or false
const amIFat = true;
// nothing here
// null은 자연적으로 발생하지 않는다
const none = null;
// undefined
// 메모리에 존재하지만 값이 정의되지 않음
let something;
boolean타입은 true와 false가 있고, 값이 비어있는 경우인 null이 있다. undefined는 메모리에 존재하지만 값이 정의되지 않은 경우이다.
Array
1
2
3
4
5
6
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
// get value from array
console.log(daysOfWeek[5]);
// add element
daysOfWeek.push("push");
배열을 선언하는 방법은 다른 프로그래밍 언어와 비슷하다. []안에 값들을 나열한다. 배열에서 값을 얻기 위해 daysOfWeek[5]와 같이 배열의 인덱스를 사용한다. push()를 사용해 배열의 마지막에 원하는 값을 추가할 수 있다.
Object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// object
const player = {
// write property
name: "nico",
points: 10,
fat: true,
};
console.log(player["name"]);
console.log(player.name);
// update property
// object가 constant인 것이며, property는 수정이 가능하다
player.fat = false;
// add property
player.lastname = "potato";
console.log(player);
object는 파이썬에서 딕셔너리와 같은 역할을 한다. {}를 사용해 정의할 수 있다. 위 코드에서 player는 object, player를 구성하는 값들은 property라고 한다. object가 const로 선언이 되어 있어도 property는 수정이 가능하다. 원하는 property의 값을 호출하고 싶으면 player[]이나 player.name으로 호출할 수 있다. 같은 방법으로 property를 추가할 수 있다.
Function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function hello(nameOfPerson, age) {
console.log("hello my name is " + nameOfPerson);
console.log("my age is " + age);
}
hello("lee", 20);
const player = {
name: "nico",
sayHello: function (otherPersonsName) {
console.log("hello " + otherPersonsName);
},
};
console.log(player.name);
player.sayHello("lynn");
함수는 function name() {}형태로 구성된다. name(params)처럼 괄호 안에 인자를 받아 함수 안에서 사용할 수 있다. 함수의 호출 방식은 name()이다.
한 가지 특이한 점이 있다면, object내에서도 함수 선언이 가능하다는 것이다. property로 함수를 사용할 수 있다.
javascript의 데이터 타입과 간단한 연산, 배열, 함수에 대해 정리했다. 여기 까지가 바닐라 JS로 크롬 앱 만들기강의 2.10 까지의 내용이다.