모던 자바스크립트 핵심 가이드 00 기초 정리 2

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습

* 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것

* 문제될 경우 삭제할 것 

 

○ 함수 선언

① 함수 정의

function movie(title) {
  console.log("그것이 알고 싶다 : " + title)
}

movie("지선씨네 마인드") //"그것이 알고 싶다 : 지선씨네 마인드"

title : 매개변수(파라미터 혹은 변수라고 함)

console.log("그것이 알고 싶다 : " + title) : 명령문

- 원시 자료형이 함수에 전달될 때는 참조가 아니라 값의 형태로 전달됨

- 해당 값에 대한 변경 사항이 전역적으로 반영되지 않음

- 단, 객체나 배열을 함수에 전달할 경우 참조로 전달됨

 

 

- 원시 자료형인 경우(값 변하지 않음)

 

let theater = 1;

function increase(x) {
  return x += 1;
}

console.log(theater); //1
console.log(increase(theater)); //2
console.log(theater); //1 (값 변하지 않음)

 

 

- 객체인 경우(값 변함)

 

let theater = {
  name: "롯데시네마",
  location: "서울"
}

console.log(theater); //{location: "서울",  name: "롯데시네마"}

function changeLocation(x) {
  x.location = "인천";
}

changeLocation(theater); 
console.log(theater); //{location: "인천",  name: "롯데시네마"}

 

 

② 함수 표현식

 

const movie = function movie(title) {
  console.log("그것이 알고 싶다 : " + title)
}

movie("지선씨네 마인드") //"그것이 알고 싶다 : 지선씨네 마인드"

 

③ 익명 함수

 

const movie = function(title) {
  console.log("그것이 알고 싶다 : " + title)
}

movie("지선씨네 마인드") //"그것이 알고 싶다 : 지선씨네 마인드"

 

 

④ 화살표 함수

 

const movie =  (title) => {
  console.log("그것이 알고 싶다 : " + title)
}

movie("지선씨네 마인드") //"그것이 알고 싶다 : 지선씨네 마인드"

 

 

○ 스코프

- 변수의 스코프 : 변수에 접근할 수 있는 위치

- 전역 스코프 : 코드 어느 곳에서나 접근 가능, 오류 확률 높아짐

- 블록 스코프 : 변수가 선언된 블록(함수, 괄호, 루프 등) 내부에서만 접근 가능

 

//var의 경우
let theater1 = 1;

if(theater1 === 1) {
  var secondTheater1 = 2; //스코프 갖고 있지 않음(var), 블록 외부에서도 접근 가능
  console.log(secondTheater1); //2
}

console.log(secondTheater1); //2 블록 외부에서도 값 출력 가능


//let의 경우
let theater2 = 1;

if(theater2 === 1) {
  let secondTheater2 = 2; //스코프 갖고 있음(var), 블록 외부에서도 접근 불가
  console.log(secondTheater2); //2
}

console.log(secondTheater2); //오류 발생, ReferenceError: secondTheater2 is not defined

 

 

○ this 키워드

 

//예시1
let theater = {
  name: "롯데시네마",
  detailName: function() {
    console.log(this.name) //this가 참조하는 것 = theater
  }
}

theater.detailName(); //롯데시네마

//예시 2
function movie() {
  console.log(this);
}

movie(); //window 객체 참조 -> strict 모드 사용 시 실수로 window객체 참조 방지

 

○ this값 수동 설정

 

let theater = {
  name: "롯데시네마",
  detailName: function() {
    console.log(this.name) //this가 참조하는 것 = theater
  }
}

const unboundDetailName = theater.detailName;
// console.log(unboundDetailName()); //undefined

const boundDetailName = unboundDetailName.bind(theater);
console.log(boundDetailName()); //롯데시네마

 

 

○ .call() : 인수의 목록을 받음/ .apply() : 하나의 인수 배열을 받음

 

//.call() 예시
function theater(name, loaction) {
  this.theaterName = name;
  this.theaterLocation = location;
}

function myTheater(name, location) {
  theater.call(this, name, location);
  this.seatNum = 10;
}

const myNewTheater = new myTheater('메가박스', '부산');
console.log(myNewTheater.theaterName); //메가박스
console.log(myNewTheater.theaterLocation); //부산

//.apply()
function theater(name, loaction) {
  this.theaterName = name;
  this.theaterLocation = location;
}

function myTheater(name, location) {
  theater.apply(this, [name, location]);
  this.seatNum = 10;
}

const myNewTheater = new myTheater('메가박스', '부산');
console.log(myNewTheater.theaterName); //메가박스
console.log(myNewTheater.theaterLocation); //부산

//.apply() 다른 예시
const koreaMovie = function(name, director, actor) {
  director.apply(actor);
}

koreaMovie(name, director, ['설경구', '김남길']);
koreaMovie(name, director, ['이정재', '황정민', '최민식']);