📢 자바스크립트 (javascript)
웹페이지를 동적으로, 프로그래밍적으로 제어하기 위한 언어
요즘은 탈웹이라고 해서 단순 웹브라우저만을 위한 언어가 아닌 node.js와 같이 서버에서도 활용하며, 그 외 다양하게 활용가능한 언어이다.
💊 데이터형 (data type)
🔎 숫자 (number)
: 일반적으로 우리가 알고 있는 숫자('',""가 붙지 않은 숫자)
typeof 1 // "number"
typeof "1" // "string"
aleat (1 + 1) // 2
aleat (4 / 2) // 2📔 수의 연산
Math.pow(4, 2) // 16, 4의 2승
Math.round(11.4) // 11, 반올림
Math.ceil(11.3) // 12, 올림
Math.floor(11.5) // 11, 내림
Math.sqrt(9) // 3, 제곱근
Math.random() // 0 ~ 1.0 까지의 랜덤 숫자
100 * Math.random() // 0 ~ 100까지의 랜덤한 숫자
Math.round(100*Math.random()) // 0 ~ 100까지의 랜덤한 정수 🔎문자열 (string)
: '', "" 로 감싸져 있는, (') 작은 따옴표로 시작했으면 작은 따옴표로 끝나야하고, (")큰 따옴표로 시작했으면 큰 따옴표로 끝나야 한다.
✔ 숫자도 따옴표로 감싸져 있다면 문자열이다.
문자열 중간에 (') 작은따옴표가 필요하다면?
1)"pearl's world"(O)
2)'pearl's world'(X)
3)'pearl\'s world'(O) // escape (이스케이프)
여러줄로 표시하고 싶다면?
\n
"안녕하세요.\n생활코딩의 세계에 오신 것을 환영합니다"
📔 문자의 연산
alert("pearl" + " world"); // "pearl world"📔 문자의 길이 구하기
alert("pearlworld".length); // 10📔 문자열 인덱스 반환
alert("pearlworld".indexOf('p')); // 0
alert("pearlworld".indexOf('ea')); // 1, 처음문자의 인덱스 기준으로 반환하기 때문🔎 블리언 (boolean)
: true, false
💊 변수 (variable)
🔎 let 키워드를 사용
: 값을 담는 그릇이며, 그 안에 담긴 값은 변할 수 있다.
let a = 1
let b = 2
alert(a + b); // 3
a = 3
alert(a + b); // 5💊 상수 (constant)
🔎 const 키워드 사용
: 할당된 값이 변화하지 않는다. let 대신 사용
const myBirthDay = 12.12
myBirthDay = 12.14 // error, 상수는 변경할 수 없으므로 에러 발생💊 연산자
🔎 일치연산자
== : 두개를 비교하여 같은지 비교
=== : ==보다 강력한 일치연산자, 데이터 타입까지 비교한다
'1' == 1 // true
'1' === 1 // false🔎 부정과 부등호
!=, !== : ==는 같은지 비교 !== 다른지 비교
'1' != 1 // false
'1' != 1 // false
'1' !== 1 // true🔎 논리연산자
&& : and 연산자, 값이 모두 true 일 때만, true
|| : or 연산자, 값이 하나라도 true면 true
alert(true && true); // true
alert(true && false); // false
alert(true || true); // true
alert(true || false); // true💊 조건문
if(boolean){
alert('result : true');
} // boolean이 true일 때만 실행된다.if(boolean){
alert(1);
} else {
alert(2);
} // boolean 값이 true 면 '1', false면 '2'💊 반복문
for(초기값; 반복조건비교; 반복될때마다 실행되는코드) {
반복 실행될 코드
}for (i = 0; i < 8; i++) {
alert(i);
} // 0 ~ 7 까지 출력🔎 반복문 종료
break : 완전 종료
for(var i = 0; i < 10; i++){
if(i === 5) {
break;
}
document.write('coding everybody'+i+'<br />');
}
/* 출력값
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4 */
continue : 해당 부분만 종료
for(var i = 0; i < 7; i++){
if(i === 5) {
continue;
}
document.write('coding everybody'+i+'<br />');
}
/*출력값
coding everybody 0
coding everybody 1
coding everybody 2
coding everybody 3
coding everybody 4
coding everybody 6 */💊 함수 (function)
function : 코드의 재사용성을 높여줌
function 함수명 (매개변수) {
코드
return 반환값
}
함수명(인자); // 함수 호출매개변수(parameter): 인자값을 받는 변수인자 (argument): 함수로 유입되는 입력값return: 함수에서 실행된 값을 외부로 반환해주는 역활
✅ return과 동시에 함수 실행이 종료 된다.
✅ return을 하지 않으면 해당 실행 값은 해당 함수 안에서만 사용할 수 있는 값이다.
🔎 함수의 다양한 정의 방법
익명함수 : 말그대로 함수의 이름이 없는 상태로 일회성으로 함수 사용시 주로 활용한다.
var numbering = function (){
i = 0;
while(i < 10){
document.write(i);
i += 1;
}
}
numbering();💊 배열 (array)
array : 연관된 데이터를 통으로 모아서 나열한다.
[] 대괄호 사용한다.
let name = ["pearl", "jelly", "minsu"]🔎 데이터를 꺼내오는 방법
: 배열은 각각의 index(위치) 값이 지정되어 있다.
: 0부터 시작한다는 것을 잊지 말 것!
alert(name[0]); // "pearl"
alert(name[1]); // "jelly"
alert(name[2]); // "minsu"🔎 배열과 반복문
: 반복문을 통해 배열의 값을 출력할 수 있다.
let name = ["pearl", "jelly", "minsu"];
for (i = 0; i < name.length; i++) {
console.log(name[i]);
}
// name.length 는 배열의 크기를 알 수 있다. (3)
/* 출력값
pearl
jelly
minsu */
🔎 배열의 조작
: 배열은 복수의 데이터를 관리하기 위해 만들어졌다. 따라서 추가, 삭제, 수정이 가능하도록 되어있다.
📔 추가
push : 배열의 끝에 요소를 추가 하는 방법
let li = ['a','b','c','d','e'];
li.push('f');
console.log(li);
// li는 ['a','b','c','d','e','f'] 가 된다.concat: 배열에 배열을 추가 하는 방법 (복수의 요소추가)
✅ 기존 배열을 변경하는 것이 아닌 새로운 배열을 반환한다.
let li = ['a','b','c','d','e'];
li = li.concat(['f','g']);
console.log(li);
// li는 ['a','b','c','d','e','f','g'] 가 된다.unshift : 배열 맨 앞에 요소를 추가한다.
let li = ['a','b','c','d','e'];
li.unshift('z');
console.log(li);
// li는 ['z','a','b','c','d','e']가 된다.splice : 첫번째 인자 값을 기준으로 두번째 인자값만큼 요소를 삭제한 후 요소를 추가한다.
let li = ['a','b','c','d','e'];
li.splice(3, 0, 'r'); //두번째 인자값을 0으로 할 경우 요소를 삭제하지 않고 밀어낸다.
console.log(li);
// li는 ['a','b','c','r','d','e'] 가 된다.📔 삭제
shift : 배열의 첫번째 요소를 제거한 후 반환한다.
let li = ['a','b','c','d'];
li.shift(); // 'a' 반환
console.log(li);
//li는 ['b','c','d']; 가 된다.pop : 배열의 마지막 요소를 제거한 후 반환한다.
let li = ['a','b','c','d'];
li.pop(); // 'd' 반환
console.log(li);
// li는 ['a','b','c']가 된다.📔 정렬
sort : 배열 요소를 정렬하여 반환한다. 기본 정렬 순서는 문자열의 유니코드 순서이다. (정렬 순서에 대해 좀더 공부해볼 필요 있음)
let li = ['c','a','e','b','d'];
li.sort();
console.log(li);
//li는 ['a','b','c','d','e']가 된다.reverse : 역순으로 정렬하여 반환한다.
let li = ['a','b','c','d','e'];
li.reverse();
console.log(li);
//li는 ['e','d','c','b','a']가 된다.💊 객체 (object)
: key와 value로 이루어져 있는 유사 데이터 집합
🔎 기본문법
{} 사용한다. 배열 [] 과 헷갈리기 쉬우니 기억하기!
let grades = { name: 'jelly', age: 20, gender: 'male' };
//name이 key, "jelly"가 value 🔎 다양한 객체 생성 방법
let grades = new Object();
grades.name = 'jelly';
grades.age = 20;
grades.gender = 'male';let grades = {};
grades.name = 'jelly';
grades.age = 20;
grades.gender = 'male';🔎 객체와 for in 문
for in 문 : in 뒤에 배열의 key 값을 in 앞에 변수에 순서대로 할당한다.
let grades = { name: 'jelly', age: 20, gender: 'male' }
for (key in grades) {
console.log(`${key}: ${grades[key]}`);
} //key 변수 안에 grades 배열의 key 값이 순서대로 할당된다 . name, age, gender
/* 출력값
name: jelly
age: 20
gender: male */🔎 객체에 담길 수 있는 값
let grades = {
name : {'jelly': 10, 'pearl': 20, 'minsu':50},
// 객체 안에 객체가 담길 수 있음
age : 20,
show : function () {
for (let nickName in this.name) {
console.log(`${nickName}: ${this.name[nickName]}`)
//객체 안에 함수도 담을 수 있음
}
}
}
grades.show(); //grades[show](); this: (약속변수) 해당 함수를 가지고 있는 객체를 가르킨다.- 프로퍼티 (property) : 객체에 포함되어 있는 데이터
- 메소드 (method) : 객체 안에 담겨져 있는 함수
🚩 참고 자료
