Group Interview) JavaScript

luneah·2021년 11월 18일

JavaScript 기술면접

기술면접

목록 보기

2/3

Q1. JavaScript

JavaScript가 무엇인지 설명해 주세요.

자바스크립트는 ‘웹 페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어로 정적인 HTML과 CSS로 만들어진 웹 페이지를 동적으로 변경해주는 역할을 한다.

이벤트 : 사용자에 의해 발생(클릭, 드래그, 스크롤, 키보드터치...)
함수 : 이벤트가 발생했을 때 일어나는 일에 대해 미리 정의해 둔 코드 모음

Q2. let, var, const

let, var, const를 사용하여 생성된 변수들의 차이점은 무엇인가요?

var : 값의 재선언, 재할당이 모두 가능하다.
- 최신 버전에서 사용하지 않는다. → 컨트롤 하기 어렵고, 직관적이지 않게 작동한다.(직관적이지 못한 이유는 함수 스코프를 가지기 때문!)
let : 값의 재선언은 되지 않으며, 재할당만 가능하다.
const : 값의 재선언과 재할당 모두 불가능하다. 따라서 상수(변하지 않는 값)에 사용한다. 또한 const는 반드시 선언과 동시에 할당이 이루어져야 한다.

var와 let/const의 가장 큰 차이: 스코프(Scope)가 다르다.

var : 함수 스코프
let, const : 블록 스코프

Q3. JavaScript 데이터 타입

JavaScript의 데이터 타입의 종류를 나열해 주세요.

기본형 : number, string, boolean, null, undefined
참조형 : array, object, function

Q4. 함수 정의, 호출

함수의 정의와 호출을 구분해서 설명해 주세요.

정의(=선언) : 개발자가 사용할 코드 블록을 커스텀으로 미리 짜놓는 것

// 함수의 이름부터 함수에 들어갈 매개변수(괄호 속), 함수를 실행했을 때 수행할 구체적인 내용(중괄호 속)까지 정의(Definition)하는 것

function sayHello() {    //함수의 정의 혹은 선언
  console.log("안녕하세요! 만나서 반갑습니다!");
}

호출(=실행) : 미리 짜놓은 코드를 실행하는 것

// 함수가 동작하게 하려고 미리 정의해둔 내용을 함수의 이름으로 호출(Call)하는 것

sayHello();     // 함수의 호출 혹은 실행

Q5. Math methods

Math와 관련된 함수(메소드)를 아는 대로 설명해 주세요.

Math.min() / .max(): 인수로 전달받은 값 중에서 가장 작은/큰 수를 반환한다.
인수가 전달되지 않으면 Infinity / -Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.
Math.random( ) : 0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를 반환한다.
Math.round( ) : 인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결과값을 반환한다.
Math.floor( ) : 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환한다.
Math.ceil() : 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환한다.

Q6. 동등 연산자

== 와 === 의 차이점을 설명해 주세요.

== : 엄격하지 않은 비교로, 데이터 비교 대상을 숫자형으로 바꾼 후 비교 (값만 비교) [동등 연산자]
=== : 데이터 형 변환 없이도 값을 비교 가능 (값과 형까지 비교) [일치 연산자]

Q7. 조건문

조건문이 필요한 이유는 무엇인가요?

다양한 상황에 실행될 내용을 설정하고, 그에 따라 어떠한 작업을 수행하게 해준다.

Q8. 함수의 인자

함수의 인자가 필요한 이유는 무엇인가요?

함수의 이름 뒤에는 input이 들어갈 공간인 ( )이 존재한다. 함수를 선언할 때 이 공간에 넣는 값을 parameter(매개변수)라고 하고, 함수를 호출할 때 넣는 값은 argument(인자)라고 부른다.

function sayGoodbye(name) {          // 여기서 name은 parameter
  return "Goodbye, " + name + "!";
}

sayGoodbye("my friend");     // "Goodbye, my friend!"
sayGoodbye("my teacher");    // "Goodbye, my teacher!"
                             // 여기서 "my friend"와 "my teacher"는 argument

인자가 필요한 이유는 함수에 인자로 서로 다른 데이터를 제공하면 반환되는 결과값도 달라지기 때문이다.

Q9. 배열

배열이 필요한 이유는 무엇인가요?

연관성이 있는 데이터를 한 곳에 저장하여 효율적으로 데이터를 관리하기 위하여 사용한다. 배열을 사용하면 각 데이터 요소마다 0부터 순차적으로 인덱스를 부여하여 손쉽게 필요한 데이터를 찾아서 사용할 수 있다.

Q10. 배열 요소 접근

배열의 요소에 접근하는 방법을 설명해 주세요.

배열에 요소에 접근하기 위해서는 변수명 뒤에 대괄호와 인덱스를 사용함으로써 각 요소에 접근할 수 있다. 이때 주의할 점은 인덱스가 0부터 시작한다는 점이다.

let arr = [12, 25, christmas];

console.log(arr[0])  // 12
console.log(arr[1])  // 25
console.log(arr[2])  // christmas

Q11. 배열 메소드

배열의 메소드를 아는대로 설명해 주세요.

concat : 복수의 배열을 결합할 때 사용
join : 배열의 요소를 합쳐서 string으로 변환할 때 사용
push, pop : 배열의 가장 마지막에 요소를 추가/제거할 때
unshift, shift : 배열의 가장 앞에 새로운 요소를 추가/제거할 때
forEach : 배열의 각 요소에 대하여 콜백함수에 정의한 연산을 진행 할 때
splice : 배열의 요소 중 특정 구간을 추출할 때
slice : 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

Q12. map VS forEach

map 과 forEach의 차이점을 설명해 주세요.

공통점 : 배열의 각 요소에 대하여 순환하여 콜백함수를 호출한다.
차이점
- forEach : 단순 반복만 수행한다.
- map : 변경 후 새로운 배열 리턴 , 배열의 요소를 전체적으로 바꾸고 싶을때 사용합니다.

Q13. 객체

객체가 필요한 이유는 무엇인가요?

배열 내 요소들은 인덱스로만 구분 되어지는 반면, 객체의 프로퍼티는 속성을 나타내는 키와 그에 대한 값으로 구성되기 때문에 데이터를 더욱 직관적으로 저장하고 불러올 수 있다.

Q14. 객체 접근

객체의 값에 접근하는 방법을 설명해 주세요.

dot notation : 객체의 식별자 뒤에 .을 붙히고 키(Key)를 입력한다.
bracket notation : 객체의 식별자 뒤에 [ ]을 붙히고 그 안에 키(Key)를 입력한다.
- 식별자의 이름을 변수에 저장해서 사용할 수 있다.
- 띄어쓰기를 한 식별자를 사용할 수 있다.

Q15. 객체 접근 방법 차이점

객체의 값에 접근하는 방법 두 개의 차이점에 대해 설명해주세요.

Dot Notation : 새로운 변수를 할당하여 접근 불가능, 존재하지 않는 key에 접근시 undefined 반환
Bracket Notation : 새로운 변수로 할당하여 접근 가능
- 스페이스 포함하는 키, 숫자인 키는 반드시 bracket notation 사용해야 오류나지 않음.

Q16. 객체 값 추가, 수정, 삭제

객체의 값을 추가, 수정, 삭제하는 방법을 설명해 주세요.

추가 수정 삭제 모두 객체 값에 접근이 우선이며 접근 후

추가 : 추가할 객체의 값을 새로 선언하여 할당이 가능하다.
수정 : 기존 값을 재할당하여 변경이 가능하다.
삭제 : delete 연산자를 사용한다.

Q17. Scope

Scope에 대해 아는대로 설명해 주세요.

스코프(Scope) : 변수가 존재 할 수 있는 범위

블록 외부에서 선언된 전역(global) 변수와 블록 내부에서 선언된 지역(local) 변수로 나눌 수 있다.
지역 변수에는 함수, 블록 등이 있다.
global 변수를 너무 남발하면 코드에 오류가 생기기 쉽기 때문에 변수들은 local 변수로 최대한 나누는 것이 좋다.

Q18. ES6 템플릿 리터럴

ES6 템플릿 리터럴은 문자열을 생성하는데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있나요?

문자열과 변수를 합칠 경우 +로 더해야 했지만, ${ }을 통해 쉽게 작성 가능
- 개행: \n 같은 이스케이프 문자를 쓰지 않고도 템플릿 리터럴을 통해 표현 가능

var person = { name: 'Tyler', age: 28 };
console.log('Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!');
// 'Hi, my name is Tyler and I am 28 years old!'

const person = { name: 'Tyler', age: 28 };
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
// 'Hi, my name is Tyler and I am 28 years old!'

luneah

하늘이의 개발 일기

이전 포스트

Group Interview) HTML/CSS

다음 포스트