Javascript Basic Concepts

배열 - map 함수

map()는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 method이다.

const myArray = [1, 2, 3];
 
// using the third argument to map
myArray.map((value, index, array) => {
  return array[index] + 1;
});
 
// using the variable that holds the original array
myArray.map((value, index) => {
  return myArray[index] + 1;
});
 
// just using map without accessing the array manually
myArray.map((value) => {
  return value + 1;
});

//기본 구문

매개변수

callback = 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가진다.
currentValue = 처리할 현재 요소
index(optional) = 처리할 현재 요소의 인덱스
array(optional) = map()을 호출한 배열

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

설명

callback 함수는호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받는다.
callback 함수는 배열 값이 들어있는 인덱스에 대해서만 호출되므로, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는 특성이 있다.(다시 말해 새로운 배열의 length와 원래 배열의 length가 동일하다.)
또한 map이 시작한 이후 배열에 추가되는 요소들은 callback을 호출하지 않고, 배열에 존재하는 요소들의 값이 바뀐 경우 map이 방문하는 시점의 값이 callback에 전달된다.

forEach 와의 차이점

map과 forEach 둘 다 "배열 전체를 반복하고 각 요소 하나하나마다 callback 함수를 실행시킨다"는 공통점이 있지만, 가장 큰 차이점은 forEach는 아무 것도 return하지 않는다는 것이다.
map의 경우에는 callback 함수의 return 값이 새로운 배열로 변화되어 나타나는 반면, forEach는 callback 함수의 return 값이 있어도 그 값으로 어떠한 것도 하지 않는다.

객체 - 객체 프로퍼티 접근

객체는 프로퍼티의 모음이며, 프로퍼티는 객체 내에서 key와 value로 구성된다.
프로퍼티의 값으로 함수가 될 수도 있는데, 이런 프로퍼티는 메소드라고 부른다.

방법 1.도트(점) 표기법을 사용한 접근

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

방법 2.대괄호 표기법을 사용한 접근

myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

방법 3. 변수에 저장된 문자열을 통한 접근

var propertyName = "make";
myCar[propertyName] = "Ford";

propertyName = "model";
myCar[propertyName] = "Mustang";

"this"는 무엇인가?

var person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

var person2 = {
  name: 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다.
이 예제에서 메소드의 실제 코드는 완전히 동일하지만 person1.greeting() 은 "Hi! I'm Chris." 를 출력하는 반면, person2.greeting() 은 "Hi! I'm Brian."을 출력한다.
이와 같이 객체 멤버의 컨텍스트가 바뀌는 경우에도 언제나 정확한 값을 사용하게 해주는 키워드가 this이다.

함수 - 호출, 정의

function add() {
  let sum = 3+3;
  return sum;
}

위는 add라는 함수를 "정의"한 것이다.
위처럼 함수를 정의만 한 것으로는 함수 내부가 실행되지 않는다.

add();

위와 같이 add 함수 이름을 부르기 전까지는 sum 변수가 생성되지도 않고, 3+3도 계산되지 않는다.
내부가 실행되려면 위와 같이 함수를 호출해야하며, 그제서야 3+3가 되고 sum 변수에 저장되게 된다.

클래스의 기본 개념

Class는 사실 함수이다.
함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이, class 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다.

class 선언

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

• Hoisting
  함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 것이다. 클래스를 사용하기 위해서는 클래스를 먼저 선언해야 하며, 그렇지 않으면 다음 아래의 코드는 에러를 던진다.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

class 표현식

class 표현식은 class를 정의하는 다른 방법이다.
class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다.

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output : "Rectangle"


// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
//output: "Rectangle2"

Constructor (생성자)

constructor 메소드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드이다.
"constructor"라는 이름을 가진 특수한 메소드는 클래스 안에 한 개만 존재할 수 있으며, 여러 개가 존재한다면 SyntaxError가 발생한다.

Instance (인스턴스)

instance는 class를 통해 생성된 객체이다.
인스턴스마다 class의 프로퍼티 이름과 메소드를 갖는 객체이며, 각기 다른 프로퍼티 값을 가지고 있다.

const morning = new Car('Morning', 20000000);

인스턴스는 class 이름에 new를 붙여 생성한다.
() 내부에는 constructor에서 필요한 정보를 인자로 넘겨준다.