자바스크립트 기본 개념 정리 #1

 

식별자(identifier)

어떤 값을 구별해서 식별해낼 수 있는 고유한 이름. 

• 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있음
• 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야하며 숫자는 안됨
• 예약어 사용 불가

 

기본형(Primitive Type) 값

값은 식이 평가되어 생성된 결과를 말한다.

• 숫자
• 불리언
• null, undefined
• 문자열
• 심벌

 

리터럴

리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 의미한다.

리터럴	예시
정수 리터럴	100
부동소수점 리터럴	10.5
문자열 리터럴	'Hello' "world"
null 리터럴	null
객체 리터럴	{ name: 'Lee', address: 'Seoul' }

 

템플릿 리터럴

템플릿 리터럴은 표현식을 포함하여  여러 행으로 확장할 수 있는 문자열이다. 템플릿 리터럴은 백틱(`)으로 구분한다.

let destination = 'world'
let greeting = `Hello, ${destination.toUpperCase()}!`

위 샘플은 아래의 출력을 나타낸다.

Hello, WORLD!

 

비구조화(destructing)

let pair = [10, 20]
let [first, second] = pair

 

논리연산자

&& 연산자를 사용하여 조건문처럼 사용할 수 있다. 아래의 예는 arg값이 존재할 경우 오른쪽 피연산자를 처리한다. 즉, 좌측 피연산자의 값의 존재를 판단하고 있으면 우측 피연산자의 결과를 대입한다. 

단, 아래 2개의 코드는 좌측의 피연산자의 결과가 0, 빈문자열, false이면 의도대로 동작하지 않는다.

let result = arg && arg.someMethod()

반대로 || 연산자는 좌측의 피연산자가 null이나 undefined를 반환할 때 기본값을 제공하는 용도로 활용이 가능하다.

let result = arg.someMethod() || defaultvaule

아래의 ?? 연산자는 좌측의 피연산자가 undefined나 null 이면 우측의 피연산자를 리턴한다. 즉, 좌측의 피연산자가 undefined, null 인지를 판단할 때 유용하다.

let result = arg.someMethod() ?? defaultValue

 

?. 연산자는 객체의 값을 확인할 때 사용하는데 객체가 undefined, null 상태인지 확인하고 아니면 프로퍼티를 반환한다. 둘 중 하나의 값이라면 undefined를 리턴한다.

let recipient = person?.name

 

for of 루프

반복할 수 있는 객체 요소를 반복하여 처리할 때 사용한다.

let arr=[, 2, , 4]
arr[9] = 100
for (const element of arr) 
	console.log(element)

위 배열은 [undefined, 2, undefined, 4, undefined, undefined, undefined, undefined, undefined, 100] 의 값을 갖는다. 배열을 순회하면서 들어 있는 값을 그대로 출력한다.

 

for in 루프

객체의 프로퍼티 값을 반복할 때 사용한다.

let obj = { name: "Harry smith", age: 42 }
for (const key in obj) 
	console.log(`${key}: ${obj[key]}`)

 

즉시 실행 함수(Immediately Invoked Function Expression)

함수 정의와 동시에 즉시 호출되는 함수

(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());

 

콜백함수(Callback Function)

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수. 아래의 예에서는 forEach 메소드가 매개변수로 value, index, array를 갖는 콜백함수를 사용한다.

const numbers = [273, 52, 103, 32, 57]
numbers.forEach(function (value, index, array) {
  console.log(`${index}번째 요소 : ${value}`)
  })

 

map 메소드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만든다.

let numbers = [273, 52, 103, 32, 57]

numbers = numbers.map(function (value, index, array) {
  return value * value
})
numbers.forEach(console.log)

고차함수(Higher-Order Function, HOF)

매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수

// 고차함수 정의
function repeat(n, f) {
  for (var i = 0; i < n; i++ ) {
    f(i);
  }
}

// 콜백함수
var logAll = function (i) {
  console.log(i);
};

repeat(5, logAll);