[항해99_JavaScript 문법 종합반] 1주차 (변수와 상수, 데이터타입, 형변환, 연산자, 함수, 스코프 및 화살표 함수)

 

 

 

 

변수와 상수

 

 

//변수, 상수
//변수 : 메모리에 저장 -> 읽어서 재사용.

// [변수 5가지 주요 개념]
//변수 이름 : 저장된 값의 고유한 이름
// 변수 값 : 변수에 저장된 값
// 변수 할당: 변수에 값을 저장하는 행위
// 변수 선언: 변수 사용하기 위해 컴퓨터에 알리는 행위
// 변수 참조: 변수에 할당된 값을 읽어오는 것.


//[변수를 선언할 수 있는 3가지 방법 : var, let, const]
// 1. var
var myVar = "Hello1"
var myVar =  "Test1"
myVar =  "GoodBye1"
// 재선언 O, 재할당 O

// 2. let
let myLet = "Hello2"
// let myLet = "Test2"  
myLet = "Goodbye2"
// 재선언X, 재할당O

// 3. const
const myConst = "Hello3"
// const myConst = "Test3"
// myConst = "GoodBye3"
// 재선언X, 재할당X

 

 

 

 

 

---

데이터 타입

 

 

//데이터 타입 _ 런타임에 결정됨.
//코드를 작성할 때가 아니라, 실제 코드가 실행될 때 데이터 타입이 결정됨.

//1. 숫자
//1-1. 정수
let num1 = 10;
console.log(num1);
console.log(typeof num1);

//1-2. 실수
let num2 = 3.14;
console.log(num2);
console.log(typeof num2);

//1-3.지수형(Exp)
let num3 = 2.5e5; //2.5 x 10^5
console.log(num3);
console.log(typeof num3);

//1-4. Nan: Not a Number
let num4 = "Hello" / 2;
console.log(num4);
console.log(typeof num4);

//1-5. Infinity (무한대)
let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5);

//1-6. Infinity (무한대)
let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);

 

// 2. 문자: string(문자열= 문자의 나열)
// '', ""
let str = "Hello World";
// console.log(str);
// console.log(typeof str);

//2-1. 문자열 길이 확인
console.log(str.length);

//2-2. 문자열 결합하기(concatenation)
let str1 = "Hello, "
let str2 = "World"
let result = str1.concat(str2)
console.log(result);
console.log(str1 + str2);

//2-3. 문자열 자르기
let str3 = "Hello World";
console.log(str3.substring(3,6)); //처음 인덱스 부터 마지막 인덱스까지
console.log(str3.slice(3,6));//처음 인덱스 부터 마지막 인덱스까지

//2-4. 문자열 검색 (해당 문자열이 시작되는 인덱스위치 찾기)
let str4 = "Hello, World";
console.log(str4.search("World"));

//2-5. 문자열 대체
let str5 = "Hello, World";
let result1 = str5.replace("Hello","JavaScript");
console.log(result1);

// 2-6. 문자열 분할 -> 배열 결과 반환
let str6 = "apple, banana, mango";
let result2 = str6.split(",");
console.log(result2);

 

 

//불리언(Boolean)
//true, false
let bool1 = true;
let bool2 = false;

console.log(bool1);
console.log(typeof(bool1));
console.log(bool2);
console.log(typeof(bool2));

//undefined : 선언하고 값 할당 안하면 발생
let x;
console.log(x);

//null: 값이 존재하지 않음을 '명시적'으로 나타내는 방법
//null != undefined
let y = null;
console.log(y);

//object(객체) : key-value pair
let person = {
    name: 'jeong',
    age: 30,
}

console.log(typeof person);

//array(배열) 인덱스
//여러 개의 데이터를 순서대로 저장하는 데이터 타입
let number = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'applemango'];

 

 

 

 

 

---

형 변화

 

//형 변환
//형태 -> 바꾼다.
//명시적 형 변환, 임시적 형 변환

//암시적
//1-1. 문자열
let result1 = 1+ "2";
console.log(result1); //12
console.log(typeof result1); //string

let result2 = "1" + true;
console.log(result2); //1true
console.log(typeof result2); //string (string타입이 우선 형 변화.)

//{}, null, undefined + "1" ==> 문자열

//1-2. 숫자
let result3 = 1 - "2"; 
console.log(result3);  //-1
console.log(typeof result3); //number

let result4 = "2" + "3";
console.log(result4); //23
console.log(typeof result4); // string

//2, 명시적 형 변화
//2-1. Boolean
console.log(Boolean(0));        //false
console.log(Boolean(""));       //false
console.log(Boolean(null));      //false
console.log(Boolean(undefined)); //false
console.log(Boolean(NaN));       //false
console.log("----------------");
console.log(Boolean("false"));   //true
console.log(Boolean({}));        //true

//2-2. 문자열
let result5 = String(123);
console.log(typeof result5);  //string
console.log(result5); //123

let result6 = String(true);
console.log(typeof result6);  //string
console.log(result6); //true

let result7 = String(false);
console.log(typeof result7);  //string
console.log(result7); //false

let result8 = String(null);
console.log(typeof result8);  //string
console.log(result8); //null

let result9 = String(undefined);
console.log(typeof result9);  //string
console.log(result9); //undefined

//1-3. Number
let result10 = Number("123");
console.log(typeof result10); //number
console.log(result10); //123

 

 

 

 

---

연산자

 

+는 문자열이 우선적으로 연산이 되고, -는 숫자가 우선이 연산이 된다. 

---

곱하기의 경우 숫자가 우선되는데 만약 문자열 2를 3개를 곱해서 222를 만들고 싶을 수도 있잖아? 그럴땐 연산자가 아닌 repeat함수를 이용해야한다...

console.log("2".repeat(10));

 

---

 

나머지 연산을 실행할 대 몫만을 반환하는 연산자는 없다. 방법은 세가지..!

1. parseInt( ) : 큰 수의 경우 문자가 들어가는 경우도 있어서 되도록이면 사용하면 안된다고..

console.log(parseInt(7/2));

 

2. ~ 틸트 연산자 활용 : 10진수 -> 비트로 변경하여 소수점을 버리게된다. 틸트 두번 사용으로 10진수로 변경가능.

3. Math.floor( ) 

 

---

 

일치 연산자는 꼭 꼭 꼭 3개를 붙여야한다. 2개는 타입까지 체크가 되지않아서 3개보다 덜 타이트 하다...!

 

---

 

//연산자 ( -는 숫자가 우선, +는 문자열이 우선)
//1. 더하기 연산자
console.log(1 + 1); //2
console.log(1 + "1");//11

//2. 빼기 연산자
console.log(1 - "2"); //-1
console.log(1 - 2); //-1

//3. 곱하기 연산자
console.log(2 * 3); //6
console.log("2" * 3); //6

//4. 나누기 연산자
console.log(4 / 2); //2
console.log("4" / 2); //2

//5. 나누기 연산자(/) vs 나머지 연산자(%)
console.log( 5 / 2); //2.5
console.log( 5 % 2); //1

// 6.할당 연산자(assignment)
//6-1. 등호 연산자(=)
let x = 10;
console.log(x); //10

//6-2. 더하기 등호 연산자(+=)
x += 5;
console.log(x); //15

//6-3. 빼기 등호 연산자(-=)
x -= 5;
console.log(x); //10

//6-4. 곱하기 등호 연산자 (*=, /=, %=)
let a = 10;
a *= 2;
console.log(a);

//비교 연산자 -> true, false 반환
//1. 일치 연산자 (===)3개임. 타입까지 일치해야 true반환
//숫자 2가 숫자 2랑 같나?
console.log( 2===2);
console.log( "2" === 2 );

//2. 불일치 연산자(!==)
//타입까지 일치해야 false 반환
//숫자 2가 숫자 2와 다르나? 
console.log(2 !== 2);
console.log(2 !== "2");

//3, 작다 연산자(<), 작거나 같다 연산자 (<=)
console.log("-----");
console.log( 2 < 3);
console.log( 2 <= 3);
console.log( 3 <= 3);
console.log( 4 <= 3);

//4. 논리 연산자(&&) (true 와 false
// 4-1. 논리곱 연산자 : 모두 true일 때 true반환
console.log(true&&true); //true
console.log(true&&false); //false
console.log(false&&false); //false

//4-2. 논리합 연산자(||) : 두 값 중 하나라도 true면 true
console.log(true||true); //true
console.log(true||false); //true
console.log(false||false); //false

//4-3.논리 부정 연산자 (!)
console.log(!true);
let a1 = true;
console.log(a1);

//5. 삼항 연산자 ( 조건에 따라 값을 선택(true면 앞, false면 뒤의 값 선택))
let x2 = 10;
let result = (x2>5) ? "크다": "작다";
console.log(result);

//3항 연산자를 이용해서 y가 10보다 작은 경우 작다를 출력
let y = 20;
let result1 = (y<10) ? "작다" : "크다";
console.log(result1);

// 6. 타입연사낮(typeof)
console.log(typeof "s");

 

 

 

 

---

함수

 

 

//함수 = function(기능)
//input(=매개변수) output(=반환값 return문 뒤에 오는 값)
//기능단위로 묶어 재사용

// 1. 함수 선언문
//두 개의 숫자를 입력받아서 덧셈을 한 후 내보내는 함수
function add(x, y) {
    return x+y;
}

// 2. 함수표현식
let add2 = function(x,y) {
    return x+y;
}

//함수 호출
//함수() -> add(입력값1, 입력값2)
console.log(add2(1,2));

let functionResult = add(3,4);
console.log(functionResult);

let functionResult2 = add(10,20);
console.log(functionResult2);

 

 

 

---

스코프, 전역변수, 지역변수

 

//스코프, 전역변수(global), 지역변수(local)
let x = 10; //전역변수

function printX() {
    let x = 20; //지역변수
    console.log(x);
}

console.log(x);
printX();

 

 

 

 

---

화살표 함수

 

//화살표 함수
function add (x,y) {
    return x+y;
}

//1-1. 기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
    return x + y;
}

// 1-2. 한 줄로 가능 (리턴문 생략가능한 경우: {}안의 코드가 한줄이면 가능.)
let arrowFunc02 = (x, y) => x + y;

//example
function testFunc(x) {
    return x;
}
// ↓ 화살표 함수로 바꾸기
let arrowFunc03 = x => x;

 

 

 

---

조건문

//조건문(if, else if, else, switch)
//1.if문
let x = 10;

if ( x > 0 ) {
    //main logic
    console.log("x는 양수입니다.")
}

//1-2. 문제
//y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력
let y = "Hello World";
if(y.length >= 5){
    console.log(y.length);
}

//2. if - else문
let z = -3;
if(z>0) {
    console.log("z는 양수")
} else {
    console.log("z는 음수 또는 0 입니다.")
}

//3. if - else if - else 문
let x1 = 10;

if (x1 < 0){
    console.log("1")
} else if (x1 >= 0 && x1 <10) {
    console.log("2")
} else {
    console.log("3")
}

//1-4. switch
//변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택
let fruit = "사과2";
switch (fruit) {
    case "사과":
        console.log("사과입니다.")
        break;
    case "바나나":
        console.log("바나나입니다.")
        break;
    case "키위":
        console.log("키위입니다.")
        break;
    default:
        console.log("아무것도 아닙니다.")
        break;
}