YoonJae Kim

Share to Learn, Learn to Share

javascript 의 기본적인 문법을 배워보려 한다. codecademy 의 튜토리얼을 따라해보며 알아두어면 좋을 것들을 간단하게 적어본다.

☝🏻 Variables

js 에서 변수를 선언하는 방법은 총 세가지가 있다.

  • var
  • let
  • const

세 방법의 핵심적인 차이는 undefined 형태로 선언할 수 있는지, 변수 값 재할당이 가능한지 이다.

코드를 보며 살펴보자.

var

var myName = 'Arya';
console.log(myName);
// Output: Arya

let

let meal = 'Enchiladas';
console.log(meal); // Output: Enchiladas
meal = 'Burrito';
console.log(meal); // Output: Burrito

변수를 선언한 이후에 재할당이 가능하다

let price;
console.log(price); // Output: undefined
price = 350;
console.log(price); // Output: 350

변수를 선언할 때 아무런 값을 할당하지 않은 채 undefined 형태로 선언할 수 있다

const

const myName = 'Gilberto';
console.log(myName); // Output: Gilberto

변수를 선언한 이후 재할당이 불가능하다

변수를 선언할 때 아무런 값을 할당하지 않은 채 undefined 형태로 선언하는 것이 불가능하다


☝🏻 Introduction

js 에서 사용하는 여러 잡다한 문법에 대해 살펴보자

Template literal

string 값을 사용할 때 따옴표(‘’) 혹은 백틱(`)을 이용할 수 있다. 이 때 백틱을 이용하면 string 안에 특정 변수 값을 삽입(interpolation) 할 수 있다

const myPet = 'armadillo';
console.log(`I own a pet ${myPet}.`);
// Output: I own a pet armadillo.

typeof operator

typeof operator 를 사용하면 특정 변수의 데이터형을 받아볼 수 있다

const unknown1 = 'foo';
console.log(typeof unknown1); // Output: string
 
const unknown2 = 10;
console.log(typeof unknown2); // Output: number
 
const unknown3 = true; 
console.log(typeof unknown3); // Output: boolean

Comparison Operators

C, Java, Python 등 과는 달리 javascipt 에서 equal 을 체크하는 operator 의 경우 = 기호를 세개 연달아 써야 한다.

  • Is equal to: ===
  • Is not equal to: !==

short-circuit evaluation

변수를 할당할 때 다음과 같은 신기한 문법도 사용한다.

tool 이 참이면 writingUtensil 에 tool 에 저장되어 있는 값을 할당하고, tool 이 거짓이면 'pen' 을 할당하는 표현이다.

이 때, tool 이라는 string 변수의 참/거짓 여부는 값 할당 여부에 따라 나누어진다. 만약 let tool = '' 과 같이 아무런 값도 할당하지 않을 경우, tool 은 false 값을 갖는다고 간주한다.

let tool = ''
let writingUtensil = tool || 'pen'; 
console.log(writingUtensil) // Output: 'pen'

let tool = 'note'
let writingUtensil = tool || 'pen'; 
console.log(writingUtensil) // Output: 'note'

Ternary Operator

if/else 구문으로 표현 가능한 문법들을 Ternary Operator 를 이용해서도 표현할 수 있다. 아래 두 코드는 같은 기능을 수행한다.

let isNightTime = true;
 
if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
}

이를 Ternary Operator 를 이용해서 표현하면 다음과 같다.

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');


☝🏻 Function

variable 과 마찬가지로 function 을 선언하는 방법도 다음과 같이 총 세가지가 있다.

특이하게도 js 에서는 함수를 변수 자체에 할당할 수 있는데, 이에 관하여 2, 3 번 코드를 유의깊게 살펴보자.


✔️ 1번 function keyword 를 사용

function greetWorld() {
  console.log('Hello, World!');
}


✔️ 2번 function keyword 를 사용하여 var 에 할당

const calculateArea = function(width, height) {
  const area = width * height;
  return area;
}


✔️ 3번 const keyword 와 arrow function 을 이용

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};


☝🏻 Array

Array 의 선언 및 기본 사용 방법은 넘어가도록 하자

주목할 내용은 Array 자료형의 다양한 method 이다.

특히 calling Array (method 를 call 하는 array 를 지칭) 를 수정/ 변화시키는 method 들이 있는 한편, calling Array 를 보존한 채 특정 기능을 수행하는 method 들이 있다.

자세한 내용은 다음 링크를 참고하도록 하자.

❗ mutating vs non-mutating ❗


☝🏻 Loops

C, C++, java 와 비슷하게 사용하는 듯 하다

다음 코드는 그 예시이다

for (let counter = 0; counter < 4; counter++) {
  console.log(counter);
}


☝🏻 Iterators

higher-order functions

함수의 argument 로 함수를 전달할 수 있다

다음은 그 예시 코드이다

const timeFuncRuntime = funcParameter => {
   let t1 = Date.now();
   funcParameter();
   let t2 = Date.now();
   return t2 - t1;
}
 
const addOneToOne = () => 1 + 1;
 
timeFuncRuntime(addOneToOne);

이를 이용하여 다음과 같이 특정 함수의 수행 시간을 측정할 수 있다.

const checkThatTwoPlusTwoEqualsFourAMillionTimes = () => {
  for(let i = 1; i <= 1000000; i++) {
    if ( (2 + 2) != 4) {
      console.log('Something has gone very wrong :( ');
    }
  }
};

const timeFuncRuntime = funcParameter => {
  let t1 = Date.now();
  funcParameter();
  let t2 = Date.now();
  return t2 - t1;
};

const time2p2 = timeFuncRuntime(checkThatTwoPlusTwoEqualsFourAMillionTimes);

forEach()

.forEach() 는 Array 의 method 로 사용될 수 있다

Array 의 모든 element 를 순회하며 callback function 을 수행한다.

callback function 이란 함수의 인자로 전달된 함수를 의미한다.

특정 함수가 .forEach() 에 의해 전달되었을 때, Array 의 모든 element 를 순회하며 그 함수를 적용시킨다.

const groceries = ['brown sugar', 'salt', 'cranberries', 'walnuts'];

groceries.forEach(function(groceryItem) {
  console.log(' - ' + groceryItem);
})

이 때, 위 코드를 다음과 같이 arrow function 을 이용하여 표현할 수도 있다.

groceries.forEach(groceryItem => console.log(' - ' + groceryItem));

또한, 미리 선언한 함수를 인자로 전달할 수도 있다.

function printGrocery(element){
  console.log(element);
}
 
groceries.forEach(printGrocery);

이 때 .forEach() 의 return 값은 undefined 이다.

map()

.map() 은 인자로 전달받은 callback function 을 Array 의 element 에 적용함으로써 새로운 Array 를 생성한다

const numbers = [1, 2, 3, 4, 5]; 
 
const bigNumbers = numbers.map(number => {
  return number * 10;
});

filter()

filter() 은 Array 의 element 에 대하여 filtering 을 진행한 후 새로운 Array 를 반환한다. filter() 의 인자로 전달되는 callback function 은 true false 를 return 하는 형태여야 한다.

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
 
const shortWords = words.filter(word => {
  return word.length < 6;
});

findIndex()

findIndex() 는 callback function 이 true 값을 반환할 수 있는 Array 의 element 1개를 반환한다.

const jumbledNums = [123, 25, 78, 5, 9]; 
 
const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});


☝🏻 Objects

Objects 는 {} 로 둘러 쌓여진 형태를 보인다.

let spaceship = {}; // spaceship is an empty object

Access Operator

Object 의 property 에 접근하려 할 때 두가지 방법이 존재한다.

  1. dot access operator

  2. bracket access operator

const 로 선언된 변수에 새로운 Object 를 재할당 하는 것은 불가능하다. 하지만 특정 property 의 값은 재할당 할 수 있다.

const spaceship = {type: 'shuttle'};
spaceship = {type: 'alien'}; // TypeError: Assignment to constant variable.
spaceship.type = 'alien'; // Changes the value of the type property
spaceship.speed = 'Mach 5'; // Creates a new key of 'speed' with a value of 'Mach 5'

const 로 선언된 변수에 특정 property 를 삭제할 수도 있다.

const spaceship = {
  'Fuel Type': 'Turbo Fuel',
  homePlanet: 'Earth',
  mission: 'Explore the universe' 
};
 
delete spaceship.mission;  // Removes the mission property

Method

function 이 Object 의 property 로 있는 경우, 우리는 그 function 을 method 라고 부른다

method 는 다음과 같이 선언할 수 있다.

const alienShip = {
  invade: function () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};

ES6 도입에 따라 우리는 colon 과 function 키워드를 생략할 수 있다.

const alienShip = {
  invade () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};

Looping Through Objects

object 의 property 를 이용하여 for 문을 돌릴 수 있다.

let spaceship = {
  crew: {
    captain: { 
      name: 'Lily', 
      degree: 'Computer Engineering', 
      cheerTeam() { console.log('You got this!') } 
    },
    'chief officer': { 
      name: 'Dan', 
      degree: 'Aerospace Engineering', 
      agree() { console.log('I agree, captain!') } 
    },
    medic: { 
      name: 'Clementine', 
      degree: 'Physics', 
      announce() { console.log(`Jets on!`) } },
    translator: {
      name: 'Shauna', 
      degree: 'Conservation Science', 
      powerFuel() { console.log('The tank is full!') } 
    }
  }
}; 
 
// for...in
for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

Getters

Getters 를 이용하여 특정 property 의 값을 받아오는 method 를 만들 수 있다.

underscore 가 앞에 붙은 property 들은 private 성질이 주어진 것과 같이 사용하는 관습이 있다.

Getter 를 통해 정의한 method 는 괄호 없이 사용이 가능하다.

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  get fullName() {
    if (this._firstName && this._lastName){
      return `${this._firstName} ${this._lastName}`;
    } else {
      return 'Missing a first name or a last name.';
    }
  }
}
 
// To call the getter method: 
person.fullName; // 'John Doe'

// In general, getter methods do not need to be called with a set of parentheses

Setters

Setters 를 이용하여 특정 property 의 값을 수정할 수 있다.

const person = {
  _age: 37,
  set age(newAge){
    if (typeof newAge === 'number'){
      this._age = newAge;
    } else {
      console.log('You must assign a number to age');
    }
  }
};

Factory functions

같은 형태의 Object 를 여러개 만들어야 하는 경우 Factory function 을 정의하여 이용할 수 있다.

const monsterFactory = (name, age, energySource, catchPhrase) => {
  return { 
    name: name,
    age: age, 
    energySource: energySource,
    scare() {
      console.log(catchPhrase);
    } 
  }
};

Destructued Assignment

const vampire = {
  name: 'Dracula',
  residence: 'Transylvania',
  preferences: {
    day: 'stay inside',
    night: 'satisfy appetite'
  }
};

특정 property 의 key - value pair 와 동일하게 변수명 - 값 을 만들기 위해 다음과 같이 사용할 수 있다.

const residence = vampire.residence; 
console.log(residence); // Prints 'Transylvania' 

const { residence } = vampire; 
console.log(residence); // Prints 'Transylvania'

object 안의 object 에도 동일하게 적용시킬 수 있다.

const { day } = vampire.preferences; 
console.log(day); // Prints 'stay inside'

Built-in Object Methods

Object 가 사용할 수 있는 다양한 Built-in Methods 들이 존재한다. 다음은 .keys() , .entries() , .assign() 등을 이용한 코드이다.

const robot = {
	model: 'SAL-1000',
  mobile: true,
  sentient: false,
  armor: 'Steel-plated',
  energyLevel: 75
};

// What is missing in the following method call?
const robotKeys = Object.keys(robot);

console.log(robotKeys);

// Declare robotEntries below this line:
const robotEntries = Object.entries(robot);


console.log(robotEntries);
console.log(typeof robotEntries);

// Declare newRobot below this line:
const source = {
  laserBlaster: true,
  voiceRecognition: true
}
const newRobot = Object.assign({}, robot, source);
console.log(newRobot);
console.log(source);

결과는 다음과 같이 나온다

[ 'model', 'mobile', 'sentient', 'armor', 'energyLevel' ]
[ [ 'model', 'SAL-1000' ],
  [ 'mobile', true ],
  [ 'sentient', false ],
  [ 'armor', 'Steel-plated' ],
  [ 'energyLevel', 75 ] ]
object
{ model: 'SAL-1000',
  mobile: true,
  sentient: false,
  armor: 'Steel-plated',
  energyLevel: 75,
  laserBlaster: true,
  voiceRecognition: true }
{ laserBlaster: true, voiceRecognition: true }

Leave a comment

You may also enjoy