fuction sayHello(){
console.log("hello");
} // 함수 선언문
위의 코드는 함수 선언문 중에 가장 기본적인 방식입니다.
let sayHello = function(){
console.log("hello");
} // 함수 표현식
위의 코드는 함수 표현식 입니다. 작동 방식은 일반 함수와 같습니다. 차이점은 무엇일까요? 호출할 수 있는 타이밍이 다릅니다.
함수 선언 문은 언제든지 호출이 가능합니다. (인터프리터언어) 자바스크립트에서 가능한 이유는 호이스팅 때문입니다. (호이스팅이란) 자바스크립트에서는 실행하기 전에 모든 함수선언문을 먼저 선언하고 코드가 진행됩니다.
그러가 함수 표현식은 호이스팅의 적용되지 않습니다. 그렇기 때문에 사용하는 코드보다 윗쪽에 해당 함수가 작동되고 있어야 합니다.
let add = function(num1,num2){
retrun num1+num2;
} // 기본 함수
let add = (num1,num2) => {retrun num1+num2;}
// 화살표 함수
화살표 함수는 보다 간결하게 함수를 표한할 수 있습니다.
const superman = {
name : 'clark',
age : 33,
}
객체는 중괄호 {} 로 작성되고 키(name, age)와 값(clark,33)으로 구성되어 있으며 각 키는 쉼표로 구분됩니다.
객체의 접근 : superman.name -> 'clark', superman['age'] // 33
. 또는 [] 두가지 방식으로 접근 가능합니다.
객체의 추가 : superman,gender = 'male'; , superman['hairColor'] = 'black'; 접근과 비슷한 방법으로 객체에 키와 값을 추가할 수 있습니다.
객체의 삭제 : delete superman.hairColor;
delete 문을 사용해서 삭제를 할 수 있습니다.
const name = 'clark';
const age = 33;
const superman = {
name, // name = name
age, // age = age
gender : 'male',
}
superman.birthDay;
// 없는 프로퍼티 => undefined
'birthDay'in superman;
// false
'age' in superman;
// true
.으로 접근할 때에는 해당 프로퍼티가 없을 때 undefined를 반환합니다. 하지만 in 을 사용하면 true or false로 존재여부를 판단해줍니다.
이는 어떤 값이 올지 확실할 수 없을 때 사용합니다. 함수 인자나 api로 받을 때가 주요 예시입니다.
//객체 for ... in 문
const Mike = {
name : 'Mike',
age : 33,
}
for(x in Mike){
console.log(x) // 'name','age' Mike가 갖고 있는 키 값이 나옵니다.
console.log(Mike[x]) // 'Mike', 33 객체가 갖고있는 값들이 나옵니다.
}
const superman = {
name : 'clark',
age : 33,
fly : function(){
console.log("you can fly")
}
}
//단축 키워드로도 메소드를 넣어줄 수 있습니다.
const shortman = {
name : 'clark',
age : 33,
fly{
console.log("you can fly")
}
}
superman.fly(); // you can fly
method(메소드)가 뭘까요? 객체 안에 프로퍼티로 할당 된 함수 입니다.
위의 코드와 같이 객체의 메소드를 호출하면 해당되는 함수가 실행된다고 할 수 있습니다.
const user = {
name : 'Mike',
sayHello(){
console.log('Hello,I'm ${this.name}');
// user.name 으로 하면 오류 발생할 수 있음 => this.name
}
}
this가 지금 현재의 객체를 가르키게 됩니다. 예제로 확인해보겠습니다
let boy = {
name : 'Mike',
sayHello,
}
let girl = {
name : 'Jane',
sayHello,
}
sayHello: function(){
console.log('Hello, i'm ${this.name}')
}
boy.sayHello(); // Hello, i'm Mike
girl.sayHello(); // Hello, i'm Jane
두개의 객체가 있고 각각 sayHello 프로퍼티를 가집니다.
sayHello 함수에는 아직 this가 정해지지 않았습니다.
this는 실행하는 시점(런타임)에 결정됩니다.
그렇기에 실행하면 각자의 name의 값을 읽어와서 동작합니다.
주의해야할 점은 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지고 있지 않습니다. 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옵니다.
let boy = {
name : 'Mike',
sayHello : () =>{
console.log(this); // boy가 아닌 전역객체를 가르킵니다.
}
}
boy.sayHello();
위의 코드가 예시입니다. 화살표 함수 안에서 this를 사용했고 boy보다 외부의 값은 전역객체가 됩니다. 전역객체는 크게 두가지 입니다(js 환경)
자바스크립트에 this는 매우 복잡하기에 추가 공부가 필요합니다.
하지만 객체와 메소드 그리고 그안의 this 정도는 이해해야합니다.
this를 사용해야하는 예시입니다.
let boy = {
name : 'mike',
showName: function(){
console.log(boy.name) // 오류로 인한 수정 : boy.name => this.name 수정
}
}
let man = boy;
boy = null; // boy가 null로 할당 됬기에 boy.name을 사용할 수 없습니다.
man.showName(); // 오류 발생
한 반에 30명이 있을 때 각자를 모두 변수로 지정하는 것은 매우 비효율적인 방법일 것 입니다. 그렇다면 어떻게 해야할까요?
이러한 상황에서 사용되는 것이 배열 (Array) 입니다.
배열이란 간단하게 "순서가 있는 리스트" 입니다.
let class1 = ['철수','영희', ... , '홍수']
// class1이라는 배열에 학생들 이름을 저장합니다.
console.log(class1[0]); // 철수 (배열은 0부터 시작합니다)
console.log(class1[1]); // 영희
console.log(class1[29]); // 홍수 (배열길이가 30개일때 마지막은 29겠죠)
class1[0] = '필수';
console.log(class1[0]); // 필수 (철수였는데 필수로 바뀌었습니다.)
배열의 특징
// 일반 for 문을 활용한 배열 탐색
let class1 = ['철수','영희', ... , '홍수']
for ( let i = 0; i < class1.length ; i++ ) {
console.log(class1[i]);
// class1에 있는 모든 요소를 순서대로 0 ~ 마지막 까지 출력합니다.
}
// for...of 를 사용한 배열 탐색
let class1 = ['철수','영희', ... , '홍수']
for(let i of class1){
console.log(i);
// 배열 class1을 돌면서 i라는 이름으로 접근할 수 있습니다.
}
//for문보다 간단하지만 index(요소)를 못 얻는 다는 단점이 있습니다.
이를 마지막으로 자바스크립트의 기초를 끝내도록 하겠습니다.