[포스코X코딩온] JS_01 데이터/연산/함수

내장 방식

 <script>      alert("head 안");    </script>

어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 /  head 와 body 사이 / body 아래 등

- 간단하게 생성가능

- 특정 페이지에서만 작동하는 기능일 경우 내장 방식만 따로 구현 가능

 

링크 방식

<script src="./index.js"></script>

java script 파일을 따로 만들어서 링크를 거는 방식 (ex.css)

어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 /  head 와 body 사이 / body 아래 등

- js 코드의 양이 많으면 파일로 따로 관리하는 것이 더 유용

- 같은 기능을 다른 페이지에서 사용하고 싶을 때 링크만 걸어서 간단하게 사용 가능

- 유지 보수 용이성 편

---

데이터 종류(자료형)

String 문자형 데이터 

문자와 변수를 동시에 사용할 때

- 메소드의 매개 변수로 넣어서 사용 

console.log("문자", 변수 "문자");
console.log("내 이름은", myName, "이고 이메일은", email, "입니다.");​

- + 연산자로 변수를 문자로 변환한 후 더하기

console.log("문자" + 변수 + "문자");
console.log("내 이름은 " + myName + "이고 이메일은" + email + "입니다.");

- `백틱 문자 사용

console.log(`내 이름은 ${myName}이고 이메일은 ${email}입니다.`);
let jiyoung = `내 이름은 ${myName}이고 이메일은 ${email}입니다.`;
console.log(jiyoung);

 

Number 숫자형 데이터 

let number = 123;
let opacity = 0.7;
console.log(number);
console.log(opacity);
//NaN : not a number 숫자가 아니다
console.log("apple" - 3); //NaN

 

boolean 참, 거짓

let checked = true;
let unchecked = false;
console.log(checked); //true
console.log(unchecked); //false

 

undefined 미할당 데이터

let undef;
console.log(undef); //undefined

 

Null 의도된 빈 데이터

let empty = null;
console.log(empty);   //null

 

Array 배열 

let fruits = ["orange", "pineapple", "grape", "apple"];
let fruits2 = new Array("orange", "pineapple", "grape", "apple");

console.log(fruits[0], fruits[1]);  //orange pineapple

let date = [1, "ji young", false, null, undefined];
console.log(date[4]); //undefined

// array : 2차원 배열
let korean = [
  ["가", "나", "다"],
  ["라", "마", "바"],
  ["사", "아", "자"],
];

console.log(korean[0][0]);  //0번째 줄 0번째 요소, 가
console.log(korean[1][1]);  //1번째 줄 1번째 요소, 마

//3차원 배열
let nums = [
  [
    [1, 2, 3],
    [4, 5, 6],
  ],
  [
    [7, 8, , 9],
    [10, 11, 12],
  ],
];

console.log(nums[1][0][1]); //1번째 배열>0번째 줄>1번째 요소, 8

 

Object 여러 데이터

let introduce = {
  name: "ji young",
  age: 23,
  study_now: true,
};
//점 표기법
//object 이름.key이름
console.log(introduce.name);  //ji young
// 대괄호 표기법
// object 이름['']
console.log(introduce["name"]); //ji young

 

typeof : 자료형 구분

console.log(typeof "문자"); //string
console.log(typeof 123);  //number
console.log(typeof true); //boolean
// 변수가 아니여도 사용 가능
console.log(typeof cat); //{}
console.log(typeof []); //object
console.log(typeof NaN); //number
console.log(typeof null); //object
console.log(typeof und); //undefined

 

형 변환

Prompt로 입력 받은 값은 "문자"로 저장된다. 

"80" + "50" ="8050" -> "8050" / 2 -> 4025

자동형변환의 문제 : 작은 프로그램은 문제가 없지마느 프로그램이 큰 거래 사이트라면 문제다. 

 

명시적 형변환 : 자동형변환이 아니라 직접 형 변환!

문자로 변환->  String();

숫자로 변환 -> Number();

//1. -> 문자 string()
let str1 = true;
let str2 = 123;
let str3 = null;

console.log(typeof String(str1)); //string
console.log(typeof String(str2)); //string
console.log(typeof String(str3)); //string
console.log(typeof str1); //boolean
console.log(typeof str1.toString()); //숫자-> 문자, string

//2. ? -> 숫자 Number()
let n1 = true;
let n2 = false;
let n3 = "123.9";

console.log(typeof n1); //boolean
console.log(typeof n2); //boolean
console.log(typeof n3); //string

console.log(typeof Number(n1)); //1
console.log(typeof Number(n2)); //0
console.log(typeof Number(n3)); //123.9

console.log(Number(n1));
console.log(Number(n2));
console.log(Number(n3));
console.log(parseInt(n3)); //123, 소수점은 버림/정수형

---

변수(variable) : 데이터 저장 (var, let, const)

var   문제점 = 중복 선

• 기존에 있는 변수 이름을 다시 선언해도 기존의 변수의 값으로 덮어 씌운다. 기존의 데이터에 덮어 씌우면, 문제가 발생한다. 
• 변수가 {블록단위}에서 끝나는 것이 아니라, 다른 코드에도 영향을 미침
• debug 어려움
• => ES6부터 let 사용 권장!

 

let :  값의 재할당 가능, 재선언 불가, 선언과 동시에 초기화하지 않아도 됨

 

const : 값의 재할당 불가, 재선언 불가, 선언과 동기에 초기화 

var은 없은 애 취급하고, 값을 재할당하는 경우가 아니라면 const를 디폴트로 사용하자!

 

변수 기본 규칙

• 이름은 문자, 숫자, &, _ 만 사용가능
• 첫 글자에 숫자는 사용 불가
• 예약어(=의미 이미 가지고 있음) 사용 불가
• 변수 이름은 알잘딱깔센
• 상수는 대문자로 선언!

---

기본 연산자

% (나머지 연산자)

• 홀수 : num % 2 == 1 
• 짝수 : num % 2 == 0

 

** (거듭제곱)

•  2** 3 = 8

 

연산자 줄여쓰기

• num = num + 5 -> num += 5
• num = num - 5 -> num -= 5
• num = num * 5 -> num *= 5
• num = num  / 5 -> num /= 5

 

증가, 감소 연산 , i++; i--;

 

비교 연산자(===)

변수의 값 뿐만 아니라 자료형까지 일치하는지 비교한다.

//== : 값만 비교
console.log(1 == 1);    //true
console.log(1 == 2);    //false
console.log(1 != 2);    //true
console.log(1 != 1);    //false
console.log("1" == 1); //type 검사X, true
console.log("1" != 1);  //false

// === : type과 값 모두 비교
console.log(1 === 1);   //true
console.log(1 === 2);   //false
console.log(1 !== 2);   //true
console.log("1" === 1); //false
console.log("1" !== 1); //true

//크기 비교 > < <= >=
console.log(2 > 1);  //true
console.log(2 >= 2); //true
console.log(2 < 1);  //false
console.log(2 <= 2); //true

 

논리 연산자, || (or) / && (AND) / ! (NOT)

|| : 하나라도 true이면 true, 모든 값이 false일 때만 false

&& : 모든 값이 true일 때 true, 하나라도 false이면 false

! : true면 false, false면 true => 반대

//논리연산자
console.log(!true); //false
console.log(!false);    //true
console.log(!!true);    //true
console.log(!!false);   //false

console.log(true && true); //true
console.log(true && false); //false
console.log(false && false); //false

console.log(false || false); //false
console.log(false || true); //true
console.log(true || true); //true
console.log(!(2 > 1)); //false
console.log(2 > 1 && -2 < 1); //true
console.log((2 > 1 && -2 < 1) || 5 > 2); //true

 

---

함수

함수 선언문 : 어디서나 호출 가능

function helloWorld1() {
  console.log("hello world1");
}

 

함수 표현식 : 코드에 도달하면 생성

let helloWorld3 = function () {
  console.log("helloworld3");
};
helloWorld3();

 

화살표 함수 

let Hello = (name) => {
  console.log(`Hi, ${name}`);
};

 

`` 백틱 문자

• 물결이랑 같이 있는 애
• 개행문자('\n')가 없어도 줄 바꿈이 가능
• 표현식 백틱(` `) 안에 ${} 사용하여 표현