Q&A | 2. JavaScript (그룹 면접 예상 질문)

Wook·2021년 11월 19일

Q&A (HTML, CSS, JavaScript, React)

목록 보기

2/4

1) JavaScript

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

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.

자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부르며, 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행되며, 정적인 HTML과 CSS로 만들어진 웹 페이지를 동적으로 변경해주는 역할을 해줍니다. 이벤트와 함수는 모두 JavaScript로 작성 가능하다.

이벤트 (Event) : 사용자에 의해 발생하는 모션(클릭, 마우스를 가져다 댐, 스크롤, 키보드를 누름 등의 행위)
함수 (Function) : 이벤트가 발생했을 때 일어나는 일에 대해 미리 정의해 둔 코드 모음

2) let, var, const

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

var : 자바스크립트 ES5 버전까지의 변수 선언 방식이었으며, 값의 재선언, 재할당이 모두 가능하지만
ES6 이후의 최신 버전에서 사용하지 않는다. (let, const와 달리 함수 레벨 스코프를 가지기 때문에 직관적이지 못하고, 컨트롤하기 어렵기 때문)
let : 값의 재선언은 되지 않으며, 재할당만 가능하다. (값의 수정이 가능하다.)
const : 값의 재선언과 재할당 모두 불가능하다. 따라서 상수(변하지 않는 값)에 사용하며, 선언과 동시에 할당이 이루어져야 한다. (값 수정이 불가능하다.

let, var, const를 사용하여 생성된 변수들의 차이점 :

Scope(범위)가 다르다.

var: 함수 레벨 스코프(function level scope)를 가진다.

let, const : 블록 레벨 스코프(block level scope)를 가진다.
( function level scope : 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근이 가능하고 함수 외부에서 선언된 모든 변수는 전역 변수로 취급된다.
block level scope : 모든 코드 블록(함수, if문, for문, while문, try/catch문 등..)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.)

3) JavaScript 데이터 타입

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

기본 타입 : Number, string, Boolean, undefined, Null
참조 타입 : Object, Array, Function

4) 함수 정의, 호출

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

함수 정의 : 함수는 일련의 과정을 문(statements)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 (이 때 사용하는 매개변수를 parameter라고 칭함)
함수 호출 : 미리 정의된 일련의 과정(함수의 정의), 정의된 함수를 실행하기 위해 필요한 입력인 인수(argument)를 매개변수를 통해 함수에 전달하여 함수 실행 시키는 명령어이다.

5) Math methods

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

Math.random() : 0보다 크고 1보다 무작위의 실수를 반환해준다.
Math.floor() : Math 객체의 내림 Method로 해당 인자의 내림 정수값을 반환해준다.
Math.round() : Math 객체의 반올림 Method로 해당 인자의 반올림 정수값을 반환해준다.
Math.ceil() : Math 객체의 올림 메소드로 해당 인자의 내림 정수값을 반환해준다.
Math.pow(x,y) : x의 y제곱을 반환해준다.

6) 동등 연산자

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

== : 연산자를 이용하여 서로 다른 유형의 두 변수의 [값] 비교 (자료형이 다르더라도 숫자로 변환후 값만 일치하면 True 반환) [동등 연산자]
=== : ==보다 엄격한 비교로써, 값과 데이터 타입 모두가 일치해야만 True 반환 (하나라도 다를 경우 False 반환) [일치 연산자]

7) 조건문

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

-> 상황에 따라 다르게 실행될 내용을 설정할 수 있고, 경우에 따라 다른 함수와 작업을 실행시켜 줄수 있기 때문이다.

8) 함수의 인자

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

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

function sum(numOne,numTwo) {  // 여기서 numOne과 numTwo는 parameter
  return numOne+numTwo;
}

sum(1,2); // 1+2 값인 3 반환  // 1,2는 argument
sum(3,4); // 3+4 값인 7 반환  // 3,4는 argument

위와 같이 인자에 따라 함수의 반환값이 달라진다. 인자가 필요하지 않은 함수는 상관 없겠지만, 다음과 같이 인자를 통해 요청한 반환값을 추출하는 함수들에는 인자가 꼭 필요함을 알 수 있다. (인자값에 따라 결과값도 달라짐)

9) 배열

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

- 배열이란 ?

-> "동일한 타입의 데이터"가 여러 개 저장되어 있는 데이터 저장 장소

배열 안에 들어있는 각각의 데이터들은 정수로 되어 있는 번호(인덱스)에 의하여 접근
배열을 이용하면 여러 개의 값을 하나의 이름으로 처리 가능

- 배열의 필요성

배열을 사용하면 한 번에 여러 개의 값을 저장할 수 있는 공간을 할당받을 수 있음
배열은 하나의 이름을 공유해서 자료의 조작이 편리함
배열은 순서가 있는 객체로써, 순차적으로 자료의 저장이 가능한 장점이 있음

10) 배열 요소 접근

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

-> 배열에 요소에 접근하기 위해서는 변수명 뒤에 대괄호와 index를 사용함으로써 각각의 element에 접근할 수 있다.

let arr = [0,1,2,3,4];

console.log(arr[0])  // 0
console.log(arr[1])  // 1
console.log(arr[4]) // 4

위와 같이, 각각의 index에 접근해 원하는 배열의 원소(element) 값을 추출할 수 있다. (인덱스는 0부터 시작)

11) 배열의 메소드

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

concat : 두 개 이상의 배열을 결합할 때 사용 ex) arr.concat(arr2)

push, pop : 배열의 가장 마지막에 요소를 추가/제거해줌 ex) arr.push("이걸 추가해줘")
unshift, shift : 배열의 가장 앞에 새로운 요소를 추가/제거할 때 ex) arr.shift()
for in : 배열의 첫번째 index부터 끝 index 까지를 반복문을 활용할 수 있게 해줌
splice : 배열의 요소 중 특정 구간을 추출해주고, 그 구간에 새로운 원소를 추가해줄 수 있음.
slice : 두 개의 인자(begin,end)를 받아 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환해줌.

12) Map & forEach

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

공통점 : 배열의 각 요소에 대하여 순환하여 콜백함수를 호출해줌.

차이점 :
- forEach : 단순 반복만 수행해주며, 배열의 값을 새로 반환해주지 않음.
- map : 배열의 요소를 순환하며 새로운 배열 리턴해주며, 배열의 요소를 전체적으로 변경시에 사용.

13) 객체의 필요성

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

-> 자바스크립트의 여러 자료형 중 여러 개의 데이터값을 하나로 선언할 수 있는 자료형으로 '배열'과 '객체'가 있습니다.

let legend1 = ['Michael Jordan', 23, 'Chicago Bulls', 'SG', true]; 
// 배열

let legend2 = {
  'name' : 'Michael Jordan',
  'back number' : 23,
  'team' : 'Chicago Bulls',
  'position': 'SG',
  'Hall of Fame' : true
}
// 객체 -> 각각의 밸류가 의미하는 바를 파악하기가 용이함

-> 객체가 필요한 이유 :

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

14) 객체의 값 접근

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

-> 객체의 값(Value)에 접근하는 방법에는 두 가지 방법이 있다.

dot notation : 객체의 식별자 뒤에 .을 붙히고 키 값(Key)을 입력해준다.
bracket notation : 객체의 식별자 뒤에 대괄호[ ]를 붙히고 그 안에 키 값(Key," "안에 작성해야 함)을 입력한다.
(키 값(Key)을 변수에 저장해서 사용할 수 있으며
띄어쓰기를 한 식별자를 쓸 때 필수적으로 사용한다. (" "안에 key 값을 작성))

15) 객체 접근 방법 차이점

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

-> 객체의 값(Value)에 접근하는 방법에는 두 가지 방법이 있다.

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

const obj = {
  a: 111,
  b: 222,
};

console.log(obj[c]); // ReferenceError: c is not defined
console.log(obj.c); // undefined

우선 두 방식의 가장 큰 차이점은
객체의 키가 없다면 [] notation에서는 에러를 반환하며,
. notation에서는 undefiend를 반환한다.

또한 만약 키가 숫자로 시작할때와 연산기호가 들어가는 키, 띄어쓰기가 포함된 경우에는 dot notation을 사용할 수 없다.

16) 객체 접근 방법 차이점

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

-> 객체의 값(Value)에 접근하는 방법에는 두 가지 방법이 있다.

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

const obj = {
  a: 111,
  b: 222,
};

console.log(obj[c]); // ReferenceError: c is not defined
console.log(obj.c); // undefined

우선 두 방식의 가장 큰 차이점은
객체의 키가 없다면 [] notation에서는 에러를 반환하며,
. notation에서는 undefiend를 반환한다.

또한 만약 키가 숫자로 시작할때와 연산기호가 들어가는 키, 띄어쓰기가 포함된 경우에는 dot notation을 사용할 수 없다.

17) Scope (범위)

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

-> Scope : 범위를 의미하며, JavaScript에서는 변수가 존재할 수 있는 범위를 의미한다.

블록{}을 기준으로 블록 외부에서 선언된 전역(global) 변수, 블록 내부에서 선언된 지역(local) 변수로 나눌 수 있다.
블록{} 내에서 변수가 선언된 경우 지역(local) 변수이며, 함수 내에서만 변수가 사용될 수 있다.
블록{} 외부에서, 즉 코드 전체에서 사용된 경우 전역(global) 변수이며, 전역(global) 변수를 너무 남발하면 코드에 오류가 생기기 쉽기 때문에 변수들은 되도록 지역(local) 변수로 나누어주는 것이 좋다.

18) ES6 템플릿 리터럴

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

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

var myProfile = { name : '김영욱', age : 26, hobby : '코딩'};
console.log('안녕하세요, 제 이름은 ' + myProfile.name + '입니다. 제 나이는 ' + myProfile.age + ' 살이고 취미는 '+myProfile.hobby+'입니다.');
// '안녕하세요, 제 이름은 영욱입니다. 제 나이는 26살이고 취미는 코딩입니다.' 

const myProfile = { name : '김영욱', age : 26, hobby : '코딩'};
console.log(`안녕하세요, 제 이름은 ${myProfile.name}입니다. 제 나이는 ${myProfile.age}살이고 취미는 ${myProfile.hobby}입니다.`);
// '안녕하세요, 제 이름은 영욱입니다. 제 나이는 26살이고 취미는 코딩입니다. (ES6 템플릿 리터럴의 활용)

Wook

지속적으로 성장하고 발전하는 진취적인 태도를 가진 개발자의 삶을 추구합니다.

Q&A | 2. JavaScript (그룹 면접 예상 질문)

Q&A (HTML, CSS, JavaScript, React)

1) JavaScript

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

2) let, var, const

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

let, var, const를 사용하여 생성된 변수들의 차이점 :

3) JavaScript 데이터 타입

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

4) 함수 정의, 호출

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

5) Math methods

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

6) 동등 연산자

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

7) 조건문

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

8) 함수의 인자

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

9) 배열

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

- 배열이란 ?

- 배열의 필요성

10) 배열 요소 접근

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

11) 배열의 메소드

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

12) Map & forEach

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

13) 객체의 필요성

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

-> 객체가 필요한 이유 :

14) 객체의 값 접근

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

15) 객체 접근 방법 차이점

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

-> 객체의 값(Value)에 접근하는 방법에는 두 가지 방법이 있다.

16) 객체 접근 방법 차이점

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

-> 객체의 값(Value)에 접근하는 방법에는 두 가지 방법이 있다.

17) Scope (범위)

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

-> Scope : 범위를 의미하며, JavaScript에서는 변수가 존재할 수 있는 범위를 의미한다.

18) ES6 템플릿 리터럴

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

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

Q&A | 1. HTML & CSS (그룹 면접 예상 질문)

Q&A | React (면접 예상 질문)

0개의 댓글

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

`let`, `var`, `const`를 사용하여 생성된 변수들의 차이점 :

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