JavaScript 문법 핵심 요약

변수 선언, 대입 연산자

var

• 사용 금지

 

let

• 한번 선언한 변수를 여러 번 변경 가능

 

const

• 한번 선언한 변수의 값을 변경할 수 없음

 

=

• 키워드 좌측에는 대입할 변수를, 키워드 우측에는 대입할 값을 작성
• 선언되지 않은 변수 이름을 사용하려고 하면 참조에러 발생

 

비교 연산자

===

• 양쪽에 위치한 값이 같은 경우 true, 다른 경우 false

 

!==

• 양쪽에 위치한 값이 다른 경우 true로 평가, 같은 경우 false (! -> 부정하는 not의 의미로 사용)

 

>, <

• >는 좌측에 위치한 값이 더 클 때에만 true로 평가, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false
• <는 반대로 우측에 위치한 값이 더 클 때에만 true로 평가, 양쪽의 값이 같거나 좌측에 위치한 값이 더 큰 경우 false

 

>=, <=

• >=는 좌측에 위치한 값이 더 크거나 우측에 위치한 값과 같을 때에만 true, 우측에 위치한 값이 더 큰 경우 false
• <=는 우측에 위치한 값이 더 크거나 좌측에 위치한 값과 같을 때에만 true, 좌측에 위치한 값이 더 큰 경우 false

 

==, !=

• 자바스크립트는 자동 형변환 기능을 가지는데 이것이 적용되는 경우 "10" == 10의 결과도 true로 리턴됨
• 숫자형 자료를 가진 값에 자동 형변환이 적용되는 경우, 문자열로 변환이 가능하다고 여겨 "10" === "10"처럼 동작함

 

자료형

Boolean (불리언)

• 원시 자료형 중 하나
• true(참) 또는 false(거짓) 값으로만 표현

 

String (문자열)

• 원시 자료형 중 하나
• '값' 또는 "값"와 같이 큰따옴표나 외따옴표를 쌍으로 묶어 표현

 

Number (숫자)

• 원시 자료형 중 하나
• 10처럼 어떠한 따옴표나 콤마 등을 넣지 않고 숫자 값으로 표현
• 10 !== '10' 두 값은 다른 자료형을 가지고 있기 때문에 같다고 볼 수 없음

 

undefined

• 원시 자료형 중 하나
• 값이 할당되지 않은 변수는 기본적으로 undefined 값을 가짐

 

null

• 원시 자료형 중 하나
• 어떤 값이 비어있음을 의도적으로 표현할 때 사용

typeof null -> object?
typeof 키워드에서 null에 대한 예외처리가 되어있지 않은 버그가 있지만 typeof를 사용하는 모든 웹사이트에 영향을 끼칠 수 있기 때문에 수정되지 않고 있음

 

Object (객체)

• { key1: value, key2: value }의 형태로 표현되며 value에는 모든 자료형의 값을 부를 수 있음
• 다른 언어에선 Dictionary(딕셔너리)라고 부르기도 하지만 JS 공식 명칭은 Object
• key를 기준으로 객체에 있는 value(값)에 접근 가능
• 객체의 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등 일반적인 변수명을 선언할 때 허용되지 않는 문자열을 사용할 경우 반드시 obj['key']와 같은 표현식을 사용
• 여백(스페이스), 대쉬(-) 등 허용되지 않은 문자열이 포함된 경우 변수를 만들 수 없는 것처럼 object의 키로 사용하기 위해서는 따옴표로 감싸야함

const person = {
	name: '침팬지',
	age: 10
};

person.name;
// Print: '침팬지'

person['name'];
// Print: '침팬지'

person.hobby;
// Print: undefined

// ====================

const person = {
	name: '골댕이',
	age: 10,
	'raising dog': '골든 리트리버',
}

// person.'raising dog'는 참조가 불가능하지만,  person['raising dog']로 하는 경우 참조가 가능

 

객체 구조 분해 할당

• 객체(Object)나 배열(List)을 변수로 분해할 수 있음
• 객체를 분해할 때에는 반드시 변수명과 객체의 프로퍼티 이름이 일치해야 됨

const obj = { name: "우끼끼", age: 28, tech: "banana" };

const { name, age, tech, hair } = obj;
console.log(name); // 우끼끼
console.log(age); // 28
console.log(tech); // banana
console.log(hair); // undefined: obj에는 "hair" 프로퍼티가 존재하지 않습니다.

 

Array (배열)

• [ value, value2, value3 ]의 형태로 표현
  value에는 모든 자료형의 값을 담을 수 있음
• 다른 언어에선 List(리스트)로 부르기도 하지만 JS 공식 명칭은 Array
• 배열에는 index라고 하는 개념이 존재하며, value에 접근 가능하게 해주는 식별자
  index의 최소 값은 0

const names = ['고릴라', '침팬지', '오랑우탄'];

names[0];
// Print: '고릴라'

names[2];
// Print: '오랑우탄'

names[3];
// Print: undefined

 

배열의 구조 분해 할당

• 객체(Object)나 배열(Array)을 변수로 분해 할 수 있음
• 배열을 분해할 때는 변수 이름을 마음대로 선언할 수 있고, 배열의 순서대로 할당됨
  배열 구조 분해 할당으로 선언한 변수를 제외한 나머지 배열의 요소는 할당되지 않음

const arr = ["Node.js", "React", "Spring"];

const [backEnd, frontEnd] = arr;
console.log(backEnd); // Node.js
console.log(frontEnd); // React

 

NaN

• Not a Number
• 숫자가 아닌 값을 숫자로 반환하는 경우 NaN
• NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않음
• NaN 판별은 Number.isNaN() 또는 isNaN()으로 확실하게 가능

NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

 

Function (함수)

• 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용

function getMyName() {
	return '함수가 반환할 값';
}
getMyName(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
// Print: '함수가 반환할 값'

// 변수에 할당 가능
const variable = function() {
	return '함수가 반환할 값';
}
variable(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
// Print: '함수가 반환할 값'

// Argument(인수 또는 인자)를 입력 받을 수 있음
function getMyName(myName) {
	return myName;
}
getMyName('인자를 넣습니다.'); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
// Print: '인자를 넣습니다.'

 

불리언 연산

• Truthy -> true, Falsy -> false
• Falsy: 빈 문자열'', 숫자 0, 불리언 false, null, undefined, NaN
• Truthy: Falsy를 제외한 모든 값, Array, Object
• 다른 자료형을 가진 값에 강제로 불리언 연산을 적용하려면 Boolean 함수를 사용할 수 있음

Boolean('String') → true
Boolean('') → false
Boolean(undefined) → false

 

조건문

• 조건이 충족할 때만 특정 구문 실행을 원할 때 사용
• 논리적인 로직을 표현할 때 가장 중심이 되는 구문
• 조건에 들어가는 값은 항상 불리언 연산이 적용됨

if (condition1) // 명령문1
else // 명령문2

if (condition1) {
  // 명령문1
} else {
  // 명령문2
}

if (condition1) {
  // 명령문1
} else if (condition2) {
  // 명령문2
} else if (condition3) {
  // 명령문3
} else {
  // 명령문4
}

if (condition1) {
  // 명령문1
} else {
  if (condition2) {
	  // 명령문2
	} else {
		if (condition3) {
		  // 명령문3
		} else {
		  // 명령문4
		}
	}
}

 

반복문

• 모든 반복문은 기본적으로 특정 구문을 반복할 때 사용

 

for문

• 모든 for문은 조건문 위치에 있는 값이 Truthy 한 경우 계속 반복됨
• 조건이 처음부터 만족하지 않는다면 반복문은 실행되지 않음

for (초기화구문; 조건문; 증감문) {
	// 명령문
}

 

break문

• 조건에 상관없이 반복문을 중단하기 위한 키워드

for (let i = 0; i < 5; i++) {
	if (i === 2) break;

	console.log(i);
}

// Print: 0
// 1

 

continue문

for (let i = 0; i < 5; i++) {
	if (i === 2) continue;

	console.log(i);
}

// Print: 0
// 1
// 3
// 4

 

for... of문

• Array, map과 같은 반복 가능한(Iterable) 객체의 value(요소)를 하나씩 반복할 수 있게 해 줌
  (Object는 반복 가능한 객체에 해당하지 않음)

for (변수선언문 of 반복가능한객체) {
  // 명령문
}

 

for...in문

• for... of문과 유사하게 객체의 요소를 반복해 주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달
• for... of문처럼 반복 가능한(Iterable) 객체는 모두 사용할 수 있음

for (변수선언문 in 반복가능한객체) {
	// 명령문
}