프론트엔드 개발일지 #09-javascript 기초(연산자, 함수,객체, 배열)

조아라·2024년 10월 8일

연산자

더하기 연산자 ( + )
더하기 연산자는 문자열이 우선시 된다!

console.log(1 + 1); //2
console.log(1 + "1";) //11

빼기 연산자 ( - )

console.log(1 - "2"); //-1
console.log(1 - 2); // -1

곱하기 연산자 ( * )

console.log(2 * 3); //6
console.log("2" * 3) //6

나누기 연산자 ( / )

console.log(4 / 2); //2
console.log("4" / 2) //2

나누기 연산자 vs 나머지 연산자( % )

console.log(5 / 2); //2.5
console.log(5 % 2); //1

할당연산자

등호 연산자 ( = )

let x = 10;
console.log(x); //10

더하기 등호 연산자 ( += )

let x += 10; //15
x = 10 + x; //15

빼기 등호 연산자 ( -= )

x -= 5;
x = x - 5;
console.log(x); //5

//여기에서 x를 -10으로 만들어줘!
//x -= -20

곱하기 등호 연산자 ( *= )

let a = 10;
a *= 2; 
console.log(a); //20

비교연산자

값이 true나 false를 반환하는 연산자

일치 연산자 ( === ) : 타입까지 일치해야 true를 반환 함

//숫자 2기 숫자 2랑 같니?
console.log(2 === 2); //true
console.log("2" === 2); // false

불일치 연산자 ( !== ) : 타입까지 일치해야 false를 반환 함

//숫자 2가 숫자 2랑 다르니? 아니!
console.log(2 !== 2); //false
console.log("2" !== 2); //true

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

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

논리연산자

논리곱 연산자( && ) : 둘 다 true여야 true를 반환 함

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

논리합 연산자 ( || ) : 둘 중 하나만 true여도 true 반환 함

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

논리 부정 연산자 ( ! ) : 값을 반대로 바꿈

console.log(!true); //false

let a = true;
console.log(!a); //false

삼항연산자 (중요)

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

let x = 10;
let result = x > 5 ? "크다"; "작다";
console.log(result); // 크다

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

타입연산자

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

함수 ( function )

input과 output을 가진 단위
기능의 단위로 묶은 다음에 재활용

함수선언문

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

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

함수표현식

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

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

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

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

input --> 매개 변수(매개체가 되는 변수)
output --> return문 뒤에 오는 값 : 반환값

변수 종류

전역 변수

let x = 10;

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

console.log(x);
printX(); //10

지역 변수

function printX() {
    let x = 10;
    console.log(x);
} //10

console.log(x);
printX(); //오류

화살표함수

ES6의 신 문법

function add(x, y) {
    return x + y;
}
//이 식을 화살표 함수로 바꾸면
let arrowrunc01 = (x, y) => {
    return x + y
};
//한 줄로 쓴다면
let arrowrunc02 = (x, y) => x + y

function testFunc(x) {
    return x;
}
//이것도 화살표 함수로 바꾸면
let testFunc = x => x

조건문

if문

let x = 10;

if (조건 true또는false가 나올 수 있는 x < 0) {
    console.log("x는 양수입니다.");
}
//조건이 true가 아니라 false이기 때문에 내부로직 실행 안 됨

let y = "hello world";

//y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력해줘
if (y.length >= 5) {
    console.log(y.length);
}

if - else문

let x = 10;
if (x > 0) {
    //main logic #1
    console.log('x는 양수입니다.');
} else {
    //main logic #2
    console.log('x는 음수입니다.');
} //x는 양수입니다

if - else if - else문

let x = 10;

if (x < 0) {
    //main logic #1
    console.log("1")
} else if (x >= 0 && x < 10) {
    //mai logic #2
    console.log("2")
} else {
    //main logic #3
    console.log("3")
} //3

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

let fruit = "사과";

switch (fruit) {
    case "사과";
        console.log("사과 입니다.");
        break;
    case "바나나";
        console.log("바나나 입니다.");
        break;
    case "키위"
        console.log("키위 입니다.");
        break;
    default;
        console.log("아무것도 아닙니다.");
        break;
} //사과입니다

조건문의 중첩

let age = 20;
let gender = "여성";

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

조건부 실행

let x = 10;

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

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

//or조건(||)
// 상황 연산자와 단축평가
let y; // y는 undefined
let z = y || 20; //y가 존재하지않는다면 20을 할당해줘

console.log(z); //20

false-y 힌 값, truth-y 한 값

if (true 또는 false) {
    //main logic
}

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

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

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

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

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

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

input에 들어가는 조건은 true 또는 false로 대답이 되어야하기때문에,
마지막 조건문빼고는 전부 false-y한 값.
" ", 0, undefinde, NaN, null을 제외한 모든 값은 truth-y한 값

객체 (key - value pair)

하나의 변수에 여러개의 값을 넣을 수 있다!
value에 올 수 있는 타입은 제한이 없다!

객체 생성 방법

기본적인 객체 생성 방법

let person = {
    name: "홍길동",
    age: 30;
    gender: "남자",
};

생성자 함수를 이용 한 객체 생성 방법

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

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

객체에 접근하는 방법

console.log("1", person.name); //1 홍길동
console.log("2", person.age); //2 30
console.log("3", person.gender); //3 남자

객체 메소드(Object.~~~)

Object.key() : key를 가져오는 메소드

let person = {
    name: "홍길동",
    age: 30;
    gender: "남자",
};

let keys = Object.keys(person);
console.log("keys =>", keys);// keys =>['name', 'age', 'gender']

Object.values() : value를 가져오는 메소드

values = Object.values(person);
console.log("values =>", values);//values =>['홍길동', '30', '남자']

Object.entries() : key와 value를 묶어서 배열로 만든 배열(2차원 배열)

let entries = Object.entries(person);
console.log("entries =>", entries);//entries =>[['name','홍길동'], ['age', '30'], ['gender', '남자']]

Object.assign() : 객체 복사

let newPerson = {};
Object.assign(newPerson, person)
console.log("newPerson =>", newPerson);//newPerson => {name: "홍길동", age: 30, gender: "남자"}

//만약에 이걸 이렇게 바꿔 적으면
Object.assign(newPerson, person, {age: '31'});
console.log("newPerson =>", newPerson);//newPerson => {name: "홍길동", age: 31, gender: "남자"}
// 나이가 바뀐다.

객체 비교

let person1 = {
    name: "홍길동",
    age: 30;
    gender: "남자",
};

let person2 = {
    name: "홍길동",
    age: 30;
    gender: "남자",
};

console.log("answer =>", person1 === person2); // false
//객체와 배열은 다른 데이터 타입에 비해서 크기가 커서
//메모리를 저장 할 때 별도의 공간에 주소를 저장한다.
//person1과 person2의 값이 아니라 저장하는 주소를 갖고 있기 때문에
//false가 나온다

console.log(JSON.stringify(person1) === JSON.stringify(person2)); //true
//값만을 비교하고싶다면 JSON을 사용해서 문자열화해서
//비교하면 true

//하지만 간단하게 문자열을 비교하면
let str1 = "aa";
let str2 = "aa";

console.log("answer =>", str1 === str2); //true
//값이 같기때문에 true

객체 병합

let person1 = {
    name: "홍길동",
    age: 30;
};

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

// ... : spread operator
let perfectMan = {...person1, ...person2};\
console.log(perfectMan); //{ name: "홍길동", age: 30, gender: '남자' }

배열

기본 생성 방법

let fruits = ["사과", "바나나", "오렌지"];

크기 지정

let number = new Array(5);
console.log(number); //<5 empty items>

console.log(fruits.length); //3
console.log(number.length); //5

베열 요소 접근

console.log(fruits[0]); //사과
console.log(fruits[1]); //바나나
console.log(fruits[2]); //오렌지

배열 메소드

push : 요소를 추가 해준다

let fruits = ["사과", "바나나"];
console.log("1 =>", fruits); // 1 => ['사과','바나나']

fruits.push("오렌지");
console.log("2 =>", fruits); // 2 =>['사과', '바나나', '오렌지']

pop : 마지막 요소를 삭제한다

let fruits = ["사과", "바나나"];
console.log("1 =>", fruits) //1 => ['사과','바나나']

fruits.pop();
console.log("2 =>", fruits); //2 => ['사과']

shift : 첫번째 요소를 삭제한다

let fruits = ["사과", "바나나"];
console.log("1 =>", fruits) //1 => ['사과','바나나']

fruits.shift();
console.log("2 =>", fruits); //2 => ['바나나']

unshift : 맨 앞 요소에 추가한다

let fruits = ["사과", "바나나"];
console.log("1 =>", fruits) //1 => ['사과','바나나']

fruits.unshift("포도");
console.log("2 =>", fruits); // 2 =>['포도', '사과', '바나나']

splice : .splice(시작하는 위치, 지우는 갯수)

let fruits = ["사과", "바나나", "오렌지"];

fruits.splice(1, 1, "포도");
console.log(fruits); // ['사과','포도', '오렌지']

slice

let fruits = ["사과", "바나나", "오렌지"];

let slicedFruits = fruits.slice(1, 2);//첫번재 요소에서 시작해서 두번째 요소까지 지워
console.log(slicedFruits); //['바나나']

forEach

let numbers = [4, 1, 5, 4, 5];
//매개변수 자리에 함수를 넣는 것을 콜백 함수라 한다.
numbers.forEach(function(item){
    console.log('item입니다 =>' + item);
});
//item입니다 => 4
//item입니다 => 1
//item입니다 => 5
//item입니다 => 4
//item입니다 => 5

let numbers = [4, 1, 5, 4, 5];
let newNumbers = numbers.map(function(item){

    return item + 2;
})
console.log(newNumbers); //[8, 2, 18, 8, 10]

map 함수의 콜백 함수는 반드시 return문을 가져야한다. 기존에 있었던 배열을 가공해서 새로운 배열을 만들기때문에 항상 원본 길이만큼의 배열이 반환된다.

filter

let numbers = [4, 1, 5, 4, 5];
let filterNumbers = numbers.filter(function(item){

    return item === 5;
})
console.log(filterNumbers); //[5, 5]

조건의 해당되는 것만 반환된다.

find

et numbers = [4, 1, 5, 4, 5];
let result = numbers.find(function(item){
    return item > 3;
})
console.log(result); // [4]

조건에 맞는 첫번째 요소만 반환한다.

내가 어려워 하는 부분

내가 가장 헷갈리는 부분은 객체 메소드에서 splice / slice 이렇게 두가지인데,

slice(start, end) : 추출 시작점에 대한 인덱스, 추출을 종료할 기준 인덱스. (end를 제외하고 그 전까지의 요소만 추출)

예를들자면,

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(1, animals.slice());
// 1, ["ant", "bison", "camel", "duck", "elephant"]

console.log(2, animals.slice(3, 5));
// 2, ["duck", "elephant"]

console.log(3, animals.slice(undefined, 5));
// 3, ["ant", "bison", "camel", "duck", "elephant"]

console.log(4, animals.slice(-3));
// 4, ["camel", "duck", "elephant"]

console.log(5, animals.slice(-3, 4));
// 5, ["camel", "duck"]

console.log(6, animals.slice(5));
// 6, []

console.log(7, animals.slice(4));
// 7, ["elephant"]

console.log(8, animals.slice(undefined));
// 8, ["ant", "bison", "camel", "duck", "elephant"]

console.log(9, animals.slice(0, -4));
// 9, ["ant"]

console.log(10, animals.slice(2, 15));
// 10, ["camel", "duck", "elephant"]

splice(start, deleteCount, item1, item 2,...) : 배열의 변경을 시작할 인덱스, 배열에서 제거할 요소의 수.

이것도 예를 들어보자면,

const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(3, 2, 'cat', 'dog', 'cow');

console.log(animals);
// ["ant", "bison", "camel", "cat", "dog", "cow"]

console.log(animals1);
// ["duck", "elephant"]
//오리와 코끼리는 스플라이스에의해 삭제되었지만, animal1에 담겼다.
----------------------------------------
const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(3, 0, 'cat');

console.log(animals);
// ["ant", "bison", "camel", "cat", "duck", "elephant"]

console.log(animals1);
// []
------------------------------------------
const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(-3, 2);

console.log(animals);
// ["ant", "bison", "elephant"]

console.log(animals1);
// ["camel", "duck"]
------------------------------------------
const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(-6, 1);

console.log(animals);
// ["bison", "camel", "duck", "elephant"]

console.log(animals1);
// ["ant"]
------------------------------------------
const animals = ["ant", "bison", "camel", "duck", "elephant"];

const animals1 = animals.splice(3);

console.log(animals);
// ["ant", "bison", "camel"]

console.log(animals1);
// ["duck", "elephant"]

const animals2 = animals1.splice(1, 1);

console.log(animals1);
// ["duck"]

console.log(animals2);
// ["elephant"]

이렇게 연습하니까 단번에 이해가 갔다. 계속 이 예시를 몇번 봐야 할 것 같다.

조아라

끄적 끄적 배운 걸 적습니다 / FRONT-END STUDY VELOG

이전 포스트

프론트엔드 개발일지 #08-JavaScript 기초(변수)

다음 포스트