[TIL] 2023.03.28 기술면접 스터디, Programmers 문제 풀기

Today I Learned

Programmers 문제 풀기
기술면접 스터디

Programmers 문제 풀기

배열 회전시키기

나의 풀이

function solution(numbers, direction) {
    if ( direction === "right" ) {
        let right = numbers[numbers.length - 1]
        numbers.splice(numbers.length - 1, 1);
        numbers.unshift(right)
    } else {
        let left = numbers[0]
        numbers.splice(0, 1);
        numbers.push(left)
    }
    return numbers;
}

왼쪽, 오른쪽 경우를 나눠서 splice 메서드로 배열을 자른 후에 오른쪽인 경우는 unshift 메서드로 배열의 앞에 요소를 추가하고, 왼쪽인 경우에는 push를 이용해서 배열의 뒤에 요소를 추가했다.

다른 사람의 풀이 01

function solution(numbers, direction) {
    if ("right" == direction) {
        numbers.unshift(numbers.pop());
    } else {
        numbers.push(numbers.shift());
    }

    return numbers;
}

배열 관련해서 아직 모르는 메서드가 많은 거 같다. 나는 이 메서드들을 몰랐기 때문에 splice로 배열을 자른 후에 각각 다른 메서드를 사용했던 건데 이번 기회에 pop가 shift를 새로 알게되었다!

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// Expected output: "tomato"

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환한다.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// Expected output: Array [2, 3]

console.log(firstElement);
// Expected output: 1

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환한다.

다른 사람의 풀이 02

function solution(numbers, direction) {
  return direction === "right"
    ? [numbers[numbers.length - 1], ...numbers.slice(0, numbers.length - 1)]
    : [...numbers.slice(1), numbers[0]];
}

slice 메서드와 spread operator를 사용해서 문제를 풀 수도 있다.

기술면접 스터디 CS 지식

Hoisting 이란?

코드가 실행되기 전 변수 선언/함수 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상
코드 실행 전에 선언된 변수나 함수를 사용할 수 있게 해주는 기능
var, let, const 세 가지 모두 최상위로 호이스팅된다.
하지만 var 변수만 선언과 동시에 undefined(정의되지 않음)로 초기화되고 let과 const 변수는 선언단계까지만 진행되고 초기화되지는 않는다.
함수 선언문은 그 자체로 호이스팅 대상이 되지만, 함수 표현식은 변수명 부분만 호이스팅 된다.

함수 선언문 / 함수 표현식 예시 코드

// 함수 선언문 - 함수 전체가 호이스팅된다
function sum (a, b) { 
	return a + b;
}

// 함수 표현식 - 변수명 부분만 호이스팅된다 (var multifly)
var multiply = function (a, b) { 
	return a + b;
}

var는 선언하기 전에 사용할 수 있다.

// 선언은 호이스팅되지만 할당은 호이스팅되지 않음
console.log(name); //undefined
name = 'Mike';

let은 선언 전에 사용하면 에러 발생

console.log(name) //ReferenceError
let name = 'Mike';

변수의 생성과정
1. 선언 단계
2. 초기화 단계: undefined를 할당해주는 단계
3. 할당 단계
var는 선언과초기화가 동시에 이루어짐
- 할당 전에 호출하면 에러를 내지않고 undefined를 출력함
let은 선언과 초기화 단계가 분리되어 이루어짐
const는 선언+초기화+할당 단계가 동시에 이루어짐

영상 참고 https://www.youtube.com/watch?v=ocGc-AmWSnQ

TDZ란?

TDZ ( Temporal Dead Zone )는 직역하면 "일시적 사각지대"
스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간
let 과 const 으로 선언한 변수도 var 처럼 호이스팅이 일어난다.
var 의 경우에는 변수 선언 전에도 참조할 수 있지만 할당을 하지 않았기에 undefined 이다.
let 과 const 의 경우 식별자가 호이스팅 후 실제 코드에서 선언되기 전까지 TDZ에 있기 때문에 let , const 선언 코드가 있는 곳 이전에는 해당 변수에 참조할 수 없게 된다.

typeof notDefined; // 'undefined'

typeof variable; // ReferenceError : Cannot access 'a' before initialization
let variable;

아예 선언이 되지 않은 변수는 'undefined' type이지만, TDZ에 있는 식별자에는 접근하는 것은 그 자체로 에러를 발생시키고 있다.

const a = 3; // 전역 변수
{
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  const a = 5;
}

중괄호 스코프 내에서 호이스팅이 일어났고, a 가 스코프 내에서 할당이 일어나기 전에 console.log 에서 참조를 하려 했고, 아직 TDZ에 있는 변수 a 를 참조할 수 없기에 ReferenceError 가 발생하는 것이다.

변수 선언 단계 (참고자료)

선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계.
초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계. 이 단계에서 할당된 메모리에는 undefined로 초기화된다.
할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계.

출처

https://noogoonaa.tistory.com/78

https://velog.io/@open_h/Hoisting-and-TDZ#temporal-dead-zonetdz

parameter와 argument의 차이

parameter(매개변수)

함수 정의에서 선언되는 변수
함수 바디 내에서 사용

// a와 b는 parameter
function add(a, b) {
  return a + b;
}

argument(인자)

함수를 호출할 때 전달하는 값
전달된 값은 함수 내에서 parameter에 할당됨

// add 함수 호출 시 2와 3은 argument
// 2와 3은 add 함수에서 a와 b parameter에 각각 할당됨
var sum = add(2, 3);

저작자표시