자바스크립트 기초 문법 정리 (문자열 기본, 비교 연산자, Undefined와 Null, 변수, 조건문, 삼항 연산자(조건부 연산자), 배열메소드, 함수 기본, 객체 리터럴, 객체의 비교)

다시 공부하겠습니다.

열심히 공부한 나 자신.. 기초부터 다시 다지고 올 수 있도록.
콜백함수를 확인하면서 함수가 뭘 리턴하는지 몰랐기에 다시 처음부터 시작한다.
본 포스팅은 유튜브 제로초님의 강의를 수강하며 내 입맛대로 바꾼 글임을 인지하길 바란다.

 

문자열 기본

'가나다'
"가나다"
`가나다`
"\"가나다" // "가나다
"'가나다" // '가나다

"가나"+'다'// 가나다

 

비교 연산자

'1' == 1 // true
1 == true // true
'1' === 1 // false 자료형까지 같은지 비교
!!'' //false

기본적으로 사용되는 ==는 자료형까지 비교해주지 않는다. 자바스크립트에서는 ===까지 사용해야 자료형까지 비교하여 맞는지 확인한다.

추가로, false, ‘’(빈 문자열), 0, undefined, null, NaN(Not a Number, 수의 비교시 숫자가 아닌 비교 대상자가 있을 경우 리턴해주는 값)은 불값으로 형 변환 했을 때 false가 된다.

 

Undefined와 Null

컴퓨터가 동작을 수행한 뒤 반환해줄 값이 없을 때 undefined를 반환한다.

 

대표적인 예시 1

위와 같은 console.log() 함수를 사용하면, 콘솔 내부에서는 3이라는 값을 나타내지만 반환할 값은 없으므로 undefined라는 값을 반환하게 된다.

 

대표적인 예시 2

이와 다르게 null 값 또한 비어있는 값을 뜻하는데 undefined와 비교했을 경우 자료형이 다르다. 의미는 동일하다. 근데 null의 자료형을 보면 특이하게 object 즉 객체를 반환하는데 이건 자바스크립트 고질적인 버그이니 크게 상관하지 말고 알아두도록 하자.

 

undefined은 빈 값이긴 하나, null과 의미적 차이가 약간있다. define이라는 명칭 자체가 정의 이므로, undefined는 정의 하지 않음으로 생각할 수 있지만 null은 직접 정의해줘야 하므로 의도적으로 비워뒀음을 파악할 수 있다. 같은 의미이나 사용하는 방식에 따라 차이가 있음을 확인하자.

 

비었다.. 비었어...

 

변수

let 지역변수

var 전역변수 ⇒ 요새는 잘 안씀, 다시 선언할 수 있다.

const 상수

변수의 변경

let a = 'b'; // return undefined, a = 'b'
a = 'a'; // return 'a', a = 'a'

변수를 변경하면 변경된 값을 다시 리턴해준다. 잘 기억하도록.

 

조건문 (if, else, switch)

let value = 'b';

switch(value) {
	case 'a' :
		console.log('a');
	case 'b' :
		console.log('b');
	case 'c' :
		console.log('c');
}
// return b, c break문을 사용하자.

 

조건부 연산자 (삼항 연산자)

조건식 ? 참일 때 실행되는 식 : 거짓일 떄 실행되는 식

반복문 for, while, break, continue는 아니까 넘어가도록 하겠음.

 

배열 메소드

const target = ["a", "b", "c", "d", "e"]
target.pop(); // return e, delete target[target.length-1]
target.length(); // return 4, 배열의 길이
target.unshift('f'); // return 5, 배열의 길이를 반환하며 f를 맨 앞에 추가한다.
target.shift(); // return 'f', 맨 앞에 있는 값을 반환하며, 그 값을 삭제한다.
// target = ["a", "b", "c", "d", "e"]

target.splice(1,2); // return (2) ['b', 'c'], 삭제하고자 하는 인덱스부터 삭제하고자 하는 수
target.splice(1,0,'add'); // return [], 인덱스 위치에 'add'추가
target.splice(1,2,'plus'); // return (2) ['add', 'd'], 인덱스 위치에 'plus'추가
target.includes('minus'); // return false
// target = ["a", "puls", "e"]

target.indexOf('a'); // return 0, 인덱스 위치 찾기 없으면 -1 반환
target.lastIndexOf('a'); //return 0, 배열의 마지막에서 부터 위치 찾기

 

함수 기본

function 함수이름1() {} // 함수 선언문
const 함수이름2 = function() {}; // 함수 표현식
const 함수이름3 = () => {}; // 화살표 함수

함수이름1(); // 함수 호출(call)

함수의 호출은 항상 리턴 값으로 대체하라.

 

function a(x, y, z, w) {
	console.log(x, y, z, w);
	console.log(arguments); // 호출 할 때 넣었던 인자(argument)가 뭔지 배열로 나타내줌.
}

a('hello', 'parameter', 'argument')
// return hello, parameter, argument, undefined
// Arguments(3) ['hello', 'parameter', 'argument']

 

객체 리터럴

const 객체 = {
	속성이름 : '속성값',
	'속성이름2' : '속성 값', // 숫자가 같이 있으면 따옴표도 같이 붙여야 한다. 띄어쓰기도 마찬가지. 
}; // 상수이나, 객체내부의 속성은 변경 가능 껍데기는 못바꾸는 느낌인거지.

객체.속성이름; // 속성값
객체.['속성이름2']; //속성 값

객체.속성이름 = '콩콩이'; // 추가 및 수정하기
delete 객체.속성이름; // 제거하기

객체 안에 정의된 함수는 메서드라고 말한다.

 

const debug = {
	log : function(value) {
		console.log(value);
	},
};

debug.log('Hello, Method');
//메소드 호출! debug 객체의 내부 log 함수 다시말해 메소드를 호출하는데, 인자는 'Hello, Method'다
// return undefined, 출력은 Hello, Method

 

객체의 비교

{} === {} // false, 객체의 생성이 두번 일어난 것으로 간주, 서로 다르다.

const a = { name : 'hurray'};
const array = [1, 2, a];
array === [1, 2, a]; // false 새로 생성하는 느낌이라 다르다. 그러나 a는 같다 참조이기 때문에
// 객체는 항상 새로 만든다. 원시 값은 참조형식으로 가져오기 때문에 같을 수 밖에..