인프런 리액트 강의 - Javascript 요약 ①

1. Let과 Var의 차이

: Var의 경우, 동일한 이름으로 변수를 다시 선언할 수 있지만 let과 const는 같은 변수명으로 다시 객체의 재선언이 불가능하다. (let은 값을 바꾸는 재할당은 가능하다.)

 

 

2. 형변환

: JS에서는 자동으로 형변환이 이루어지는 경우가 있다. 곱하기 연산(*)의 경우, 숫자형과 문자형을 곱했을 때 문자형을 숫자형으로 변환 가능하다면 자동으로 형변환이 진행되며, 더하기 연산(+)의 경우, 문자형의 더하기 연산으로 간주되어 숫자형을 문자형으로 자동 형변환한다.

그 외에도 의도적으로 형변환을 지정할 경우에는 parseInt(), parseFloat() 등을 사용한다. (parse의 경우 문자열 내에서 숫자만 찾아내 변환한다.)

 

 

3. 연산자

자바스크립트에서는 ==와 ===의 동작이 다르다.

기본적으로 우리가 생각하는 Python에서의 ==의 기능을 사용하기 위해서는 === 연산자를 사용해야 한다.

==의 경우 문자형과 숫자형을 비교했을 때, 두 값이 동일하면 자료형이 다르더라도 True를 반환하게 된다.

따라서 Python의 연산자 != 역시 자바스크립트에서는 !==가 된다.

 

 

4. 화살표 함수

변수에 함수를 선언하는 익명 함수의 경우, 아래 코드와 같이 단순화 하기도 한다.

console.log(helloB());

// 함수 표현식
let helloA = function () {
	return "안녕하세요 여러분";
}

// 화살표 함수
// 한줄일 경우에는 블럭을 제외할 수 있다.
let helloC = () => "안녕하세요 여러분";
let helloD = () => {
	return "안녕하세요 여러분";
}

// 함수 선언식
// 선언식은 호이스팅이 적용됨
function helloB () {
	return "안녕하세요 여러분";
}

 

 

5. 콜백함수

패러미터에 함수를 지정하는 것을 콜백 함수라고 부른다. 아래 코드 참조.

function checkMood(mood, goodCallback, badCallback) {
	if (mood === "good") {
    	// 기분 좋을 때 하는 동작
        goodCallback();
    } else {
    	// 기분 안 좋을 때 하는 동작
        badCallback();
    }
}

function cry () {
	console.log("ACTION :: CRY");
}

function sing() {
	console.log("ACTION :: SING");
}

function dance() {
	console.log("ACTION :: DANCE");
}

// 콜백함수
checkMood("sad", sing, cry);	// ACTION :: CRY를 출력

 

 

6. 객체

객체는 Non-Primitive Type(비 원시 타입)에 해당한다.

원시타입은 메모리의 값이 수정이 안 되고, 객체타입(비 원시 타입)은 메모리의 값을 수정할 수 있다. 그렇기 때문에 객체에 값을 복사하려면 스프레드 연산자 등을 통해 새로 객체를 만들어줘야 한다.

객체간의 비교는 참조값을 통해 이루어진다. 얕은 복사는 ===를 하면 true가 뜨지만, 깊은 복사는 false가 된다. 참조값을 기준으로 비교하기 때문에 ==도 false가 된다.

만약 두 객체 내부의 값을 비교하고 싶다면 JSON.stringify등의 함수를 써서 비교해줘야 한다.

 

객체를 생성하는 방법은 아래 코드와 같다.

// 객체 생성자 (new 키워드 사용)
let person1 = new Object();

// 객체 리터럴 방식
let person = {
    key: "value", // 프로퍼티 (객체 프로퍼티)
    key1: 123,
    key2: true,
    key3: undefined,
    key4: [1, 2]
    key5: function() {
    	console.log(`안녕 나는 ${this.key}`);
    }
};

// 객체의 프로퍼티를 중괄호 안에 출력
console.log(person);

// 객체의 프로퍼티에 접근(점 표기법)
console.log(person.key1);

// 괄호 표기법
// 반드시 대괄호 안에는 문자열 형태로 키를 입력할 것
// 대문자 빠지면 변수명으로 인식함
console.log(person["key1"]);

// 점 표기법으로 프로퍼티 추가/수정하기
person.location = "한국";

// 객체 내의 함수 호출 시
person.key5();
person["key5")();

 

객체 프로퍼티 안에는 다양한 자료형이 들어갈 수 있다. 만약 key명이 동일할 경우, 나중에 선언된 것으로 값이 덮어씌워진다.

만약 객체 내에 존재하지 않는 프로퍼티에 접근할 경우, undefined를 출력한다. 또한 객체 안에 들어있는 함수는 메서드라 부르며, 그 외의 키 값은 전부 멤버라고 부른다.

 

만약 객체를 선언하는 변수를 let 대신 const로 선언하더라도, 프로퍼티의 변경은 상수 자체의 변경이 아니기 때문에 점 표기법으로 수정이 가능하다. 대신, person에 새로운 객체를 대입 연산자로 할당할 경우에는 const로 상수 선언을 했을 시 오류가 발생한다.

 

프로퍼티의 삭제는 delete 키워드를 이용한다. (delete 객체이름.프로퍼티; 혹은 delete 객체이름["프로퍼티"]; 의 형태)

그러나 메모리에서 실제로 지워지는 건 아니며, 객체 자체와의 연결이 사라지는 것뿐이다.

따라서 차라리 해당 프로퍼티에 null을 대입하는 것을 추천한다.

아래 코드 참조.

const person = {
	name: "B",
    age: 25
};

// 객체와의 연결은 끊어지지만 메모리 상에서는 삭제X
delete person.name; 

// 메모리상에서도 삭제
person.name = null;

 

그리고 어떤 프로퍼티가 객체 안에 있는지 확인하는 방법은 아래와 같다.

 

console.log(`name : ${"name" in person}`); // 있을 경우 true 반환

 

 

 

7. 배열

 

배열의 생성은 객체와 유사하다. 생성자를 사용하거나, 리터럴을 사용하면 된다.

// 생성자 호출
let arr = new Array();

// 배열 리터럴 사용
let arr = [];

// 어떤 자료형이든 들어감
let arr1 = [1, "2", true, null, undefined, {}, [], function() {}];

 

배열에 접근하는 방식은 Python과 유사하게 인덱스를 부르는 방법으로 부를 수 있다.

push를 이용하면 배열의 가장 마지막에 원소를 추가할 수 있으며, 자료형은 상관없다. (기존의 원소와 전혀 다른 자료형이어도 추가할 수 있다.)

배열의 길이는 length를 이용해 리턴할 수 있다.

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

// 원소 추가하기
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

// 길이 반환하기
console.log(arr.length);

 

배열의 내장 함수는 객체의 메서드를 쓰는 것처럼 사용하면 된다.

아래는 내장  함수의 예시다.

const arr = [1, 2, 3, 4];



// 1) forEach

// for문으로 원소를 하나씩 출력하는 것과 동일
// (elm) => console.log(elm) 부분은 콜백 화살표 함수
arr.forEach((elm) => console.log(elm));

// 함수 선언 방식
arr.forEach(function (elm) {
	console.log(elm);
});



// 2) map

const newArr = arr.map((elm) => {
	return elm * 2;
});

// 함수 선언 방식
arr.forEach(function (elm) {
	newArr.push(elm * 2);
});

console.log(newArr);



// 3)includes

// 주어진 배열에서 전달받은 원소를 포함(값, 자료형 동일)하고 있으면 true, 아닐시 false
let number = 3;
console.log(arr.includes(number));

// 함수 선언 방식
arr.forEach((elm) => {
	if (elm === number) {
    	console.log(true);
    }
});



// 4) indexOf

// 찾는 게 없을 경우 -1을 반환
console.log(arr.indexOf(number));


const arr1 = [
	{ color: "red" },
    { color: "black" },
    { color: "blue" },
    { color: "green" }
];



// 5) findIndex
// 일치하는 요소가 여러 개 있을 경우, 가장 먼저 조건을 만족하는 값을 return

console.log(arr1.findIndex((elm) => elm.color === "green" ));

// 함수 선언 방식
console.log(arr1.findIndex((elm) => {
	return elm.color === "red";
}));



// 6) find
// 인덱스가 아닌 조건에 부합하는 값 자체를 가져옴

const element = arr1.find((elm) => {
	return elm.color === "blue";
});
console.log(element); //{ color: "blue" } 출력



// 7) filter

const arr2 = [
	{ num: 1, color: "red" },
    { num: 2, color: "black" },
    { num: 3, color: "blue" },
    { num: 4, color: "green" },
    { num: 5, color: "blue" },
];

console.log(arr2.filter((elm) => elm.color === "blue"));



// 8) slice
// 슬라이스 하여 배열로 반환

console.log(arr2.slice(0, 2)); // 0부터 1까지 자름 (0(begin) <= 자르는 인덱스 < 2(end))



// 9) concat
// 두 개 합치기

const arr3 = [
	{ num: 1, color: "red" },
    { num: 2, color: "black" },
    { num: 3, color: "blue" }
];

const arr4 = [
    { num: 4, color: "green" },
    { num: 5, color: "blue" }
];

// arr3 뒤에 arr4를 붙임
console.log(arr3.concat(arr4));



// 10) sort

let chars = ["나", "다", "가"];
let numbers = [0, 1, 3, 2, 10, 30, 20];

// 오름차순 정렬(원본 배열을 정렬)
chars.sort();

console.log(chars);

// sort는 문자열로 정렬하기 때문에
// 숫자의 크기 순이 아니라 사전순 정렬을 함
numbers.sort();
console.log(numbers);

// 따라서 숫자를 정렬할 경우 비교함수를 작성
const compare = (a, b) => {
	if (a > b) {
    	// 양수일 경우 a를 뒤로 보냄
    	return 1;
    } else if (a < b) {
    	// 음수일 경우 a를 앞으로 보냄
		return -1;
	} else {
		return 0;
	}
}
numbers.sort(compare);

// 11) join

const arr5 = ["복슬복스", "님", "안녕하세요", "또오셨군요"];

// join()의 괄호에 들어가는 건 구분자(보통은 쉼표로 연결해줌)
console.log(arr5.join());

 

 

 

8. 변수의 값에 따른 참과 거짓(Truthy & Falsy)

 

변수에 0을 제외한 모든 값 및 빈 배열, 빈 객체 등이 들어가면 True, 그 외 ±0이나 NaN, 공백, undefined, null 등은 False로 인식한다. (문자열로 "false"를 넣어도 True로 인식한다.)

 

const getName = (person) => {
	return person.name;
};


let person = { name: "복슬복스" };

// 만약 let person; 으로 undefined를 전달할 경우
// 점 표기법을 사용할 수 없으므로 오류가 발생한다.
const name = getName(person);
console.log(name);

// 개선된 함수
const getNameNoError = (person) => {
	// Falsy 속성을 이용하기 (원래는 person === undefined || person === null 사용)
	if (!person) {
    	return "객체가 아닙니다.";
    }
    return person.name;
}

const real_name = getNameNoError(person);

 

 

9. 삼항 연산자

 

앞으로의 강의