데이터타입 2진수데이터를 어떻게 해석할 지
-값을 보고 동적으로 변해집니다
데이터타입 변수
원시타입pass-by-value
-undefined 새로운공간을 차지
숫자 2진수 8진수 16진수
-10진수로 표시가 된다
var integer = 10;
var double = 10.12;
var negative = -26;
var binary = 0b100001;
var octal = 0o101;
var hex =0x41;
console.log(binary);
console.log(octal);
console.log(hex);
console.log(binary === octal);
console.log(octalk === hex);<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<script src="./JS part4.js"></script>
</head>
<body></body>
</html>var str = "string";
str = 'string';
str = `string`;
var str = 'Hello';
str = 'meta'var str = "string";
str = 'string';
str = `string`;
var str = 'Hello';
console.log(str);
str = 'meta';
메모 주소만 바뀐것
str = str.substring(0, 3 );
앞에 있는숫자 시작위치 3남길 개수
str =str.to UpperCase();
var x = true;
var y = false;
console.log(typeof x;)
console.log(typeof y);var test;
console.log(test);
->undefined
var x = true;
var y = false;
console.log(typeof x;)
console.log(typeof y);
var test;
console.log(test);undefuned 선언되었지만 변수값이 없는경우
null 없다는것 표시
var adress = “Seoul"
var x;
x = 10;
x +=5;
x -=5;
x *= 5;
x /=5;
x %=5;
var str ="My name is cho"
str += "test"
console.log(str);x +=5
x+5=
-삼항은 안써도 됩니다…
if문 사용
|| 둘중하나 true면 true
//if문
if(num>0){
kind="양수"
}else{
console.log(kind);
}
console.log(kind)if (score >= 90) {
console.log("A")
} else ifvar foo;
console.log(type of foo);
foo =3;
console.log(typeof foo);
foo ="Hello";
console.log(typeof foo);
foo = true;
console.log(typeof foo);
foo = null;
console.log(typeof foo);
foo = symbol();
console.log(typeof foo);var x = 5. result;
result = x++
console.log(result.x);
result = X--;
console.log(result,x);
result = --x;
console.log(result,x)선++x
후x—
\
var x= 10;
var y = x-- +5 +--x;
console.log(x,y)8,23\
표기법
-dash-case(kebob)
snake_case
camelcase
pascalcase
표기법
HTML, CSS
Javascript
HTML CSS
Javascript
제어문
주어진 조건에 따라 코드블록을 실행(조건문)하거나 반복문
whrjsans
if{}else
if (menu == 'sandwich'){
console.log("menu good")
} else if (menu=='sandwich'||
menu=='pasta'||
menu=='salad'||
menu=='macaroon')
{console.log("menu soso")}
else {
console.log("menu bad")
}var month = 2;
var month{
case 1;
montName = 'January'
case 2;
montName = 'February'
case 3;
montName = 'March'
break;
default;
montName = 'Invaild month'
}
console.log(monthName)case가 같은값
break
var menu = "sandwitch"
var menu{
case "피자."
menu == "mednu good"
case "센ㄷ,"
menu == "mednu good"
case "sandwitch"
menu == "mednu good"
case 4;
menu == "mednu good"
break;
default;
menu =='메뉴 음슴~'논리곱으로 사용할때 case에 넣어
var gendr = "남성"
var msg =""switch(gender)
case=남성
case=남자
case=남
break
여자~
연산자를 사용가능
var menu =4;
swtich(num %2){
casefor(초기화식; 조건식; 증강식;){
}
for(var i=0; i<2; i++){
console.log(i)for (var i =0; i <2; i++){
console.log(i);
}
i = 0 ,true true, false i=1 i=2
for(var i =0; i<10, i++){
document.write("안녕하세요")
document.write("<br>")
}시작이 10이기 때문에 10번
콘솔은 나중에 알게주겠고 문서에만 저장
줄바꿈
for(var i =0; i<10, i++){
document.write("안녕하세요")
document.write("<br>")
}
for(var i =1; i<11, i++){
console.log(i+"번째 반복문장입니다")
}// for(초기화식; 조건식; 증강식;){
// }
// for(var i=0; i<2; i++){
// console.log(i)
// }for(var i=1; i<=50;1++){
if(i%2===0)
console.log(i);
}for(var i =1; i <= 6; i++){
for(var j =1; j<=6; j++){
if(i+j === 6) console.log(${i},${j})
}
}for문이 돌고 첫번째 주사위가…
if문사용해야 끝난댜
콘솔로그있음 블록 생략쓰
for(var i =1; i <= 10; i++)
{console.log("======="+i단"======"};
for(var j =1; j<=10; j++)
{console.log($[i]+"*"+$[j]+"="+i*j);
}
console.log
조건없으먄 이프 없어도 됩니당for (var i = 1; i <= 6; i++){
for (var j = 1; i <= 6; j++)}
{ document.write("*");}
{document.write("<br>")};
// for (var i = 1; i <= 6; i++) {
// if (i <= 5) console.log("*****");
// }for-횟수를 알때
while-무한루프
var person =
{"first name" : "Gil-dong",
"last name" : "Hong",
gender: "male"
};
person[first name"]="Dangmu"
console.log(person("first name")))person.age= 20;
console.log(person)delete person.gender;
console.log(person);var foo = function multiply(a,b){
return a* b;
};
var bar = function (a,b){
return a*b;
};
console.log(foo(10,5));
console.log(multiply(10,5))function add(x,y){
return x+y;
}
console.log(add(2))
console.log("a","b")
count = increase(count);
console.log(count);
count = increase(count);
console.log(count);Function.Person(name,gender){
this.name =name;
this.gender = gender;
this.sayhello = function () {
return "hi my name is "+ this.name;
};
}
var person1 = new person("Lee","male")
var person2 = new person('Kim','female')
console.log(person.getName();
cost anotherPerson={
name: "Kim",
};
anotherPerson.gerName = person.getName;
console.log(anotherPerson).getName;
console.log(anotherPerson.getName;
const getName = person.getName;
console.log(getName())
}this가 어떤것을 봐라보는지를
생성자 함수
미래에 생성할 인스턴트가 바인딩된다
funcrion Circle(radius){
this.radius = radius;
this.getDimeter = funcrion(){
return 2 * this.radius;
}
}
const circle = new circle(5);
console.log(circle.getDimeter)funcrion Circle(radius){
this.radius = radius;
this.getDimeter = function(){
return 2 * this.radius;
}
}
const circle = new circle(5);
console.log(circle.getDimeter)funcrion Circle(radius){
this.radius = radius;
this.getDimeter = funcrion(this){
return 2 * this.radius;
}
}
const circle = new circle(5);
console.log(circle.getDimeter)this를 인수를 가지고
생성자함수는 this를 할당
this가 암시적으로 반환됨
function.prototype.apply/call/bind첫번째 인수.
var x = 'global'
function foo(){
var x = "local";
console.log(x)
}
foo();
console.log(x);var x = 'global'
function foo(){
var x = "local";
console.log(x);
}
foo();
console.log(x);→global이나온다
var a =10;
(function () {
var b =20;
})();
console.log(a);
console.log(b);var x = "global";
function foo(){
var x = "local"
console.log(x);
}
foo();
console.log(x);var x ="global";
function foo(){
var x ="local";
console.log(x);
function bar(){
console.log(x);
}
bar();
}
foo();
console.log(x);var x = 10;
function foo(){
var x = 100;
console.log(x);
function bar() {
x =1000;
console.log(x);//가까운것 1000
}
bar();
}
foo();
console.log(x); //10이 나오는 이유는? 같은 스코프를 검색하기 때무니다var x =1;
function foo()
{ var x =10;
bar();
}
function bar(){
console.log(x);
}
foo();
bar();
//정의가 중요함
함수가 어디서 호출되는가가 스코프를 결정하는것이아니라
정의가 어디서 ㅗ댔는지 전역에서 정의
var color = 'red';
function foo() {
var color = 'blue'; // 2
function bar() {
console.log(color); // 1
}
return bar;
}
var baz = foo(); // 3
baz(); // 4
변수 저장된 값을 참조하기 위해 사용
가독성
var 변수의 선언 x
x =8;
값
var str = ‘Hello Meta’;
연산자 하나이상의 표현식 대상 산술 할당 비교 논리 연산
연산의 대상 피연산자
주석 /* */ 결정
표현식 하나의 값
조건문,반복문
문 표현식
표현식을 통해서 평가한값 실제로 명령
함수
-집합을 정의한 코드 블럭
입력 함수 출력
객체 자바스크립트 모든 것이 객체이다
키(이름)값으로 구성된 프로퍼티의 집합
this.name
var arr = [1,33,47,102,155]
데이터 타입 변수
7개의 데이터 타입 제공
원시타입 변수가 선언될때 score = 80;
숫자-하나의 숫자타입만 존재
작은따옴표 큰따옴표
불리언 true false
symbol-객체타입
참조에 의한 전달
-주소값을 그대로 가지고있음
변수
var let const
데이터를 기억하여 필요한 때 재사용 고유의 이름인 식별자를 명시
키워드를 사용 선언
할당 연산자를 사용해 갑을 할당
변수의 선언
4*5의 값을 구해보자
-456
자바는 동적타입이다
변수 호이스팅
var선언문이나 function선언문 해당scope의 선두로 옮겨져 동작
값은 호스팅 되지않는다.
선언단계-스코프가 참조하는대상
var키워드는 선언과 초기환 단계할당
초기화단계
할당단계
var키워드로 선언된 변수의 문제점
중복되는것이 많다
연산자
하나의값
산술 연산자
NaN을 반환-산술연산을 할 수 없는경우
다음은 객체를 만드는 법이다.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
위의 예제에서 egoing은 key가 되고, 10은 value가 된다. 아래는 객체를 만드는 다른 방법이다.
var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
아래와 같은 방법으로 객체를 만들수도 있다.
var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
객체를 만들었으니 이제는 객체에서 필요한 값을 가져와보자. 다음은 sorialgi라는 이름(key)으로 저장된 값을 가져오는 법이다. 결과는 80이다.
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades['sorialgi']);
다음 방법으로도 객체의 속성에 접근 할 수 있다.
alert(grades.sorialgi);
다음은 객체에 저장된 데이터를 기준으로 반복작업을 하는 방법이다.
객체에 접근할때
동등 / 비교 연산자 좌항과 우항의 피연산자를 비교 타입을 일치시킨후 비교
isNaN Nan인지 알 수 있는
삼항 조건 연산자
var result =x%2 ? ‘홀수’ : ‘짝수’;
ㅣswitch 문 case문으로 실행순서를 이동
반복문
평가 결과가 참인 경우 코드블록을 실행
조건식을 참인 경우 코드 블로 실행for문 ‘
for(var i = 0; i< 2; i++)
console.log(i);코딩 테스트 -빈객체 user만들기
잘따르기 값은같아도 구현하는것이 다르지 않기
스코프
function printName(firstName){
var result = inner();
console.log(typeod inner)
}
function inner(){
return "inner value";
}
printName();함수호이스팅
var inner;
inner = function()
foo
execution context실행컨텍스트 - 지역변수 선언
메서드 호출→ console.leg(a+x_y)
const x= 1;
function foo(){
const y =2;
function bar(){
const z = 3;
console.log (x+y+z);
}
bar();
}
foo();const x = 1;
function outerFunc() {
const x =10;
function innerFunc() {
console.log(x);
}
innnerFunc();
}
outerFunc();const x = 1;
function outerFunc() {
const x =10;
function innerFunc() {
console.log(x);
}
innnerFunc();
}
outerFunc();function foo()
const x = 1;
const y = 2;
function bar(){
const z = 3;
console.log(z);
}
return bar;
const bar = foo();
bar();et num = 0;
const increase = function(){
return ++num;
};
console.log(increase());
console.log(increase());
console.log(increase());let num = 0;
const increase = function(){
return ++num;
};
console.log(increase());
console.log(increase());
console.log(increase());let num = 0;
const increase = function(){
return ++num;
};
console.log(increase());
console.log(increase());
console.log(increase());배열
대괄호 - 여러값을 순차적으로 나열한 자료구조
요소마다index가있음
0부터시작
배열의 길이 -length 프로퍼티
객체-프로퍼티키 //배열 -인덱스
length 연속적으로 위치하지 않고 일부가 비어있는 배열 희소배열
array 생성자 함수
프로퍼티키 -객체에 프로퍼티추가
배열메서드
const arr =[1,2,2,3]
index 0f →2
includes-요소가 있나 없나const arr =[1,2];
let result = arr.push(3,4,6);
console.log(result);
console.log(arr);const arr = [1,2];
let result = arr.pop();
console.log(result);
console.log(arr);const arr = [1, 'orange', {name: "lee"}]
arr.push(5);
console.log(arr);
const popItem = arr.pop();
console.log(popItem);
console.log(arr);const arr =[1,2]
let result = arr.unshift(3,4);//unshift는 앞쪽에 붙음
console.log(result);
console.log(arr);인수로 전달된 값들은 마지막 요소로 추가
const arr1 = [1,2]
const arr2 =[3,4];
let result = arr1.const(arr2);//합침
console.log(result);
rewult = arr1.contcat(arr2,5);//마지막배열 새로운배열로,,,
console.log(result);
console.log(arr1);### Array.prototype.splice
두번째에 100이들어감
결과값출력하고 - slice 자신을 포함하는지 확인### Array.prototype.join
배열로 되어 있는값들을 문자로 빼냄### arr.reverse();
첫번째 인수 2 3 -본이미포함
fill은 위험함-자료구조나 알고리즘(원본배열을 바꾸기 때문에)
### 배열고차함수
함수를 인수로 전달받거나 함수를 반환
조건문 반복문을 제거(복잡성)을 제거
변수사용을 억제 (상태 변경을 피함)
순수함수를 통해 부수효과 억제
fruits.sort();
console.log(points); →함수에 인수를,,
a-b
b-aconst numbers = [1,2,3];
let pows = [];
for (let i =0; i< numbers.length; i++){
pows.push(numbers[i] ** 2);
}
console.log(pows);const numbers = [1,2,3];
let pows = [];
for (let i =0; i< numbers.length; i++){
pows.push(numbers[i] ** 2);
//for (let i =0; i< numbers.lemgth; i++){
//pows.push(numbers[i] **2);
}
}
console.log(pows);map은 반복문이지만 배열로 나온다
const numbers = [1,2,3,2,4,5];
const odds = numbers.filter((item) => item % 2 === 0);
console.log(odds)const values = [1,2,3,4,5,6];
const average =value.reduce((acc cur, i {length}) => {
return i == length -1 ? (acc +cur)/ length : acc +cur;
},0);
console.log(average);const numbers = [1,2,3,2,4,5];
const odds = numbers.find((item) => item % 2 === 0);
console.log(odds)
const values = [1,2,3,4,5,6];
const average =value.reduce((acc cur, i {length}) => {
return i == 5? (acc +cur)/ length : acc +cur;
},0);
ac cur i length return
0 1 0 6 1
1 2 1 6 3
3 3 2 6 6
console.log(average);필요에 따라서 데이터를 뽑아내야함
acc[cur] ||0 +1 →바나나1 애플1 오렌지 1
for문 → 평균구하기
cur-price
→reduce method 초기값
찾는값이 하나면 find
스프레드 문법
// console.log(....[1,2,3])
// console.log(..."Hello")
// console.log(...(a :1, b :2 ))
// // const list =.... [1,2,3]… rest파라미터
spread 뿌려줌 rest 받아온것을 배열로 감싸버림
slice 배열을 복사
merged → 변수
함수호출… 병합
오랜만에 js문법을 복습하였다 java문법을 보다 복습하니 조금 새로운느낌이다 클론코딩 하면서 더복습해야지
