코딩 테스트 문제를 풀기 전에는 당연히 코딩 테스트에 사용할 언어의 문법을 알아야 합니다. 여기서는 자바스크립트 기초 문법을 충실히 설명하기보다는 코딩 테스트에 자주 사용하는 문법을 설명하는 데 집중합니다. 자바스크립트 기초서 1권을 완독했다는 가정하에 설명했으므로 참고하기 바랍니다.
1. 빌트인 데이터 타입
자바스크립트의 빌트인 데이터 타입(Built-in Data Type)은 언어 자체에서 제공하는 원시 타입(Primitive Type)과 참조 타입(Reference Type)이 있습니다. 원시 타입으로는 숫자, 문자열, 불리언 등이 있고 참조 타입으로는 오브젝트가 있습니다.
1.1 숫자
자바스크립트는 모든 숫자에 대한 값을 number 타입으로 정의합니다. 자연수, 정수, 실수 심지어 무한까지 number로 정의합니다.
console.log(typeof 10); // 자연수, number
console.log(typeof -5); // 정수, number
console.log(typeof 3.14); // 실수, number
console.log(typeof Infinity); // 무한, number
console.log(typeof NaN); // Not a number(잘못된 연산 결과), number
타입이 엄격하게 분리되어 있지 않다는 것은 코드 작성에 있어 편리할 수 있지만 개발자가 잘 이해하고 있지 않다면 위험할 수 있습니다. 따라서 숫자 타입의 형태와 할 수 있는 범위를 잘 알아두는 것이 중요합니다. 숫자 타입은 연산자를 통해 계산하는 것이 가능합니다. 그리고 자바스크립트는 수학 계산을 위한 여러 빌트인 함수를 제공합니다.
1.1.1 숫자 타입 변수 선언
let a = 13;
let b = 4;
1.1.2 숫자 타입 산술 연산
// 연산자
console.log(a + b); // 더하기, 17
console.log(a - b); // 빼기, 9
console.log(a * b); // 곱하기, 52
console.log(a / b); // 나누기, 3.25
console.log(a % b); // 모듈러 연산 (나머지), 1
console.log(-a); // 부호를 바꿈, -13
// 빌트인 함수
console.log(Math.abs(-a)); // 절대값, 13
console.log(Math.ceil(a / b)); // 올림, 4
console.log(Math.floor(a / b)); // 내림, 3
console.log(Math.round(a / b)); // 반올림, 3
console.log(Math.trunc(-a / b)); // 버림, -3 (내림의 경우 -4)
console.log(Math.pow(a, b)); // a의 b승, 28561
1.1.3 숫자 타입 비교 연산
console.log(a == b); // 같은 값인지 비교, false
console.log(a != b); // 같지 않은 값인지 비교, true
console.log(a > b); // 왼쪽 값이 더 큰지 비교, true
console.log(a < b); // 왼쪽 값이 더 작은지 비교, false
console.log(a >= b); // 왼쪽 값이 더 크거나 같은지 비교, true
console.log(a <= b); // 왼쪽 값이 더 작거나 같은지 비교, false
1.1.4 숫자 타입 비트 연산
console.log(a & b); // AND, 4
console.log(a | b); // OR, 13
console.log(a ^ b); // XOR, 9
console.log(~a); // NOT, -14
console.log(a << 2); // 왼쪽 시프트 (a에 2^2를 곱한 것과 동일), 52
console.log(a >> 1); // 오른쪽 시프트 (a를 2^1로 나눈 것과 동일), 6
1.1.5 숫자 타입 논리 연산
console.log(a && b); // 논리 연산 AND, 4
console.log(a || b); // 논리 연산 OR, 13
console.log(!a); // 논리 연산 NOT, false
1.1.6 숫자 타입 예외
console.log(a / 0); // Infinity
console.log(a % 0); // NaN
console.log(a / "string"); // NaN
console.log(a % "string"); // NaN
console.log(a / null); // Infinity
console.log(a % null); // NaN
console.log(a / undefined); // NaN
console.log(a % undefined); // NaN
1.1.7 부동소수점 문제
만약 자바스크립트에서 10 % 3.2와 같은 연산을 한다면 0.4가 아닌 0.39999999999999947이 출력됩니다. 이런 이유는 자바스크립트가 부동소수점 데이터를 이진법으로 표현하기 때문입니다.
표현 과정에서 오차가 발생하는 것이죠. 이를 엡실론(Epsilon)이라고 합니다. 구체적인 내용은 문법서에서 공부하는 것이 더 적합하므로 여기서는 생략하겠습니다. 필자가 이 내용을 언급한 이유는 코딩 테스트에서 부동소수점 데이터를 다룰 일이 생겼을 때 이 엡실론을 항상 생각하라는 이유에서 입니다. 여러분이 부동소수점을 사용하여 코드를 작성하면 엡실론이라는 요소 때문에 일부 테스트 케이스가 통과하지 않을 수도 있으니 유의하기 바랍니다.
※ 마찬가지의 이유로 0.1을 3번 더한 a의 값에 0.3을 빼면 0이 아닙니다.
// 엡실론 출력
console.log(Number.EPSILON); // 2.220446049250313e-16
let a = 0.1 + 0.1 + 0.1;
let b = 0.3;
console.log(a - b); // 5.551115123125783e-17
if (Math.abs(a - b) < Number.EPSILON) {
console.log("a와 b는 같은 값입니다.");
} else {
console.log("a와 b는 다른 값입니다.");
}
부동소수점 데이터를 활용하는 문제는 오차 허용 범위를 언급하는 경우가 많습니다. 문제를 분석할 때 꼭 이 부분을체크하기 바랍니다. 이 지점에서 정말 많은 사람이 실수합니다.
1.2 문자열
자바스크립트는 C++이나 자바와 다르게 글자 하나만 저장하는 자료형이 따로 없습니다. 글자와 관련된 모든 자료는 문자열(String) 타입으로 저장됩니다.
1.2.1 문자열 타입 정의
문자열은 지정하는 방법은 세 가지로 작은따옴표(‘), 큰따옴표(“), 백틱(`)으로 감싸는 방법이 있습니다.
const a = "Hello, World!";
const b = 'Hello, World!';
const c = `Hello, World!`;
작은따옴표와 큰따옴표는 기능상 차이가 없지만 백틱은 표현식을 문자열 내에 넣을 수 있다는 차이점이 있습니다. 이 기능을 템플릿 리터럴이라고 부릅니다.
const a = 1;
const b = 2;
const c = `1 + 2 = ${a + b}`; // 1 + 2 = 3
또한 백틱을 이용하면 개행을 통해 여러 줄 문자열을 만드는 것도 가능합니다.
const a = `
*
**
***
`;
1.2.2 문자열 타입 연산
let a = "Hello, ";
let b = "World!";
console.log(a + b); // 문자열끼리 더하기, "Hello, World!"
console.log(a + 126); // 문자열과 숫자 더하기, "Hello, 126"
console.log(a + true); // 문자열과 불리언 더하기, "Hello, true"
1.2.3 문자열 타입 빌트인 메서드
const a = "Hello, World!";
console.log(a.length); // 문자열 길이, 13
console.log(a.split(",")); // 특정 문자열 기준으로 나누기, ['Hello', ' World!']
console.log(a.startsWith("Hello")); // 특정 문자열로 시작하는지 확인, true
console.log(a.endsWith("World!")); // 특정 문자열로 끝나는지 확인, true
console.log(a.includes("llo, ")); // 특정 문자열을 포함하는지 확인, true
console.log(a.indexOf("World")); // 특정 문자열의 시작 위치 확인, 7
console.log(a.lastIndexOf("l")); // 특정 문자열의 마지막 위치 확인, 10
// 특정 문자열을 다른 문자열로 대체, Hello, JavaScript!
console.log(a.replace("World", "JavaScript"));
console.log(a.toUpperCase()); // 대문자로 변환, HELLO, WORLD!
console.log(a.toLowerCase()); // 소문자로 변환, hello, world!
console.log(a.trim()); // 양쪽 공백 제거, Hello, World!
console.log(a.concat("!!")); // 문자열 연결, Hello, World!!!
1.3 그 외 타입
숫자와 문자열을 제외한 나머지 원시 타입은 불리언(Boolean) , bigint, null, undefined가 있습니다.
※ null과 undefined가 타입이라는 사실이 이상할 수 있지만 자바스크립트는 이렇게 조금 당황스러운 규칙이 있는 언어입니다.
console.log(typeof true); // boolean
console.log(typeof 2147383648n); // bigint
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof Symbol('symbol')); // symbol
위 자료형을 코딩 테스트에서 활용하는 경우가 많지는 않습니다만, 가끔 사용하는 경우가 있으므로 간단히 설명하고 넘어가겠습니다.
1.3.1 불리언 타입
불리언 타입은 true와 false 값만 있는 자료형입니다. 보통 논리 연산의 결과로 나오게 됩니다. 조건식을 만들거나 flag 용도로 사용하는 경우가 많습니다.
console.log(typeof true); // boolean
console.log(typeof false); // boolean
1.3.2 bigint 타입
다음으로 bigint 타입은 큰 수를 다룰 때 사용할 수 있습니다. 기존 숫자 타입은 큰 수를 다루는 경우 연산 결과가 이상하게 나올 수 있습니다. 이럴 때 bigint 타입을 사용하면 제대로 연산할 수 있습니다.
console.log(100000000000000000000 - 123456); // 99999999999999870000
console.log(100000000000000000000n - BigInt(123456)); // 99999999999999876544n
console.log(100000000000000000000n - 123456); // Error
bigint 타입은 숫자 뒤에 n을 붙이거나 BigInt( )로 감싸면 만들 수 있습니다. 만약 큰 수를 다뤄야 하는 문제가 나온다면 유용하게 사용할 수 있겠죠? 참고로 bigint에 number로 연산을 시도하면 오류가 발생하니 주의해야 합니다.
1.3.3 undefined와 null 타입
이어서 undefined와 null은 헷갈리기 쉬운 타입입니다. undefined 타입은 변수에 초기화가 되지 않았을 때 적용되는 타입입니다. 반면 null은 개발자가 의도적으로 비어 있다는 것을 표현하기 위해 넣는 값이자 타입입니다. 설명만 보면 헷갈리기 쉽습니다. 그래서 보통 0, null, undefined를 휴지와 휴지걸이에 많이 비유합니다.
그림에서 보는 것처럼 0은 말 그대로 휴지걸이에 휴지가 제대로 걸려있지만 다 쓴 상태이고, null은 휴지걸이에 휴지를 걸지 않은 상태이고, undefined는 아예 휴지를 걸 곳 자체가 없는 상태, NaN은 not a number라는 뜻인데 ‘잘못된 값’으로 해석하는 경우가 많습니다. 그래서 휴지를 엉망으로 끼운 것입니다. 재미있는 사실은 typeof를 통해 밝혀낸 null의 타입이 object라는 사실입니다. 이건 사실 버그입니다. 하지만 이 버그를 수정하면 기존에 작성해둔 수많은 자바스크립트 코드에 많은 문제가 발생할 수 있으므로 수정하지 않고 있습니다.
※ 마지막으로 symbol 타입이라는 것도 있지만 해당 타입은 특수한 경우를 제외하면 거의 쓰이지 않습니다. 특히 코딩 테스트에서는 쓸 일이 전혀 없기 때문에 여기서는 생략하고 넘어가겠습니다.
2. 참조 타입
앞서 설명한 타입은 모두 원시 타입입니다. 참조 타입은 오브젝트(Object) 타입과 함수 타입만 있습니다. 참고로 배열은 오브젝트 타입에 속합니다. 조금 특수한 오브젝트라고 볼 수 있죠. 원시 타입과 참조 타입은 메모리 참조 방식이 다릅니다. 원시 타입이 메모리에 할당될 때는 값 자체를 저장하고 참조 타입이 메모리에 할당될 때는 힙 메모리 영역에 저장된 값을 가리키는 메모리 주소를 저장합니다.
2.1 원시 타입의 동작 방식 알아보기
이해를 위해 원시 타입의 동작 방식을 한 번 살펴봅시다. 다음은 vari 변수에 126을 할당하고 vari2 변수에 vari 변수를 할당한 상태를 그림으로 나타낸 것입니다.
그림을 보면 vari는 처음 선언한 것이므로 126을 0x0004 주소에 할당합니다. 그리고 vari2에 vari를 할당하면 같은 주소인 0x0004를 가리키는 것이 아니라 새 메모리 주소인 0x0008에 자리를 마련하여 값을 복사한 후 할당합니다. 이 상태에서 vari2에 127을 할당하면 어떻게 될까요?
변수의 값을 바꾸면 기존 메모리 영역에 값이 변경되는 것이 아니라 새로운 메모리를 할당하여 그 주소를 바라보게 변경합니다. 그리고 기존 메모리는 시간이 지나면 자바스크립트 가비지 컬렉터에 의해 정리됩니다.
2.2 참조 타입의 동작 방식 알아보기
그럼 이번엔 참조 타입을 살펴봅시다.
참조 타입에 해당하는 배열을 살펴봅시다. 배열 값에 [1, 2]가 들어가는 것으로 보이지만 실제로 메모리에 저장된 값은 메모리 주소입니다. 이 메모리 주소는 힙 메모리에 저장된 실제 값을 가리킵니다.
참조 타입은 원시 타입과 다르게 요소의 값을 변경하더라도 새 메모리 주소를 할당하지 않습니다. 그렇기 때문에 variable[0]의 값을 3으로 바꾸면 variable2[0]의 값도 3으로 반영됩니다.
2.3 오브젝트
그럼 이제 본격적으로 오브젝트 타입의 사용 방법을 알아봅시다.
2.3.1 오브젝트 타입 선언
const obj = {
name: 'Sunhyoup',
age: 30,
'full-name': 'Sunhyoup Lee'
};
console.log(obj.name); // Sunhyoup
console.log(obj['age']); // 30
오브젝트 타입은 중괄호 안쪽에 키와 값을 적는 것으로 정의할 수 있습니다. 이때, 만약 키에 특수 문자가 들어가는 경우엔 키를 따옴표로 감싸야 합니다. 오브젝트는 .으로 접근할 수도 [‘key’] 형태로 접근할 수도 있습니다. 다만 키에 특수문자가 들어가는 경우 [‘key’] 형태로만 접근할 수 있습니다.
2.3.2 요소 추가
단순히 값을 대입하는 것으로 오브젝트에 요소를 추가할 수 있습니다.
const obj = { name: 'Sunhyoup' };
obj.age = 30;
console.log(obj.age); // 30
2.3.3 요소 삭제
delete를 사용하면 오브젝트 내 요소를 삭제할 수 있습니다.
const obj = { name: 'Sunhyoup' };
obj.age = 30;
delete obj.age;
console.log(obj.age); // undefined
2.4 배열
배열은 ⟪코딩 테스트 합격자 되기 – 자바스크립트 편⟫에서 더 자세하게 설명할 예정입니다. 여기서는 가볍게 배열을 선언하는 방법과 간단한 조작 API를 설명하겠습니다.
2.4.1 배열 선언
배열은 대괄호를 통해 간단하게 선언할 수 있습니다.
const arr = [1, 2, 3];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
배열 내 요소 또한 대괄호를 통해 접근할 수 있습니다. 배열은 0부터 시작함에 주의해주세요.
2.4.2 배열 길이 구하기
length를 통해 배열의 길이를 알 수 있습니다.
const arr = [1, 2, 3];
console.log(arr.length); // 3
2.4.3 요소 추가
배열의 push( ) 메서드를 통해 배열 가장 마지막에 요소를 추가할 수 있습니다.
const arr = [1, 2, 3];
arr.push(4);
console.log(arr[3]); // 4
2.4.3 요소 삭제
pop( ) 메서드를 사용하면 배열 가장 마지막 요소를 제거하고 그 값을 반환합니다.
const arr = [1, 2, 3];
const value = arr.pop();
console.log(value); // 3
console.log(arr.length); // 2
3. 함수
자바스크립트에서 함수는 일반적으로 정의하는 것도 가능하지만 일급 객체이자 타입이기도 합니다. 여기서 일급 객체란 함수를 변수에 할당할 수 있음을 의미합니다.
※ 일급 객체는 변수에 할당할 수 있고, 함수의 인자로 전달할 수 있고, 함수에서 반환할 수 있는 객체를 의미합니다. 일급 객체는 자세히 설명하자면 할 이야기가 많은 주제입니다. 간단히 언급했습니다.
const f = () => {};
console.log(typeof f); // function
위와 같이 코드를 작성하면 typeof f의 출력값이 function 타입임을 확인할 수 있습니다. 이를 통해 함수형 프로그래밍 기법을 코딩 테스트에 활용할 수도 있음을 알 수 있죠. 하지만 함수형 프로그래밍 기법은 코딩 테스트에서 자주 사용하지는 않습니다. 따라서 여기서는 일반적으로 사용되는 내용과 코딩 테스트를 위해 알아야 할 내용만 빠르게 공부하고 넘어가겠습니다.
3.1 함수 정의
// 일반적인 함수 정의
function fn1(param1, param2) {
// 함수의 실행 코드
// ...
return result; // 반환값
}
// 화살표 함수(arrow function)를 통한 할당
const fn2 = (param1, param2) => {
// 함수의 실행 코드
// ...
return result; // 반환값
}
자바스크립트에서 함수는 function이라는 예약어를 사용하여 정의합니다. 특이하게도 다른 방법으로 정의할 수도 있는데 변수에 화살표 함수를 통한 할당 방법입니다. 두 방법은 거의 유사하므로 코딩테스트에선두방법모두사용할수있습니다.
3.2 함수 호출
함수를 호출할 때 매개 변수가 있는 경우 func(a,b)와 같이 인수를 함께 전달할 수 있습니다.
function add(a, b) {
const result = a + b;
return result;
}
// 함수 호출하여 결과 출력
const result = add(1, 2);
console.log(result); // 3
3.3 익명 함수
익명 함수(Anonymous Function)는 앞서 함수 정의할 때 한 번 언급했습니다. 말 그대로 이름이 없는 함수를 말합니다. 이를 통해 함수 매개 변수에 익명 함수를 전달하거나 변수에 익명 함수를 담는 것이 가능합니다. 익명 함수는 다음과 같이 정의합니다.
// 일반 함수 방식
function (a, b) {
return a + b;
};
// 화살표 함수 방식
(a, b) => {
return a + b;
};
여기서도 정의하는 방식이 두 가지 있습니다. 차이점은 앞에서 설명한 함수 범위 외에는 없습니다. 코딩 테스트를 하며 익명 함수를 직접 정의해서 사용하는 일은 거의 없다고 볼 수 있습니다. 다만, 자바스크립트가 제공하는 빌트인 함수 중 인수로 익명 함수를 받는 함수가 있기 때문에 정의하는 방식은 알아두는 것이 좋습니다.
4. 코딩 테스트 코드 구현 노하우
자바스크립트는 문법을 더 쉽고 직관적으로 사용할 수 있는 문법 설탕(Syntactic Sugar) 기능을 제공합니다. 여기에 문법 특징을 이용한 트릭을 더하면 코드를 작성할 때 편하고 더 빠르게 원하는 로직을 구현할 수 있습니다. 여기서는 코딩 테스트에 유용한 코드 구현 노하우를 알아보겠습니다.
4.1 구조 분해 할당
구조 분해 할당은 ES6에 추가된 문법으로 배열이나 객체에서 요소를 분해하는 기능을 말합니다. 예를 들면 다음과 같이 사용할 수 있습니다.
// ① 배열을 구조 분해 할당
const arr = ['Hello', 'World', '!'];
const [first, second] = arr;
console.log(first, second); // Hello World
// ② 객체를 구조 분해 할당
const obj = { name: '이선협', publisher: '골든래빗' };
const { name, publisher } = obj;
console.log(name, publisher); // 이선협 골든래빗
① 배열의 구조 분해 할당은 대괄호를 사용합니다. 구조 분해 할당은 인덱스 순서대로 이루어집니다. 지금은 arr의 1, 2번째 인덱스만 first, second에 각각 할당했습니다. 구조 분해 할당을 통해 할당할 변수명은 마음대로 설정할 수 있습니다. 만약 첫 번째 인덱스를 제외하여 구조 분해 할당하고 싶다면 [, second, third]와 같이 작성하면 됩니다.
② 객체의 구조 분해 할당은 중괄호를 사용합니다. 필요한 요소를 키로 구조 분해 할당할 수. 있습니다. 지금은 name과 publisher를 모두 구조 분해 할당에 사용했습니다.
※ 만약 다른 변수명으로 구조 분해 할당하고 싶다면 const { name : author } = obj;와 같이 작성하면 됩니다. 이렇게 하면 obj의 name이 author에 구조 분해 할당됩니다.
4.2 값 교환하기
구조 분해 할당을 이용하면 두 변수의 값을 교환하는 swap 로직을 간단히 구현할 수 있습니다. 보통 swap 로직은 다음과 같이 temp 변수를 이용하여 작성합니다.
let a = 5;
let b = 10;
let temp;
// 교환 로직
temp = a;
a = b;
b = temp;
문제가 있는 코드는 아니지만 구조 분해 할당을 이용한다면 다음과 같이 temp 변수 없이 swap 로직을 작성할 수 있습니다.
let a = 5;
let b = 10;
[a, b] = [b, a];
4.3 비구조화 할당
비구조화 할당은 함수에 객체를 인수로 전달할 때 필요한 것만 꺼내서 사용할 수 있는 문법 기능입니다. 구조 분해 할당과 유사하게 사용할 수 있습니다.
const makePerson = ({ familyName, givenName, address }) => {
return {
name: `${givenName} ${familyName}`,
address,
};
};
const person = makePerson({
familyName: 'Lee',
givenName: 'Sunhyoup',
address: 'Seoul',
country: 'South Korea',
});
console.log(person);
// {
// name: 'Sunhyoup Lee',
// address: 'Seoul'
// }
makePerson( ) 함수 정의를 보면 매개변수가 구조 분해 할당을 사용하는 것처럼 생겼습니다. 이렇게 하면 객체를 통해 매개변수를 받을 때 객체에서 familyName, givenName, address만 받을 수 있습니다. 실제로 makePerson( ) 함수를 실행할 때 코드를 보면 makePerson( )에 전달하는 객체는 familyName, givenName, address, country를 담고 있지만 반환한 값은 country를 제외한 familyName, givenName, address만 있습니다.
4.4 스프레드 연산자
배열이나 객체 여러 개를 하나로 합쳐야 할 때는 스프레드 연산자를 사용할 수 있습니다. 스프레드 연산자는 다음과 같이 사용합니다.
// ① 배열 병합
const evenNumbers = [2, 4, 6, 8, 10];
const oddNumbers = [1, 3, 5, 7, 9];
const numbers = [...evenNumbers, ...oddNumbers];
console.log(numbers); // [2, 4, 6, 8, 10, 1, 3, 5, 7, 9]
// ② 객체 병합
const person = {
name: 'Sunhyoup Lee',
familyName: 'Lee',
givenName: 'Sunhyoup',
country : 'USA',
};
const address = {
country: 'South Korea',
city: 'Seoul',
};
const merge = { ...person, ...address };
console.log(merge);
// {
// name: 'Sunhyoup Lee',
// familyName: 'Lee',
// givenName: 'Sunhyoup',
// country: 'South Korea',
// city: 'Seoul'
// }
① 스프레드 연산자는 …입니다. 배열은 스프레드 연산자를 사용한 순서로 병합합니다.
② 객체 병합은 country가 ‘USA’에서 ‘South Korea’로 바뀐 것에서 볼 수 있듯이 키가 같은 객체를 병합하면 나중에 스프레드 연산자를 사용한 객체로 덮습니다. 이점을 항상 기억하고 주의하여 사용해야 합니다.
4.5 배열 내 같은 요소 제거하기
가끔 문제를 풀다보면 배열에서 값이 같은 요소를 제거할 필요가 있습니다. 값이 같은 요소를 제거할 때는 반복문, 조건문을 이용하는 대신 스프레드 연산자와 Set 객체를 이용하면 됩니다.
const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const uniqueNames = [...new Set(names)];
console.log(uniqueNames); // ['Lee', 'Kim', 'Park']
new Set(names)는 Set 객체를 반환합니다. 여기서는 보기 좋게 출력하기 위해 스프레드 연산자를 활용하여 배열로 변환했습니다.
4.6 &&와 || 연산자로 조건문 대체하기
자바스크립트에서는 논리 연산자인 &&와 ||를 이용하여 조건문을 대체할 수 있습니다. 보통 && 연산자는 앞 요소를 플래그로 사용하여 플래그가 true면 뒤 요소를 실행할 때 사용합니다.
// ① func 함수는 flag가 true면 실행
flag && func();
// ② 객체 병합에도 이용할 수 있음, showAddress가 true면 객체 병합
const makeCompany = (showAddress) => {
return {
name: 'GoldenRabbit',
...showAddress && { address: 'Seoul' }
// showAddress가 true면 뒤 객체에 스프레드 연산자 적용
};
};
console.log(makeCompany(false)); // { name: 'GoldenRabbit' }
console.log(makeCompany(true)); // { name: 'GoldenRabbit', address: 'Seoul' }
① flag가 true여야 func( )를 실행할 수 있습니다.
② showAddress가 true면 { address : ‘Seoul’ }을 병합할 수 있습니다.
|| 연산자도 && 연산자와 마찬가지로 플래그를 앞에 두고 플래그가 false일 때 뒤 요소를 실행합니다. 원리가 같으므로 별도의 설명은 하지 않겠습니다.
// participantName이 0, undefined, 빈 문자열, null일 경우 'Guest'로 할당됩니다.
const name = participantName || 'Guest';
리마인드
- 자바스크립트 빌트인 데이터 타입은 원시 타입(숫자, 문자열, 불리언, bigint, null, undefined)과 참조 타입(오브젝트, 함수)이 있습니다.
- 원시 타입과 참조 타입은 메모리 참조 방식이 다릅니다. 원시 타입은 값이 변경되면 다른 메모리 주소가 할당되며 참조 타입은 메모리 주소가 변경되지 않습니다.
- 함수는 프로그램의 기본 구성 요소로 자바스크립트에서는 function 예약어를 사용하거나 화살표 함수를 이용할 수 있습니다.
- 구조 분해 할당, 비구조화 할당 등 언어에서 제공하는 문법 설탕을 이용하면 코드를 더 간단하게 표현할 수 있습니다.
저자 박경록
매일 퇴근과 점심 메뉴를 고민하는 9년차 시스템 S/W 개발자입니다. 수학, 알고리즘 같은 실생활과 가깝고도 먼 학문을 좋아하고, 명확하지만 개선 여지가 있는 문제들에 대해 논의하고 사고를 개선해 나가는 과정을 좋아합니다.
