코딩테스트를 풀 때 내가 가장 사랑하는 주무기는 Python이었는데, 네이버 부스트캠프 9기의 최종 코딩테스트 단계에서는 웹 개발자에 한해서 JavaScript를 필수적으로 사용하게끔 하기 때문에, 이를 대비하여 부랴부랴 준비를 해보려고 한다.
-> 코딩테스트는 모두 통과했지만, 백엔드에도 JavaScript를 사용하는 관계로 나와 맞지 않아 거절하였다.
변수선언
var, let, const가 있다.
var은 함수 스코프이고, 같은 이름의 변수를 여러 번 선언할 수 있다. 또한, hoisting된 곳에서 사용 가능하다.
let은 블록 스코프 즉, '{}'로 둘러싸인 블록 내부에서만 접근할 수 있다. 재선언 불가능하다. 변경은 가능하다.
function varScope() {
if (true) {
var a = 10;
}
console.log(a); // 10 (var는 함수 스코프)
}
function letScope() {
if (true) {
let b = 20;
}
console.log(b); // ReferenceError (let은 블록 스코프)
}
console.log(c); // undefined (var는 호이스팅됨)
var c = 10;
console.log(d); // ReferenceError (let은 호이스팅되지만, 초기화 전에 참조할 수 없음)
let d = 20;
var e = 30;
var e = 40; // 가능, 기존 값이 덮어써짐
console.log(e); // 40
let f = 50;
let f = 60; // SyntaxError: Identifier 'f' has already been declaredconst는 블록스코프이고, 이후에 값을 변경할 수 없다.
가독성과 안전성, ES6 표준에 의거하여 let과 const만 쓰는 것이 좋다. 만약 var이 쓰여있다면 레거시 코드인 경우가 많다.
아주 가끔씩, var의 함수 스코프라는 특성 때문에 var를 쓰기도 한다.
연산자
- 산술 연산자: +, -, *, /, %
- 비교 연산자: ==, ===, !=, !==, >, <, >=, <=
- 논리 연산자: &&, ||, !
- 할당 연산자: =, +=, -=, *=, /=
- 삼항 연산자: condition ? expr1 : expr2
* 엄격한 비교와 느슨한 비교가 있다. 타입 변환 관련인데, 그냥 엄격한 비교를 쓴다고 생각하면 된다.
조건문
if - else if - else 의 구조와, switch - case- default 의 구조가 있다.
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
}
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}
반복문
특이한 점은, for, while 말고 do-while 이 있다는 건데, while을 만족 안해도 최소 한번은 실행한다. 아주 유용할 듯.
또한, for도 여러가지 고차함수가 있는데, 기억해두면 유용하게 쓸 수 있을 거다.
numbers.forEach((number) => {
console.log(number);
});
const squares = numbers.map((number) => number * number);
console.log(squares); // [1, 4, 9, 16, 25]
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // true
const allPositive = numbers.every((number) => number > 0);
console.log(allPositive); // true
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 2
const firstEvenNumberIndex = numbers.findIndex((number) => number % 2 === 0);
console.log(firstEvenNumberIndex); // 1
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 5, 8]
함수
함수 선언, 함수 표현식, 화살표 함수 의 세가지 표현이 가능하다.
function add(a, b) {
return a + b;
}
let subtract = function(a, b) {
return a - b;
};
let multiply = (a, b) => a * b;
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2
console.log(multiply(2, 3)); // 6
함수 선언은, hoisting 되기 때문에 굳이 안 쓰는 게 좋다.
함수 표현식은 호이스팅이 안 된다. 표현식을 쓰자.
간단한 함수, 콜백함수의 경우 화살표 함수를 써버릇하자. 가독성을 높이고 코드 작성을 간결하게 만든다.
* 그러니까 변수든 함수든 전부 변수 선언으로 서두를 시작한다고 생각하자.
객체와 배열
배열이든 객체든 선언하는 방법은 파이썬이랑 똑같다. 배열 활용에 쓰이는 함수들은 다음과 같다.
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b']
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false
const arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(4)); // -1
const arr = ['a', 'b', 'c'];
const str = arr.join('-');
console.log(str); // 'a-b-c'
const arr = [1, 2];
arr.push(3, 4);
console.log(arr); // [1, 2, 3, 4]
const arr = [1, 2, 3];
const last = arr.pop();
console.log(arr); // [1, 2]
console.log(last); // 3
const arr = [1, 2, 3];
const first = arr.shift();
console.log(arr); // [2, 3]
console.log(first); // 1
const arr = [2, 3];
arr.unshift(1);
console.log(arr); // [1, 2, 3]
const arr = [1, 2, 3, 4, 5];
const sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 5]
console.log(removed); // [3, 4]
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
문자열 관련
let str = '자바스크립트';
let result1 = str.substr(0, 2);
// 결과 : "자바"
let result2 = str.substr(2, 4);
// 결과 : "스크립트"
let result3 = str.substr(2);
// 결과 : "스크립트"
let result1 = str.substring(0, 2);
// 결과 : "자바"
let result2 = str.substring(2, 5);
// 결과 : "스크립"
let result3 = str.substring(2, 6);
// 결과 : "스크립트"
let result4 = str.substring(2);
// 결과 : "스크립트"
const str = "apple banana orange";
const arr = str.split();
document.writeln(arr); // apple banana orange
document.writeln(arr.length); // 1
const arr = str.split(" ");
document.writeln(arr.length); // 3
document.writeln(arr[0]); // apple
document.writeln(arr[1]); // banana
document.writeln(arr[2]); // orange
const str = "a b c";
const arr = str.split("");
document.writeln(arr.length); // 5
document.writeln(arr[0]); // a
document.writeln(arr[1]); // ' '(space)
document.writeln(arr[2]); // b
document.writeln(arr[3]); // ' '(space)
document.writeln(arr[4]); // c