객체
객체(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: falselet 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("분발하세요");
}
// 했어요!
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240712 JavaScript-06 (1) | 2024.07.25 |
|---|---|
| [EST] 240711 JavaScript-05 (0) | 2024.07.23 |
| [EST] 240709 JavaScript-03 (0) | 2024.07.12 |
| [EST] 240708 JavaScript-02 (0) | 2024.07.09 |
| [EST] 240705 JavaScript-01 (0) | 2024.07.05 |
