[TIL] 24.12.24(화)

JavaScript 문법 종합반 1주차

 

1-7

함수

자바스크립트에서 함수를 정의하여 코드의 재사용성을 높일 수 있음

// 함수 = function(기능)
// infut, outfut을 가지고 있는 기능의 단위를 뜻함(JS에서 함수를 기능의 단위로 묶은 후 재활용)

// function() {} > function 키워드와 (), {}를 묶어서 외우기

// 1. 함수 선언문
// 두 개의 숫자를 입력 받아서 덧셈을 한 후 내보내는 함수
function add (x, y) {
    return x + y
};
// function(키워드) / add(함수 이름) / (x, y)(매개 변수) / { }(중괄호를 통한 메인 로직이 들어가는 부분)

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

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

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

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

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

 

1-8

스코프 및 화살표 함수

 

JS에서의 스코프(Scope)

변수가 어디까지 영향을 끼칠 수 있는가를 뜻하는 변수의 영향 범위

 

전역 변수

스코프가 전체 영역에서 영향을 끼칠 수 있다

 

지역 변수

함수 내에서만 영향을 끼칠 수 있다

 

// 스코프, 전역변수, 지역변수, 화살표함수

// 전역변수
let x = 10;

function printX() {
    console.log(x);
}

console.log(x);
printX();

// 스코프, 전역변수, 지역변수, 화살표함수

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

console.log(x);
printX();

// 화살표 함수
// 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;

 

 

 

1-9

조건문 (if, else if, else, switch)

자바스크립트에서는 조건문을 사용하여 특정 조건을 만족하는 경우에만 코드를 실행할 수 있음.

// 조건문 - if, else if, else, switch

// 1. if문
//if (true 또는 false가 나올 수 있는 조건) {}

let x = 10;
if (x > 0) {
    console.log("x는 양수입니다.");
}
// x(10)가 0보다 크기 때문에 값이 출력 됨. 하지만 만약에 x < 0 으로 작성한다면 결과값이 false가 맞지만 출력되지는 않음

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

// 2. if - else 문
if () {
    // main logic #1 (결과값이 true인 경우 수행)
} else {
    // main logic #2 (결과값이 false인 경우 수행)
}

let a = -3;
if (a > 0) {
    console.log('x는 양수입니다.');
} else {
    console.log('x는 음수입니다');
}


// if - else if - else 문
if (조건 1) {
    // main logic #1 (조건 1이 맞을 경우 수행)(아닐 경우 밑으로 흐름)  
} else if (조건 2) {
    // main logic #2 (조건 2가 맞을 경우 수행)(아닐 경우 밑으로 흐름)
} else {
    // main logic #3
}

let b = 10;
if  (b < 0) {
    console.log("1"); // b(10)가 0보다 작으면 1을 출력하고, 아니면 밑의 else if 단계로 가
} else if (b >= 0 && b < 10) {
    console.log("2"); // b(10)가 0보다 크거나 같고 '그리고' 10보다 작으면 (두 가지를 다 만족시키면 2를 출력하고, 아니면 밑의 else 단계로 가)
} else {
    console.log("3");
}

// 1-4. switch
// 변수의 값에 따라, 여러 개의 경우(Case) 중 하나를 선택
// default
// break(case 끝에 항상 같이 넣어줘야 함)
let fruit = "바나나"
switch (fruit) {
    case "사과":
        console.log('사과입니다.');
        break;
    case "바나나":
        console.log('바나나입니다.');   
        break;
    case "키위":
        console.log('키위입니다.');
        break;
    default:
        console.log('아무것도 아닙니다.');   
        break;
}

 

 

 

1-10

조건문 중첩

// 조건문의 중첩
let age = 20;
let gender = "여성";

// 미성년자 구분
if (age >= 18) {
    if (gender === "여성") {
        console.log("성인 여성입니다.");
    } else {
        console.log("성인 남성입니다.");
    }
} else {
    if (gender === "여성") {
        console.log("미성년 여성입니다.");
    } else {
        console.log("미성년 남성입니다.");
    }
}

// 조건부 실행
let x = 10;
// and 조건 (&&)
(x > 0) && console.log("x는 양수입니다.");

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


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

let y; //y를 선언만 해놓고 값은 할당하지 않은 상태(y에는 undefined가 들어가 있다는 뜻)
let z = y || 20; //z = y가 undefined 상태라면 기본값으로 20을 세팅해줘!

console.log(z);

// falsy한 값, truthy한 값

// if (true 또는 false이 나오는 조건) {
     // main logic
// }


// falsy한 값,

if (0) {
    //main logic
    console.log("hello");
}

if ("") {
    //main logic
    console.log("hello");
}

if (null) {
    //main logic
    console.log("hello");
}

if (undefined) {
    //main logic
    console.log("hello");
}

if (NaN) {
    //main logic
    console.log("hello");
}

if (false) {
    //main logic
    console.log("hello");
}


// truthy한 값

if (true) {
    //main logic
    console.log("hello");
}

 

 

 

1-11

객체

// 객체
// key - value pair
// 하나의 변수에 여러개의 값을 넣을 수 있다!!
// value에 올 수 있는 데이터 타입의 형태에는 제한이 없다!!

// 1. 객체 생성 방법
// 1-1. 기본적인 객체 생성 방법
let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

// 1-2. 생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");

// 2. 접근하는 방법
console.log("1", person.name);
console.log("2", person.age);
console.log("3", person.gender);

// 3. 객체 메소드(method): 객체가 가진 여러가지 기능 : Object.~~~
// 3-1. Object.key() : key를 가져오는 메소드
let person = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

let keys = Object.keys(person);
console.log("keys => ", keys);

// 3-2. values
let values = Object.values(person);
console.log("values => ", values);

// 3-3. entries
// key와 value를 묶어서 배열로 만든 배열!! (=2차원 배열)
let entries = Object.entries(person);
console.log("entries => ", entries);

// 3-4. assign
// 객체를 복사함
let newPerson = {};
Object.assign(newPerson, person, { gender: "게이" });
console.log("newPerson => ", newPerson);

// 3-5. 객체 비교
// 객체와 배열은 다른 데이터 타입에 비해서 크기가 상당히 큼 > 메모리에 저장할 때 별도의 공간에 저장
// person1 별도 공간에 대한 주소
let person1 = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

// person2 별도 공간에 대한 주소
let person2 = {
    name: "홍길동",
    age: 30,
    gender: "남자",
};

let str1 = "aaa";
let str2 = "aaa";

console.log("answer1 => ", person1 === person2);
console.log("answer2 => ", str1 === str2);

// 객체(person1, 2)는 그 내용이 같아도 각각 별도 공간에 대한 주소로 저장이 되어 결과 값이 false로 나오는 반면
// str1, 2는 크기가 작아 직접 값을 저장하기 때문에 결과 값이 true로 나옴!!

console.log(JSON.stringify(person1) === JSON.stringify(person2));
// 객체를 stringify(문자열화) 시켜서 주소값으로 뽑지 않고 문자열화 시켜서 비교 가능하게는 할 수 있음


// 3-6. 객체 병합
let person3 = {
    name: "홍길동",
    age: 30,
};

let person4 = {
    gender: "남자",
};

// ... : spread operator : {중괄호로 묶인 key value들}을 해체 시켜서 써줘 라는 명령어
let perfectMan = {...person3, ...person2};
console.log(perfectMan);

 

 

 

1-12

배열 1

// 배열

// 1. 생성
// 1-1. 기본 생성
let fruits = ["사과", "바나나", "오렌지"];

// 1-2. 크기 지정
let numbers = new Array(5);

console.log(fruits.length);
console.log(numbers.length);

// 2. 요소 접근(배열의 요소 출력)
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

// 3. 배열 메소드
// 3-1. push (배열의 끝에 요소를 추가)
let fruits = ["사과", "바나나"];
console.log(fruits);

fruits.push("오렌지")
console.log(fruits);

// 3-2. pop (배열의 마지막 요소를 삭제)
let fruits = ["사과", "바나나"];
fruits.pop();
console.log(fruits);

// 3-3. shift (배열의 첫번째 요소를 삭제)
let fruits = ["사과", "바나나", "키위"];
fruits.shift();
console.log(fruits);

// 3-4. unshift (배열의 맨 앞에 '어떠한 요소'를 추가)
fruits.unshift("포도");
console.log(fruits);

// 3-5. splice (위치를 지정(: 시작 위치, 끝 위치)해서 해당 위치의 요소를 삭제한 후, 동일한 자리에 '어떠한 요소'를 추가)
let fruits = ["사과", "바나나", "키위"];
fruits.splice(1, 1, "포도");
console.log(fruits);

// 3-6. slice (배열의 일부분을 새로운 배열로 만듦: 1, 2는 두 번째 요소 부터 3번 째 요소 전 까지를 뜻함, 첫 번째 요소는 0으로 표기)
let fruits = ["사과", "바나나", "키위"];
let slicedFruits = fruits.slice(1, 2);
console.log(slicedFruits);

 

 

 

1-13

배열 2

// forEach, map, filter, find
let numbers = [1, 2, 3, 4, 5];

// 매개변수 자리에 함수를 넣는 것 : 콜백 함수
numbers.forEach(function(item){
    console.log("item입니다 => " + item);
});

(2) map : 항상 원본 배열의 길이만큼이 return 된다.
let newNumbers = numbers.map(function(item){
    return item * 2;
});

console.log(newNumbers);

let numbers = [1, 2, 3, 4, 5];
let filteredNumbers = numbers.filter(function(item){
    return item > 3;
});
console.log(filteredNumbers);

let numbers = [1, 2, 3, 4, 5];

let result = numbers.find(function(item){
    return item > 3;
});
console.log(result);

 

 

 

1-14

for문

// for, while > ~하는 동안 : 반복문
for (초기값; 조건식; 증감식) {
}

// i라는 변수는 0부터 시작할거야!
// i라는 변수가 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 = 0; i < 11; i++) {
    if (i >= 2) {
    if ( i % 2 === 0 ) {
        // 2의 배수
        console.log(i + "는 2의 배수입니다!!");
    }
  }
}

// for ~ in 문
// 객체의 속성을 출력하는 문법
let person = {
    name: "john",
    age: 30,
    gender: "male",
};

// person[key] : 객체에 접근하는 또 다른 방법!!
for (let key in person) {
    console.log(key + ": " + person[key]);
}

 

 

1-15

break continue

// while
let i = 0;

while (i < 10) {
    console.log(i);
    i++;
}

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

// while문을 활용해서, 3 초과 100 미만의 숫자 중 5의 배수인 것만 출력하는 예

let i = 3;
while (i < 100) {
    if (i % 5 === 0 && i >= 5) {
        console.log(i + "는 5의 배수입니다!!");
    }
    i++;
}

// do ~ while

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 10);

for(let i=0; i<10; i++) {
    if (i === 5) {
        break; //for문을 멈춘다.
    }
    console.log(i);
}


for(let i=0; i<10; i++) {
    if (i === 5) {
        continue; //for문을 다음 순서로 넘긴다.
    }
    console.log(i);
}