𝟏. 객체
객체에 대해서 정리해 보겠다.
let person = {
name: "jisu", // 프로퍼티
key1: "value2",
key2: true,
key3: [1, 2],
say: function () {
return console.log(this.name, "hi!");
},
name: "jisu"
}; // 객체 리터럴 방식위와 같이 person 이라는 객체를 객체 리터럴{}을 통해 만들 수 있음. 이때 객체의 프로퍼티로 문자, 숫자, boolean, 배열, 함수 등이 올 수 있다.
console.log(person.name); // 점 표기법
console.log(person["name"]); // 괄호 표기법위와 같이 객체의 프로퍼티에 점 표기법 또는 괄호 표기법을 사용해서 접근 할 수 있다.
// 객체 생성 이후 변경
let person2 = {
name: "지수",
age: 35
};
person2.home = "korea";
console.log(person2); //{name: "지수", age: 35, home: "korea"}생성된 객체의 프로퍼티를 수정할 때는 위와 같이 점 표기법으로 접근해서 수정할 값을 넣어준다.
// 객체 생성 이후 삭제
person2.location = null; // delete 삭제는 메모리 연결을 삭제하지 않음, null로 명시적 표기객체를 생성한 이후 프로퍼티를 삭제할 때는 delete를 사용하기 보다는 해당 프로퍼티에 접근하여 null 값을 주는것이 더 명확하다.
// 객체 안에 존재하는 값 확인
console.log(person2.hobby); // undefined => 명확하지 않음
// to-be
console.log(`hobby : ${"hobby" in person2}`); // hobby : false => 명확
값 존재 여부를 확인할 때는, 점 표기법으로 접근하여 출력하면 위와 같이 undefined가 나오기 때문에 명확하지 않다.
따라서 "key" in obj 형태로 검색하여 boolean 값을 반환시키는 것이 명확한 확인법이다.
참고로 in 연산자는 mdn에서 더 알아보자. 📌in 연산자 mdn
// this 활용
let person = {
name : 'jisu',
age : 12,
say : function () {return this.name + ' hi'} // jisu hi
// 호출 주체가 person 객체이므로 this = person.
// 따라서 this.name == person.name
}
person.say(); // 객체의 메서드 호출
𝟐. 배열
let arr = new Array(); // 생성자 함수
let arr2 = []; // 배열 리터럴
let arr = [1, "2", undefined, {}, [], function () {}]; // 모든 자료형 요소 가능
let arr = [1, 2, 3, 4, 5];
arr.push(6); // 값 추가
console.log(arr.length); // 배열의 길이 // 6배열은 new Array() 생성자 함수로 생성하거나 [] 배열 리터럴로 만들 수 있다. 또한 배열의 요소로 모든 자료형이 들어갈 수 있으며, push와 같은 메서드로 값을 추가하여 원본 배열을 변경할 수 있다. length 메서드로 배열의 길이를 확인할 수도 있다.
// 반복문
for (let i = 0; i <= 10; i++) {
console.log("안녕"); // 안녕 10번 출력
}
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 1, 2, 3
}for(초기식, 조건식, 연산식) 반복문을 통해 배열을 반복하여 수행할 수도 있다.
// 객체의 정보를 배열로 담아 반복문
let person = {
name: "jisu",
age: 12,
home: "ko"
};
const personKeys = Object.keys(person); //person key들의 배열
for (let i = 0; i < personKeys.length; i++) {
console.log(personKeys[i]); // name, age, home
}Object.keys()로 객체의 key들을 담은 배열을 얻을 수 있는데 이것들을 for문을 돌려서 각각의 property의 key 값을 얻을 수 있다. (Object.values() / Object.entries()등)
𝟐-𝟏. 배열 내장함수
1.forEach
2.map
3.includes
4.indexOf - 일치하는 요소의 인덱스 리턴 없으면 -1
5.findIndex - 콜백함수 true인 요소의 인덱스 리턴
6.find - 콜백함수 true인 요소 전체 리턴
7.filter
8.slice
9.concat
10.sort - compare func 사용시 -1,0,1 반환으로 정렬
11.join - 배열을 문자열로
𝟐-𝟐. truthy and falsy
const getName = (person) => {
return person.name;
};
let person; // undefined
const name = getName(person); // undefined 값을 넘겨줌
console.log(name);
// TypeError: Cannot read properties of undefined (reading 'name')person 객체를 넘기면 해당 객체의 name을 반환하는 함수 getName을 만들었다. 이때 반환된 값을 name 변수에 담아서 콘솔에 찍어보는 것인데, 만약 위 예제코드처럼 undefined인 값을 넘겨주면 타입에러가 발생한다.
마찬가지로 null을 넘겼을 때 타입에러가 발생하며, NaN을 넘기면 undefined를 반환한다.
이 부분을 각각 명시하기 보다는 falsy한 값을 활용하면 좋다.
const getName = (person) => {
if (!person) {
return "객체가 아닙니다.";
}
return person.name;
};
let person = NaN; // undefined
const name = getName(person); // undefined 값을 넘겨줌
console.log(name); // 객체가 아닙니다.위와 같이 person에 ! 연산자를 붙여 boolean 값으로 평가받게 한다. 따라서 null과 같이 falsy한 값이 들어오면 (!null)은 (!false)로 평가되고 조건문이 (true)가 되므로 if 구문이 실행되는 것이다.
𝟐-𝟑. 삼항연산자
let a = [];
a.length === 0 ? console.log("빈 배열") : console.log("안 비었음");
// 빈 배열
조건 ? true일 때 실행할 구문 : falsed일 때 실행할 구문
간단한 if문은 삼항연산자로 바꿔서 사용해도 될듯
저기서는 빈 배열 값=(truthy 값)을 평가해서 true 구문 실행됨
