CH5. UXUI 디자인 플러스 - 4일차 TIL

✅241226

 

· 자바스크립트 강의 복습

· 자바스크립트 강의 제출

· UXUI 디자인 집중반 참여

---

📋학습내용

 

[변수의 5가지 주요 개념]

변수 이름 : 저장한 값의 고유 이름 (→ myVar)
변수 값 : 변수에 저장된 값 (→ Hello World)
변수 할당 : 변수에 값을 지정하는 행위
변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 (→ var myVar )
변수 참조 : 변수에 할당된 값을 읽어오는 것

var myVar = "Hello World";

 

 

[변수를 선언할 수 있는 3가지 방법 : var, let, const]

1. var

var myVar = "Hello Wrold";

var는 똑같은 이름으로 다시 선언 가능
var myVar = "Test 1";

var는 이미 할당된 값에 재할당 가능
myVar = "Goodbye";

 

2. let

let myLet = "Hello World1";

let은 똑같은 이름으로 다시 선언 불가능

let은 이미 할당된 값에 재할당 가능
myLet = "Goodbye1";

 

3, const

const myConst = "Hello World2";

const는 똑같은 이름으로 다시 선언 불가능

const는 이미 할당된 값에 재할당 불가능

 

https://codepen.io/yemm/pen/KwPqLjp?editors=0011

JavaScript 1주차 - 변수

---

 

 

[데이터 타입]

runtime : run하는 time
코드를 작성할 때가 아니라, 실제 코드가 실행될 때
→ 터미널에 코드가 실행될 때
그 때, 테이터 타입이 결정된다.

 

[데이터 타입 - 숫자]

 

1-1. 정수

let num1 = 10;
console.log(num1);
console.log(typeof num1);
// 10
// number

 

1-2. 실수

let num2 = 3.14;
console.log(num2);
console.log(typeof num2);
// 3.14
// number

 

1-3. 지수형(Exp)

let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3);
console.log(typeof num3);
// 250000
// number

 

 

1-4.NaN

let num4 = "Hello" / 2;
console.log(num4);
// NaN

 

 

1-5. Infinity 무한대

let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5); 
// Infinity 
// number

 

 

1-6. Infinity 무한대  

let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);
// -Infinity 
// number

 

https://codepen.io/yemm/pen/wBweLBV?editors=0011

JavaScript 1주차 - 데이터 타입(숫자)

---

[데이터 타입 - 문자]

 

문자 : string(문자열 = 문자의 나열)
'' = "" 
작은따옴표 또는 큰따옴표로 감싸줘야 문자열이 된다

 

2-1. 문자열 길이 확인하기

let str = "Hello World!";
console.log(str.length);
// 12

 

2-2. 문자열 결합하기(concatenation)

let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2)
console.log(result);
// "Hello, World!"

 

2-3. 문자열 자르기

let str3 = "Hello, World!";
console.log(str3.substr(7, 5));
// 7번째부터 5개만 출력해줘 → "world"

console.log(str3.slice(7, 12));
// 7번째부터 12번째 전까지 출력해줘 → "world"

 

2-4. 문자열 검색

let str4 = "Hello, World!";
console.log(str4.search("World"))
// 7

 

2-5. 문자열 대체

let str5 = "Hello, World!";
let result01 = str5.replace("World", "JavaScript");
console.log(result01);
// "Hello, JavaScript!"

 

2-6. 문자열 분할

let str6 = "apple, banana, kiwi";
let result02 = str6.split(",")
console.log(result02);
// ["apple"," banana"," kiwi"]

 

https://codepen.io/yemm/pen/ogvwrZP?editors=0011

JavaScript 1주차 - 데이터 타입(문자)

---

 

[데이터 타입 - 불리언]

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

console.log(bool1);
console.log(typeof bool1);
// ture
// "boolean"
console.log(bool2);
console.log(typeof bool2);
// false
// "boolean"

------------------

undefined
// un : not, define : 정의하다
let x;
console.log(x); 
// → undefined

null : 값이 존재하지 않음을 '명시적'으로 나타내는 방법
// null =/= undefined

let y = null;
console.log(y);
// → null

 

[데이터 타입 - 객체]

object(객체) : key-value pair
let person = {
  name: 'kim',
  age: 20,
  isMarried: false,
};

console.log(typeof person); 
// → "object"

 

[데이터 타입 - 배열]

array(배열)
// 여러 개의 데이터를 순서대로 저장하는 데이터 타입!!

let number = [1, 2, 3, 4, 5];
// 각 숫자는 위치(순서)에 대한 데이터를 가지고 있음

let fruits = ['apple', 'banana', 'orange'];
// 위치에 대한 데이터는 0부터 시작 -> apple은 0

 

https://codepen.io/yemm/pen/gbYRNzY?editors=0011

JavaScript 1주차 - 데이터 타입(불리언/객체/배열)

---

 

[형 변환]

형태 → 바꾼다
암시적 형 변환과 명시적 형 변환이 있음

 

 

암시적 (자동으로 바뀜)

1-1. 문자열

let result1 = 1 + "2";
console.log(result1);
console.log(typeof result1);
// 12
// string

let result2 = "1" + true;
console.log(result2);
console.log(typeof result2);
// 1true
// string

// result1, result2 모두 자동으로 문자로 변경되는 것을 확인할 수 있다,
// 문자열과 다른 데이터 타입이 더하기 연산자로 만나면 문자열이 우선시 됨

-------------------------------------------

// {}, null, undefined + "1" → 문자열
let result2_1 = {} + "1";
console.log(result2_1);
console.log(typeof result2_1);
// [object Object]1
// string

let result2_2 = null + "1";
console.log(result2_2);
console.log(typeof result2_2);
// null1
// string

let result2_3 = undefined + "1";
console.log(result2_3);
console.log(typeof result2_3);
// "undefined1"
// string

// {}, null, undefined도 문자열로 변환됨

 

1-2. 숫자

let result3 = 1 - "2";
console.log(result3);
console.log(typeof result3);
// -1
// number
// 문자열과 빼기 연산자가 만나면 숫자로 변환됨

let result4 = "2" * "3";
console.log(result4);
console.log(typeof result4);
// 6
// number
// 문자열과 곱하기 연산자가 만나면 숫자로 변환됨

 

 

2. 명시적 형 변환

2-1 Boolean

console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
// 모두 false가 나옴
-------------------------
console.log(Boolean("false"));
console.log(Boolean({}));
// 둘 다 true가 나옴
// 값이 있는 문자열은 true, 객체는 값이 비어있더라도 true

 

2-2. 문자열

let result5 = String(123);
console.log(typeof result5);

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

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

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

let result9 = String(undefined);
console.log(typeof result9);
// 모두 "string"으로 출력되고 string의 값이 나옴 (123, true, false, null, undefined)

 

2-3. Number

let result10 = Number("123");
console.log(result10);
console.log(typeof result10);
// 123
// number
// 문자열을 넣었음에도 순자로 변환되어 출력

 

https://codepen.io/yemm/pen/vEBZoZL?editors=0011

JavaScript 1주차 - 형변환

 

 

[ 연산자(+, -, *, /, %) ]

 

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);
x += 5;
console.log(x);
// 20
// 15
// 원래 가지고 있던 값에다가 더하는 연산자
// x = x + 5;와 동일함

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

// 여기서 x를 -10으로 만들려면?
x -= 25;
console.log(x);


// 6-4. 곱하기 등호 연산자
let a = 10;
a *= 2;

console.log(a);
// 20
// 가지고 있던 값에 곱해서 재할당 하는 연산자

 

 

 

비교 연산자 (→ true 또는 false를 반환하는 연산자)

 

1. 일치 연산자(===)

// 타입까지 일치해야  true를 반환하는 연산자

// 숫자 2가 숫자 2랑 같니?  // 응!
console.log(2 === 2);
// true
console.log("2" === 2);
console.log(2 === "2");
// false 
// 타입까지 동일해야 true

 

2. 불일치 연산자(!==)

// 타입까지 일치해야  false를 반환하는 연산자

// 숫자 2가 숫자 2와 다르니? //아니?
console.log(2 !== 2);
// false
console.log("2" !== 2);
console.log(2 !== "2");
// 둘 다 true
// 일치 연산자와 반대값이 나온다고 보면 됨

 

3. 작다 연산자(<), 작거나 같다 연산자(<=)

console.log(2 < 3);
// true
console.log(2 <= 3);
// true
console.log(3 <= 3);
// true
console.log(4 <= 3);
// false

 

4. 논리 연산자 

// 4-1 논리곱 연산자 (&&)
// 두 값이 모두 true여야 true를 반환하는 연산자
console.log(true && true);
// true
console.log(true && false);
// false
console.log(false && ture);
// false
console.log(false && flase);
// false


// 4-2 논리합 연산자 (||)
// 두 값 중 하나라도  true인 경우 true 반환
console.log(true || true);
// true
console.log(true || false);
// true
console.log(false || true);
// true
console.log(false || false);
// false

// 4-3. 논리부정 연산자 (!)
// 값을 반대로 바꿈
console.log(!true);
// false
console.log(!1 === 1);
// false
let b = true;
console.log(!b);
// false
// 세 경우 모두 !가 빠지면 true임

 

5. 삼항 연산자(중요!)

// 조건에 따라 값을 선택한다.

let n = 10;
let result = n > 5 ? "크다" : "작다";
console.log(result);
// 크다
// true면 앞에 값, false면 뒤에 값이 할당 됨


let i = 20;
// 3항 연산자를 이용해 i가 10도가 작은 경우 작다를, 
// 10보다 크다면 크다를 console.log로 출력하기
let result1 = i > 10 ? "크다" : "작다";
console.log(result1);
// 크다

 

6. 타입 연산자(typeof)

console.log(typeof "5");
// string

 

https://codepen.io/yemm/pen/qEWjevO?editors=0011

JavaScript 1주차 - 연산자

 

 

[ 함수 ]

 

= function(기능) 
// input, output

 

1. 함수 선언문

// 형식
function add (매개변수) {
    함수 내부에서 실행할 로직
 }

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

2. 함수 표현식

let add2 = function (x, y) {
  return x + y;
}

---------------

// 함수를 호출한다(= 사용한다)
// 함수명() →  add(입력값)
console.log(add(2, 3));

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

// add2를 가지고 10과 20을 더한 값을 출력해보세요!
let functionResult2 = add2(10, 20);
console.log(functionResult2);

// input : 함수의 input → 매개변수(매개체가 되는 변수!)
// output : return문 뒤에 오는 값 : 반환값