24.04.22~23 TIL

sparta TIL

24.04.22~23 TIL

hr7 2024. 4. 22. 19:15

javaScript_week1 - 1

▶︎ 특징

1. 객체 지향

객체지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있다. 이를 통해 복잡한 기능을 구현

( 객체지향 프로그래밍 : 데이터와 함수를 객체 그룹으로 묶어서 처리하는 방법 )

2. 동적 타이핑

변수를 선언할 때 타입을 지정하지 않음. 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정 됨

* 런타임 시점 :

프로그램이 실행되는 동안의 시점을 의미

코드가 실행되는 동안에 발생하는 시점을 말하며 반대의 의미로는 컴파일시점이 있음

3. 함수형 프로그래밍 지원

함수를 일급 객체로 취급하고, 고차 함수를 지원. 이를 통해 코드의 재사용성과 가독성을 높여줌

* 일급 객체(first-class object) :

함수를 일반 값과 마찬가지로 변수에 할당하거나

함수의 인자로 전달하거나

함수의 반환값으로 사용할 수 있는 객체

* 고차 함수(higher-order function) :

함수를 인자로 받거나, 함수를 반환하는 함수

4. 비동기처리 - 추후 교육예정

5. 클라이언트 ∙ 서버 모두 사용

Node.js를 이용하여 서버 측에서도 사용

▶︎ 기본 문법

‣ 변수와 상수

변수의 5가지 주요 개념

- 변수 이름 : 저장된 값의 고유 이름

- 변수 값 : 변수에 저장된 값

- 변수 할당 : 변수에 값을 저장하는 행위

- 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

- 변수 참조 : 변수에 할당된 값을 읽어오는것

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

// 1. var_재선언가능/재할당가능

var myVar = "Hello World";

var myVar = "재선언가능";

myVar = "재할당가능";

console.log(myVar);

// 2. let_재선언불가/재할당가능

let myLet = "Hello letWorld";

// let myLet = "재선언불가";

myLet = "재할당가능";

console.log(myLet);

// 3. const_재선언불가/재할당불가

const myConst = "Hello constWorld";

// const myConst = "재선언불가";

// myConst = "재할당불가";

console.log(myConst);

‣ 데이터 타입

1. 숫자(Number)

정수형(Integer), 실수형(Float), 지수형(Exponential), NaN(Not a Number), Infinity, -Infinity

2. 문자열(String)

길이(length)확인, 결합(concat), 자르기(substr, slice), 검색(search), 대체(replace), 분할(split)

3. 불리언(Boolean)

참(true) 거짓(false)

4. undefine

값이 할당되지 않은 변수를 의미

5. null

null은 값이 존재하지 않음을 의미. undefined와는 다름

6. 객체(Object)

속성과 메소드 를 가지는 컨테이너이며, 중괄호{}를 사용하여 객체를 생성

7. 배열(Array)

여러 개의 데이터를 순서대로 저장하는 데이터 타입. 대괄호[]를 사용하여 배열을 생성

‣ 형 변환

1. 암시적 형 변환(implicit coercion) [+를제외한 모든 연산자는 숫자 우선순위]

//암시적 형변환(자동으로바뀌는)

//1-1. 문자열

//1_문자+숫자일때 문자로바뀜

let result1 = 1 + "2";

console.log(result1);

console.log(typeof result1);

//2_문자+boolean일때 문자로바뀜

let result2 = "1" + true;

console.log(result2);

console.log(typeof result2);

// ▶︎object,null,undefined + "문자열" => 문자열로변환된다~

// 1-2. 숫자(+외의 연산은 숫자로 변환됨)

//1_숫자-문자=number

let result3 = 1 - "2";

console.log(result3);

console.log(typeof result3);

//2_문자*문자=number

let result4 = "2" * "3";

console.log(result4);

console.log(typeof result4);

//1-3. Number

let result10 = Number("123");

console.log(result10);

console.log(typeof result10);

2. 명시적 형 변환(explicit coercion)

//명시적 형변환_개발자가 직접 변환

//2-1. Boolean으로 변환

console.log(Boolean(0));

console.log(Boolean(""));

console.log(Boolean(null));

console.log(Boolean(undefined));

console.log(Boolean(NaN));

console.log("-----------------");

console.log(Boolean("false"));

console.log(Boolean({}));

//2-2. 문자열로 변환

let result5 = String(123);

console.log(typeof result5);

console.log(result5);

let result6 = String(true);

console.log(typeof result6);

console.log(result6);

let result7 = String(false);

console.log(typeof result7);

console.log(result7);

let result8 = String(null);

console.log(typeof result8);

console.log(result8);

let result9 = String(undefined);

console.log(typeof result9);

console.log(result9);

‣ 연산자

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

//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);

//6-2. 더하기 등호 연산자 (+=)

x += 5;

console.log(x);

//6-3. 뺴기 등호 연산자 (-=)

x -= 5;

console.log(x);

//x를 -10으로

x -= 20;

console.log(x);

let a = 10;

a *= 2;

console.log(a);

//===========================================

//비교 연산자_true또는 false를 반환하는 연산자

//1. 일치 연산자(===)_type까지 일치해야 true반환

console.log(2 === 2); //true

console.log("2" === 2); //false

console.log(2 === "2"); //false

//2. 불일치 연산자(!==)_type까지 일치해야 false반환

console.log(2 !== 2); //false

console.log("2" !== 2); //true

console.log(2 !== "2"); //true

//3. 작다

console.log(2 < 3); //true

console.log(2 <= 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 && true); //false

console.log(false && false); //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); //true

console.log(!true); //false

let aa = true;

console.log(!aa); //false

//5. 삼항 연산자(⭐️중요)

//조건에 따라 값을 선택한다._true일때 2항이 출력

let z = 10;

let result = x > 5 ? "크다" : "작다";

console.log(result); //크다

//문제, 3항연산자를 이용해서 e가 10보다 작은경우 '작다'

//10보다 크다면 크다를 출력해주세요

let e = 20;

let result1 = e > 10 ? "크다" : "작다";

console.log(result1);

//6. 타입 연산자(typeof)

console.log(typeof "3");

‣ 함수

//함수function(기능) : input, output을 가지고있는 단위

//1. 함수 선언문

// function add(매개변수){

// //함수 내부에서 실행할 로직

// }

//두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수

function add(x, y) {

return x + y;

}

//2. 함수 표현식

let add2 = function (x, y) {

return x + y;

};

//함수 호출_함수명(입력값)

// console.log(add(2, 3)); //5

let functionRsult = add(3, 4);

console.log(functionRsult); //7

//문제.add2를 가지고 10과 20을 더한 값을 출력해보세요.

let addResult = add2(10, 20);

console.log(addResult); //30

//input : 함수의input -> 매개변수

//output : return문 뒤에 오는 값 -> 반환값

//화살표 함수 ES6 신 문법

// ⇲ 기존문법

function add(x, y) {

return x + y;

}

//1-1. 기본적인 화살표 함수

let arrowFunc01 = (x, y) => {

return x + y;

};

//1-2. 한줄로_함수내 로직이 한줄일때만 쓸수있음

let arrowFunc02 = (x, y) => x + y;

//예시

function testFunc(x) {

return x;

}

// ▼ 한줄화살표함수로

let arrowFunc03 = (x) => x;

‣ 스코프

//스코프(변수의영향범위)

//전체영역-전역변수, 함수내-지역변수, 화살표함수

let x = 10;

function printX() {

console.log(x);

}

console.log(x);

printX(); //10 10

//스코프(변수의영향범위)

//전체영역-전역변수, 함수내-지역변수, 화살표함수

function printX() {

let x = 10;

console.log(x);

}

console.log(x);

printX(); //ReferenceError: x is not defined

‣ 조건문

//조건문 if, else if, else, swich

//1. if문_true일때 실행된다.

let x = 10;

//1-1.

if (x < 0) {

console.log("x는 양수입니다.");

}

//1-2.

let y = "hello world";

//문제.y의 길이가 5보다 크거나 같으면 길이를 console.log로출력

if (y.length >= 5) {

console.log(y.length);

}

//2. if else문

let z = -3;

if (z > 0) {

console.log("z는 양수입니다");

} else {

console.log("z는 음수입니다");

}

//3. if - else if - else문

let a = 5;

if (a < 0) {

//main logic #1

console.log("1");

} else if (a >= 0 && a < 10) {

//main logic #2

console.log("2");

} else {

//main logic #3

console.log("3");

}

//4. switch문 _default값 기본설정 & break;필수⭐️

//변수의 값에 따라, 여러개의 경우(case)중 하나를 선택

let fruit = "우유";

switch (fruit) {

case "사과":

console.log("사과입니다");

break;

case "바나나":

console.log("바나나입니다");

break;

case "석류":

console.log("석류입니다");

break;

default:

console.log("과일이 아닙니다");

break;

}

‣ 조건문의 중첩

//조건문의 중첩

let age = 13;

let gender = "여성";

//미성년자 구분

if (age >= 18) {

if (gender === "여성") {

console.log("성인 여성입니다");

} else {

console.log("성인 남성입니다");

}

} else {

if (gender === "여성") {

console.log("미성년 여성입니다");

} else {

console.log("미성년 남성입니다");

}

‣ 조건문의 조건부실행

//조건부 실행

let x = 10;

if (x > 0) {

console.log("x는 양수입니다");

}

// ▼ && (and조건)

x > 0 && console.log("x는 양수입니다");

// || (or조건) , 삼항 연산자와 단축평가

let y; //y는 undefined

let z = y || 20; //y가 undefined면 20을 값으로 넣으라는로직👀

console.log(z);

‣ 조건문 ()에서의 falsy,truthy

//if문 조건문() 안에서의 falsy, truthy

//falsy한 값

0, "", null, undefined, NaN, false;

//truthy한 값

true;

‣ 객체 Object

//객체 _key-value pair_장점:하나의 변수에 여러값을 넣을수있다

//1. 객체 생성 방법

//1-1. 기본적인 객체 생성 방법(value에 들어가는 데이터타입은 제한X 다됨)

let personA = {

age: 30,

gender: "남자",

};

//1-2. 생성자 함수를 이용한 객체 생성 방법

function Person(name, age, gender) {

this.name = name;

this.age = age;

this.gender = gender;

}

let person1 = new Person("가나다", 20, "남자");

let person2 = new Person("마바사", 30, "여자");

//2. 접근(출력)방법

console.log(personA.name); //홍길동

console.log(personA.age); //30

console.log(personA.gender); //남자

//3. 객체 메소드(객체가 가진 여러기능:object~)

//3-1. Object.key() : key를 가져오는 메소드

let keys = Object.keys(personA);

console.log("keys->", keys);

//3-2. values

let values = Object.values(personA);

console.log("values->", values);

//3-3. entries

//key와 value를 묶어서 배열로 만든 배열(2차원배열)

let entries = Object.entries(personA);

console.log("entries->", entries);

//3-4. assign_객체복사

let newPersonA = {};

Object.assign(newPersonA, personA);

console.log("newPerson->", newPersonA);

//3-5. assign_객체복사&값수정

Object.assign(newPersonA, personA, { age: 33 });

console.log("newPersonEdit->", newPersonA);

//3-6. 객체비교

let person3 = {

age: 2,

gender: "여",

};

let person4 = {

age: 2,

gender: "여",

};

console.log("answer->", person3 === person4);

//객체는 크기가 큼 -> 별도의 '공간'에 메모리를 저장

//즉, person3와 person4는 각각의 공간에 저장된 '주소'가 다르기때문에false

//3-7. JSON의 stringify(주소값으로 저장된 객체를 '문자열로 변환'하여 비교)

console.log(JSON.stringify(person3) === JSON.stringify(person4));

//3-8. 객체 병합

let man1 = {

age: 20,

};

let man2 = {

gender: "남",

};

//... : spread operator - 객체의{}를 풀어서 합쳐줘~

let perfectMan = {

...man1,

...man2,

};

console.log(perfectMan);

‣ 배열1

//배열

//1. 생성

//1-1. 기본 생성

let fruits = ["사과", "바나나", "배"];

//1-2. 크기 지정

let number = new Array(5);

console.log(fruits.length);

console.log(number.length);

//2. 요소 접근(출력)

console.log(fruits[2]);

//3. 배열 메소드

//3-1. push

console.log("push전->", fruits); //[ '사과', '바나나', '배' ]

fruits.push("키위");

console.log("push후->", fruits); //[ '사과', '바나나', '배', '키위' ]

//3-2. pop_마지막 요소 삭제

console.log("pop전->", fruits); //[ '사과', '바나나', '배', '키위' ]

fruits.pop();

console.log("pop후->", fruits); //[ '사과', '바나나', '배' ]

//3-3. shift_첫번째 요소 삭제

console.log("shift전->", fruits); //[ '사과', '바나나', '배' ]

fruits.shift();

console.log("shift후->", fruits); //[ '바나나', '배' ]

//3-4. unshift_첫번째에 요소 추가

console.log("unshift전->", fruits); //[ '바나나', '배' ]

fruits.unshift("포도");

console.log("unshift후->", fruits); //[ '포도', '바나나', '배' ]

//3-5. splice

fruits.splice(1, 1, "귤"); //1번째부터, 1개지우고, '귤'을 넣어라~

console.log("splice->", fruits); //[ '포도', '귤', '배' ]

//3-6. slice

let slicedFruits = fruits.slice(1, 3); //1부터 2까지

console.log(slicedFruits); //[ '귤', '배' ]

‣ 배열2

//forEach, map, filter, find

let numbers = [3, 5, 7, 8, 7];

//1. forEach_매개변수 자리에 함수를 넣는것 : 콜백함수

numbers.forEach(function (item) {

console.log("item입니다" + item);

});

//2. map

//항상 원본 배열의 길이만큼이 return된다.

//기존배열을가공해서 새로운배열을 만듦-새로운배열을 받기위해 'newNumbers'

let newNumbers = numbers.map(function (item) {

return item * 2;

});

console.log(newNumbers); //[ 6, 10, 14, 16, 14 ]

//3. filter_조건에 맞는 것 들 전부

let filterNumbers = numbers.filter(function (item) {

return item === 7;

});

console.log(filterNumbers); //[ 7, 7 ]

//4. find_조건에 맞는 첫번째 요소만

let result = numbers.find(function (item) {

return item > 3;

});

console.log(result); //5

‣ 반복문 for

//for,while : 반복문

//for(초기값; 조건식; 증감식){}

//↓변수i는 0부터시작;10에 도달할때까지반복;i가 한번돌고나면 1을 더함

for (let i = 0; i < 10; i++) {

console.log("for문->", i);

}

//배열과 for문은 짝꿍~

const arr = ["one", "two", "three", "four", "five"];

for (let i = 0; i < arr.length; i++) {

console.log(i);

console.log(arr[i]);

}

//ex:0부터10까지의 수 중 2의 배수만 console.log로 출력

for (let i = 2; i < 11; i++) {

if (i >= 2) {

if (i % 2 === 0) {

console.log(i + "는 2의배수");

}

//for ~ in문_객체의 속성을 출력하는 문법

let person = {

age: 30,

gender: "male",

};

for (let key in person) {

console.log(key + ":" + person[key]);

}

‣ 반복문 while

//while

let i = 0;

while (i < 10) {

console.log(i);

i++;

}

//ex.3초과 100미만의 숫자 중 5의 배수인 것만 출력

let a = 3;

while (a < 100) {

if (a % 5 === 0 && a >= 5) {

console.log(a + "는 5의 배수");

}

a++;

}

//do ~ while

let z = 0;

do {

console.log("do while->", z);

z++;

} while (z < 10);

//break_멈춤

for (y = 0; y <= 10; y++) {

if (y === 5) {

break;

}

console.log("break->", y);

}

//continue_되돌아감

for (x = 0; x <= 10; x++) {

if (x === 5) {

continue;

}

console.log("continue->", x);

}