JavaScript 기초 2/3

한입 크기로 잘라 먹는 리액트(React.js) 강의 내용을 정리하며 JavaScript의 기본 개념에 대해 알아보자

📒 객체

✏️ 객체 생성 방법

// 객체 리터럴 방식 : 중괄호를 이용해서 객체를 생성하는 방식

let person = {
	key1 : "value",
    key2 : "value2",
    key3 : true,
    key4 : 123
};

👉🏻 많은 프로그래머들이 리터럴 방식으로 객체를 만들어서 사용하고 있다.
👉🏻 중괄호 안에 key와 value를 넣어준다.
👉🏻 property의 value는 어떤 자료형이 들어가도 관계없다.
하지만 key는 반드시 문자열이 들어가야 한다. (따옴표는 사용하지 않는다.)
👉🏻 key를 이용해서 value를 구분하기 때문에 key는 중복돼도 되지만 추천하지 않는다.
(중복될 경우 뒤에 위치한 key를 불러서 사용한다.)

✏️ 객체 접근법

🏷️ 객체 접근법 1 : 점 접근법

console.log(person.key1);

// 점을 이용해서 접근했기에 점 표기법이라고 부른다.
// 객체이름.property

👉🏻 없는 key에 접근하면 undefined가 출력된다.

🏷️ 객체 접근법 2 : 괄호 표기법

console.log(person["name"]);

// 반드시 문자열 형식으로 접근해야한다. 따라서 따옴표를 반드시 붙여야 한다.

👉🏻 괄호 표기법은 함수를 통해서 객체 값을 받아올 때 편리하다.

// 괄호 표기법을 사용해서 객체 값 받아오는 예시

let person = {
	name : "최유리",
    age : 24
}; // 객체 리터럴 방식

console.log(getPropertyValue("name")); // 호이스팅 사용

function getPropertyValue(key) {
	return person(key);
}

✏️ property 수정

🏷️ property 추가

let person = {
	name : "최유리",
    age : 24
}; // 객체 리터럴 방식

person.location = "한국";
console.log(person); 

// 결과
// name : "최유리"
// age : 24
// location : "한국"

👉🏻 property를 나중에 추가하고 싶으면 점 표기법과 괄호 표기법 둘 다 사용 가능하다.

🏷️ property 수정

let person = {
	name : "최유리",
    age : 24
}; // 객체 리터럴 방식

person.name = "최율리시스무어";

// person.name만 나중에 수정해도 됨

👉🏻 let 대신에 const도 사용 가능하다.

const person = {
	name : "최유리",
    age : 24
}; // 객체 리터럴 방식

person.name = "최율리시스무어";

👉🏻 원래 const는 상수이기 때문에 값을 바꾸면 오류가 나는데 person이라는 상수 자체를 수정하는 것이 아니라 안에 가지고 있는 object를 수정해서 오류가 나지 않는다.

const person = {
	name : "최유리",
    age : 24
}; 

const person = {
	name : "최고가되고싶은유리",
    age : 24
}; 

👉🏻 이렇게 작성하면 person이라는 상수가 수정되어 오류가 생긴다.
따라서 객체는 상수로 선언해도 그 안에 있는 property는 수정하고 추가하는게 가능하다.

🏷️ property 삭제

let person = {
	name : "최유리",
    age : 24
}; 

delete person.age;
// delete person["age"];

👉🏻 두가지 방법 모두 가능하나 연결만 끊었지 메모리는 그대로 차지하고 있다.
👉🏻 메모리도 삭제하고 싶으면 person.age = null; 사용해야 한다.

✏️ 그 외 객체 관련

🏷️ 함수 사용과 this

let person = {
	name : "최유리", // 멤버
    age : 24		// 멤버
    say : function() {
    	console.log('안녕? 나는 ${this["name"]} 라고 해');
    } // 메서드 (방법)
}; 

person["say"](); // == person.say();

👉🏻 함수를 선언했을 때 함수도 사용 가능하다.
👉🏻 객체 안에 함수가 들어있으면 method라고 부른다.(method는 방법이라는 뜻)
함수가 아닌 property들은 member라고 부른다.
👉🏻 함수안에 member을 넣으려면 ''안에 this.name을 사용하면 된다.
this는 자기 자신의 객체를 가리킨다.
👉🏻 객체에 존재하지 않는 property에 접근하면 undefined라고 출력된다.

// 객체에 존재하는지 확인하는 방법

console.log(name : ${"name" in person});

👉🏻 in을 사용해서 물어보면 true나 false인 boolean 결과로 반환된다.

📒 배열

✏️ 선언법

// 배열 표기법

let arr = []; // 배열은 대괄호를 사용하여 표기, 배열 리터럴

👉🏻 빈 배열은 []로 출력이 된다.

// 모두 가능

let arr = [1, ”2”, true, null, undefined, {}, [], function(), {}];

👉🏻 배열도 아무 자료형이 들어가도 관계가 없다.

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

// 출력
// [5][1,2,3,4,5]로 출력
// 개수를 알려주고 값을 알려준다.

✏️ 배열 접근 및 수정

🏷️ 배열 접근
👉🏻 배열은 위치한 순서(index)를 이용하여 각각의 값에 접근이 가능하다.
0부터 시작하는 순서로 배열에 접근이 가능하다.

🏷️ 배열 값 추가

let arr = [1,2,3,4,5];
arr.push({key : "value"});

👉🏻 push를 사용하면 배열의 가장 마지막에 원소를 추가할 수 있다.
👉🏻 배열의 길이는 arr.length를 사용하면 된다. (객체의 property 접근법과 동일)
배열도 객체로 이루어져 있어 property나 함수를 객체의 접근법처럼 사용가능하다.
👉🏻 length는 배열이 바뀌면 자동으로 갱신된다.
👉🏻 배열은 객체와 더불어서 자바스크립트에서 가장 많이 사용된다.

📒 반복문

✏️ 예시

for (let i=1; i<=100; i++){
	console.log(“yuri”);
}

// 배열 순회
const arr = [“a”,”b”,”c”];
for (let j=0; j<arr.length; j++){
	console.log(arr[j]);
}

// 키 값만 순회
const personKeys = object.keys(person);
console.log(personKeys);
for(let i=0; i<personKeys.length; i++){
	console.log(personKeys[i]);
} 
 
// 키 + 벨류 값 순회
const personKeys = object.keys(person);
console.log(personkeys);
for(let i=0; i<personkeys.length; i++){
	const curKey = personkeys[i];
	const curValue = person[curKey];

	console.log(${curKey} : ${curValue});
} 

// 벨류 값만 순회
const personKeys = object.values(person);
for(let i=0; i<personValues.length; i++){
	console.log(personValues[i]);
}