[EST] 240710 JavaScript-04

ESTsoft/프론트엔드 오르미 1기

[EST] 240710 JavaScript-04

효땡 2024. 7. 15. 21:09

객체

객체(Object)의 의미

- 배열처럼 여러 개의 데이터를 한 변수에 저장할 수 있는 자료형

- 객체와 배열의 차이점

◽ 배열이 값에 접근하기 위해 자동으로 부여되는 인덱스 번호를 사용했다면,

객체는 특별한 키(key)를 통해 원하는 값(value)에 접근할 수 있도록 키와 값의 쌍으로 이루어져 있음

객체 생성방법

- 객체를 생성하기 위해 중괄호( { } )를 사용

- 여러 개의 키(key)와 값(value) 쌍으로 이루어져 있음

- 각 key와 value는 콜론( : )으로 구분

- key - value의 쌍은 프로퍼티(property)라고 표현

- key는 문자열이나 심볼값으로 사용

- value은 자바스크립트에서 사용한 모든 값이 나올 수 있음

- 프로퍼티 값이 함수라면, 키와 값의 쌍을 메서드(method)라고 부름

const obj = {
  name: "뽀로로";
  company: "EBS";
  "co-worker": ["펭수", "루피"],
  sayHello() {
    console.log("Hello World!");
  }
};

객체 접근방법

- 대괄호 표기법

◽ 객체[' 키 ']

◽ 배열처럼 대괄호 ( [ ] ) 안에 키 값을 문자열로 사용

◽ 키가 객체에 없다면 undefined를 반환

const obj = {
  name: "뽀로로";
  company: "EBS";
  "co-worker": ["펭수", "루피"],
  sayHello() {
    console.log("Hello World!");
  }
};

console.log(obj["name"]); // 뽀로로 -> 대괄호 안에 문자열로 키를 전달
console.log(obj["company"]); // EBS -> 대괄호 안에 문자열로 키를 전달
console.log(obj["co-worker"]; // ['펭수', '루피'] -> 대괄호 안에 문자열로 키를 전달

- 점 표기법

◽ 객체. 키

◽ 객체의 키값이 변수명 작성 규칙을 지켰다면 객체이름.키로 값에 접근할 수 있음
◽ 변수명 작성 규칙을 지킨 경우에만 사용가능

◽ 키가 객체에 없다면 undefined를 반환

const obj = {
  name: "뽀로로";
  company: "EBS";
  "co-worker": ["펭수", "루피"],
  sayHello() {
    console.log("Hello World!");
  }
};

console.log(obj.name); // 뽀로로 -> key값이 변수명 작성규칙을 만족하여 사용가능
console.log(obj.company); // EBS -> key값이 변수명 작성규칙을 만족하여 사용가능

console.log(obj.co-worker); // 변수명 작성규칙을 만족하지 않기 때문에 오류발생

console.log(obj.co); // undefined -> 속성값을 찾지 못하여 undefined

객체의 메서드

keys( ) values( ) entries( )

- Object.keys( ) 메서드는 객체의 속성 이름(key)들을 반환

const user = {
  name: "hati",
  job: "fe",
  sayHello: function() {
    console.log("Hello world!");
  }
};

console.log(Object.keys(user)); // 0 "name" / 1 "jo"b / 2 "sayHello" -> key 배열 반환

- Object.values( ) 메서드는 객체의 속성 값(value)들을 배열로 반환

const user = {
  name: "hati",
  job: "fe",
  sayHello: function() {
    console.log("Hello world!");
  }
};

console.log(Object.values(user)); // 0 "hati" / 1 "fe" / 2 f() -> value 배열 반환 (f = function)

- Object.entries( )는 [key, value] 쌍(프로퍼티)를 배열로 반환

const user = {
  name: "hati",
  job: "fe",
  sayHello: function() {
    console.log("Hello world!");
  }
};

console.log(Object.entries(user)); // 0 ['name', 'hati'] / 1 ['job', 'fe'] / 2 ['sayHello', f] -> 프로퍼티([key, value]) 쌍으로 반환

hasOwnProperty( )

- 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환

- in과 같은 역할

const user = {
  name: "hati",
  job: "fe",
  sayHello: function() {
    console.log("Hello world!");
  }
};

console.log(user.hasOwnProperty("name")); // true -> name을 가지고 있음
console.log(user.hasOwnProperty("company")); // false -> company를 가지고 있지 않음

for ... in

- 객체의 순회를 위해 만들어진 기능

- 객체 안의 프로퍼티들에 접근하여 어떠한 키와 값을 가지는지 살펴보고 싶을 때 사용

- 조건에 따라 값을 수정해야 할 경우에도 사용

const user = {
  name: "hati",
  job: "fe",
  sayHello: function() {
    console.log("Hello world!");
  }
};

for (const elem in user) {
  console.log(elem, user[elem]); // name hati / job fe / sayHello f(){console.log("Hello world!");}
}

연산

산술 연산

let x = 10;
let y = 3;

console.log("x + y=", x + y); // x + y = 13
console.log("x - y=", x - y); // x - y = 7
console.log("x * y=", x * y); // x * y = 30
console.log("x / y=", x / y); // x / y= 3.3333333333333335
console.log("x % y=", x % y); // x % y = 1
console.log("x ** y=", x ** y); // x ** y = 1000

// 숫자만 있으면 -> 더하기
// 문자가 하나라도 있으면 -> 문자열 연결
// 피연산자가 하나이면 -> 숫자형으로 변환
console.log(+"hello"); // NaN  -> 숫자형이 아니기 때문에 NaN (Not a Number)
console.log(+"4"); // 4 -> 피연산자가 4 하나이기 때문에 숫자형으로 변환

산술할당연산

- 산술연산과 동시에 변수에 값을 할당하는 연산자

- 기존 변수의 값을 수정할 때 유용하게 사용

let a = 10;

a += 20; // a = a+20;
console.log("+=", a); // += 30 -> 10 + 20 = 30

a -= 5; // a = a - 5;
console.log("-=", a); // -= 25 -> 30 - 5 = 25

a *= 2; // a = a * 2;
console.log("*=", a); // *= 50 -> 25 * 2 = 50

a /= 5; // a = a / 5;
console.log("/=", a); // /= 10 -> 50 / 5 = 10

a %= 4; // a = a % 4;
console.log("%=", a); // %= 2 -> 10 % 4 = 2

a **= 3; // a = a ** 3;
console.log("**=", a); // **= 8 -> 2 ** 3 = 8

증감연산자

- 연산자가 앞에 있으면 전위

- 연산자기 뒤에 있으면 후위

let num1 = 10;

console.log(num1++); // 10
console.log(num1); // 11
console.log(++num1); // 12
console.log(num1); // 12

console.log(num1--); // 12
console.log(num1); // 11
console.log(--num1); // 10
console.log(num1); // 10

비교 연산

- 값이 크고 작음을 비교하거나 같고 다름을 비교하는 연산

- 문자열일 경우 사전순으로 비교

- 결과는 항상 true 또는 false 중 하나의 값을 반환

대소관계 연산자

let x = 20;
let y = "10";

console.log("x > y: ", x > y); // x > y: true -> 20 > 10 = true
console.log("x < y: ", x < y); // x < y: false -> 20 > 10 = false

let z = 20;

console.log("x >= z: ", x >= z); // x >= z: true -> 20 = 20 = true
console.log("x <= z: ", x <= z); // x <= z: true -> 20 = 20 = true

- 문자열로 적용해도 숫자형으로 변경되어 적용

console.log("100" < "2"); // true -> 유니코드 값에 따라 사전식으로 비교
console.log("100" < 2); // false -> 100 > 2

- NaN는 모든 비교 연산에 있어서 false을 반환함

console.log("Hello" < 2); // false -> NaN < 2
console.log(2 > "Hello"); // false -> NaN < 2
console.log(NaN < NaN); // false

동등(==) / 부등(!=)

- 값을 비교할 때 사용

- 타입이 다른 경우에는 타입 변환을 수행한 후 비교

- 원시타입은 값이 같을 때 true값을 반환

- 객체 타입은 동일한 객체를 참조할 때만 true값을 반환

- 동등/부등연산자는 타입변환이 발생

let num1 = 30;
let num2 = 20;

console.log(num1 == 30); // true -> 30 = 30
console.log(num1 == "30"); //true -> 30 = 30
console.log(num1 == 30n); //true -> 30 = 30 (30n은 BigInt)
console.log(num1 == num2); //false -> 30 = 20
console.log(num1 == "30n"); //false -> 30 = NaN (문자열 30n은 숫자로 변경불가)

console.log(num1 != num2); // true -> 30 != 20
console.log(num1 != "30"); // false -> 30 = 30 (문자열 30은 숫자형으로 변환)
console.log(num1 != 30n); //false -> 30 = 30

자동 형 변환

- 연산과 비교를 위하여 자바스크립트 엔진이 데이터형을 자동으로 변환하는 것을 의미

- 개발자의 의도와 상관없이 코드에 따라 강제로 형을 변환

console.log(+false); // 0
console.log(+true); // 1

console.log(+"234"); // 234
console.log(+"Hello"); // NaN -> 숫자로 변환 불가능
console.log(+""); // 0 -> 빈 문자열로 0으로 변환

console.log(+null); // 0 -> null은 0으로 변환
console.log(+undefined); // NaN -> 숫자로 변환 불가능

다른 형 비교

console.log("" == false); // true -> ""도 0으로 변환 = false도 0으로 변환
console.log("Hello" == true); // false -> "Hello"는 NaN으로 변환 != true는 1로 변환
console.log("Hello" == NaN); // NaN은 ==로 비교할 때 항상 false

console.log("isNaN", isNaN("Hello")); // true -> Hello는 NaN
console.log("Number isNaN", Number.isNaN("Hello")); // false 

console.log(null == undefined); // true -> 두 값은 서로 동등 (null==null / null==undefined / undefined==undefined)
console.log(null == ""); // false -> null은 빈 문자열이 아님

객체의 비교

const obj1 = {a: "1", b: "2"};
const obj2 = {a: "1", b: "2"};
const obj3 = obj1;

console.log(obj1 == obj2); // false -> 서로 다른 객체가 동일한 내용을 가졌더라도 동등하지 않음
console.log(obj1 == obj3); // true -> 동일한 참조를 가지기 때문에

console.log([] == []); // false -> 배열도 객체로 서로 다른 배열 객체는 동등하지 않음

객체 VS 원시타입

- 객체를 원시 타입에 맞춰서 변환

console.log([1, 2] == "1, 2"); // true -> 배열 [1, 2]은 문자열로 "1, 2"로 변환되기 때문에 동등함
console.log([] == 0) / true -> 빈 배열은 빈문자열로 변환되고 숫자 0으로 또 변환되어 동등

일치(===) / 불일치(!==)

- 타입 변환이 없고, 값과 타입을 모두 비교

let num3 = 30;
let num4 = 20;

console.log(num3 === 30); // true -> 30 == 30
console.log(num3 === "30") // false -> 타입이 다르기 때문에 false
console.log(num3 === 30n) // false -> 타입이 다르기 때문에 false

console.log(num3 !== 30); // false -> 값과 타입이 모두 같기 때문에 true
console.log(num3 !== "30"); // true -> 값은 같지만 타입이 다르기 때문에 false
console.log(num3 !== num4); // true -> 타입은 같지만 값이 다르기 때문에 true


const obj4 = [1, 2, 3, 4];
const obj5 = [1, 2, 3, 4];
const obj6 = obj4;

console.log(obj4 === obj5); // false -> 내용이 같더라도 참조가 다르기 때문에 false
console.log(obj4 === obj6); // true -> 동일한 참조를 같기 때문에 true

논리연산

논리곱 (AND - &&)

- 두 개의 피연산자가 모두 true일 때만 true로 반환

- 피연산자가 boolean이 아닌 경우에는 Truthy한지 Falsy한지를 판단

console.log("true && true: ", true && true); // true && true: true
console.log("true && false: ", true && false); // true && false: false
console.log("false && true: ", false && true); // false && true: false
console.log("false && false: ", false && false); // false && false: false

let age = 20;

console.log(age > 5 && age < 25); / /true -> 5 < age < 25
console.log("licat" && "wade"); // wade -> 모든 값이 truthy한 값일 경우 마지막값을 반환

- 모든 값이 Truthy하다면 가장 마지막 값을 반환

- Falsy한 값이 있다면 가장 처음 위치해있는 Falsy한 값을 반환

- 단축평가: 논리곱 연산에서 False를 만나면 뒹 ㅔ값이 True가 오더라도 False로 평가되기 때문에 나머지 생략

let age = 20;

console.log(age > 5 && false && age < 25); // false -> true && false && true (첫번째 false값이 나오면 이후 연산 생략)
console.log(age > 5 && "" && age < 25)); // "" -> 빈문자열은 false로 평가 
console.log(age > 5 && age < 25 && "licat"); // licat -> 모두 true일 경우 마지막 값을 반환


let isLoggedIn = true;
isLoggedIn && console.log("Hello User!"); // Hello User! -> 모두 true일 경우 마지막 값을 반환


const result = isLoggedIn && console.log("Hello User!"); 
console.log(result); // undefined


const user = {
  name: "뽀로로",
  address: {
    city: "jeju"
  }
};

console.log(user.number); // undefined -> user 객체에는 number속성이 없으므로 undefined
console.log(user.number && user.number.location); // undefined -> undefined은 false으로 평가되어 이후 연산은 생략

논리합 (OR - ||)

- 두 개의 피연산자 중 적어도 한 개 이상이 true이면 true를 반환

- 두 피연산자가 모두 false일 때만 false를 반환

console.log(`true || true: ${true || true}`); // true
console.log(`true || false: ${true || false}`); // true -> 한 개 이상이 true이면 true로 반환
console.log(`false || true: ${false || true}`); // true -> 한 개 이상이 true이면 true로 반환
console.log(`false || false: ${false || false}`); // false

- 논리합 연산자 또한 단축 평가가 일어남

- 모든 피연산자가 Falsy라면 가장 마지막 값을 반환

- Truthy한 값이 있다면 가장 처음 만나는 Truthy한 값을 반환

let age2 = 20;

console.log(age < 10 || age < 25); // true -> false || true 
console.log("" || "licat" || NaN || null); // licat -> 값이 있는 문자열 true / 비어있는 문자열 false


let name = window.prompt("이름을 입력해주세요");

name = name || "사용자";
console.log("이름: ", name); // 취소할 땐 null / 그냥 확인을 눌렀을 때 빈 문자열

논리 부정 (NOT - !)

- 단일한 피연자를 가지고 논리값을 부정

- true를 false로, false를 true를 변환

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

- 논리부정을 2번 사용해서 boolean 타입으로 변환가능

console.log(!23); // false -> 23은 truthy한 값
console.log(!!23); // true -> 부정의 부정 = true

nullish 연산자 (??)

- 첫 번째로 오는 undefined나 null이 아닌 값을 반환 (첫 번째로 오는 true값)

- 왼쪽 피연산자가 null도 아니고 undefined도 아니면 왼쪽 피연산자를 반환

- 왼쪽 피연산자가 null이거나 undefined일 경우, 오른쪽에 있는 피연산자를 반환

const a = null;
const b = 23;

console.log(a ?? b); // 23 -> undefined나 null가 아닌 첫 번째 true값
console.log(b ?? a); // 23 -> undefined나 null가 아닌 첫 번째 true값

console.log(null ?? null); // null
console.log(null ?? null ?? undefined); // undefined -> 마지막까지 평가를 이어가서 마지막인 undefined가 반환
console.log(null ?? "weniv" ?? undefined); // weniv -> undefined나 null가 아닌 첫 번째 true값 반환
console.log(null ?? "" ?? undefined); // "" -> undefined나 null가 아닌 첫 번째 true값 반환

or 연산자 VS nullish 연산자

- OR 연산자: 첫 번째 truthy를 반환

- nullish 연산자: 첫번째로 값이 할당된 피연산자를 반환

let name = window.prompt("이름을 입력해주세요");

name = name ?? "사용자";
console.log("이름: ", name); //취소를 누르면, 이름: 사용자 / 입력하지 않고 확인을 누르면, 이름: __(빈문자열)

옵셔널 체이닝 (?.)

- 옵셔널 체이닝을 이용하여 간결하게 단축평가를 표현

- 객체가 null이나 undefined일 때 오류를 발생하지 않고 undefined를 반환

const user = {
  name: "뽀로로",
  address: {
    city: "jeju"
  },
  number: {
    location: "seoul",
  },
  sayHello() {
    console.log("Hello world"); 
  }
};


console.log(user.number); 
console.log(user && user.number && user.number.location); // undefined
console.log(user?.number?.location); // undefined -> null이나 undefined가 아니면 뒷값으로 넘어감
console.log(user.sayHello?.()); //undefined -> sayHello의 반환값이 없기 때문에 undefined / return값이 있어야 반환값이 생성

옵셔널체이닝과 nullish 함께사용

console.log(user?.number?.location ?? "jeju"); // jeju

형변환

문자열 타입으로 변환

String

console.log(typeof String(23)); // String -> 문자열 타입으로 변환
console.log(String(NaN)); // NaN
console.log(String(true)); // true
console.log(String(null)); // null
console.log(String(undefined)); // undefined

toString

console.log(false.toString()); // false 
console.log((3).toString()); // 3
console.log((2.3).toString()); // 2.3
console.log((3).toString(2)); // 11 -> 3을 2진수로 변환
console.log(null.toString()); // 오류 발생
console.log(undefined.toString()); // 오류 발생

자동형변환

console.log(23 + ""); // 23
console.log(true + ""); // true
console.log(null + ""); // null

숫자형 변환

Number

console.log(Number("102")); // 102
console.log(Number("Hello")); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

parseInt / parseFloat

- 문자열 -> 숫자형 (only)

단항 연산자

console.log(+"102"); // 102
console.log(+"Hello"); // NaN
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(+undefined); // NaN

**자동형변환 -> 곱하기(*1)**

- 더하기를 제외한 산술연산 -> 숫자형으로 변환

console.log("201" * 1) // 201
console.log("Hello" * 1) // NaN
console.log(true * 1) // 1
console.log(false * 1) // 0
console.log(null * 1) // 0
console.log(undefined * 1) // NaN

불리언변환

Boolean 함수

console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("false")); // true
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

!! 논리부정 연산자 2번 사용

console.log(!!35); // true
console.log(!!"Hello"); // true
console.log(!!null); // false
console.log(!!undefined); // false

조건문

- 주어진 조건에 따라 실행되는 코드

- 조건식이 참(Truthy)인 값인지 거짓(Falsy)인 값인지 판단하여 코드의 수행 여부를 결정

◽ Truthy: true / 문자열 / 0이 아닌 숫자 / [ ] / { }

◽ Falsy: false / 비어있는 문자열 / 0 / null / undefined / NaN

if문

기본구조

if (조건식) {
  //조건식이 만족했을 때 실행하고자 하는 코드
}

else문

- if문은 조건이 참일 때만 실행되기 때문에, 그 밖의 상황인 조건이 거짓일 때 실행할 코드가 필요한 경우에 사용

//점수에 따라서 칭찬메세지를 출력
let score = 60;

if (score > 80) {
  //조건식이 true일 때
  console.log("참 잘했어요");
}else{
  //조건식이 false일 때
  console.log("분발하세요!");
}
//분발하세요!

- 중괄호 안의 코드가 한줄 뿐이라면 중괄호를 생략해서 쓸 수 있음

if(true) console.log("중괄호 생략!");

조건이 여러 개일 경우

// 80점이상이면 "참 잘했어요!"
// 60점이상이면 "잘했어요!"
// 그 외에는 "분발하세요!"

let score2 = 100;

if(score2 > 80) {
  console.log("참 잘했어요!");
} else {
  if (score2 > 60) {
    console.log("잘 했어요!");
  } else {
    console.log("분발하세요!");
  }
}
// 참 잘했어요!

else if 문

- 조건이 여러 개일 때, else if문을 사용하여 여러 조건을 처리가능

let score2 = 100;

if (score2 > 80) {
  console.log("참 잘했어요!");
} else if (score2 > 60) {
  console.log("잘 했어요!");
} else if (score2 > 40) {
  console.log("했어요!");
} else {
  console.log("분발하세요!");
}
// 참 잘했어요!


if (score2 > 40) {
  console.log("했어요");
} else if (score2 > 60) {
  console.log("잘 했어요");
} else if (score > 80) {
  console.log("참 잘했어요");
} else {
  console.log("분발하세요");
}
// 했어요!