TIL - 20230522

sway3·2023년 5월 22일

TIL

목록 보기

2/4

오늘 새로 배운 내용을 간단하게 공부하여 적는 공간으로 잘못된 정보가 포함되어있을 수가 있습니다.

1. 화살표 함수

function sum(a, b) {
	return a + b;
}

위처럼 일반적인 함수 표현식을 '화살표 함수' 를 사용하여 다음과 같이 간단하게 표현할 수 있다.

let sum = (a + b) => a + b;

let num = a => a;


/* 위 화살표 함수의 일반적인 함수 표현식이다.

function num(a) {
	return a;
}

*/

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수도 있다.

let age = prompt("나이를 알려주세요"), 18);

let welcome = (age < 18) ?
	() => alert('안녕');
    () => alert('안녕하세요');
    
welcome();

위와 같이 함수를 동적으로 만들 수도 있다.

let sum = (a, b) => {
  	let result = a + b;
  	return result;
};

alert( sum(1, 2) ); // 3

위와 같이 본문이 여러 줄이어도 화살표 함수로 표현이 가능하다.

코딩 테스트 연습 때 적극적으로 활용한다면 시간도 단축되고 코드 줄 수도 줄일 수 있을 것 같다.

2. Date().getFullYear()

Date.prototype.getFullYear() (mdn web docs)

프로그래머스 lv0 - 나이 출력 문제를 풀던 중 새로 발견한 메소드이다.

let currentYear = new Date().getFullYear();
console.log(currentYear);  // 2023

현재 시간 기준으로 몇 년인지 자바스크립트로 자동으로 뽑아낼 수 있는 메소드이다. 프로젝트할 때 유용하게 활용할 수 있을 것 같다. 이 외에도 Date instance 에 많은 메소드가 있기 때문에 한번씩 훑어보면 좋을 것 같다.

3. parseInt() vs Math.floor()

프로그래머스 lv0 - 몫 구하기 문제를 풀고 다른 사람들의 풀이를 구경하다 새로 공부하게 된 내용이다.

function solution(num1, num2) {
    var answer = Math.floor(num1 / num2);
    return answer;
}

정수 num1, num2 를 매개변수로 받아 두 수의 몫을 구하는 함수이다.

단순히 나눗셈의 결과가 아닌 '몫' 을 구하는 문제이기 때문에, 값은 반드시 실수가 아닌 정수로 리턴해야한다.

그렇기 때문에, 나눗셈의 결과가 실수가 된다면 소수점을 버려야하므로 Math.floor() 을 활용하였다.

parseInt() 로 접근한 사람들도 많았기 때문에 두개의 차이점을 정리해 보았다.

Math.floor()가 parseInt() 보다 빠르게 작동한다. 따라서 위의 문제와 같이 숫자 타입을 다루는 경우 Math.floor() 을 활용하도록 하자.
Math.floor() 와 parseInt() 모두 양수를 인자로 받는 경우 둘다 그 양수를 내림한 값을 리턴하지만, 음수일 경우 parseInt() 는 소수점을 그냥 버려버리는 형태로 작동하기 때문에 올림한 값을 리턴한다.

let x = Math.floor(-14.44);  // -15
let y = parseInt(-14.44);    // -14

4. ~, ~~ 연산자

4-1 ~ 틸드 연산자

console.log(~1)  // -2

~ 연산자는 단순히 '-(n + 1)' 값 (피연산자를 n이라고 가정) 을 리턴하는데, 보이는 게 전부가 아니라는 말이 있듯이 생각보다는 어려운 로직으로 작동한다.

틸드 연산자는 비트 단위로 NOT 을 적용하는 연산자이다.

다시 말해, 2진수에 대해 비트 단위로 NOT을 적용하여 2진수의 0은 1로, 1은 0으로 바꿔버리는 연산자이다.

이를 수학적인 개념으로 '2진수에서의 1의 보수' 라고 표현하고, '2의 보수' 는 1의 보수에 10진수 '1' 을 더한 값으로 만들어진다.

~n 에는 -(n + 1)값의 2진수에 2의 보수를 적용하는 원리가 숨어있다.

그렇기 때문에 연산자로 리턴한 값을 2진수로 표현해봐도, 피연산자의 2진수의 0과 1을 뒤바꾸고 10진수로 바꾼 값을 보지는 못할 것이다. <-- 이거때문에 1시간 반 날림..

let str = '안녕하세요';
let find = '안';

if(str.indexOf(find) === -1) {
	console.log('있음');
}

여튼, -1 을 반환하는 함수나 메소드가 몇몇 있기 때문에, ~연산자로 하여금 비교 연산자를 사용하여 값을 비교하는 상황을 훨씬 간단하게 표현할 수 있다.

let str = '안녕하세요';
let find = '뷁';

if(!~str.indexOf(find)) {
	console.log('없음');
}

// !0 == true

// str.indexOf(find) 가 -1 을 반환,
// ~ 연산자와 !을 이용하여 쉽고 간단하게 true 를 반환시킬 수 있다.

if 문의 소괄호에는 조건식이 들어가고, 그 조건식이 true 일 경우에만 if 문 내부의 코드를 동작시킨다.

하지만 조건식 외에도 0을 제외한 모든 숫자 타입이 들어가도 true 를 반환하여 내부 코드를 동작 시킬 수 있기 때문에, ~와 ! 연산자를 이용하여 저런식으로 간단하게 코드를 작성할 수 있다.

4-2 ~~ 더블 틸드 연산자 (double tiled)

틸드 연산자를 피연산자에 연달아 두번 실행하면 피연산자의 초기 값 그대로 반환된다.

let x = 1;
console.log(~~x); // 1

x = 1.3;
console.log(~~x); // 1

위의 예시 처럼, 소수점을 버리고 싶을 때 사용 되기도 한다.

속도 측면에서 비교했을 때,
~~ > Math.floor() > parseInt()

라고 하니 간단한 알고리즘을 구현하거나 코딩테스트 때 유용하게 사용할 수 있을 것 같다. 하지만 프로젝트 같이 복잡한 코드를 설계할 경우 가독성이 떨어져 남발하지 않는 것이 좋을 것 같다.

undefined 또는 null 을 0으로 변환할 때도 사용될 수 있다고 타 블로그에서 읽었는데, 이 부분은 배열에 대해 공부할 때 다시 돌아오도록 하겠다.

filter()

프로그래머스 lv0 - 각도기 문제를 풀다 새로 알아보게 된 메소드이다.

function solution(angle) {
    let answer;
    
    if(0 < angle && 90 > angle) {
        answer = 1;
    } else if (angle === 90) {
        answer = 2;
    } else if (90 < angle && 180 > angle) {
        answer = 3;
    } else {
        answer = 4;
    }
        
        
    return answer;
}

if-else 말고도 switch case 등 여러 방법 중 그냥 제일 쉬운 방법을 골라서 구현했는데, filter() 와 같은 메소드를 많이 알고 사용해본다면 코딩테스트 뿐만 아니라 어떤 기능 같은 것을 구현할 때도 선택지가 넓어지기 때문에 많이 공부해야겠다고 느꼈다.

function solution(angle) {
    return [0, 90, 91, 180].filter(x => angle>=x).length;
}

필자도 언젠가는 이렇게 멋지게 한줄로 깔끔한 정답을 제출할 것이다.

여튼, filter() 로 특정 배열의 요소들을 iterate 하여 걸어둔 조건을 통과하는 요소들만 새로운 배열로 리턴할 수 있다.

6. reduce()

프로그래머스 lv0 - 배열의 평균값 문제를 풀다 새로 공부하게 된 메소드다.

function solution(numbers) {
    let sum = 0;
    
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
    }
    
    let answer = sum / numbers.length;
    
    return answer;
}

필자는 for 문을 사용하여 numbers 의 요소들을 하나하나 iterate 하는 흔해빠진 방식으로 정답을 제출하였으나, reduce() 로 이 문제 또한 한두줄로 작성할 수 있었다.

function solution(numbers) {
	let avg = numbers.reduce((acc, cur) => acc + cur, 0) / numbers.length;
  	return avg;
}

reduce() 는 첫번째 인자로 함수, 두번째 인자로 초기값을 받는다.

함수의 매개변수 중 acc 는 accumulator 로, 함수의 알고리즘으로 인해 변하는 값이 할당된다. 위의 예시는 acc 에 numbers 의 각 요소들을 iterate 하면서 현재 요소 이전까지의 합을 저장하고 있다. 두번째 인자의 초기값이 선언됐다면 첫 iteration 때 그 초기값을 acc 에 할당하고, 생략됐다면 배열의 첫번째 요소를 할당한다.

cur 은 currentValue로, 말 그대로 현재 iteration 에서 읽어들인 현재 값이다. 첫번째 iteration 에는 첫번째 요소, 두번째때는 두번째 요소 .. 이런식이다.