#자바스크립트 스터디 1 - 변수 & 함수 & 객체 & 배열

여러 개발자가 만드는 큰 프로젝트라면, 변수가 중복 선언되지 않도록 해야함!

이 때 두가지 변수를 사용하는데 let or const

 

변수

1.let

let name = "채채루";
let name = "채채롱";

 

let을 사용하면 중복 변수 선언 시 error 발생함

 

2. const

※절대로 바뀌지 않는 상수를 입력할 때 사용

변하지 않는 값을 사용할 때 사용한다. 

const PI = 3.14

 

 

매개변수가 있는 문자열 사용 시 따옴표 주의 ``

function sayHello(name){
  const msg = `Hello ${name} world I am chaechaeroo`;
  if(name){
    msg =  `Hello, ${name}`
  }
  console.log(msg);
}

sayHello();

 

함수 사용 시 전역변수, 지역변수

//전역 변수와 지역 변수

let msg = "welcome"; //전역변수임

function sayHello(name){
  let msg = "Hello"; //지역변수임
  console.log(msg + ' ' + name); // 이 창에서 출력 시 지역변수로 출력
}

sayHello('Mike'); 
console.log(msg); //전역변수로 출력

 

★함수는 하나에 한 작업에 집중하는 것이 좋다.

★익기 쉽고 어떤 동작인지 네이밍 한다. 

 

화살표 함수

//함수 선언문 vs 함수 표현식
//함수 선언문 : 어디서든 호출 가능! (함수 선언 위치 상관 없음, 자바스크립트는 인터프리터 언어!)
//함수 표현식 : 해당 코드에 도달하면서 생성한다. 


//화살표 함수 ... function 제외하고 화살표 첨가
/*
let add = (num1, num2) => {
  num1 + num2;
}

let add = (num1, num2) => (num1 + num2); // 리턴문이 한줄이면 괄호도 생략 가능

let sayHello = name => `Hello, ${name}` //인수가 하나라면 괄호도 생략 가능*/

/*
shoeError();

function showError(){
  console.log('error');
}
//위의 함수를 화살표 함수로 바꾸면

let showError = () => {
  console.log("error");
}

const sayHello = function(name){
  const msg = `hello ${name}`;
  console.log(msg);
}

sayHello('Mike');
//위의 함수를 화살표 함수로 바꾸면?

const sayHello = (name) => {
  const msg = `hello ${name}`;
  console.log(msg);
}

sayHello('Mike');*/

화살표함수 ...내 딴엔 진짜 충격이었음

function을 지우고 선언한 변수 이름 뒤에 바로 (매게변수) => { } 기억할 것

 

화살표 함수가 굉장히 활발히 사용되고 있어서 잘 알아야한다고! ㅠㅠ

 

 

객체

//객체
/*
const superman = {
  name : 'clark',
  age : 33,
}

console.log(superman.name); //콘솔로 각 프로퍼티 확인
console.log(superman.age);

superman.hairColor = 'Black'; //추가
superman['hobby'] = 'football';

delete superman.age; //삭제
console.log(superman);


function makeObject(name, age){
  return{
    name : name,
    age : age,
    hobby : 'football'
  }
}

const Mike = makeObject('Mike', 30); 
console.log(Mike);



//축약형 연습
let makeObject = (name, age) => {
  return{
    name,
    age,
    hobby : 'football'
  }
}

const Mike = makeObject('Mike', 30); 
console.log(Mike);

//프로퍼티 존재 확인
console.log("age" in Mike); //진실
console.log("birthday" in Mike); //거짓


*/

function isAdult(user){
  if(!('age' in user) || user.age < 20){
    return false;
  } 
  return true;
};

const Mike = {
  name : "Mike",
  age : 30
};

const Jane = {
  name : "Jane"
};

console.log(isAdult(Mike));
console.log(isAdult(Jane));

 

 

for...in 함수

//객체 for...in 반복문

const Mike = {
  name : "Mike",
  age : 30
};

//key는 Mike 가 가지고 있는 프로퍼티를 얘기하며, 다른 값이 와도 상관없음
for(key in Mike){
  console.log(Mike[key]);  
}

 

객체와 메소드

//객체에 함수 추가도 가능함!
/*
const superman = {
  name : 'clark',
  age : 30,
  fly(){
    console.log('나는 날아갑니다.'); // 메서드
  }
}

superman.fly();


//메소드 : 객체 프로퍼티로 할당 된 !!함수!!
const user = {
  name : 'Mike',
  sayHelllo : function(){
    console.log(`Hello, i am ${this.name}`) // 여기서 this는 실행하는 시점의 객체를 뜻한다!
  }
}

let boy = {
  name : 'Mike',
  sayHello(){
     console.log(`Hello, I am ${this.name}`);
  }
}

let girl = {
  name : 'Jane',
  sayHello(){
     console.log(`Hello, I am ${this.name}`);
  }
}

boy.sayHello();
girl.sayHello();

*/

//!! 화살표 함수는 일반 함수와 달리 자신의 this 가지지 않음, 화살표 함수 내부에서 this 사용 시 함수 외부에서 값을 가져옴
let boy = {
  name : 'Mike',
  sayHello : () => {
     console.log(`Hello, I am ${this.name}`); //화살표함수에서 this는 전역객체를 불러온다.
  }
}

boy.sayHello();

객체의 메소드를 작성할때는 화살표 함수로 작성하지 않기

 

 

배열

//배열
//length 길이를 알아내는 메소드
//push 배열에 값을 추가
//pop 배열에서 가장 마지막 값을 제거
//unshift shift 배열의 가장 앞의 값을 제거or 추가


let days = ['mon', 'tue', 'wed'];

console.log(days[0]);

console.log(days.length);

days.push('thu');
//console.log(days);

/*
for(let index = 0; index < days.length; index++){
  console.log(days[index]);
} //for 문을 통해 모든 값을 출력
*/

for(let day of days){
  console.log(day);
}

마지막 배열로 for문 돌리는 것 잘 알아두기